1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. dynamically load row child content in a datagrid.

dynamically load row child content in a datagrid.

Hi, I'd like to know what would be the best way to dynamically load child content of a row on expand from data returned by an ajax request?


.

4 Replies
DA David December 4, 2020 06:45 PM UTC

So what I need to do is:
1) When the user clicks on the triangle to expand, get the ID attribute of the row item (in the example, it would be the the Employe ID).
2) Make an Ajax call using the ID
3) The contoller will either compute and return a list of objects or a partial view
4) Either update the datasource of the childGrid with the list or render the partial view inside the detailTemplate (or something else like that that does the trick)

RS Rajapandiyan Settu Syncfusion Team December 7, 2020 12:35 PM UTC

Hi David, 

Greetings from Syncfusion support. 

Query: I'd like to know what would be the best way to dynamically load child content of a row on expand from data returned by an ajax request? 

Based on your requirement, you need to dynamically load the child-Grid data using ajax call. We suggested you use load event of child-Grid to achieve your requirement. 


The load event will be triggered at the initial expand of each child-Grids. In that event, you can get the current queryString value by using parentKeyFieldValue property. 

Now, you can send the ajax post to your server with the parentKeyFieldValue and bind the returned data to the child-Grid by using dataSource property. 


Please refer to the below code example and sample for more information. 

[code example] 
 
Index.cshtml 
 
@{ 
    var ChildGrid = new Syncfusion.EJ2.Grids.Grid() 
    { 
        QueryString = "EmployeeID", 
        Load = "load", 
        Columns = new List<Syncfusion.EJ2.Grids.GridColumn> { 
        new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" }, 
        new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, 
        new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" }, 
        new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" }, 
}, 
    }; 
} 
 
    <div class="control-section"> 
        <ejs-grid id="HierarchyPrint" dataSource="ViewBag.DataSource2" childGrid="ChildGrid"> 
            <e-grid-columns> 
                <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column> 
                <e-grid-column field="ShipName" headerText="Ship Name" width="120"></e-grid-column> 
            </e-grid-columns> 
        </ejs-grid> 
    </div> 
 
    <script> 
        function load(args) { 
            console.log(this.parentDetails.parentKeyField); 
            console.log(this.parentDetails.parentKeyFieldValue); 
            var ajax = new ej.base.Ajax({ 
                type: "POST", 
                url: '/Home/UpdateUploadGrid', 
                contentType: "application/json; charset=utf-8", 
                data: JSON.stringify([{ EmployeeID: this.parentDetails.parentKeyFieldValue }]) // send the queryString value to the server 
            }); 
            ajax.send().then(function (result) { 
                var data = JSON.parse(result); 
                console.log(this); 
// bind the result (array of Object) data to the child-Grid 
                this.dataSource = data; 
                console.log(data); 
            }.bind(this)); 
        } 
    </script> 
 
 
 
 
[HttpPost] 
        public IActionResult UpdateUploadGrid([FromBody] List<extradata> data) // use the correct data type to deserialize the data 
       { 
// filter the data based on queryString value 
            List<BigData> tlistFiltered = BigData.GetAllRecords().Where(item => item.EmployeeID == data[0].EmployeeID).ToList(); 
            return Json(tlistFiltered); 
        } 
        public class extradata 
        { 
            public int EmployeeID { get; set; } 
        } 
 
 
Screenshot #1: Request to the server 
 
 
Screenshot #2: At server 
 
 
Screenshot #3: Response from the server 
 
 
Find the below sample for your reference. 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

DA David December 7, 2020 04:26 PM UTC

Awesome, it works!
There are two more things that would make it even better:
- While waiting for the data, would it be possible to display a spinner or some text (like "Loading...") instead of "No records to display" in the childGrid?
- Is it possible to not show the header of the childGrid?

Thank you very much! :)

RS Rajapandiyan Settu Syncfusion Team December 8, 2020 01:04 PM UTC

Hi David, 

Thanks for your update. 

Query #1: While waiting for the data, would it be possible to display a spinner or some text (like "Loading...") instead of "No records to display" in the childGrid? 

You can achieve your requirement by using dataBound event of child-Grid. In that event, we have changed the innerText of empty row in the Grid. 



function dataBound_childGrid(args) { 
        if (this.element.querySelector(".e-gridcontent .e-emptyrow") && this.dataSource.length == 0) { 
// change the innerText of empty row using .e-emptyrow class 
            this.element.querySelector(".e-gridcontent .e-emptyrow").firstElementChild.innerText = "Loading..."; 
        } 
    } 


Query #2: Is it possible to not show the header of the childGrid? 

Yes, you can achieve your requirement by using created and dataBound event of child-Grid. In that event, we hide the child-Grid’s header by setting display as none to the ‘.e-gridheader’ element. 



@{ 
    var ChildGrid = new Syncfusion.EJ2.Grids.Grid() 
    { 
        QueryString = "EmployeeID", 
        Load = "load_childGrid", 
        Created= "created_childGrid", 
        DataBound = "dataBound_childGrid", 
------ 
    }; 
} 
------- 
function created_childGrid(args) { 
        this.element.querySelector('.e-gridheader').style.display = 'none'; 
    } 
    function dataBound_childGrid(args) { 
        this.element.querySelector('.e-gridheader').style.display = 'none'; 
    } 

 
Find the below sample for your reference. 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

Loader.
Up arrow icon