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.
Unfortunately, activation email could not send to your email. Please try again.

Javascript WebAPI Grid only shows No records to display.

Thread ID:

Created:

Updated:

Platform:

Replies:

130447 May 13,2017 11:12 AM May 19,2017 08:12 AM JavaScript 5
loading
Tags: ejGrid
JB
Asked On May 13, 2017 11:12 AM

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 [Syncfusion]
Replied On May 15, 2017 08:53 AM

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. 

Regards, 
Venkatesh Ayothiraman. 


JB
Replied On May 16, 2017 09:25 AM

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 [Syncfusion]
Replied On May 18, 2017 09:00 AM

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
Replied On May 18, 2017 11:43 AM

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 [Syncfusion]
Replied On May 19, 2017 08:12 AM

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, 

Regards, 
Venkatesh Ayothiraman. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;