CODEWITHSUNDEEP
kendo-gridkendo-asp.net-mvc
Yan
Yan

Reputation: 153

Update other cells based on the edited cell value kendo grid

I have a question about kendo grid. I have two columns called COMPLETION_DUE_DATE(DateTime) and DAYS_TO_COMPLETE(decimal). When I select a date in Completion_Due_Date datepicker, how to automatically compute the date difference between COMPLETION_DUE_DATE and today's date and then pass this value to DAYS_TO_COMPLETE. Thanks!

@(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)
           )

Upvotes: 1

Views: 2473

Answers (1)

samira riazati
samira riazati

Reputation: 525

Use the event change of datepicker 

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

and then define ChangeDate function 

    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);

        }

Upvotes: 2

Related Questions