Выбор столбцов для отображения в сетке Telerik? - PullRequest
Новая
       6

Выбор столбцов для отображения в сетке Telerik?

0 голосов
/ 04 января 2012

У меня есть сетка Telerik MVC, которая отображает несколько столбцов.Что я хотел бы сделать, это дать пользователям возможность смешивать и сопоставлять, какие столбцы они видят, например, если сетка может отображать 10 столбцов, интерфейс может дать пользователю 3 столбца для просмотра данных, и им придется выбиратьчто будет отображать каждая из 3 сеток.

Я думаю, что это как-то связано с командой .Columns, поэтому можно ли было бы сделать это изменяемым пользователями через графический интерфейс?

1 Ответ

3 голосов
/ 05 января 2012

У вас есть несколько вариантов, когда нужно разрешить пользователям видеть конкретное представление данных, которые должна представлять ваша таблица. Хотя для каждого пользователя используется отдельное объявление Grid, проще всего было бы просто показать или скрыть столбец той же таблицы.

Это можно сделать «из коробки» с помощью встроенного средства выбора столбцов, которое поставляется с компонентом Grid, как можно увидеть в этой демонстрации . Щелчок правой кнопкой мыши по любому из заголовков предоставляет пользователю простой интерфейс для выбора отображаемых столбцов.

В качестве альтернативы вы можете использовать клиентские API-вызовы hideColumn / showColumn, которые могут принимать либо имя поля, к которому привязан столбец, либо индекс в качестве параметра. Быстрый пример (хотя он скрывает только определенный вами столбец): 

<input type="text" id="columnHider"/>
<br />
<button type="button" id="columnButton">Click</button>

@model IEnumerable<Customer>

@(Html.Telerik().Grid(Model)
        .Name("TelerikGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.CustomerID);
            columns.Bound(c => c.CompanyName);
            columns.Bound(c => c.ContactName);
            columns.Bound(c => c.Address);
            columns.Bound(c => c.City);
        })
        .Pageable(pageSettings => pageSettings.Enabled(true).PageSize(10))
        .ColumnContextMenu()
)

<script type="text/javascript">
    $(document).ready(function () {
        $("#columnButton").click(function () {
            var grid = $("#TelerikGrid").data("tGrid");
            var columnString = $("#columnHider").val();
            grid.hideColumn(columnString);
        });
    });
</script>

Это позволяет вам определить собственный интерфейс для скрытия / отображения столбцов.

...