$("#Grid").ejGrid({ dataSource: data, allowSorting: true, create :"onCreate", columns: [ { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 }, { field: "FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 }, { field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left, width: 120 }, { field: "City", headerText: 'City', textAlign: ej.TextAlign.Left, width: 100 }, { field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Left, width: 100 } ], childGrid: { dataSource: dataManger, queryString: "EmployeeID", allowPaging: true, columns: [ { field: "OrderID", headerText: 'Order ID', textAlign: ej.TextAlign.Right, width: 75 }, { field: "ShipCity", headerText: 'Ship City', textAlign: ej.TextAlign.Left, width: 100 }, { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Left, width: 120 }, { field: "ShipName", headerText: 'Ship Name', textAlign: ej.TextAlign.Left, width: 100 } ], childGrid: { dataSource: dataManger2, queryString: "CustomerID", columns: [ { field: "CustomerID", headerText: 'Customer ID', textAlign: ej.TextAlign.Right, width: 75 }, { field: "Phone", headerText: 'Phone', textAlign: ej.TextAlign.Left, width: 100 }, { field: "Address", headerText: 'Address', textAlign: ej.TextAlign.Left, width: 120 }, { field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Left, width: 100 } ], }, }, }); }); function onCreate(args) { var detailRow = this.element.find(".e-detailrowcollapse").eq(3); this.expandCollapse(detailRow); } |