RadGrid shows no rows when bound with OData services

[Amod]

Hi,

I have a page with a RadGrid configured to bind with OData services as the source. I am able to hit the OData endpoint, get the desired data in the browser. However the data just doesn't show-up in the grid. The OData service returns a static list of objects. I can see the JSON in the browser's Response or Fiddler. I am clueless. I got till this point by referring to some of the sample available on Telerik, but this situation seems weird. Pasting my code aspx and OData service below.

ASPX:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>

    <telerik:RadGrid runat="server"
        AutoGenerateColumns="false"
        ID="grdEmployee">
        <MasterTableView>
            <Columns>
                <telerik:GridBoundColumn UniqueName="Name"
                    DataType="System.String"
                    DataField="Name"
                    HeaderText="Name">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <DataBinding Location="http://localhost:55638/od/"
                ResponseType="JSON">
                <DataService TableName="Employee" Type="OData" />
            </DataBinding>
        </ClientSettings>
    </telerik:RadGrid>
</form>

 

OData Service:

public class EmployeeController : ODataController
    {
        // GET api/<controller>
        public IEnumerable<models.Employee> Get()
        {
            List<models.Employee> emp = new List<models.Employee>();
            emp.Add(new models.Employee { ID = "1", Name = "Ariel Musaltov", Sex = "Male", Age = 38, Country = "Russia", Region = "Central", City = "Moscow", Salary = new models.Salary { Basic = 18000, InHand = 16670 } });
            emp.Add(new models.Employee { ID = "2", Name = "Allan Friedman", Sex = "Male", Age = 24, Country = "U.S.A", Region = "West", City = "San Jose", Salary = new models.Salary { Basic = 22000, InHand = 18672 } });
            emp.Add(new models.Employee { ID = "3", Name = "John Smith", Sex = "Male", Age = 35, Country = "U.S.A", Region = "West", City = "Seattle", Salary = new models.Salary { Basic = 39020, InHand = 32431 } });

            return emp;
        }
}

 

Model

namespace models
{
    public class Employee
    {
        public string ID { set; get; }
        public string Name { set; get; }
        public string Sex { set; get; }
        public string Country { set; get; }
        public int Age { set; get; }
        public string Region { set; get; }
        public string City { set; get; }

        public Salary Salary { set; get; }
    }
}

 

I have attached 2 screenshots - 1 shows the grid does not reflect the data from the datasource (OData) and 2nd shows that the model data is received by the browser successfully.

[Amod]

BTW - The same thing happens when I try to run the sample project on your website at -

http://www.telerik.com/blogs/radgrid-for-asp-net-ajax-client-side-databinding-to-odata-services

Download the file @ http://www.telerik.com/docs/default-source/blogs-docs/gridodatabinding-zip

I see the data coming to my browser (JSON) but the grid does not show any data. Attached the screenshots for your reference.

[Marin]

Hello,

I have replied to your comment in the blog post describing why the issue is happening and how to resolve it.
Here is one more time the reason for this behavior:
The problem lies in the structure of the returned data. Any kind of service can be configured to return data in preferred format. For example the records may be coming in a field called "Data" and the total number of items (used if the grid is configured to have paging) may come in a field called "Count". This format depends on the service configuration and may be different for each service. In order to correctly retrieve the data records from the response regardless of its structure the grid exposes two properties: DataPropertyName - sets the fields from the response that holds the data records, the default value for this property is Data, so if your service response does not contain the records in a property called Data the grid will not be able to retrieve them and will not show any data. From your screenshots it looks like the data records are coming in a field called "value". So if you set the DataPropertyName to this field, the grid should be able to correctly retrieve the data.
The same approach is valid for the other important field in the service response: the field that holds the total records number. You can check your service response to see the exact name of this field and then you can set its CountPropetyName in Grid-ClientSettings-DataBinding to the correct value in order for the paging to be working as expected.
The ASP.NET AJAX controls suite also contains a new control specially designed to serve as a datasource and retrieve data from any kind of web service - the RadClientDataSource control, it is fully integrated will all telerik controls that support client-side databinding and can be easy configured to work with any kind of web service. More information is also available here:
http://docs.telerik.com/devtools/aspnet-ajax/controls/clientdatasource/overview

I hope this helps. Let me know if you have any other questions.

Regards,
Marin
Telerik

[Amod]

Thank you Marin. This works when the 2 properties are set. It is mandatory to set the Count property too in order for the data to show up.

[john]

Thank you! I could not find this anywhere in the documentation. This is what finally got it working for me.

<ClientSettings>
    <ClientEvents />
    <DataBinding Location="~/odata" ResponseType="JSON" ShowEmptyRowsOnLoad="False" EnableCaching="False" DataPropertyName="value" CountPropertyName="odata.count">
        <DataService TableName="Project" Type="OData" />
    </DataBinding>
</ClientSettings>

[Eyup]

Hello John,

Thank you for sharing your approach with our community. I hope it will prove helpful to other developers as well.

Regards,
Eyup
Progress Telerik