在Telerik MVC网格-客户端中设置单行样式

Question

我试图样式只有一行(从客户端)的网格。

这是我的设置:我使用Ajax绑定来加载初始网格数据。之后，我将根据来自其他控件的事件编辑来自客户端的所有数据。因此，用户可以单击其他控件，使行在网格上"高亮显示"(而无需实际触摸网格)。

我做了一些检查(用firebug)，看到创建的表中没有ID或类(除了交替的行)，所以我没有看到访问该元素的方法。我想使用jQuery并调用行上的。addclass()和。removeclass()方法，但我不太知道如何访问它们。在这一点上，我将采取任何解决方案……那么，这是可能的吗?

提前感谢您的帮助!

Answer 1

我最终使用。clienttemplate()将a添加到隐藏元素中，然后通过查找该行的父().parent()找到它所属的行。

网格剃刀:

@(Html.Telerik().Grid<Multimedia.Web.Models.GroupModel>()
    .Name("group-grid")
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_GroupGridAjaxBinding", "TelerikControls"))
    .Columns(columns =>
    {
        columns.Bound(o => o.GroupNumber).Width("30%");
        columns.Bound(o => o.GroupName).Width("80%").Title("Name");
        columns.Bound(o => o.GroupNumber).Hidden(true).ClientTemplate("<div id='group-row-<#= GroupNumber#>'></div>"); //i will find this <td> by the <div> id
    })
   .Scrollable(scrolling => scrolling.Enabled(true))
   .Sortable(sorting => sorting.Enabled(true))
   .Pageable(paging => paging.Enabled(false))
   .Filterable(filtering => filtering.Enabled(false))
   .Groupable(grouping => grouping.Enabled(false))
   .Footer(false)
)

然后，在我的JavaScript中，我能够使用以下jQuery访问表行:

var groupNum = getGroupNumSomehow();
$('#group-row-' + groupNum).parent().parent().addClass('highlight');

它成功了!

Answer 2

您总是可以使用客户端行模板，并在发生这些外部操作时重新绑定网格。以下是Telerik在执行ajax绑定时使用的客户端行模板示例:

<%= Html.Telerik().Grid<Customer>()
   .Name("Grid")
   .DataBinding(dataBinding => dataBinding.Ajax().Select("Action", "Controller"))
   .Columns(columns =>
   {
       columns.Bound(c => c.CustomerID);
       columns.Bound(c => c.ContactName);
       columns.Bound(c => c.Country);
   })
   .ClientRowTemplate(grid => "<ul>" +
           "<li>CustomerID: <#= CustomerID #></li>" +
           "<li>Contact Name: <#= ContactName #></li>" +
           "<li>Country: <#= Country #></li>" +
        "</ul>" 
   )
%>

这可能允许您将信息注入到可以用来突出显示的每一行。

关于它的更多文档请访问Telerik的站点。