下拉选择中的Kendo UI Grid Refesh
我有一个网格，每行都有一个带有值的选择下拉框。
选择项目后，如何重新加载网格以反映更改？
我想这样做的原因是因为从下拉列表中选择的项目会影响另一列中的金额。
这是我的下拉列表的代码：
function shippingModelSelect(container, options) { $('') .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(); } }); } 我的手柄更改function：
var gridAlert = $('#gridAlert'); var handleChange = function(input, value) { if(input && value) { detail = 'Product '+input[0].name+' changed to '+value+''; gridAlert.html('Changes saved!'+detail+'
'); gridAlert.fadeIn('slow', function(){ setTimeout(function(){ gridAlert.fadeOut(); }, 2000) }); } dataSource.sync(); }
最后我的网格设置：
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: "#= '
' #" }, { field: "SKU", title: "SKU", width: 50, headerTemplate: "SKU" }, { 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: "#= '£'+price.toFixed(2)+'
+£'+shipping+' shipping' #" } ], 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); }); } } } )
你需要做两件事。
- 等待更改完成同步
- 告诉网格重新读取数据源
这应该为你做两件事
dataSource.bind("sync", function(e) { $('#productGrid').data("kendoGrid").dataSource.read(); });
有关详细信息，请参阅其docs站点上的datasource sync事件和数据源读取方法 。