jQuery UI Widgets Forums Grid Nested grid rowdetailstemplate

This topic contains 1 reply, has 2 voices, and was last updated by  Stanislav 6 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Nested grid rowdetailstemplate #99696

    andrea
    Participant

    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

    Nested grid rowdetailstemplate #99730

    Stanislav
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.