Binding Telerik Grid for ASP.NET MVC to OData

by ASP.NET MVC Team | Comments 4

We have just made a nice demo application showing how to bind Telerik Grid for ASP.NET MVC to OData using Telerik TV as OData producer. The grid supports paging, sorting and filtering using OData’s query options.

image

To do that we implemented a helper JavaScript routine (defined in an external JavaScript file which is included in the sample project) which is used to bind the grid. Here is how the code looks like:

@(Html.Telerik().Grid<TelerikTVODataBinding.Models.Video>()
      .Name("Grid")
      .Columns(columns =>
      {
          columns.Bound(v => v.ImageUrl).Sortable(false).Filterable(false).Width(200).HtmlAttributes(new { style="text-align:center" });
          columns.Bound(v => v.Description);
          columns.Bound(v => v.DatePublish).Format("{0:d}").Width(200);
      })
      .Sortable()
      .Scrollable(scrolling => scrolling.Height(600))
      .Pageable()
      .Filterable()
      .ClientEvents(events => events.OnDataBinding("Grid_onDataBinding").OnRowDataBound("Grid_onRowDataBound"))
)

<script type="text/javascript">

function Grid_onRowDataBound(e) {
    e.row.cells[0].innerHTML = '<a href="' + e.dataItem.Url +'"><img src="' + e.dataItem.ImageUrl + '" /></a>';
}

function Grid_onDataBinding(e) {
    var grid = $(this).data('tGrid');
 // the bindGrid function is defined in telerik.grid.odata.js which is located in the ~/Scripts folder
    $.odata.bindGrid(grid, 'http://tv.telerik.com/services/odata.svc/Videos');
}


@{
 //Include the helper JavaScript file
    Html.Telerik().ScriptRegistrar().DefaultGroup(g => g.Add("telerik.grid.odata.js"));
}

We will provide native (read ‘codeless’) OData binding support in a future release.

,
Team Leader,
Kendo UI Team

4 Comments

Yitzhak Khabinsky

Atanas,

Thanks for the great news regarding the OData support.

Also, as a next logical move, it would be a great addition to the ASP.NET MVC Grid features to add native binding support to the XML data type. A simple XPath statement could point to the XML fragment for binding to the Grid columns.

Regards,
Yitzhak

Yitzhak Khabinsky

Atanas,

Amazingly enough, a colleague of mine just showed me how to bind ASP.NET MVC Grid to the arbitrary XML data type:

XElement WorkItemsByPermitXML = XElement.Parse(@"<root>
  <PermitType>
       <PermitTypeID>1</PermitTypeID>
       <PermitTypeName>BUILDING</PermitTypeName>
       <IsQualified>1</IsQualified>
       <ItemizedList>
         <Item>
              <LicenseTradeID>5</LicenseTradeID>
              <ItemizedListID>3644</ItemizedListID>
              <WorkItemDescription>OFFICE</WorkItemDescription>
              <UnitTypeCode>SQ. FT.</UnitTypeCode>
         </Item>
         <Item>
              <LicenseTradeID>5</LicenseTradeID>
              <ItemizedListID>3645</ItemizedListID>
              <WorkItemDescription>CHILD DAYCARE</WorkItemDescription>
              <UnitTypeCode>SQ. FT.</UnitTypeCode>
         </Item>
       </ItemizedList>
  </PermitType>
</root>

");

<% Html.Telerik().Grid<XElement>(Model.WorkItemsByPermitXML.Element("PermitType").Elements("ItemizedList").Descendants("ItemizedListItem"))
       .DataKeys(i=>i.Add(item=>item.Element("ItemizedListID").Value))
       .Columns(columns =>{
       columns.Bound(c=>c.Element("WorkItemDescription").Value).Title("Description");
       columns.Bound(c=>c.Element("UnitTypeCode").Value).Title("Unit Type");
                })
       .Name("AvailableWorkItemsXML")
       .Render();%>

Please document how to bind ASP.NET MVC Grid to the arbitrary XML data type in the Telerik documentation.

Regards,
Yitzhak

Eric
In the updated binding you are using $callback (see below). The OData specification states:

"Custom Query Options provide an extension point for OData service-specific information to be placed in the query string portion of a URI. A Custom Query String option is defined as any name/value pair query string parameter where the name of the parameter does not begin with the "$" character."

Since OData does not define $callback, it is "service-specific" and therefore should not be prefixed with '$'.

Note that in the Microsoft sample code for a WCF-based OData, the JsonPSupportBehaviorAttribute implements this incorrectly by expecting $callback, and it also incorrectly only supports JSONP handling if the $format parameter is used (it incorrectly does not support JSONP when the JSON format is specified via the Accept header). If you are using this sample implementation for your TelerikTV service (as it appears you are) fixing this behavior is pretty straightforword.

$.odata = {

bindGrid:

 

function (grid, url) {

 

$(

 

'.t-status .t-icon', grid.element).addClass('t-loading');

 

$.ajax({

url: url +

 

'?$format=json&$inlinecount=allpages' +

 

 

 

'&$filter=' + filter(grid) +

 

 

 

'&$orderby=' + orderby(grid) +

 

 

 

'&$skip=' + skip(grid) +

 

 

 

'&$top=' + top(grid)

 

,

contentType:

 

'application/json; charset=utf-8',

 

type:

 

'GET',

 

dataType:

 

'jsonp',

 

error:

 

function (xhr, status) {

 

alert(status);

},

jsonp:

 

'$callback',

 

success:

 

function (result) {

 

grid.total = result.d.__count;

grid.dataBind(result.d.results);

$(

 

'.t-status .t-icon', grid.element).removeClass('t-loading');

 

}

});

}

}

Steven Provencher
The sample works nicely. If I replace the Telerik MVC Grid version with 2011.2.712 however paging does not work. I have verified that grid.total = result.d.__count; does indeed contain a valid value.
Thoughts?

Comments

  1.    
     
    		 
    		  
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by ASP.NET MVC Team - or - read latest articles in Developer Tools
Bloggers Archive Tags