In Cell Editing With Editor Templates

3 posts, 0 answers
  1. Matt Miller
    Matt Miller avatar
    23 posts
    Member since:
    Jan 2012

    Posted 14 Nov 2013 Link to this post

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

  2. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 18 Nov 2013 Link to this post

    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:
    You can use the same approach to make your function more generic.

    Kind Regards,
    Petur Subev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Matt Miller
    Matt Miller avatar
    23 posts
    Member since:
    Jan 2012

    Posted 18 Nov 2013 Link to this post

    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. 
Back to Top