Set DataSource to JavaScript Array

[Rowan]

I am currently using the Grid in a view in ASP MVC 5.

I have a list of objects stored in the script in the page called list e.g:

var list = [{...}, {...}, {...}];

How can I set the Grid's data source to use this javascript list?

I tried setting @Html.EJS().Grid("Results").DataSource("list"), however, this does not work.

[Seeni Sakthi Kumar Seeni Raj]

Hi Rowan , 

 

 We suggest you to use the below solution to resolve this problem. Here we use the load event to inject datas into the grid.  

 

index.cshtml 

 

@Html.EJS().Grid("FlatGrid").Load("load").Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); 

   ... 

 

<script> 

 

    var List = [{ OrderID: 12345, CustomerID: "VINET", Country: "Italy", State: "france" }, 

    { OrderID: 12345, CustomerID: "SUPRD", Country: "Italy", State: "france" }, 

    { OrderID: 12345, CustomerID: "HANAR", Country: "Italy", State: "france" }, 

    { OrderID: 12345, CustomerID: "TOMSP", Country: "Italy", State: "france" } 

    ] 

 

    function load(args) { 

        this.dataSource = List; 

    } 

 

</script> 

Please get back to us if you need further assistance 

 

Regards 

Seeni Sakthi Kumar S 

[Seeni Sakthi Kumar Seeni Raj]

Hi Ronald, 

 

Query : can I define queryString? 

 

Yes, youcan define querystring to get the field to be matched. Here we use "EmployeeID" as a querystring. 

 

Query : can I use parentDetails.parentKeyFieldValue?

 

Yes, you can use it by the following code "e.data.EmployeeID". 

 

A working sample is attached below for your reference. DataSource for the childGrid was filtered based on the e.data.EmployeeID using the DataManager. 

 

index.cshtml 

 

<script type="text/x-template" id="detailtemplate1">  

    <div class="detailgridone"></div> 

    <div class="detailgrid2"></div> 

</script> 

 

function detailDataBound(e) { 

 

       let data = [{ 

           OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), 

           ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', 

        ... 

             ]{ 

 

 let firstgrid = new ej.grids.Grid({ 

           dataSource: [], 

           columns: [ 

           { field: 'EmployeeID', headerText: 'Employee ID', width: 110 } 

           ] 

         }); 

         firstgrid.appendTo(e.detailElement.querySelector('.detailgridone')); 

         let queryString = 'EmployeeID';  //  queryString used 

         let query = new ej.data.Query().where(queryString, 'equal', e.data.EmployeeID);  //  parentKeyFieldValue used  

         new ej.data.DataManager({ json: data }).executeQuery(query).then((e) => { 

         firstgrid.dataSource = e.result; 

        }) 

 

       let secondgrid = new ej.grids.Grid({ 

           dataSource: [], 

           columns: [ 

            { field: 'EmployeeID', headerText: 'EmployeeID', width: 110 } 

            ] 

        }); 

           secondgrid.appendTo(e.detailElement.querySelector('.detailgrid2')); 

           queryString = 'EmployeeID';   //  queryString used 

           query = new ej.data.Query().where(queryString, 'equal', e.data.EmployeeID);  //  parentKeyFieldValue used  

           new ej.data.DataManager({ json: data }).executeQuery(query).then((e) => { 

           secondgrid.dataSource = e.result; 

        }) 

 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/245141-detailTemplate_-_(2)751596620 

 

Regards, 

Seeni Sakthi Kumar S