Telerik MVC 网格中的单行样式 - 客户端

Question

我正在尝试仅对网格的一行（来自客户端）进行样式设置。

这是我的设置： 我正在使用 Ajax 绑定来加载初始网格数据。之后，我根据其他控件的事件编辑客户端的所有数据。因此，用户可以单击一些其他控件，这会导致在我的网格上“突出显示”一行（而无需实际触摸网格）。

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

预先感谢您的任何帮助！

Answer 1

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

Grid Razor：

@(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 网站。