Telerik Extensions for ASP.NET MVC – Troubleshooting

Wow it has been a busy release! I am glad that we managed to release our first home-grown UI extensions for ASP.NET MVC. I hope you like them and please, please share your feedback in the forum.

In this blog post I will highlight the most common problems you may encounter while using the extensions and their solutions. Here we go:

The control renders fine but its client-side features do not work

The most common reason is that there is no ScriptRegistrar or it is placed before the UI components. It is mandatory that you add a ScriptRegistrar because the UI components require it to output their client-side objects and JavaScript files. A typical location is at the end of your master page (~/Views/Shared/Site.master by default). All you need to do is add the following line at the end of your master page (or view page for that matter):

<%= Html.Telerik().ScriptRegistrar() %>

Unfortunately due to the specifics of ASP.NET MVC we cannot programmatically detect whether there is a ScriptRegistrar in the page.

The control is not skinned

Make sure you have registered the common and skin CSS files. This could be done either by using <link> tags or via the StyleSheetRegistrar component:

<%= Html.Telerik().StyleSheetRegistrar()

                 .DefaultGroup(group => group

                    .Add("telerik.common.css")

                    .Add("telerik.vista.css")

                 )

%>

By default the StyleSheetRegistrar will look in the ~/Content folder of your application.

The filtering menu of the grid does not appear but the filtering icon is rendered

This will occur if there is no ScriptRegistrar defined. See above for the solution. The rest of the features (paging, sorting) will work because the grid will fallback to server-side binding mode.

The grid is using the wrong type during databinding

The grid may fail to infer the right type of the data item if the collection is not IEnumerable<T> (for example List<T>). The reason is that the C# compiler prefers the Grid(T item) method instead of Grid(IEnumerable<T> dataSource). In a future release we will remove the Grid(T item) method. For now the workaround is to specify the type of the data item explicitly:

<%= Html.Telerik().Grid<Order>(Model) %>

The grid does not support templates and client-side binding (Ajax, WebService)

Currently the grid does not support client-side templates. We will provide the same in a future release. For now the workaround is to use the Format method for simple templates or the rowDataBound event:

Using Format:

<%= Html.Telerik().Grid(Model)

        .Name("Grid")

        .Columns(columns =>

        {

            columns.Add(c => c.CustomerID).Format(

                Html.ActionLink("Edit", "Home", new { id = "{0}"}})

            ).Encoded(false).Title("Edit");

        })

%>

Using rowDataBound:

function onRowDataBound(e) {

 //`this` is the DOM element of the grid

 var grid = $(this).data('tGrid');

 //the DOM element (<tr>) representing the row which is being databound

 var row = e.row;

 //the data item - JSON object.

 var dataItem = e.dataItem;

 //You can use the OnRowDataBound event to customize the way data is presented on the client-side

    row.cells[1].innerHTML = '<strong>' + dataItem.text + '</strong>';

}

Hope this helps!