I have table that I am outputting using Kendo UI as below:
My desire outcome is to have the table with an extra column '#" which simply have as data 1,2,3,4, etc.
Below is my attempt to solve this problem, but it doesn't work i.e As you can see in the image the column '#' is blank: (Using a Template column and DataBound event)
@( Html.Kendo().Grid(Model.CryptoViewModel.data) .Name("Crypto") .Columns(columns => { columns.Template("<span class='row-number'></span>").Title("#"); columns.Bound(x => x.name).Title("Name") .HeaderHtmlAttributes(new { @class = "crypto-header" }).HtmlAttributes(new { @class = "k-text-left" }); columns.Bound(x => x.symbol).Title("Symbol") .HeaderHtmlAttributes(new { @class = "crypto-header" }).HtmlAttributes(new { @class = "k-text-left" }); columns.Bound(x => x.quote.USD.price).Title("Price").Format("{0:c2}") .HeaderHtmlAttributes(new { @class = "crypto-header" }).HtmlAttributes(new { @class = "k-text-left" }); columns.Bound(x => x.circulating_supply).Title("Circulating Supply").Format("{0:n0}") .HeaderHtmlAttributes(new { @class = "crypto-header" }).HtmlAttributes(new { @class = "k-text-left" }); columns.Bound(x => x.max_supply).Title("Max Supply").Format("{0:n0}") .HeaderHtmlAttributes(new { @class = "crypto-header" }).HtmlAttributes(new { @class = "k-text-left" }); columns.Bound(x => x.last_updated).Title("Last Updated").Width(200) .HeaderHtmlAttributes(new { @class = "crypto-header" }).HtmlAttributes(new { @class = "k-text-left" }); }) .Editable() .Filterable() .Sortable() .Events(ev => ev.DataBound("onDataBinding")) ) <script> function onDataBinding() { var grid = $("#Crypto").data("kendoGrid"); var dataSource = grid.dataSource; var i = 1; $(dataSource._data).each(function () { $('table tr').find('td:first').html(i); //var rowLabel = grid.find(".row-number"); //$(rowLabel).html(i) i++; }); } What are my missing to solve this problem ?
21 Answer
You're making a big mistake trying to change the widget's html directly. Never do that. The widgets renders the html dynamically very often, so your changes would be overriden.
The dataBinding event receives the data items in the first param, so you can change them before they are used in the grid:
function onDataBinding(e) { e.items.forEach((item, index) => item.row_counter = (index + 1)); } Demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href=""> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> </head> <body> <div></div> <script> $('#grid').kendoGrid({ dataSource: new kendo.data.DataSource({ data: [{ name: 'John' },{ name: 'Jane' }] }), columns: [{ field: 'row_counter' },{ field: 'name' }], dataBinding: function(e) { e.items.forEach((item, index) => item.row_counter = (index + 1)); } }); </script> </body> </html>
