CODEWITHSUNDEEP
jqueryasp.net-web-apikendo-uikendo-gridkendo-datasource
sony
sony

Reputation: 1503

how to read single record in Kendo Grid?

I use asp.net web api for reading data into my kendo grid. When user click on a cell, it changes to edit mode. What i am trying to achieve is that when it changes to edit mode, it should also get the latest record from the back end. is it possible by someting like:

 edit:function(e){ 
e.model.read();
}

Upvotes: 0

Views: 393

Answers (1)

OnaBai
OnaBai

Reputation: 40887

This can do what you want but remember that despite you get the data from the server remember what I said in the comment to your question:

Did you realize that edit event is actually fired after entering in edit mode?
Whatever you do for refreshing the row will imply exiting edition mode, update value with the data coming from the server and then entering edition mode again.
And having a strong RealTime background I would ask you:
* What about if while doing this is when the server actually gets updated? You cannot be sure about it...
* Even going further, what about if the row is updated while you are editing it?

Said that, here it goes:

The basic trick is if you are editing a cell because the user clicked on it, then I'm going to send a read request to the server and cancel the edition. As consequence of the new read, I'm going to have a new dataBound event where I will ask if this is as consequence of this forced read and if so, I will enter in edition mode for the same cell.

This is the code:

$("#grid").kendoGrid({
    editingCell: -1,
    dataSource: dataSource,
    columns: [
        ...
    ],
    editable: "incell",
    edit:function(e){
        if (this.options.editingCell >= 0) {
            this.options.editingCell = -1;
        } else {
            this.options.editingCell = this.tbody.find("td").index(e.container);
            this.dataSource.read();
            e.preventDefault();
        }
    },
    dataBound: function(e) {
        if (this.options.editingCell >= 0) {
            this.editCell($("#grid td:eq("+ this.options.editingCell + ")"));
        }
    }
});

And a code snippet on this following (instructions, open it twice and play with one and the other and you will see that when enter in edition mode, it actually gets closed, refreshed and edited again). Remember to click on "Save changes" for sending the changes to the server.

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

  $("#grid").kendoGrid({
    editingCell: -1,
    dataSource: dataSource,
    pageable: {
      buttonCount : 2
    },
    toolbar: ["save"],
    columns: [
      "ProductName",
      { field: "UnitsInStock", title:"Stock", width: "120px" }
    ],
    editable: "incell",
    edit:function(e){
      console.log("edit", this.options.editingCell);
      if (this.options.editingCell >= 0) {
        this.options.editingCell = -1;
      } else {
        console.log("forceRead");
        this.options.editingCell = this.tbody.find("td").index(e.container);
        this.dataSource.read();
        e.preventDefault();
      }
    },
    dataBound: function(e) {
      if (this.options.editingCell >= 0) {
        this.editCell($("#grid td:eq("+ this.options.editingCell + ")"));
      }
    }
  });
});
#grid {
  width: 400px;
}
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

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

Upvotes: 1

Related Questions