We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Javascript WebAPI Grid only shows No records to display.


I am trying to get a JavaScript grid to display data using the WebApiAdaptor data source.  I am using Visual Studio 2015 Community. 

I know that the Getcustomers function is getting called because it stops on a breakpoint.  I can see the data that should be returned.  However, the grid displays “No records to display”

I think that I must be missing something but am not sure what.

I have included code below for reference.  Any help on this is greatly appreciated.




head inlcude files:

    <!-- Essential Studio for JavaScript  theme reference -->
    <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/" />

    <!-- Essential Studio for JavaScript  script references -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="http://cdn.syncfusion.com/"></script>


 <div id='Grid'></div>

  $(function () {
           // alert("Test1");
            var dataManager = ej.DataManager({
                url: "api/customers",
                adaptor: new ej.WebApiAdaptor()

                dataSource: dataManager,
                allowPaging: true,
                columns: ["customerID", "lastName", "firstName"]

 // GET: api/customers
        public object Getcustomers()

            var queryString = HttpContext.Current.Request.QueryString;
            int skip = Convert.ToInt32(queryString["$skip"]);
            int take = Convert.ToInt32(queryString["$top"]);
            var data = db.customers.ToList();
            return new
                Items = data.Skip(skip).Take(take),
                Count = data.Count()

5 Replies

VA Venkatesh Ayothi Raman Syncfusion Team May 15, 2017 12:53 PM UTC

Hi Jim,

Thanks for contacting Syncfusion support. 

We have tried to replicate the issue and we were unable to reproduce the issue and created a sample for your convenience which can be download from following link, 

And could you please ensure whether you can serialize the camel case for webconfig file. If so provide details and share the more details to replicate the issue at our end. 

Venkatesh Ayothiraman. 

JB JB May 16, 2017 01:25 PM UTC

Thanks you for your reply. 

Please note that I need to have just a simple HTML page retrieve data to a JavaScript grid so the previous solution is not going to work for me as it it MVC based.  For this project, I will not be able to use MVC.

I have attached an example project that shows the behavior I am seeing.  I hope you can help me figure out why it will not display records in the grid.


VA Venkatesh Ayothi Raman Syncfusion Team May 18, 2017 01:00 PM UTC

Hi Jim, 

Thanks for the update. 

As you have said, attached the issue reproducing project for us and we can’t find any project in that response. And we have used the JavaScript Grid code and used the webApi controller for retrieve the data.  
We can’t retrieve the remote data if we using client side JavaScript Grid. So, could you please share the requested details in previous response? 

Venkatesh Ayothiraman. 

JB JB May 18, 2017 03:43 PM UTC


Please find file:

I was having problems getting it uploaded last time. 

Please let me know if there are any questions.


Attachment: syncfusionWebAPITest_1_d6a0abf0.7z

VA Venkatesh Ayothi Raman Syncfusion Team May 19, 2017 12:12 PM UTC

Hi Jim, 

Thanks for the update. 

We went through your project that you have shared for us and found that serialization problem is occurred while directly using Entity Framework in WebApi. Please refer to the following screenshot, 
So, we suggest you to serialized the model class to resolve this issue like as follows, 
Code example
public static IList<EditableOrder> GetAllRecords() 
            List<EditableOrder> orders = new List<EditableOrder>(); 
            if (orders.Count() == 0) 
                orders = (from ord in new NORTHWNDEntities().Orders.Take(200) 
                                                                  select new EditableOrder 
              OrderID = ord.OrderID, 
              OrderDate = ord.OrderDate, 
              CustomerID = ord.CustomerID, 
               EmployeeID = ord.EmployeeID, 
              Freight = ord.Freight, 
              ShipAddress = ord.ShipAddress, 
              ShipCity = ord.ShipCity, 
              ShipName = ord.ShipName, 
              ShipPostalCode = ord.ShipPostalCode, 
              ShipRegion = ord.ShipRegion, 
              ShipCountry = ord.ShipCountry 
                foreach (var order in orders) 
                    if (order.Freight > 30) 
                        order.Verified = true; 
                        order.Verified = false; 
            return orders; 

We have also modified your sample for your convenience which can be download from following link, 

Venkatesh Ayothiraman. 

Live Chat Icon For mobile
Up arrow icon