24 мая 2012 г.

Использование Telerik Grid. Часть 1 - биндинг, пейджинг, сортировка и фильтрация

В прошлом посте мы подключили набор компонент Telerik к проекту, и приготовили все для их полного использования.
Первой полезной компонентой, которую мы рассмотрим, будет Grid. Как по мне, так это один из самых полезных элементов в современных веб-приложениях, работающих с наборами данных.
В этом посте мы будем выводить данных их базы данных в Grid, а также организуем  постраничную навигацию, сортировку по столбцам, и фильтрацию по заданным условиям.
Готовясь к посту, я добавил в проект базу данных Northwind, и сгенерировал EntityFramework-модель, через которую буду работать с БД.
Возьмемся за таблицу Contacts. Начнем с представления:
   1:  <%= Html.Telerik().Grid<_MvcTelerikApplication.Models.Contact>()
   2:          .Name("ContactsGrid")
   3:          .Localizable("ru-Ru")
   4:          .Columns(columns =>
   5:          {
   6:              columns.Bound(o => o.ContactID).Title("ID");
   7:              columns.Bound(o => o.CompanyName).Title("Компания");
   8:              columns.Bound(o => o.ContactName).Title("Контакт");
   9:              columns.Bound(o => o.Address).Title("Адрес");
  10:              columns.Bound(o => o.City).Title("Город");
  11:              columns.Bound(o => o.Region).Title("Регион");
  12:              columns.Bound(o => o.Country).Title("Страна");
  13:              columns.Bound(o => o.Phone).Title("Телефон");
  14:          })
  15:          .DataBinding(dataBinding => dataBinding.Ajax()
  16:                      .OperationMode(GridOperationMode.Client)
  17:                              .Select("_ContactsAjaxBinding", "contact"))
  18:          .Pageable(paging => paging.PageSize(15))
  19:          .Sortable()
  20:          .Filterable() %>

Вот, собственно, и все в визуальном плане. Используя хэлпер Telerik-а, мы вставили в представление новый грид, и настроили все необходимые параметры. На параметрах остановимся подробнее:
.Name("ContactsGrid") - имя грида на клиенте, необходимо для того, чтобы иметь возможность обращаться к таблице из скрипта на клиенте;
.Localizable("ru-RU") - локализация некоторых интерфейсных элементов;
.Columns(...) - описываем, какие данные будут отображены в таблице. Здесь же можно определять заголовки столбцов, их ширину, формат отображаемых данных и прочее. Например, для даты могло быть что-то такое: columns.Bound(o => o.dateTime).Format("{0:dd/MM/yyyy HH:mm:ss}").Title("Дата").Width(160);
.dataBinding(..) - указывает на место - источник данных;
.Pagable() - включает пейджинг, с возможностью задания максимального кол-ва строк на одной странице;
.Sortable() - включает сортировку;
.Filterable() - включает фильтры, с возможностью настройки фильтрации только по определенных колонках.

Давайте еще раз посмотрим на опцию биндинга данных:
.DataBinding(dataBinding => dataBinding.Ajax()
                    .OperationMode(GridOperationMode.Client)
                            .Select("_ContactsAjaxBinding", "contact"))
Из этих настроек можно догадаться, что мы делаем Ajax-биндинг. Данные будут получаться из экшна _ContactsAjaxBinding в контроллере СontactController.
Также важную роль играет OperationMode(GridOperationMode.Client). Это означает, что все операции (сортировка, фильтрация и пейджинг) будут происходить на клиенте. Другими словами, страница сделает только 1 запрос в БД, в самом начале, и получит оттуда абсолютно все данные. "Дозироваться" и сортироваться они же будут только на клиенте. Такой вариант прекрасно подходит для случаев, если получаемых данных у нас не так уж и много. Иначе, можно переложить все заботы на сервер, тогда, например, при переходе на другую страницу грида, опять будет выполнен запрос в базу данных, на получение очередной порции данных.

Теперь давайте посмотрим на экшн, к которому обращается наша таблица за данными:
   1:  [GridAction]
   2:  public ActionResult _ContactsAjaxBinding()
   3:  {
   4:      _db = new NorthwindEntities();
   5:   
   6:      return View(new GridModel<Contact>
   7:          {
   8:              Data = _db.Contacts
   9:          });
  10:  }

Этот экшн обозначен специальным атрибутом [GridAction], расположенным в пространстве имен Telerik.Web.Mvc, и говорящим о том, что экшн предназначен только для использования Grid-ом. Внутри мы получаем необходимые данные, и преобразовываем их в модель для нашей таблицы.

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

Переход по страницам и сортировка происходят, как и нужно, без перезагрузок:

Фильтрация тоже работает отлично:

С отображением данных разобрались. Следующим шагом, в следующем посте, мы организуем базовую логику (Create, Update, Delete) для этой таблицы, средствами самого грида.
_____
Исходники