Javascript WebAPI Grid only shows No records to display.

[JB]

Hello,

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.

Thanks,

Jim

HTML:

head inlcude files:

    <!-- Essential Studio for JavaScript  theme reference -->
    <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/15.1.0.41/js/web/flat-azure/ej.web.all.min.css" />

    <!-- 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/15.1.0.41/js/web/ej.web.all.min.js"></script>


body:

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

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

            $("#Grid").ejGrid({
                dataSource: dataManager,
                allowPaging: true,
                columns: ["customerID", "lastName", "firstName"]
            });
        });

C#:
 // 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()
               
            };
          

[Venkatesh Ayothi Raman]

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, 

Sample:http://www.syncfusion.com/downloads/support/forum/125168/ze/WebApiSample_Modified_(2)344467540  

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. 

Regards, 

Venkatesh Ayothiraman. 

[JB]

Hello,
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.

Thanks,
Jim

[Venkatesh Ayothi Raman]

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? 

Regards, 

Venkatesh Ayothiraman. 

[JB]

Hello,

Please find file:

syncfusionWebAPITest_1_d6a0abf0.7z
attached.

I was having problems getting it uploaded last time. 

Please let me know if there are any questions.

Thanks,
Jim

Attachment: syncfusionWebAPITest_1_d6a0abf0.7z

[Venkatesh Ayothi Raman]

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, 

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 

                                                                  }).ToList(); 

                foreach (var order in orders) 

                { 

                    if (order.Freight > 30) 

                        order.Verified = true; 

                    else 

                        order.Verified = false; 

                } 

            } 

            return orders; 

        } 

 

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

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusionWebAPITest_1-2060250236 

Regards, 

Venkatesh Ayothiraman.