Kendo DateTimePicker 从 json 结果中设置值

Posted 2023-05-07

【中文标题】Kendo DateTimePicker 从 json 结果中设置值

【英文标题】：Kendo DateTimePicker set value from json result

【发布时间】：2014-09-21 17:13:16

【问题描述】：

我在从 json 结果粘贴到 Kendo Grid 内的 Kendo DateTimePicker 中时遇到了很大的麻烦。所以我在页面上有两个表格。首先我正在加载文件：

@using (html.BeginForm("GetImportSalesModelFromFile", "ExportImport", FormMethod.Post, new  id = "GetImportSaleModelFromFileForm", enctype = "multipart/form-data" ))

     <input id="importFileInput" type="file" accept="text/csv" name="file" class="user-success" required>
     <input style="width: 100px;" type="submit" value="Add">

表单提交调用函数

$('#GetImportSaleModelFromFileForm').submit(function(e) 
    e.preventDefault();
    var url = $(this).attr('action');
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    fd.append("file", document.getElementById('importFileInput').files[0]);
    xhr.open("POST", url, true);
    xhr.send(fd);
    xhr.addEventListener("load", function(event) 
        AppendImportModel(JSON.parse(event.target.response));
    , false);
);

在控制器中我需要导入模型

    public ActionResult GetImportSalesModelFromFile(HttpPostedFileBase file)
    
        var importModel = _importService.ConstructSaleImportModel(file.InputStream, file.ContentType);
        return Json(importModel, JsonRequestBehavior.AllowGet);
    

在函数 AppendImportModel 中，我解析结果并以第二种形式将其粘贴到剑道网格中

@(Html.Kendo().Grid<ImportSaleItemModel>().Name("ImportSalesGrid")
                            .DataSource(dataSource => dataSource.Ajax())
                            .Events(x => x.DataBound("initMenus"))
                            .Columns(columns =>
                            
                                columns.Bound(x => x.Goods.PictureId)
                                    .ClientTemplate("<img style='height: 50px;' src='" + Url.Action("Contents", "FileStorage", new  id = "#= Goods.PictureId #" ) + "'/>")
                                    .Title("")
                                    .Sortable(false)
                                    .HtmlAttributes(new Dictionary<string, object>   "style", "padding: 3px !important; height: 52px !important; width:52px !important;"  );
                                columns.Bound(x => x.Goods.Title)
                                    .ClientTemplate("<a onclick='ShowInfoGoodWindow(#= Goods.Id #)'>#= Goods.Title #</a><br>" +
                                                    "<span><b>#= Goods.Article #</b> <descr>#= Goods.Description #</descr></span><br><input type='hidden' name='ImportedGoodList[#= index(data)#].Id' value='#= Goods.Id #' />")
                                    .Title("Description");
                                columns.Bound(x => x.Price)
                                    .ClientTemplate("<input class='priceEditor' maxlength='10' style='width:50px; text-align: center;' type='text' name='ImportedGoodList[#= index(data)#].Price' onkeypress='return isPriceKey(event)' oninput='$(this).get(0).setCustomValidity(clearValidation);' value='#=Price.ParsedValue #'>")
                                    .HtmlAttributes(new Dictionary<string, object>   "style", "text-align: center;"  )
                                    .Title("Price");
                                columns.Bound(x => x.Discount)
                                    .ClientTemplate("<input class='discountEditor' maxlength='10' style='width:50px; text-align: center;' type='text' name='ImportedGoodList[#= index(data)#].Discount' onkeypress='return isPriceKey(event)' oninput='$(this).get(0).setCustomValidity(clearValidation);' value='#=Discount.ParsedValue #'>")
                                    .HtmlAttributes(new Dictionary<string, object>   "style", "text-align: center;"  )
                                    .Title("Discount");
                                columns.Bound(x => x.DepartmentId)
                                    .HtmlAttributes(new  @class = "templateCell" )
                                    .ClientTemplate(Html.Kendo().DropDownList().Name("Department#=LineId#").BindTo(Model.Departments).Value("#= DepartmentId #").ToClientTemplate().ToHtmlString())
                                    .Title("Department");
                                columns.Bound(x => x.SaleDateTime)
                                    .HtmlAttributes(new  @class = "templateCell" )
                                    .ClientTemplate(Html.Kendo().DateTimePicker().Name("SaleDateTime#=LineId#").Value("#= ConvertedSaleDateTime #").ToClientTemplate().ToHtmlString())
                                    .Title("Sale Date");
                                columns.Bound(x => x.SellerId)
                                    .HtmlAttributes(new  @class = "templateCell" )
                                    .ClientTemplate(Html.Kendo().DropDownList().Name("Seller#=LineId#").BindTo(Model.Sellers).Value("#= SellerId #").ToClientTemplate().ToHtmlString())
                                    .Title("Seller");
                                columns.Bound(x => x.IsCashPayment)
                                    .ClientTemplate("<input type='checkbox' id='IsCashPayment#=LineId#' checked='#= IsCashPayment.ParsedValue #' class='regular-checkbox'/><label for='IsCashPayment#=LineId#'></label> Yes")
                                    .Title("Is Cash Payment");
                            )
                            )

在所有使用“#= value #”的列中都可以正常工作，但在这一行中不行

.ClientTemplate(Html.Kendo().DateTimePicker().Name("SaleDateTime#=LineId#").Value("#= ConvertedSaleDateTime #").ToClientTemplate().ToHtmlString())

"#= ConvertedSaleDateTime #" 没有改变实际价值，但如果我写了

.ClientTemplate("#= ConvertedSaleDateTime #")

我会得到正确的值“10/07/2013 13:15”。如果我写

.ClientTemplate(Html.Kendo().DateTimePicker().Name("SaleDateTime#=LineId#").Value("10/07/2013 13:15").ToClientTemplate().ToHtmlString())

我将在网格内获得 Kendo DateTimePicker，值为“10/07/2013 13:15” 如何从 ConvertedSaleDateTime 设置此 DateTimePicker 的值？ 请帮我。提前致谢。

【参考方案1】：

我通过 jQuery 解决了我的问题。也许有人需要这个解决方案或者知道更漂亮的东西。 在 SaleDateTime 专栏的客户模板中，我写道：

columns.Bound(x => x.SaleDateTime).ClientTemplate("<input class='saleDateTimeEditor' id='SaleDateTime#=index(data)#' name='ImportedSalesList[#=index(data)#].SaleDateTime' value='#= ConvertedSaleDateTime #'>")

在我的剑道网格的 DataBound 事件中，我初始化了所有剑道 DateTimePickers：

    $('.saleDateTimeEditor').each(function () 
        var id = $(this).attr('id');
        var value = new Date(Date.parse($(this).val()));
        $("#" + id).kendoDateTimePicker(
            value: value,
            max: new Date(Date.now())
        );
        $('#'+id).attr('readonly', 'readonly');
    );

ConvertedSaleDateTime 的格式为“yyyy/MM/dd hh:mm:ss”