根据编辑的单元格值kendo网格更新其他单元格

时间:2015-10-20 14:59:06

标签: kendo-grid kendo-asp.net-mvc

我对kendo网格有疑问。我有两列名为COMPLETION_DUE_DATE(DateTime)和DAYS_TO_COMPLETE(十进制)。当我在Completion_Due_Date datepicker中选择日期时,如何自动计算COMPLETION_DUE_DATE和今天的日期之间的日期差异,然后将此值传递给DAYS_TO_COMPLETE。谢谢!

@(Html.Kendo().Grid<TRAINING_TRIGGER_CATALOG_PROJECTION>()
           .Name("CatalogBundleGrid")
           .Resizable(resize => resize.Columns(true))
           .Columns(co =>
           {
               co.Bound(e => e.CATALOG).Title("");
               co.Bound(e => e.SELECTED).Hidden();
               co.Bound(e => e.MODULE).Width(150);
               co.Bound(e => e.MODULE_ID).Hidden();
               co.Bound(e => e.COMPLETION_DUE_DATE)
                   .HtmlAttributes(new { @class = "templateCell" })
                   .ClientTemplate(
                    Html.Kendo().DatePicker()
                    .Name("CompletionDueDate_#=MODULE_ID#")
                    .Format("{0:dd/MM/yyyy}")
                    .HtmlAttributes(new { data_bind = "value:COMPLETION_DUE_DATE" })
                    .Events(e=> e.Change("ChangeDate"))
                    .ToClientTemplate().ToString()
                   ).Format("{0:dd/MM/yyyy}");
               co.Bound(e => e.DAYS_TO_COMPLETE).Width(90)
                      .ClientTemplate("<input id='textbox-#=MODULE_ID#'  class='txtbox-#=MODULE_ID#' type='text' style='width: 40px; height:15px;' value='#=DAYS_TO_COMPLETE#' /> "                   
               co.Bound(e => e.CATALOG_ID).Hidden();
           })
            .DataSource(ds => ds.Ajax().ServerOperation(false)
                .Model(model => { model.Id(p => p.CATALOG_ID); model.Field(p => p.MODULE).Editable(false); }).Sort(sort => sort.Add(s => s.MODULE)).Group(P => P.Add(e => e.CATALOG)))
            .Selectable()
            .Scrollable(scr => scr.Height("auto"))
            .AutoBind(true)
            .Events(e => e.DataBound("CatalogBound"))
            .HtmlAttributes(new { @class = "grdCollapsableWrapper" }).AutoBind(false)
           )

1 个答案:

答案 0 :(得分:2)

使用datepicker的事件更改

.ClientTemplate(Html.Kendo().DatePicker().Events(e=> e.Change("ChangeDate"))

然后定义ChangeDate函数

    function ChangeDate(e) {



            var grid = $("#TRAINING_TRIGGER_CATALOG_PROJECTION").data("kendoGrid");

            // for getting the current row of grid
            var row = $(e).closest("tr");
            var model = grid.dataItem(row);

            // use model to get values and calculate diff
            var today = new Date();
            var diff = Math.round((today - model.COMPLETION_DUE_DATE )/(1000*60*60*24));
            model.set('DAYS_TO_COMPLETE', diff);

        }