Kendo UI Grid - 显示行号
Posted
技术标签:
【中文标题】Kendo UI Grid - 显示行号【英文标题】:Kendo UI Grid - Show row number 【发布时间】:2016-02-23 04:35:00 【问题描述】:如何在 Kendo UI Grid 中显示行号?我的代码不起作用。该页面显示该列,但它是空的。
@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 )
))
【问题讨论】:
DataSource 设置为 Server 还是 Ajax?发布整个网格。 【参考方案1】:这样做:
@
int counter = 1;
@(Html.Kendo().Grid<QueueViewModel>()
.Name("Queue")
.Columns(columns =>
columns.Template(@<text><span>@(counter++)</span></text>).Title("#");
)
或者,如果您的 DataSource 设置为 Ajax(客户端),请执行以下操作:
<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"))
)
【讨论】:
【参考方案2】:列 ClientTemplate 是客户端功能。您不能在其中使用服务器端变量。你应该定义 javascript 变量:
<script>
var i = 1;
</script>
然后,在网格内使用这个:
columns.Template(t => ).ClientTemplate(#=i++#).Title("#");
更新:应该是 ClientTemplate 而不是 Template
【讨论】:
column.Template
是服务器端功能。 ClientTemplate
是客户端。
我的错,应该是ClientTemplate,我不小心粘贴了自己的kendo mvc包装代码【参考方案3】:
试试这种方式在javascript中,代码也会支持分页
<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>
然后添加到您的 kindo 网格中
.Events(events =>
events.DataBound("YourGrid_DataBound");
)
.Columns(columns =>
columns.Bound("").ClientTemplate("#=GetCountIt()#").Title("Sr.").Width(50);
...
【讨论】:
以上是关于Kendo UI Grid - 显示行号的主要内容,如果未能解决你的问题,请参考以下文章