RadGrid shows no rows when bound with OData services

6 posts, 1 answers
  1. Amod
    Amod avatar
    11 posts
    Member since:
    Feb 2014

    Posted 25 Jan 2016 Link to this post

    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.

  2. Amod
    Amod avatar
    11 posts
    Member since:
    Feb 2014

    Posted 25 Jan 2016 Link to this post

    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.

  3. Answer
    Marin
    Admin
    Marin avatar
    1057 posts

    Posted 26 Jan 2016 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Amod
    Amod avatar
    11 posts
    Member since:
    Feb 2014

    Posted 27 Jan 2016 Link to this post

    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.
  5. john
    john avatar
    5 posts
    Member since:
    May 2009

    Posted 01 Feb 2018 in reply to Marin Link to this post

    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>
  6. Eyup
    Admin
    Eyup avatar
    3866 posts

    Posted 06 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top