Bind data with JS

[noName]

I am following instructions from here: https://help.syncfusion.com/js/grid/data-binding

I am trying to create Grid with JS and bind data to it, but I see grid with this: No records to display 

, but there are records, If I load the URL in the browser, I see the results.

This is my HTML:

<div id="Grid"></div>

and my JS:

var dm = ej.DataManager({

    url: "/users/get"

});

    $("#Grid").ejGrid({

        dataSource: dm,

        columns: [

            { field: "id", headerText: "ID", isPrimarykey: true, textAlign: ej.TextAlign.Right},

            { field: "email", headerText: "Email"},

            { field: "name", headerText: " Name"},

        ]

    });

It is same if I use custom adapter or WEBAPI adapter.

This is the action:

public IActionResult Get() { return Json(users.All()); }

and if I access it via browser it returns results, like this:

[{ "id": 1, "email": "[e-mail]",

"Name": "Your Name" }];

It works fine, If I access data from url copy and set it to the variable like this:

.....

var results = [{

    "id": 1,

    "email": "[e-mail]",

"Name": "Ivan",

}];

    $("#Grid").ejGrid({

        dataSource: results,

......

, but if I do this:

var dm = ej.DataManager({

    url: "/users/get"

});

    $("#Grid").ejGrid({

        dataSource: dm,

it doesn't work. The grid is loaded with text No records to display.

[Seeni Sakthi Kumar Seeni Raj]

Hi Customer,  

 

We could see you would like to bind Grid data from the controller action. By default, Grid provides an option to bind the data from the controller action. UrlAdaptor of the DataManager helpful to bind the data from the controller. Refer to the following Help Document.  

 

https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor 

 

To perform various data operations like filtering, sorting and paging at the server end, DataManager provides DataOperations class from the Syncfusion.EJ libraries. Refer to the following KB for various supporting Data Operaions.  

 

https://www.syncfusion.com/kb/4300/server-side-api-for-datamanager-operations 

 

Refer to the following code example.  

 

        public ActionResult DataSource(DataManager dm) 

        { 

            IEnumerable Data = OrderRepository.GetAllRecords().ToList(); 

            DataOperations operation = new DataOperations(); 

            int count = Data.AsQueryable().Count(); 

            if (dm.Skip != 0) //Paging 

            { 

                Data = operation.PerformSkip(Data, dm.Skip); 

            } 

            if (dm.Take != 0) //Paging 

            { 

                Data = operation.PerformTake(Data, dm.Take); 

            } 

            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet); 

        } 

 

<div id="Grid"></div> 

 

<script type="text/javascript"> 

 

    $(function () { 

        var dm = ej.DataManager({ 

            url: "/Home/DataSource", 

            adaptor: new ej.UrlAdaptor() 

        }); 

 

        $("#Grid").ejGrid({ 

            dataSource: dm, 

            allowPaging: true, 

                . .  

                       . .  

        }); 

    }); 

</script> 

 

Please make a note that the resultant object of the handler must be wrapped with the result/count pair.  

 

We have prepared a sample that can be downloaded from the following location.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/132361/ze/F132361-1845233804.zip 

 

Regards,  

Seeni Sakthi Kumar S. 

 

[noName]

Thanks, it works.

[Seeni Sakthi Kumar Seeni Raj]

Hi Customer,  

 

Thanks for the update.  

 

We are happy to hear that your requirement has been achieved and you are good to go. Please get back to us, if your require further assistance on this.  

 

Regards,  

Seeni Sakthi Kumar S.