Syncfusion ejGrid not displaying data from Web Api source

Question

I have the following controller coded as follows which returns JSON:

public class CustomersController : ApiController
{
    public object Get()
    {
        NorthwindEntities db = new NorthwindEntities();
        var data = db.Customers.ToList();
        return data;
    }

I made sure that my serializer is using JSON by adding this to my WebApiConfig.cs file:

        config.Formatters.Remove(config.Formatters.XmlFormatter);
        config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));
        config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;

Now I tried the following code using Syncfusion Javascript ejGrid:

        $('#Grid').ejGrid({
            dataSource: ej.DataManager({ url: "http://localhost:54027/api/Customers/" }),
            toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] },
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
            isResponsive: true,
            enableResponsiveRow: true,
            allowPaging: true,
            allowFiltering: true,
            allowGrouping: true,
            allowResizing: true,
            allowSorting: true,
            columns: [
                { field: "CustomerID", isPrimaryKey: true, headerText: 'CustomerID', validationRules: { required: true, minlength: 30 }, width: 100 },

                { field: "CompanyName", headerText: 'CompanyName', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "ContactName", headerText: 'ContactName', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "ContactTitle", headerText: 'ContactTitle', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "Address", headerText: 'Address', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "City", headerText: 'City', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "Region", headerText: 'Region', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "PostalCode", headerText: 'PostalCode', validationRules: { required: true, minlength: 10 }, width: 70, priority: 3 },
                { field: "Country", headerText: 'Country', validationRules: { required: true, minlength: 30 }, width: 100 },
                {
                    headerText: "Manage Records",
                    commands: [
                        { type: ej.Grid.UnboundType.Edit, buttonOptions: { contentType: "imageonly", prefixIcon: "e-edit" } },
                        { type: ej.Grid.UnboundType.Delete, buttonOptions: { contentType: "imageonly", prefixIcon: "e-delete" } },
                        { type: ej.Grid.UnboundType.Save, buttonOptions: { contentType: "imageonly", prefixIcon: "e-save" } },
                        { type: ej.Grid.UnboundType.Cancel, buttonOptions: { contentType: "imageonly", prefixIcon: "e-cancel" } }
                    ],
                    isUnbound: true
                }
            ]
        });

When I run this, the grid is empty. I think the problem is in the datasource because Chrome console reports the error: Cannot read property 'length' of undefined. Or maybe, because the list is empty, it's trying to get the length of something empty.

score 1 · Answer 1 · answered Oct 13 '16 at 07:51

You should return data as Item and Count and also need to set adaptor while binding datasource. Here i have post the code.

var dataManager = ej.DataManager({ url:"/api/Orders", adaptor: new ej.WebApiAdaptor() });

C#

return new {
            Items = data, Count = data.Count()
        };

For more reference please go through this link.

https://help.syncfusion.com/js/grid/data-binding#webapi

Regards, Sunil Prabakar C

Syncfusion ejGrid not displaying data from Web Api source

1 Answers1