Вышел Telerik Extensions for ASP.NET MVC Q1 2012

Разработчик: Telerik
Сайт продукта: http://www.telerik.com/products/aspnet-mvc.aspx
Типы лицензий: Open Source (GPL v2) без возможности получения минорных версий продукта и коммерческая лицензия (на 3 года — 1897 USD, 2 года — 1473 USD и 1 год — 999 USD)
Рассматриваемая версия: 2012.1.214.0

15 февраля вышла новая версия Telerik Extensions for ASP.NET MVC.

Данная версия продукта характеризуется следующими нововведениями: в элемент управления Chart был добавлен новый тип диаграммы (диаграмма с областями) и реализована возможность использования нескольких осей значений; в элементе управления Calendar появилась кнопка для установки текущей даты; в элементах управления ComboBox и DropDownList была реализована возможность создания каскадных списков; в клиентский API элемента управления TreeView были добавлены новые методы для работы с узлами и др.

Рассмотрим более подробно нововведения данной версии:

1. Поддержка новых браузеров. В данном выпуске разработчики официально объявили о поддержке недавно вышедших Mozilla FireFox 10 и Google Chrome 17.
2. Обновление версии jQuery. В предыдущей версии продукта была заявлена совместимость с jQuery 1.7.1, но в поставку входила версия 1.6.4. Сейчас jQuery 1.7.1 уже входит в поставку.
3. Объединенный JS-файл. Был добавлен JS-файл telerik.all.js (соответственно минимизированная версия называется telerik.all.min.js), в котором содержится объединенный код всех компонентов и библиотек Telerik.
4. Calendar. В элементе управления Calendar появилась кнопка для установки текущей даты (сегодня). Текст на кнопке задается с помощью свойства TodayButton. Значением данного свойства может быть любая стандартная строка форматирования для типа DateTime (например, d) или обычный текст (например, Сегодня).

   
   Рис. 1. Элемент управления Calendar с кнопкой для выбора текущей даты

   Листинг 1. Код элемента управления Calendar с кнопкой для выбора текущей даты

   @(Html.Telerik().Calendar()
       .Name("Calendar")
       .Value(new DateTime(2012, 2, 15))
       // Настраиваем кнопку для выбора текущей даты
       .TodayButton("d")
   )
   

5. Chart. В элемент управления Chart добавлены следующие возможности:
   1. Появился новый тип диаграммы – диаграмма с областями (area chart).

      
      Рис. 2. Пример диаграммы с областями

      Листинг 2. Код диаграммы с областями

      @(Html.Telerik().Chart(Model)
          .Name("chart")
          .Title("Representative Sales vs. Total Sales")
          .Legend(legend => legend
              .Position(ChartLegendPosition.Bottom)
          )
          .Series(series => {
              // Задаем области
              series.Area(s => s.TotalSales).Name("Total Sales");
              series.Area(s => s.RepSales).Name("Representative Sales");
          })
          .CategoryAxis(axis => axis
              .Categories(s => s.DateString)
          )
          .ValueAxis(axis => axis
              .Numeric().Labels(labels => labels.Format("${0:#,##0}"))
          )
          .Tooltip(tooltip => tooltip.Visible(true))
      )
      

      Диаграмма с областями показывает связь составляющих (Representative Sales) с целым (Total Sales).

   2. Появилась возможность создавать диаграммы, имеющие несколько осей значений. Можно задать две, три и более осей, фактически есть только одно ограничение – это количество измерений, с помощью которых вы хотите визуализировать данные.

      
      Рис. 3. Пример диаграммы с 4-мя осями значений

      Листинг 3. Код диаграммы с 4-мя осями значений

      @(Html.Telerik().Chart()
          .Name("chart")
          .Title("Hybrid car mileage report")
          .Legend(legend => legend
              .Position(ChartLegendPosition.Top)
          )
          .Series(series =>
          {
              series
                  .Column(new int[] { 20, 40, 45, 30, 50 })
                  .Stack(true)
                  .Color("#13558E")
                  .Name("on battery");
              series
                  .Column(new int[] { 20, 30, 35, 35, 40 })
                  .Stack(true)
                  .Color("#E21219")
                  .Name("on gas");
              series
                  .Line(new double[] { 30, 38, 40, 32, 42 })
                  .Name("MPG")
                  .Color("#DE7E42")
                  .Axis("mpg");
              series
                  .Line(new double[] { 7.8, 6.2, 5.9, 7.4, 5.6 })
                  .Name("l/100 km")
                  .Color("#057589")
                  .Axis("l100km");
          })
          .CategoryAxis(axis => axis
              .Categories("Mon", "Tue", "Wed", "Thu", "Fri")
              .AxisCrossingValue(0, 0, 100, 100)
          )
          // Определяем несколько осей значений
          .ValueAxis(axis => axis
              .Numeric()
                  .Title("miles")
                  .Min(0).Max(100)
          )
          .ValueAxis(axis => axis
              .Numeric("km")
                  .Title("km")
                  .Min(0).Max(161).MajorUnit(32)
          )
          .ValueAxis(axis => axis
              .Numeric("mpg")
                  .Title("miles per gallon")
                  .Color("#DE7E42")
          )
          .ValueAxis(axis => axis
              .Numeric("l100km")
                  .Title("liters per 100km")
                  .Color("#057589")
          )
      )
      

   3. Добавлена возможность настройки всплывающих подсказок для отдельных рядов диаграммы.

      Листинг 4. Настройка вплывающих подсказок для отдельных рядов диаграммы

      @(Html.Telerik().Chart(Model)
          .Name("chart")
          .Legend(legend => legend.Position(ChartLegendPosition.Top))
          .SeriesDefaults(series => series.ScatterLine().Width(2))
          .Series(series =>
          {
              series
                  .ScatterLine(d => d.RPM, d => d.Power)
                  .Name("Power")
                  .Tooltip(tooltip => tooltip.Format("{1} bhp @ {0:N0} rpm"))
                  ;
              series
                  .ScatterLine(d => d.RPM, d => d.Torque)
                  .Name("Torque")
                  .YAxis("torque")
                  .Tooltip(tooltip => tooltip.Format("{1} lb-ft @ {0:N0} rpm"))
                  ;
          })
          .XAxis(x => x
              .Title("Engine rpm")
              .AxisCrossingValue(0, 10000)
              .Labels(l => l.Format("{0:N0}"))
          )
          .YAxis(y => y.Numeric().Title("Power (bhp)"))
          .YAxis(y => y.Numeric("torque").Title("Torque (lb-ft)"))
          .Tooltip(true)
      )
      

   4. Было добавлено новое клиентское событие OnDataBinding.
   5. Свойство Orientation больше не используется для настройки расположения осей. Для установки вертикального расположения оси теперь следует использовать новые типы рядов: VerticalLine и VerticalArea.
   6. Для обеспечения доступа к свойствам элементов диаграммы на стороне клиента, модель сериализуется в JSON-объект. Циклические зависимости внутри модели могут вызывать исключения во время сериализации.
6. ComboBox. В элементах управления DropDownList и ComboBox произошли следующие изменения:
   1. Реализована поддержка каскадных списков (демонстрация).

      
      Рис. 4. Каскадный список

      Чтобы реализовать каскадный список нужно указать в свойстве CascadeTo основного списка (Categories) идентификатор связанного списка (Products).

      Листинг 5. Настройка каскадного списка

      <p>
          <label for="DropDownList_Categories-input">Categories:</label>
          @(Html.Telerik().DropDownList()
              .Name("DropDownList_Categories")
              .BindTo(new SelectList(Model, "CategoryID", "CategoryName"))
              .Placeholder("Select Category...")
              // Указываем идентификатор связанного списка
              .CascadeTo("DropDownList_Products")
          )
      </p>
      <p>
          <label for="DropDownList_Products-input">Products:</label>
          @(Html.Telerik().DropDownList()
              .Name("DropDownList_Products")
              .DataBinding(binding => binding
                  .Ajax()
                  .Select("_GetDropDownListProducts", "ComboBox"))
              .Placeholder("Select Product...")
          )
      </p>
      

      Кроме того, в действие контроллера, с помощью которого заполняется связанный список, нужно добавить параметр, имя которого совпадает с именем основного списка.

      Листинг 6. Пример действия контроллера, используемого для заполнения связанного списка

      [HttpPost]
      public JsonResult _GetDropDownListProducts(int? DropDownList_Categories)
      {
          return _GetProducts(DropDownList_Categories);
      }
      

   2. В предыдущей версии, если в элементе управления DropDownList использовалась метка-заполнитель (задается с помощью свойства Placeholder), то сброс значения данного элемента управления работал некорректно (вместо отображения метки-заполнителя отображался пустой элемент). Сейчас эта ошибка исправлена.
7. NumericTextBox. В элемент управления NumericTextBox добавлена поддержка формата {0:N0}.
8. TreeView. В клиентский API элемента управления TreeView были добавлены методы, отвечающие за добавление/перемещение (append, insertBefore и insertAfter) и удаление (remove) узлов.
9. Upload. В элемент управления Upload были внесены следующие изменения:
   1. Загруженные файлы больше не удаляются при сбросе формы. Вместо этого, просто очищается список файлов.
   2. Версия метода Savе, принимающая параметр fieldName, теперь считается устаревшей и вместо нее нужно использовать конфигурационный метод SaveField.
10. Исправление ошибок. Также был исправлен ряд небольших ошибок в следующих элементах управления: Chart, ComboBox, Editor, Grid, TreeView, Date/Time Pickers, Menu, Upload, Slider и Window.

С полным списком изменений можно ознакомиться на сайте Telerik.