title: Kendo Grid Custom Reordering
body: <p>I am using Kendo Grid UI. The following is an example of the same.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css"   rel="stylesheet" /&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" /&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css" rel="stylesheet" /&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" /&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.silver.min.css" rel="stylesheet" /&gt;
   &lt;link href="/kendo-ui/content/shared/styles/examples.css" rel="stylesheet" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="main"&gt;
  &lt;h1 id="exampleTitle"&gt;
          &lt;span class="exampleIcon gridIcon"&gt;&lt;/span&gt;
          &lt;strong&gt;Grid /&lt;/strong&gt; Column resizing    &lt;/h1&gt;
  
  &lt;div id="theme-list-container"&gt;&lt;/div&gt;
  
  &lt;div id="exampleWrap"&gt;
      &lt;script&gt;preventFOUC()&lt;/script&gt;
  
  
      &lt;div id="example" class="k-content"&gt;
          &lt;div id="grid"&gt;&lt;/div&gt;
  
          &lt;script&gt;
              $(document).ready(function() {
              gridDataSource = new kendo.data.DataSource({
              transport: {
                                          read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                                      },
                                  });
                  $("#grid").kendoGrid({
                      dataSource: gridDataSource,
                      scrollable: true,
                      resizable: true,
  
                      columns: [
                         {
                              field: "OrderID",
                              title: "ID"
  
                          }, {
                              field: "OrderDate",
                              title: "Order Date"
  
  
                          },
                          {
                              field: "ShipCountry",
                              title: "Ship Country"
  
                          },
                          {
                              field: "ShipCity",
                              title: "Ship City"
  
                          },
                          {
                              field: "ShipName",
                              title: "Ship Name"
  
                          },
                          {
                              field: "ShippedDate",
                              title: "Shipped Date"
  
                          }
  
                      ]
                  });
              });
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want a customized reorder on columns. I have disabled drag and drop on OrderID. But columns other than OrderID can be reordered and these columns can be placed before OrderID column.</p>
  
  <p>Is there a way where I can disable dropping of columns before OrderID?</p>