Triggering rowDetailsRenderer on Click of Row

[jacobraccuiaParticipant]

I have a grid and each row has associated row details. I want these details to be hidden and loaded via AJAX on click of the row. (I can handle that code and don’t need help with that).

I have the code that triggers when clicked:
$('#treeGrid').on('rowSelect', function (event) { // etc

How can I render the row details for a row when clicked? If this isn’t possible, how can I append a row beneath the current row? AddRow seems to only add rows to the top or bottom of the Table.

I can provide additional information or code if need be, but any push to the right direction will be enough. Thanks!

[HristoParticipant]

Hello jacobraccuia,

Unfortunately, there is no such option. I would like to suggest you look at “Nested Grids”, “Row Details” (jqxGrid) and “Nested Tables” (jqxDataTable) as an eventual alternative.

Yes, it is possible – you could add a new row as a child to another item with addRow method.
Please, take a look at this example:

var parentID = 8;
$("#treeGrid").jqxTreeGrid('addRow', null, {
	FirstName: "Name",
	LastName: "Last Name"
}, 'first', parentID);

Thank you for your understanding.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[jacobraccuiaParticipant]

I wish I saw this earlier! I was waiting for an email.

Thanks so much for replying back to me! I did not think about adding a row to the child and that is a great idea. I will let you know if this works for me 🙂

Actually – I have a question. I am ultimately trying to load a second Tree Grid inside of this one, on click. Is it possible to have a new child row with only one (unique) column?

[HristoParticipant]

Hello jacobraccuia,

Unfortunately, it is not possible.
It is possible to use aggregatesRenderer callback member for this requirement, you could try it.
Please, take a look at this demo as a base:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-manual-aggregates-calculation.htm?light
Could you give more details what you want to achieve and I can give you a better a solution?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[jacobraccuiaParticipant]

What you showed me is really cool!

So I have a tree grid hierarchy of Accounts, and when you click on an Account, ideally, its details slide open (or new row) and inside this row there is a new grid with a list of Contacts associated with the account. The columns are all unique.

I’m using a regular grid to display the contacts, and I currently have the contacts for the grid loading on click of the row, but the grid is beneath the treegrid.

I am thinking that my solution will probably be to load the second grid in a modal window. It might also provide a better UX anyways.

thank you for your help,

Jacob

[HristoParticipant]

Hello jacobraccuia,

The solution with modal Grid is a good approach as you mention.
I would suggest you to think if it is possible to use some of the previous examples.
Also, I would like to suggest you one more example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dropdowngrid.htm?light
(that could try to add to aggregates fields)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts