Nested grids

[RedantJParticipant]

Relevant background information:
I am using arrays with my current project.
I have been using this as a model (with some changes).

Requirements:
To show a detailed view of the parent row

------------------------------
| - | ID | Foo1 | Foo2 | Foo3 |
------------------------------
| > | 01 | 1111 | Pete | Horse
| > | 02 | 1112 | Doug | Sheep
| > | 03 | 1113 | Sara | Iguana
| > | 04 | 1114 | Jane | Plain

Desired look:

------------------------------
| - | ID | Foo1 | Foo2 | Foo3 |
------------------------------
\/ | 01 | 1111 | Pete | Horse
 --------------------
 | ID | Foo4 | Foo5 |
 --------------------
 | 01 | Mary | Ford |
 --------------------
\/ | 02 | 1112 | Doug | Sheep
 --------------------
 | ID | Foo4 | Foo5 |
 --------------------
 | 02 | Mark | Saab |
 --------------------
| > | 03 | 1113 | Sara | Iguana
| > | 04 | 1114 | Jane | Plain

What is happening right now:

------------------------------
| - | ID | Foo1 | Foo2 | Foo3 |
------------------------------
\/ | 01 | 1111 | Pete | Horse
 --------------------
 | ID | Foo4 | Foo5 |
 --------------------
 | 01 | Mary | Ford |
 | 02 | Mark | Saab |
 | 03 | Otto | _MG_ |
 | 04 | Dana | Bus_ |
 --------------------
\/ | 02 | 1112 | Doug | Sheep
 --------------------
 | ID | Foo4 | Foo5 |
 --------------------
 | 01 | Mary | Ford |
 | 02 | Mark | Saab |
 | 03 | Otto | _MG_ |
 | 04 | Dana | Bus_ |
 --------------------
| > | 03 | 1113 | Sara | Iguana
| > | 04 | 1114 | Jane | Plain

The bit of code in question:

// create nested grid.
var initlevel2 = function (index) {
	var grid = $($.find('#subgrid' + index));
	var dataAdapter = new $.jqx.dataAdapter(source);
	if (grid != null) {
		grid.jqxGrid({source: dataAdapter, editable: true, width: 680, height: 100,
			columns: [
			  { text: 'ID', dataField: 'UID', width: 80 },
			  { text: 'foo4', dataField: 'foo3', width: 160 },
			  { text: 'foo5', dataField: 'foo4', width: 210 },
			]
		});
	}
};...

…and here…

$("#jqxgrid").jqxGrid(
 {
        width: 1200,
        source: dataAdapter,
        editable: true
	rowdetails: true,
	initrowdetails: initlevel2,
	rowdetailstemplate: { rowdetails: "<div id='subgrid' style='margin: 10px;'></div>", rowdetailsheight: 120, rowdetailshidden: true },
        columns: [
{ text: 'ID', dataField: 'UID', width: 80 },
{ text: 'foo1', dataField: 'foo1', width: 160 },
{ text: 'foo2', dataField: 'foo2', width: 210 },
{ text: 'foo3', dataField: 'foo3', width: 210 }....

I don’t know the correct question to ask, which is why I took the time to illustrate my requirements. I want #subgrid to show only the details of the row (represented by UID).

Any advice?

[ivailoParticipant]

Hi RedantJ,

This demo will be helpful for you.
In initrowdetails you can set filtering condition and nested grid will display only correct items.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[RedantJParticipant]

That would make sense to apply a filter. Thank you, ivalio!

[RedantJParticipant]

I’m getting it now: I will also need to add the addrow, deleterow and updaterow functions to the subgrid, as well.

[ivailoParticipant]

Hi RedantJ,

You can use addrow, deleterow and updaterow functions regularly.
Only have to use the correct subrid ID’s and to check are subgrids initialized.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts