Telerik Extensions for ASP.NET MVC

This topic lists the changes introduced in Telerik Extensions for ASP.NET MVC

Changes from Q1 2012 (Assembly version 2012.1.115)

Breaking Changes

Deprecate Window.OnMove event

Use the newly introduced OnDragStart / OnDragEnd events.

Changes from Q2 2011 (Assembly version 2011.2.712)

Breaking Changes

Do not throw an exception, when the value is out of range (NumericTextBox, Calendar, DatePicker, Slider)

In previous version an exception was thrown when the value was smaller/bigger than the min/max value. In future if the range changes, old values can cause an exception.

Setting the min/max value on the client-side does not update the component value (DatePicker, TimePicker, DateTimePicker).

In previous version, when set the min or max value, the current value is put in range. By doing this, there is no way to show client-side validation.

Changes from Q2 SP1 2011 (Assembly version 2011.2.914)

Breaking Changes

IGridActionResultAdapter

An additional (GetAggregates) method has been added to the IGridActionResultAdapter

IGridModel

An additional (Aggregates) property has been added to the IGridModel

Changes from Q3 2010 Service Pack 1 (Assembly version 2010.3.1318)

Breaking Changes

The additional parameter values passed through Grid's client-side rebind method are not presisted on subsequent rebinds

In previous version, as a side effect of another issue, when additional value is passed through the rebind client-side method, it was persisted during the subsequent rebinds. In order to achieve same behavior with current version, the DataBinding event should be use to re-assign the value.
CopySet the additional value
<%= Html.Telerik().Grid()
        .Name("Grid")
        .DataBinding(dataBinding => dataBinding.Ajax().Select("Select", "Grid")) 
        .ClientEvents(clientEvents => clientEvents.OnDataBinding("dataBinding"))
%>
CopySet the additional value
function dataBinding(args) {                        
    args.data = $.extend(args.data, { customerID: 1234 });
}

The pop-up of the DatePicker, TimePicker, DateTimePicker and ComboBox components does not open on focus

In previous version the popup of the aforementioned components was opened on focus. OpenOnFocus method allows you to change this behavior.
CopySet whether to open on focus
<%= Html.Telerik().DatePicker()
        .Name("DatePicker")
        .OpenOnFocus(true) 
%>

DatePicker HTML rendering changed in order to apply correct id to the input HTML element.

In previous version ID(String) value was applied to the wrapper HTML element instead of the input element. Thus the input gets id with suffix "-input". TimePicker and DateTimePicker rendering is also changed.
OldNew
CopyOld way of rendering
<div class="t-widget t-datepicker" id="DatePicker">
    <div class="t-picker-wrap">
        <input class="t-input" id="DatePicker-input" name="DatePicker" value="2/10/2011" />
        <span class="t-select">
            <span class="t-icon t-icon-calendar" title="Open the calendar"></span>
        </span>
    </div>
</div>
CopyNew way of rendering
<div class="t-widget t-datepicker">
    <div class="t-picker-wrap">
        <input class="t-input" id="DatePicker" name="DatePicker" value="2/10/2011" />
        <span class="t-select">
            <span class="t-icon t-icon-calendar" title="Open the calendar"></span>
        </span>
    </div>
</div>
Important
The datepicker client object is now stored in the data store for the input element.

NumericTextBox HTML rendering changed in order to apply correct id to the input HTML element.

In previous version ID(String) value was applied to the wrapper HTML element instead of the input element. Thus the input gets id with suffix "-input". CurrencyTextBox, IntegerTextBox, PercentTextBox also get same changes in the HTML rendering.
OldNew
CopyOld way of rendering
<div class="t-widget t-numerictextbox" id="NumericTextBox">
    <input id="NumericTextBox-input-text" name="NumericTextBox-text" class="t-input" />
    <a class="t-link t-icon t-arrow-up" href="#" tabindex="-1" title="Increase value">Increment</a>
    <a class="t-link t-icon t-arrow-down" href="#" tabindex="-1" title="Decrease value">Decrement</a>
    <input class="t-input" id="NumericTextBox-input" name="NumericTextBox" value="" style="display: none; ">
</div>
CopyNew way of rendering
<div class="t-widget t-numerictextbox">
    <div class="t-formatted-value">Enter value</div>
    <input name="NumericTextBox" id="NumericTextBox" class="t-input">
    <a title="Increase value" tabindex="-1" href="#" class="t-link t-icon t-arrow-up">Increment</a>
    <a title="Decrease value" tabindex="-1" href="#" class="t-link t-icon t-arrow-down">Decrement</a>
</div>
Important
The numericTextBox client object is now stored in the data store for the input element.

Changes from Q2 2010 Service Pack 1 (Assembly version 2010.2.930)

Breaking Changes

The grid HTML encodes the data during Ajax binding

In previous releases Telerik Grid for ASP.NET MVC did not HTML encode the data during data binding albeit by default it did that for Server binding. This discrepancy was fixed. If you need to disable HTML encoding use the Encoded method of the column:
CopyDisabling HTML encoding
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).Encoded(false);
        })
%>

Only one grid in the page can be in edit mode at the same time

This was done to prevent HTML element with duplicate ID attributes. This may occur if the same editor template is used in more than one grid on the page.

jQuery is updated to 1.4.3

If you were manually including jQuery JavaScript file consider upgrading to 1.4.3.

The WebAsset class is deleted

It is no longer used by the web asset framework.

All classes whose names started with WebAssetItem* are renamed to WebAsset*

For example WebAssetItem was renamed to WebAsset, WebAssetItemGroup was renamed to WebAssetGroup etc.

DatePicker HTML rendering is changed in order to be able to set the full width of the component

In previous versions the user needed to use the InputHtmlAttributes in order to set the width of the DatePicker. Unfortunately this width didn't include the button.
OldNew
CopyOld way to set the width
<%= Html.Telerik().DatePicker()
        .InputHtmlAttributes(new { @style = "width:30px" })
%>
CopyNew way to set the width
<%= Html.Telerik().DatePicker()
        .HtmlAttributes(new { @style = "width:20px" })
%>
Important
Take into account that the width now includes the button so you may need to decrease the value a bit.

Switching a component to RTL (Right to Left) mode is now done through the parent element and requires a new CSS file

In previous versions a specific CSS class had to be applied in order to enable RTL mode. Now a new CSS class ("t-rtl") must be set on any of the parent HTML elements of the UI component.

OldNew
CopyOld way to enable RTL
<div id="header">
<%= Html.Telerik().Menu()
        .Name("Menu")
        .HtmlAttributes(new { @class = "t-menu-rtl" })
%>
</div>
CopyNew way to enable RTL
<div id="header" class="t-rtl">
<%= Html.Telerik().Menu()
        .Name("Menu")
%>
</div>
Exception is thrown if the old RTL CSS class is used.

In previous versions the RTL CSS code was in the main CSS file telerik.common.css. Now for performance reasons the RTL CSS has been extracted in a new file telerik.rtl.css which must be included after telerik.common.css. If telerik.rtl.css is not included RTL mode will not be enabled and the UI components will display in LTR mode.

Changes from Q2 2010 Beta (Assembly version 2010.2.713)

Breaking Changes

The Columns<IEnumerable<GridColumnSettings>> method is removed

Use the LoadSettings method instead:
CopyOld
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns((IEnumerable<GridColumnSettings>)ViewData["Columns"]) // <-- Removed method
%>
CopyNew
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns => columns.LoadSettings((IEnumerable<GridColumnSettings>)ViewData["Columns"])) // <-- New method
%>

Obsolete classes

The following classes are obsolete and will be removed in the next major release.
ObsoleteNew
TreeViewItemModel TreeViewItem

Changes from Q1 2010 SP 2 (Assembly version 2010.1.518)

Obsolete methods and properties

The following methods and properties are obsolete and will be removed in the next major release.
ObsoleteNew
GridClientEventsBuilder.OnRowSelected(string onRowSelectedHandlerName)
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        //Obsolete
        .ClientEvents(events => events.OnRowSelected("onSelect"))
%>
GridClientEventsBuilder.OnRowSelect(string onRowSelectHandlerName)
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        //New
        .ClientEvents(events => events.OnRowSelect("onSelect"))
%>
GridClientEventsBuilder.OnRowSelected(Action onRowSelectedInlineCode)
CopyC#
<% Html.Telerik().Grid(Model)
        .Name("Grid")
        //Obsolete
        .ClientEvents(events => events.OnRowSelected(()=> 
        {
           //Code omitted for brevity
        })
        .Render();
%>
GridClientEventsBuilder.OnRowSelect(Action onRowSelectInlineCode)
CopyC#
<% Html.Telerik().Grid(Model)
        .Name("Grid")
        //New
        .ClientEvents(events => events.OnRowSelect(()=> 
        {
           //Code omitted for brevity
        })
        .Render();
%>

Changes from Q1 2010 (Assembly version 2010.1.309)

Breaking Changes

The sort client-side method now accepts a sort expression instead of column index

The sort client-side method used to accept a column index and just toggled the sort direction of that particular column e.g.:
CopyJavaScript
grid.sort(0); //toggles the sort order of the first column
Now you must specify a sort expression:
CopyJavaScript
grid.sort('OrderID-desc'); // descending sort by OrderID

Html used as node's text is encoded during client binding

If the text of a node is HTML it will get encoded by the treeview during databinding. This means that the following code will now produce a node with text set to <strong>Text</strong>:
CopyJavaScript
var treeview = $('#TreeView').data('tTreeView');
var data = [{ Text: "<strong>Text</strong>"}];
treeview.bindTo(data);
To avoid encoding HTML tags set the Encoded field of the data object to false:
CopyJavaScript
var treeview = $('#TreeView').data('tTreeView');
var data = [{ Text: "<strong>Text</strong>", Encoded:false}];
treeview.bindTo(data);

The DOM element passed to client-side events is the LI which represents a node

The DOM element passed to client-side events as e.item is now the <li class="t-item">. The following code will no longer work:
CopyJavaScript
function onSelect(e) {
    var nodeText = $(e.item).text();
}
Use the following code instead:
CopyJavaScript
function onSelect(e) {
    var treeView = $(this).data('tTreeView');
    var nodeText = treeView.getItemText(e.item);
}

Changes from Q1 2010 Futures (Assembly version 2010.1.218)

Renamed methods and properties

The following methods and properties are renamed.
OldNew
GridBuilder<T>.Toolbar()
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        //Old
        .Toolbar(commands => {}})
%>
GridBuilder<T>.ToolBar()
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        //New
        .ToolBar(commands => {}})
%>

Changes from Q3 2009 Service Pack 2 (Assembly version 2009.3.1320)

Obsolete methods and properties

The following methods and properties are obsolete and will be removed in the next major release.
ObsoleteNew
GridColumnFactory.Add(Expression<Func<T, object>> expression)
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
           //Obsolete
           columns.Add(c => c.CustomerID);
        })
%>
GridColumnFactory.Bound(Expression<Func<TModel, TValue>> expression)
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
           //New
           columns.Bound(c => c.CustomerID);
        })
%>
GridColumnFactory.Add(Action<T> templateAction)
CopyC#
<% Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
           //Obsolete
           columns.Add(c => 
           {
            %> <strong><%= c.CustomerID ></strong><%
           });
        })
%>
GridColumnFactory.Template(Action<T> templateAction)
CopyC#
<% Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
           //New
           columns.Template(c => 
           {
            %> <strong><%= c.CustomerID ></strong><%
           });
        })
%>
GridColumnFactory.Ajax(Action<GridAjaxSettingsBuilder> configurator)
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        //Obsolete
        .Ajax(ajax => ajax.Action("Action", "Controller"))
%>
GridColumnFactory.DataBinding(Action<GridDataBindingConfigurationBuilder> configurator)
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        //New
        .DataBinding(dataBinding => dataBinding
             .Ajax().Select("Action", "Controller"))
%>
GridColumnFactory.ServerBinding(Action<GridRequestSettingsBuilder> configurator)
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        //Obsolete
        .ServerBinding(binding => binding.Action("Action", "Controller"))
%>
GridColumnFactory.DataBinding(Action<GridDataBindingConfigurationBuilder> configurator)
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        //New
        .DataBinding(dataBinding => dataBinding
             .Server().Select("Action", "Controller"))
%>
GridColumnFactory.WebService(Action<GridWebServiceSettingsBuilder> configurator)
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        //Obsolete
        .WebService(webService => webService.Url("~/WebService.svc/WebMethod"))
%>
GridColumnFactory.DataBinding(Action<GridDataBindingConfigurationBuilder> configurator)
CopyC#
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        //New
        .DataBinding(dataBinding => dataBinding
             .WebService().Select("~/WebService.svc/WebMethod"))
%>

Breaking Changes

JavaScript files

If the grid contains columns bound to date properties it now requires the telerik.calendar.min.js and telerik.datepicker.min.js. For the full list check Required JavaScript files.

Bound columns require member expressions

Bound columns no longer support method invocation or indexer expressions. This means that columns defined like this:
CopyC#
columns.Add(c => c.CustomerID.ToString());
should be now defined like this:
CopyC#
columns.Template(c => 
{
   %> 
        <%= c.CustomerID.ToString() %>
   <%
});

Web Service binding

The signature of the web method should be changed from
CopyC#
public GridModel<OrderDto> WebMethodName(int page, int size, string orderBy, string filter)
{
    //Omitted for brevity
}
to
CopyC#
public GridModel WebMethodName(GridState state)
{
    //Omitted for brevity
}