In Cell Editing With Editor Templates

[Matt Miller]

I'm trying to implement in-cell editing on a kendo ajax bound grid. All of my columns have a editor template. I have a client side javascript function that is called in the grid's save event.

Here is the grid definition 

@( Html.Kendo().Grid<CNX.Domain.Entities.CnxTrain>()
       .Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
       .Filterable()
       .Pageable()
       .Name("IncompleteTrains")
       .Editable(editable => editable.Mode(GridEditMode.InCell))
       .Columns(columns =>
                {
                    columns.Bound(x => x.Id).Visible(false);
                    columns.Bound(x => x.STANDARD_CARRIER_ALPHA_CODE).Width(75).EditorTemplateName("_textEditor");
                    columns.Bound(x => x.UNIT_TRAIN).Width(75).EditorTemplateName("_textEditor");
                    columns.Bound(x => x.CNX_AUT).Width(75).EditorTemplateName("_textEditor");
                    columns.Bound(x => x.ARRIVAL_DATE_TIME).Width(100).Format("{0:MM/dd/yyyy hh:mm:ss}").EditorTemplateName("_dateTimeEditor");
                    columns.Bound(x => x.PERMIT_NUMBER).Width(100).EditorTemplateName("_textEditor");
                    columns.Bound(x => x.SHIPPER_NAME).Width(100).EditorTemplateName("_textEditor");
                  //  columns.Bound(x => x.CNX_RELEASE_DATE_TIME).Width(100).Format("{0:MM/dd/yyyy hh:mm:ss}").EditorTemplateName("_dateTimeEditor");
                })
        .ClientDetailTemplateId("incompleteTrainTemplate")
        .Events(ev => ev.Save("incompleteTrains_Save"))
        .DataSource(dataSource => dataSource.Ajax().PageSize(5).Read(read => read.Action("IncompleteTrains", "MenuTrain").Type(HttpVerbs.Post))
                                                               .Update(update => update.Action("IncompleteTrainsUpdate", "MenuTrain", Model).Type(HttpVerbs.Post))
                                                               .Model(model => model.Id(x => x.Id)))
)

@model string

@Html.TextBoxFor(m => m , new {@class = "k-input k-textbox"})

@(Html.Kendo().DateTimePickerFor(m => m).Format("MM/dd/yyyy hh:mm:ss").Name("DateTimeEditor"))

Here is the client side javascript function 

function incompleteTrains_Save(e) {
        var dateValue;
        var timeValue;
        if (e.values.DateTimeEditor != null) {
            dateValue = e.values.DateTimeEditor.toDateString();
            timeValue = e.values.DateTimeEditor.toTimeString();
            e.model.set("ARRIVAL_DATE_TIME", new Date(e.values.DateTimeEditor.toDateString() + ' ' + e.values.DateTimeEditor.toTimeString()));
        }
        else {
            var objGet = e.values.get();
            var objSet = valueOf(e.values);
            e.model.set(e.values.get(), valueOf(e.values));
        }
        e.sender.dataSource.sync();
    }

i need to figure out a way to set the model fields based on e.values in a generic way rather than having to specify the model field specifically like shown for the datetime editor.

something like e.model.set(e.values.???? , val(e.values.???))

Thanks in advance

[Petur Subev]

Hello Matt,

How to iterate through the properties of an object (in your case e.values) is a general question for the JavaScript language. Check the following question on SO:

http://stackoverflow.com/a/16735184/332124
You can use the same approach to make your function more generic.

Kind Regards,
Petur Subev
Telerik

[Matt Miller]

Thanks, i had found a link that helped me perform reflection on the text fields being passed to the function. Which isn't 100% where i wanted to get it, but definitely better.