title: Kendo UI Grid Refesh on Dropdown Selection
body: <p>I have a grid where each row has a select drop down box in with values.</p>
  
  <p>When an item is selected, how can I make the grid reload to reflect the change?</p>
  
  <p>The reason I want to do this is because the item selected from the drop down effects an amount in another column.</p>
  
  <p>Here is the code for my dropdown:</p>
  
  <pre><code>function shippingModelSelect(container, options)
  {
      $('&lt;input required data-text-field="modelName" data-value-field="modelId" data-bind="value:' + options.field + '"/&gt;')
      .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();            
          }
      });
  }
  </code></pre>
  
  <p>My handle change function:</p>
  
  <pre><code>var gridAlert = $('#gridAlert');
  var handleChange = function(input, value) {
      if(input &amp;&amp; value)
      {
          detail = 'Product &lt;b&gt;'+input[0].name+'&lt;/b&gt; changed to &lt;b&gt;'+value+'&lt;/b&gt;';
          gridAlert.html('&lt;b&gt;Changes saved!&lt;/b&gt;&lt;p&gt;'+detail+'&lt;/p&gt;');
          gridAlert.fadeIn('slow', function(){
              setTimeout(function(){
                  gridAlert.fadeOut();
              }, 2000)
          });
      }
      dataSource.sync();
  }
  </code></pre>
  
  <p>And finally my grid setup:</p>
  
  <pre><code>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: "#= '&lt;img title=\"'+alt+'\" src=\"images/'+image+'\"/&gt;' #"
      },
      {
          field: "SKU",
          title: "SKU",
          width: 50,
          headerTemplate: "&lt;abbr title=\"Stock Keeping Unit - A unique identifier for this product\"&gt;SKU&lt;/abbr&gt;"
      },
      {
          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: "#= '&amp;pound;'+price.toFixed(2)+'&lt;br /&gt;&lt;span class=\"grey\"&gt;+&amp;pound;'+shipping+' shipping&lt;/span&gt;' #"
      }
      ],
      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 &gt; 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);
              });
          }
      }
  }
  )
  </code></pre>