Kendo UI Grid Refesh on Dropdown Selection

Question

I have a grid where each row has a select drop down box in with values.

When an item is selected, how can I make the grid reload to reflect the change?

The reason I want to do this is because the item selected from the drop down effects an amount in another column.

Here is the code for my dropdown:

function shippingModelSelect(container, options)
{
    $('<input required data-text-field="modelName" data-value-field="modelId" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        dataSource: [
        {
            "modelName": "Individual shipping cost", 
            "modelId": 1
        },
        {
            "modelName": "Based on weight", 
            "modelId": 2
        },
        {
            "modelName": "Based on value", 
            "modelId": 3
        }
        ],
        close: function()
        {
            handleChange();            
        }
    });
}

My handle change function:

var gridAlert = $('#gridAlert');
var handleChange = function(input, value) {
    if(input && value)
    {
        detail = 'Product <b>'+input[0].name+'</b> changed to <b>'+value+'</b>';
        gridAlert.html('<b>Changes saved!</b><p>'+detail+'</p>');
        gridAlert.fadeIn('slow', function(){
            setTimeout(function(){
                gridAlert.fadeOut();
            }, 2000)
        });
    }
    dataSource.sync();
}

And finally my grid setup:

dataSource = new kendo.data.DataSource({
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true,
    serverGrouping: true,
    serverAggregates: true,
    transport: {
        read: {
            url: ROOT+'products/manage'
        },
        update: {
            url: ROOT+'products/set-product',
            type: "POST",
            data: function(data)
            {
                data.dateAdded = kendo.toString(data.dateAdded, 'yyyy-MM-dd hh:ii:ss')
                return data;
            }
        }
    },
    pageSize: 20,
    sort: {
        field: 'id',
        dir: 'desc'
    },
    error: function(e) {
        alert(e.errorThrown+"\n"+e.status+"\n"+e.xhr.responseText) ;
    },
    schema: {
        data: "data",
        total: "rowcount",
        model: {
            id: "id",
            fields: {
                id: {
                    type: 'number',
                    editable: false
                },
                SKU: {
                    type: "string"
                },
                name: {
                    type: "string"
                },
                dateAdded: {
                    type: "date",
                    format: "{0:yyyy/MM/dd hh:mm}",
                    editable: false
                },
                shippingModel: {
                    type: "string"
                },
                shippingModelId: {
                    type: "number"
                },
                price: {
                    type: "number"
                }
            }
        }
    }
})

$('#productGrid').kendoGrid({
    dataSource: dataSource,
    autoBind: true,
    columns: [
    {
        field: "image",
        title: "Image",
        width: 30,
        template: "#= '<img title=\"'+alt+'\" src=\"images/'+image+'\"/>' #"
    },
    {
        field: "SKU",
        title: "SKU",
        width: 50,
        headerTemplate: "<abbr title=\"Stock Keeping Unit - A unique identifier for this product\">SKU</abbr>"
    },
    {
        field: "stockQuantity",
        title: "Quantity",        
        width: 30
    },
    {
        field: "name",
        title: "Name",
        width: 200
    },
    {
        field: "dateAdded",
        title: "Date Added",
        width: 80,
        template: "#= niceDate #"
    },
    {
        field: "shippingModelId",
        title: "Shipping Model",
        width: 50,
        editor: shippingModelSelect,
        template: "#= shippingModel #"
    },
    {
        field: "price",
        title: "Price",
        width: 80,
        //format: "{0:c}",
        template: "#= '&pound;'+price.toFixed(2)+'<br /><span class=\"grey\">+&pound;'+shipping+' shipping</span>' #"
    }
    ],
    sortable: true,
    editable: true,
    pageable: {
        refresh: true,
        pageSizes: [10, 20, 50]
    },
    scrollable: false,
    reorderable: true,
    edit: function(e) {
        var value;        
        var numericInput = e.container.find("[data-type='number']");

        // Handle numeric
        if (numericInput.length > 0)
        {
            var numeric = numericInput.data("kendoNumericTextBox");    

            numeric.bind("change", function(e) {
                value = this.value();
                handleChange(numericInput, value);
            });

            return;
        }

        var input = e.container.find(":input");

        // Handle checkbox
        if (input.is(":checkbox"))
        {
            value = input.is(":checked");
            input.change(function(){
                value = input.is(":checked");
                handleChange(input, value);
            });
        }
        else
        {        
            // Handle text
            value = input.val();
            input.keyup(function(){
                value = input.val();
            });
            input.change(function(){
                value = input.val();
            });

            input.blur(function(){
                handleChange(input, value);
            });
        }
    }
}
)

Answer 1

You will need to do two things.

1. Wait for changes to finish syncing
2. Tell the grid to re-read the datasource

This should do both for you

dataSource.bind("sync", function(e) {
  $('#productGrid').data("kendoGrid").dataSource.read();
});

For more info see the datasource sync event and datasource read method on their docs site.