Nested grid rowdetailstemplate

[andreaParticipant]

Hi,

I’m using nested jqxgrid with angular widgets. Based on a specific value for each row data I want to show OR hide the rowdetailstemplate.
Now I have the following code:

rowdetailstemplate: any = {
rowdetails: ‘<div id=”nestedGrid” style=”margin: 0;”></div>’, rowdetailsheight: 60, rowdetailshidden: false
};

but this displays the template in all rows. I want to display it based on expression.
How can I do this?

Thanks in advance

[StanislavParticipant]

Hello andrea,

Do you mean something like this?
app.component.ts

export class AppComponent {
	@ViewChild('myGrid') myGrid: jqxGridComponent;
	@ViewChild('myButton') myButton: jqxButtonComponent;

	source: any =
	{
		datafields: [
			{ name: 'FirstName' },
			{ name: 'LastName' },
			{ name: 'Title' },
			{ name: 'Address' },
			{ name: 'City' }
		],
		root: 'Employees',
		record: 'Employee',
		id: 'EmployeeID',
		datatype: 'xml',
		url: '../assets/sampledata/employees.xml'
	};

	employeesAdapter: any = new jqx.dataAdapter(this.source);

	ordersSource: any =
	{
		datafields: [
			{ name: 'EmployeeID', type: 'string' },
			{ name: 'ShipName', type: 'string' },
			{ name: 'ShipAddress', type: 'string' },
			{ name: 'ShipCity', type: 'string' },
			{ name: 'ShipCountry', type: 'string' },
			{ name: 'ShippedDate', type: 'date' }
		],
		root: 'Orders',
		record: 'Order',
		datatype: 'xml',
		url: '../assets/sampledata/orderdetails.xml'
	};

	ordersDataAdapter = new jqx.dataAdapter(this.ordersSource, { autoBind: true });

	nestedGrids: any[] = new Array();

	// create nested grid.
	initRowDetails = (index: number, parentElement: any, gridElement: any, record: any): void => {
		let id = record.uid.toString();
		let nestedGridContainer = parentElement.children[0];
		this.nestedGrids[index] = nestedGridContainer;
		let filtergroup = new jqx.filter();
		let filter_or_operator = 1;
		let filtervalue = id;
		let filtercondition = 'equal';
		let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
		// fill the orders depending on the id.
		let orders = this.ordersDataAdapter.records;
		let ordersbyid = [];
		for (let i = 0; i < orders.length; i++) {
			let result = filter.evaluate(orders[i]['EmployeeID']);
			if (result)
				ordersbyid.push(orders[i]);
		}
		let ordersSource = {
			datafields: [
				{ name: 'EmployeeID', type: 'string' },
				{ name: 'ShipName', type: 'string' },
				{ name: 'ShipAddress', type: 'string' },
				{ name: 'ShipCity', type: 'string' },
				{ name: 'ShipCountry', type: 'string' },
				{ name: 'ShippedDate', type: 'date' }
			],
			id: 'OrderID',
			localdata: ordersbyid
		}
		let nestedGridAdapter = new jqx.dataAdapter(ordersSource);
		if (nestedGridContainer != null) {

			let settings = {
				width: 780,
				height: 200,
				source: nestedGridAdapter,
				columns: [
					{ text: 'Ship Name', datafield: 'ShipName', width: 200 },
					{ text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
					{ text: 'Ship City', datafield: 'ShipCity', width: 150 },
					{ text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
					{ text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
				]
			};

			jqwidgets.createInstance(<code>#${nestedGridContainer.id}</code>, 'jqxGrid', settings);
		}
	}

	renderer = (row: number, column: any, value: string): string => {
		return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
	}

	rowdetailstemplate: any = {
		rowdetails: '<div id="nestedGrid" style="margin: 10px;"></div>', rowdetailsheight: 220, rowdetailshidden: true
	};

	columns: any[] =
	[
		{ text: 'Photo', width: 50 },
		{ text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: this.renderer },
		{ text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: this.renderer },
		{ text: 'Title', datafield: 'Title', width: 180, cellsrenderer: this.renderer },
		{ text: 'Address', datafield: 'Address', width: 300, cellsrenderer: this.renderer },
		{ text: 'City', datafield: 'City', width: 170, cellsrenderer: this.renderer }
	];

	onButtonClick(event) {
		let rows = this.myGrid.getrows();

		for (let i = 0; i < rows.length; i++) {
			let data = this.myGrid.getrowdata(i);

			if (data.City == 'London') {
				this.myGrid.showrowdetails(i)
			}
		}
	}
}

app.component.HTML

<jqxGrid #myGrid
		 [width]="850" [height]="365" [source]="employeesAdapter" [columns]="columns"
		 [rowdetails]="true" [rowsheight]="35" [initrowdetails]="initRowDetails"
		 [rowdetailstemplate]="rowdetailstemplate">
</jqxGrid>

<jqxButton #myButton (onClick)="onButtonClick($event)"
		   [width]="120" [height]="40">
	Show nested rows
</jqxButton>

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts