Edit this page

Create Reorderable Grid with Restricted Rows

The example below demonstrates how to reorder Grid rows using the Kendo UI Sortable widget and disable the top rows from reordering.

Example
    <div id="grid" style="width: 800px; margin: 0 auto;"></div>
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
    <script>
      var RESTRICTED_ROWS_NUMBER = 3;

      var grid = $("#grid").kendoGrid({
        dataSource: {
          data: products,
          schema: {
            model: {
              fields: {
                ProductName: { type: "string" },
                UnitPrice: { type: "number" },
                UnitsInStock: { type: "number" },
                Discontinued: { type: "boolean" }
              }
            }
          },
          pageSize: 16
        },
        scrollable: false,
        columns: [
          "ProductName",
          { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
          { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
          { field: "Discontinued", width: "130px" }
        ],
        dataBound: function() {
          //add class to the rows that should not be reordered
          this.tbody.find("tr:lt(" + RESTRICTED_ROWS_NUMBER + ")").addClass("restricted");
        }
      }).data("kendoGrid");

      grid.table.kendoSortable({
        filter: ">tbody >tr:not(.restricted)",
        hint: function(element) { //customize the hint
          var table = $('<table style="width: 600px;" class="k-grid k-widget"></table>'),
              hint;

          table.append(element.clone()); //append the dragged element
          table.css("opacity", 0.7);

          return table; //return the hint element
        },
        cursor: "move",
        placeholder: function(element) {
          return $('<tr colspan="4" class="placeholder"></tr>');
        },
        change: function(e) {
          //the oldIndex and newIndex parameters are calculated among the table rows that **match the filter**
          //since the **.restricted rows does not match the filter** they will not be taken into accound when the index is calculated
          var skip = grid.dataSource.skip(),
              oldIndex = e.oldIndex + skip + RESTRICTED_ROWS_NUMBER, //add manually the restricted rows number to normalize the index
              newIndex = e.newIndex + skip + RESTRICTED_ROWS_NUMBER, //add manually the restricted rows number to normalize the index
              data = grid.dataSource.data(),
              dataItem = grid.dataSource.getByUid(e.item.data("uid"));

          grid.dataSource.remove(dataItem);
          grid.dataSource.insert(newIndex, dataItem);
        }
      });
    </script>
    <style>
      .k-grid tbody tr:not(.restricted) {
        cursor: move;
      }

      tr.restricted, tr.restricted:hover {
        background-color: #4ddbff;
      }

      .placeholder {
        outline-style: dashed;
        outline-width: 1px;
        outline-color: red;
      }
    </style>

See Also

For more runnable examples on the Kendo UI Sortable, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy