Thursday, 29 August 2013

How to add serial number column in kendo ui grid

Using MVC
  

@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID);
        columns.Bound(p => p.Name);
        columns.Template(t => { }).Title("Row No").ClientTemplate(
            "#= renderNumber(data) #"
        );
        columns.Template(t => { }).Title("Record No").ClientTemplate(
            "#= renderRecordNumber(data) #"
        );

    })
    .Pageable(x => x.PageSizes(new int[] { 10, 20, 30, 50 }).Refresh(true))
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("Grid_Read", "Home"))

    )
        .Events(ev => ev.DataBound("resetRowNumber"))
)
Using Javascript
  

5 comments:

  1. When you edit a Column the Row Number does not get updated correctly for the edited Row.

    ReplyDelete
  2. I have tried with the below URL but not able to reproduce issue.
    http://demos.telerik.com/kendo-ui/web/grid/editing-inline.html

    ReplyDelete
  3. In case of virtual scrolling enabled, how can you keep track with serial number column?
    Thx

    ReplyDelete
  4. I will try to implement this functionality with virtual scrolling and update you soon.

    ReplyDelete