下拉選擇Kendo UI Grid Refesh

Question

我有一個網格，每行都有一個帶有值的選擇下拉框。

當一個項目被選中時，我怎樣才能讓網格重新加載來反映變化？

我想這樣做的原因是因爲從下拉作用在另一列中的金額選擇的項目。

這裏是我的下拉代碼：

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

我辦理變更功能：

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

最後我的網格設置：

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

你需要做兩的東西。

1. 等待修改完成同步
2. 告訴電網重新讀取數據源

這應該爲你

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

做到既欲瞭解更多信息請參閱datasource sync event和datasource read method在他們的文檔站點。