Kendo UI Grid - Show row number

kendo grid serial number column mvc
kendo grid row index
kendo grid javascript column template
kendo grid current row number
kendo grid row template
kendo grid display template
column template kendo ui grid
custom field kendo grid

How do I show the row number in a Kendo UI Grid? The code I have is not working. The page displays the column but it's empty.

@{int counter = 1;}

@(Html.Kendo().Grid<QueueViewModel>()
      .Name("Queue")
      .Columns(columns =>
      {
          columns.Template(@<text><span>@counter @{ counter++; }</span></text>).Title("#");
      })
     .DataSource(dataSource => dataSource
     .Ajax()
     .PageSize(10) 
     .Read(read => read.Action("GetOpenQueue", "DataSource", new { GeneralQueue = true })
))

Do this:

@{
   int counter = 1;
}

@(Html.Kendo().Grid<QueueViewModel>()
      .Name("Queue")
      .Columns(columns =>
      {
          columns.Template(@<text><span>@(counter++)</span></text>).Title("#");
      })

Or, if your DataSource is set to Ajax (client-side), do this:

<script>
    var counter = 1;

    function onDataBound(e) {
        counter = 1;
    }

    function renderNumber(data) {
        return counter++;
    }    
</script>

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

How can i add auto row number to grid? in Kendo UI Wrappers for , Hi, i want to add auto row number in grid, i have tested itemtemplate but it doesnot work, also in group mode i want to work row numbers! the example below that illustrates how row numbers can be shown in the Grid widget;. Browse other questions tagged kendo-ui kendo-grid kendo-asp.net-mvc or ask your own question. Featured on Meta Update: an agreement with Monica Cellio

Column ClientTemplate is client-side functionality. You cannot use server-side variables in it. You should define Javascript variable:

<script>
    var i = 1;
</script>

Then, inside the grid use this:

columns.Template(t => { }).ClientTemplate(#=i++#).Title("#");

Updated: it should be ClientTemplate instead of Template

How to add row number to kendo ui grid?, Initialize a variable and show it in column as template: "#= ++record #". Working Demo. Here is code: var record = 0; $("#grid").kendoGrid({ dataSource: { data:  I have a Kendo UI grid via AngularJS. Say I want to display 10 items in a row. Now when there is data less than 10 or no data at all I want to display empty rows, ie whether data present or not the grid should be of same height displaying empty rows. What KendoUI does that it reduces the grid height if data is not present.

Try this way In javascript, the code will support the paging also

        <script type="text/javascript"> 
            var CountIt = 0 
            function GetCountIt() { 
                var page = $("#YourGrid").data("kendoGrid").dataSource.page();
                var pageSize = $("#YourGrid").data("kendoGrid").dataSource.pageSize();
                CountIt++;
                return (page * pageSize) - pageSize + CountIt 
            }

            function YourGrid_DataBound() { 
                CountIt = 0; $('#YourGrid').data('kendoGrid').pager.unbind("change").bind('change', function (e) {
                    CountIt = 0
                })
            }

        </script>

then add to your kindo grid

       .Events(events =>
       {
          events.DataBound("YourGrid_DataBound"); 
       })
       .Columns(columns =>
        {
    columns.Bound("").ClientTemplate("#=GetCountIt()#").Title("Sr.").Width(50);
...

How Can I Have Row Number In Kendo UI Grid, You can use the dataBound event: $("#grid").kendoGrid({ sortable: true, dataSource: [{ name: "Jane Doe", age: 30 }, { name: "John Doe", age:  I have added onchange event for kendo-ui grid. In that I am trying to get the ID value for that particular row. I have added an image column as first column in the grid. What I want is when the image is clicked, I want to open a image url.

Kendo UI Grid - Show row number, Do this: @{ int counter = 1; } @(Html.Kendo().Grid<QueueViewModel>() .Name("​Queue") .Columns(columns => { columns. Description. With the Kendo UI grid you can enable filter row in its header by setting the grid's filterable->mode property to row.Thus based on the data type of the underlying columns data the grid will render textboxes for string values, numeric inputs or date pickers for filtering in the column headers, as illustrated in this example.

How to add serial number column in kendo ui grid, How to add serial number column in kendo ui grid. Using MVC. <script type="text/​javascript"> var rowNumber = 0; function resetRowNumber(e)  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).

How Can I Have Row Number In Kendo UI Grid, I want this counter never change by client sorting. Always first row be 1 second row be 2 , in column "RowNumber". how can I do this in kendo grid ? Solution. Description. How can I set the heights of the Grid rows, including the header, to a minimum or a specific height value? Solution. To adjust the size of the rows in both the body and the header, use CSS and specify the height and padding properties for the th elements inside the thead and tr, and the td elements inside the tbody of the Grid.

Comments
  • Is the DataSource set as Server or Ajax? Post the entire grid.
  • column.Template is server-side functionality. ClientTemplate is client-side.
  • my bad, it should be ClientTemplate, i pasted my own kendo mvc wrapper code accidentally