Стиль отдельной строки в сетке Telerik MVC - на стороне клиента - PullRequest
Новая
       6

Стиль отдельной строки в сетке Telerik MVC - на стороне клиента

1 голос
/ 17 августа 2011

Я пытаюсь стилизовать только одну строку (от клиента) сетки.

Вот мои настройки: Я использую Ajax-привязку для загрузки исходных данных Grid. После этого я редактирую все данные со стороны клиента на основе событий из других элементов управления. Таким образом, пользователь может щелкнуть другой элемент управления, который приводит к тому, что строка «подсвечивается» в моем Gird (даже не касаясь сетки).

Я провел некоторую проверку (с помощью firebug) и увидел, что в создаваемой таблице нет идентификатора или класса (кроме чередующихся строк), поэтому я не вижу способа доступа к этому элементу. Я хотел бы использовать jQuery и вызывать методы .addClass () и .removeClass () для строк, но я не совсем знаю, как получить к ним доступ. На этом этапе я приму любое решение ... так что, это возможно?

Заранее спасибо за любую помощь!

Ответы [ 2 ]

2 голосов
/ 18 августа 2011

В итоге я использовал .ClientTemplate (), чтобы добавить a к скрытому элементу, а затем нашел строку, к которой он принадлежит, найдя parent (). Parent ().

Сетка 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');

И это сработало!

1 голос
/ 17 августа 2011

Вы всегда можете использовать шаблон строки на стороне клиента и повторно привязывать сетку, когда происходят эти внешние действия.Вот пример 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 .

...