검도 UI Grid Refesh on Dropdown Selection

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