1. Home
  2. Forum
  3. jQuery
  4. Bind data with JS

Bind data with JS

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": "[email protected]",
"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": "[email protected]",
"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.


3 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 29, 2017 06:30 AM UTC

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.  
 
 
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.  
 
 
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.  
 
 
Regards,  
Seeni Sakthi Kumar S. 
 


NO noName August 29, 2017 07:39 PM UTC

Thanks, it works.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 30, 2017 04:25 AM UTC

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. 
 
 


Loader.
Up arrow icon