Create serial number column in telerik mvc grid

Question

I could create a grid with telerik mvc

<% Html.Telerik().Grid(Model)
    .Name("ProductGrid")
    .Columns(columns => { 
                        columns.Bound(h => h.ProductName).Width("34%");
                        columns.Bound(h => h.Description).Width("60%");
                        columns.Bound(h => h.ProductID).Format(Html.ImageLink("Edit", "Products", new { Id = "{0}" }, "/Content/images/icon_edit.gif", "", new { Id = "edit{0}" }, null).ToString()).Encoded(false).Title("").Sortable(false).Width("3%");
                        columns.Bound(h => h.ProductID).Format(Html.ImageLink("Delete", "Products", new { Id = "{0}" }, "/Content/images/icon_delete.gif", "", new { onclick = string.Format("return confirm('Are you sure to delete this add on?');") },null).ToString()).Encoded(false).Title("").Sortable(false).Width("3%");
        })

    .EnableCustomBinding(true)
    .DataBinding(databinding => databinding.Ajax().Select("_Index", "ProductGrid"))
    .Pageable(settings => settings.Total((int)ViewData["TotalPages"])
    .PageSize(10))
    .Sortable()
    .Render(); %>

but I need to add a serial number column in the telerik grid. How can i do this?

Answer 1

I think the best way to do this is to add the SerialNumber column to your Product class, which is your model, and not just add another related column to the grid as follows:

columns.Bound(h => h.SerialNumber)

If you pass the list of products, you can populate the SerialNumber column as follows:

List<Product> products = GetList(); // Your method to get data here
int counter = 1;
products.ForEach(x => x.SerialNumber = counter++);

If you want to maintain consistent numbers with a search call, you need to calculate the initial value of the countervaluable. To do this, you must have the current page and page size.

Answer 2

, - , .

<% 
    var sn = 0;
    Html.Telerik().Grid(Model).Name("Grid").HtmlAttributes(new { style = "width:auto" })
        .EnableCustomBinding(true)
        .Columns(columns =>
                    {
                        columns.Template(c=> {%> <%: ++sn %> <% }).Title("S/N");
                        columns.Bound(c => c.CustomerNumber);
                        columns.Bound(c => c.Narration);
                    })
                    .Render();  %>

, .

, ?

Answer 3

In MVC web grid use this calculation

 grid.Column(header: "#",
   format: item => item.WebGrid.Rows.IndexOf(item) + 1 + Math.Round(Convert.ToDouble(grid.TotalRowCount / grid.PageCount) / grid.RowsPerPage) * grid.RowsPerPage * grid.PageIndex),