Kendo UI Grid Refesh on Dropdown Selection

问题:

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

回答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.

文章来源: Kendo UI Grid Refesh on Dropdown Selection