Kendo UI Grid with Drop down Template Not updating value after save to server

Question

We are using a server based simple grid. The grid reads and updates data for a remote data source. It has two columns that are using drop down editors. Everything seems to work fine except that after saving, when editor closes, the changed values are not displayed in the edited row. It still shows the old value. When we try to refresh the grid using the sync event, it changes the order of the rows however, it does update the values on refresh.

It seems like the template function is not executed after the update is completed. How to edit the grid / code to ensure that the changed value is reflected in the grid?

Grid Definition code:

$("#servicetype-grid").kendoGrid({
    pageable: true,
    toolbar: [{name: "create", text: ""}, { template: kendo.template($("#servicetype-search-template").html())}],
    columns: [
        {
            field: "serviceName", title: "Service Name" 
        },
        {
            field: "billCalculationTypeId", 
            editor: calculationTypeDropDownEditor, 
            template: function(dataItem) {
                return kendo.htmlEncode(dataItem.billCalculationTypeName);
            },
            title: "Bill Calculation Type"
        },
        {
            field: "payCalculationTypeId", 
            editor: calculationTypeDropDownEditor, 
            template: function(dataItem) {
                return kendo.htmlEncode(dataItem.payCalculationTypeName);
            },                            
            title: "Pay Calculation Type"
        },
        {
            command: [
                { name: "edit", text: { edit: "", cancel: "", update: "" }},
                { name: "destroy", text:""}
            ],
            title: "Actions"
        }
    ],
    dataSource: dataSource,
    sortable: {
        mode: "single",
        allowUnsort: false
    },
    dataBound: function(e) {
        setToolTip(); 
    },
    edit: function(e) {
        $('.k-grid-update').kendoTooltip({content: "Update"});
        $('.k-grid-cancel').kendoTooltip({content: "Cancel"});
    },
    cancel: function(e) {
        setToolTip();
    },
    editable: {
        mode: "inline",
        confirmation: "Are you sure that you want to delete this record?"
    }
});

Drop down function is defined as:

function calculationTypeDropDownEditor(container, options) {
    $('<input required data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        dataSource: {
            transport: {
                read: {
                    dataType: "jsonp",
                    url: baseURL + "rips/services/calculationType/lookupList"
                }
            }
        }
    });
}

The one thing that I see missing is that you are not defining a schema. Take a look at this example jsbin.com/eyebub/8/edit — G-Man
The example is for pop up editing but the logic should apply to your case also — G-Man
I found a solution using the template definition when defining the grid. However, I still have the issue when adding the record inline. The server is returning the data correctly but it is not reflected in the newly added row. — sohail

sohail sohail · Accepted Answer · 2013-12-06T20:51:22

After doing some search on Google and browsing through different examples on Kendo site, I finally was able to resolve this issue. Following is my understanding of the problem and solution:

When we are using drop down box or combo box as a custom editor, generally we have a different datasource that contains a list options with an id and a value to show. I defined the template as "#=field.property#" of the field that I was looking up. In my case it was calculation type. Following is my model:

                    model: {
                    id: "serviceId",
                    fields: {
                        serviceName: { field:"serviceName", type: "string", validation: { required: { message: "Service Name is required"}} },
                        billCalculationType: { field: "billCalculationType", validation: { required: true}},
                        payCalculationType: { field: "payCalculationType", validation: { required: true} }
                    }

In above, billCalculationType and payCalculationType are supposed to be drop down list values displaying the calculation type name but storing the id of the corresponding calculation type. So, in my grid definition, I added following:

                          { field: "billCalculationType", 
                        editor: calculationTypeDropDownEditor, 
                        template:"#=billCalculationType.name#",
                        title: "Bill Calculation Type" },

Where calculation dropdown editor is a function that builds a drop down from external data source. So, it works fine. However, for the template definition to work in (field.property) format, the server must return the value as a class for this field and not a simple text. So, in my server service, I returned in following format:

{"billCalculationType":{"id":"4028828542b66b3a0142b66b3b780001","name":"Hourly","requiredDetails":false},"payCalculationType":{"id":"4028828542b66b3a0142b66b3b960002","name":"Kilometers","requiredDetails":false},"serviceId":"4028828542b66b3a0142b66b3c16000a","serviceName":"XYZ"}

Notice that the billCalculationType and payCalculationType are returned as objects with name and id as properties. This allows the template to work properly.

Hope this helps.

Kendo UI Grid with Drop down Template Not updating value after save to server

1 Answers