kendo grid column sequence number

Question

I am new to kendo UI for Asp.net MVC and I had a requirement to have sequence number in kendo Grid as 1,2,3,4 etc. Also in-case of 'Add new record' the sequence column should get the latest number and add 1 ( for example : If the records in the grid are 4 and has 1,2,3,4 as sequence it should have 5 in the new record). Any kind of help is appreciated.

score 1 · Answer 1 · edited May 23 '17 at 11:45

I think one or both of these links would answer your question:

How Can I Have Row Number In Kendo UI Grid

$("#grid").kendoGrid({
sortable: true,
dataSource: [{
    name: "Jane Doe",
    age: 30
}, {
    name: "John Doe",
    age: 33
}],
columns: [{
    field: "name"
}, {
    field: "age"
}, {
    field: "rowNumber",
    title: "Row number",
    template: "<span class='row-number'></span>"
}],
dataBound: function () {
    var rows = this.items();
    $(rows).each(function () {
        var index = $(this).index() + 1;
        var rowLabel = $(this).find(".row-number");
        $(rowLabel).html(index);
    });
}});

http://www.telerik.com/forums/row-number-in-kendo-grid

<script>
  var rowNumber = 0;
  function resetRowNumber(e) {
      rowNumber = 0;
  }
  function renderNumber(data) {
      return ++rowNumber;
  }
</script>

@(Html.Kendo().Grid()   
    .Name("grid")
    .Columns(columns => {
        columns.Template(t => { }).Title("Row No").ClientTemplate(
            "#= renderNumber(data) #"
        );
    })
    .Events(ev => ev.DataBound("resetRowNumber"))
)

In summary, add an additional column for the row number with a template, you will also need to set a databound event that loops through the rows and grabs the index of the row (+1 if you don't want to include zero) and binds it to the template.

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — ZygD, Jul 28 '15 at 19:28
Thanks for the gentle guidance, I don't answer often. Will try and edit it. — saltavenger, Jul 28 '15 at 19:49
@JAL yes the person above you just pointed that out, and the answer was edited to reflect it. — saltavenger, Jul 28 '15 at 19:59
@JAL no worries! I'm usually a lurker-- I didn't even know that the queue existed or wouldn't have bothered. Clearly, a learning moment for me. I had a couple of bookmarks from dealing with the same issue. The rule makes sense. — saltavenger, Jul 29 '15 at 03:26

score 1 · Answer 2 · edited Sep 11 '17 at 15:10

1

You may try something like below on data binding from this reference

<script>

 var RecordNumber = 0;

 $("#grid").kendoGrid({  
    dataSource: dataSource,
    columns: [
              { title: "&nbsp;", template: "#= ++RecordNumber #", width: 30 },
             ..
             ],
    dataBinding: function() {       
              RecordNumber = (this.dataSource.page() - 1) * this.dataSource.pageSize();
        }

 });
  </script>

edited Sep 11 '17 at 15:10

saber tabatabaee yazdi

4,404
3
42
58

answered Jul 29 '15 at 03:56

Abbas Galiyakotwala

2,949
4
19
34

Can you provide a demo of this? I like it. – DontVoteMeDown Jul 29 '15 at 11:33

score 0 · Answer 3 · answered Jul 28 '15 at 20:31

I got this of top of my head. Don't know if its the best way or not, anyway, it seems to achieve what you want:

$("#grid").kendoGrid(
{
  dataSource: new kendo.data.DataSource({
    data: [{
        item: "Item 1"
      }, {
        item: "Item 2"
      },{
        item: "Item 3"
      }],
    schema: {
      parse: function(data) {
        var count = 0;

        return data.filter(function(i) {
          i.count = ++count;
          return true;
        });
      }
    }
  }),
  columns: [{
    field: "count",
    editable: false
  }, {
    field: "item",
    title: "Item name"
  }],
  toolbar: [{ name: "create"}],
  editable: {
    mode: "inline"
  },
  edit: function(e) {
    var nextid = 0;

    nextid = Number($(e.sender.element).find("tbody tr:last td:first").text()) + 1;

    $(e.container).find('[name="count"]').val(nextid);
  }
});

Demo. It basically set the number in the parse() event, which you can avoid if you can set the numbers on the server-side. Then it sums the counter and set it to the new line.

kendo grid column sequence number

3 Answers3