Persist Focused Grid Cells after Rebind

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I persist a focused cell in the Kendo UI Grid for jQuery after rebind?

Solution

The following example demonstrates how to persist a focused Grid cell after rebinding.

The demo implies the usage of incell editing, built-in keyboard navigation, and the autoSync:true configuration for the Grid DataSource instance.

The functionality relies on the following milestones:

• The navigatable option is set to true.
• The editable option is set to true or the editable.mode option is set to "incell".
• The dataBinding event handler of the Grid is used to obtain the current Grid cell and its corresponding row and cell indexes.
• The saved row and cell indexes are applied through the current() method in the dataBound event handler.
• The table option of the Grid can be focused explicitly if the user has clicked on the Save Changes button—this requires you to set a flag in the saveChanges event handler.

Generally, it is uncommon to enable the autoSync option for the incell editing because it greatly increases the amount of update-related remote requests. Nevertheless, it is possible for you to use such an approach if required.

<div id="grid"></div>

<script>
  $(function () {
    var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/Products",
              dataType: "jsonp"
            },
            update: {
              url: crudServiceBaseUrl + "/Products/Update",
              dataType: "jsonp"
            },
            destroy: {
              url: crudServiceBaseUrl + "/Products/Destroy",
              dataType: "jsonp"
            },
            create: {
              url: crudServiceBaseUrl + "/Products/Create",
              dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
              }
            }
          },
          batch: true,
          autoSync: true,
          pageSize: 5,
          schema: {
            model: {
              id: "ProductID",
              fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitPrice: { type: "number", validation: { required: true, min: 1} },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number", validation: { min: 0, required: true } }
              }
            }
          }
        });

    var rowIndex = null;
    var cellIndex = null;
    var saveButtonClicked = false;

    $("#grid").kendoGrid({
      dataSource: dataSource,
      navigatable: true,
      pageable: true,
      height: 300,
      toolbar: ["create", "save", "cancel"],
      columns: [
        "ProductName",
        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
        { field: "UnitsInStock", title: "Units In Stock", width: 120 },
        { field: "Discontinued", width: 120 },
        { command: "destroy", title: "&nbsp;", width: 150 }],
      editable: true,
      saveChanges: function(e) {
        saveButtonClicked = true;
      },
      dataBinding: function(e) {
        var current = e.sender.current() || [];
        if (current[0]) {
          cellIndex = current.index();
          rowIndex = current.parent().index();
        }
      },
      dataBound: function(e) {
        if (!isNaN(cellIndex)) {
          e.sender.current(e.sender.tbody.children().eq(rowIndex).children().eq(cellIndex));
          rowIndex = cellIndex = null;

          // The code below is needed only when the user clicks on the "Save Changes" button.
          // Otherwise, focusing the table explicitly and unconditionally can steal the page focus.
          if (saveButtonClicked) {
            e.sender.table.focus();
            saveButtonClicked = false;
          }
        }
      }
    });
  });
</script>

See Also

• JavaScript API Reference of the Data Grid