Childgrid with two parameters

[Daniel]

Hi support,

I have a working grid and childgrid view which sends the request to get the childgrid data including the defined 'queryString' parameter.

How can I add a second parameter to this childgrid request?

Some more details:

At the moment I show this in the Grid:

Destination IP	Destination name	Source IP
123.123.123.123	Test 1	122.122.122.122
123.123.123.123	Test 1	13.13.13.13
123.123.123.123	Test 1	11.11.11.11
234.234.234.234	Test 2	122.122.122.122

      

If I now open the childgrid for the first row I do not only see the first row (and more data fitting that row), but I also see more data stemming from row 2 and 3 as the queryString 'Destination IP' is the same for all of those 3 rows. That's why I need to include the 'Source IP' when expanding the childgrid - and I could not find a way to do this.

I have attached the file I am currently working with and would appreciate any help.

Thank you !

Daniel

Attachment: syncfusion_ML_threat_grid_copy.js_4e1a1f88.zip

[Sujith Kumar Rajkumar]

Hi Daniel, 

 

Greetings from Syncfusion support. 

 

Based on the provided information we could understand that your requirement is to send additional data in the server request on fetching child Grid data. You can achieve it by using the Grid’s detailDataBound event(triggers after initial detail row expand) to set the required data value to the child Grid instance’s query property and refreshing the child Grid. 

 

This is demonstrated in the below code snippet, 

 

// Grid’s detailDataBound event handler 

function onDetailDataBound(args) { 

    args.childGrid.query = new ej.data.Query().addParams('CustomData', args.data.FirstName); 

    args.childGrid.refresh(); 

} 

 

On doing this the additional data will be send along with the request as shown in the below image, 

 

 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/buaps6 

 

More details on the query property can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#sending-additional-parameters-to-the-server 

 

API links: https://ej2.syncfusion.com/documentation/api/grid/#detaildatabound 

                  https://ej2.syncfusion.com/documentation/api/grid/#query 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Daniel]

Hi Sujith,

apologies for the late reply.

Your solution works - thank you for that.

I have seen that your approach triggers 2 queries - one with the original queryString, and then one with the second parameter. Is there a way to only send one request including both parameters to the external API ?

[Praveenkumar Gajendiran]

Hi Daniel,  

  

Thanks for your update. 

  

Based on your query, we suspect that your requirement is to send the additional data in the initial server request on fetching child Grid data. You can achieve it by using the Child Grid’s load event to set the required data value to the child Grid instance’s query property. This is demonstrated in the below code snippet,  

  

// ChildGrid’s load event handler  

function load() {  

    this.query= new ej.data.Query().addParams('CustomData', this.parentDetails.parentRowData.FirstName);   
}  

  

On doing this the additional data will be send along within the single request(i.e, the initial server request) as shown in the below image,  

  

   

  

We have prepared a sample based on this for your reference. You can find it below,  

  

Sample: https://stackblitz.com/edit/buaps6-hlfkqu?file=index.js
  

More details on the query property can be checked in the below documentation link,  

  

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#sending-additional-parameters-to-the-server  

  

API links: https://ej2.syncfusion.com/documentation/api/grid/#load 

                  https://ej2.syncfusion.com/documentation/api/grid/#query  

  

Please get back to us if you require any further assistance.  

  

Regards, 
Praveenkumar G 

[Daniel]

Hi Praveenkumar,

works like a charm - thank you very much !

Have a great day,

Daniel

[Annica Mistry]

The only way to do this is to create a new function that you can call from within the function that has the existing parameter.

One way of doing this is by adding a second parameter. Let's take a look at what it would look like:

function myFunction(val) {

// function body goes here

}

// add the second parameter:

myFunction('2');

Do you want more solutions on javascript?

Learn javascript Tutorial Online

 

[Praveenkumar Gajendiran]

Hi Daniel, 

You are welcome. We glad that the provided solution resolved your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Praveenkumar G 

[Praveenkumar Gajendiran]

Hi Annica,

Thanks for contacting Syncfusion support.

Do you facing any issue in Syncfusion Grid component, if yes, please explain/elaborate on your exact query with more details based on which we will validate from our end and provide the further details.

Regards,
Praveenkumar G