Hi,
I need to load the child elements in my igHierarchical grid but on demand. Here was my code previously , where I load everything at once.
$("#AllTasksGrid").igHierarchicalGrid({ initialDataBindDepth: 1, showHeader: true, responseDataKey: 'rows', dataSource: '@Url.Action("GetAllTasksAndActivities", "Home")', primaryKey: "id", width:'100%', autoGenerateColumns: false, columns: [ { headerText: "Id", key: "id", dataType: "string", hidden: true }, { headerText: "Code", key: "businessCode", dataType: "string", width:'10%'}, { headerText: "Type", key: "taskType", dataType: "string", width:'9%'}, { headerText: "Task/Activity Name", key: "taskName", dataType: "string", width:'50%'}, { headerText: "Country", key: "countryList", dataType: "string" , width:'13%'}, { headerText: "Status", key: "Status", dataType: "string" , width:'5%'}, { headerText: "Start Date", key: "StartDate", dataType: "string", width:'7%' }, { headerText: "Deadline", key: "Deadline", dataType: "string" , width:'9%'} ], autoGenerateLayouts: false, columnLayouts: [ { key: "Activities", autoGenerateColumns: false, primaryKey: "ActivityId", foreignKey: "id", columns: [ { key: "ActivityId", headerText: "Activity Code", dataType: "string" }, { key: "Name", headerText: "Name", dataType: "string" }, { key: "Status", headerText: "Status", dataType: "string" }, { key: "StartDate", headerText: "Start Date", dataType: "string" }, { key: "Deadline", headerText: "Deadline", dataType: "string" } ] } ], features: [ { name: "Paging", type: "remote", pageSize: 10, recordCountKey: 'records' }, { name: "Sorting", type: "remote" }, { name: "Tooltips", columnSettings: [ { columnKey: "taskname", allowTooltips: true } ], visibility: "overflow", showDelay: 100, hideDelay: 100 }
] });
I want to populate my child grid with a second datasource (action method) and not the one with which I am populating my parent grid.Is there a way to specify a second datasource for the child grid . Also , how do I make the the child grid populate on Demand(when expanded) . Also, I want to use javascript for grid initialization and not the mvc wrappers as is the code above.
Thanks and regards,
Sudipto
Of course you can specify loadOnDemand for igHierarchicalGrid and set in each columnLayout DataSourceUrl(which could be different then URL in parent URL). On the other hand if you are using service with OData version 2 you can specify deferred object with specific URL for each layout. Now I can send you a sample which shows load on demand with different URL in the column layout.
$(function () {
$('#Grid').igHierarchicalGrid({
dataSource: '/odata/Customers',
autoGenerateColumns: false,
autoGenerateLayouts: false,
mergeUnboundColumns: false,
responseDataKey: 'value',
generateCompactJSONResponse: false,
enableUTCDates: true,
columns: [{
key: 'CompanyName',
dataType: 'string',
headerText: 'Company Name'
}, {
key: 'Address',
headerText: 'Address'
key: 'City',
headerText: 'City'
key: 'Region',
headerText: 'Region'
key: 'Phone',
headerText: 'Phone'
key: 'CustomerID',
hidden: true
}],
columnLayouts: [{
dataSource: '/odata/Orders',
key: 'OrderDate',
dataType: 'date',
headerText: 'Order Date'
key: 'ShipAddress',
headerText: 'Shipping Address'
key: 'ShipCity',
headerText: 'Shipping City'
key: 'OrderID',
dataType: 'number',
dataSource: '/odata/Orders(10308)/Order_Details',
key: 'ProductID',
headerText: 'ID'
key: 'Order_Details',
primaryKey: 'ProductID',
foreignKey: 'OrderID',
localSchemaTransform: false
key: 'Orders',
primaryKey: 'OrderID',
foreignKey: 'CustomerID',
odata: false,
rest: false,
primaryKey: 'CustomerID',
initialDataBindDepth: 0,
height: '500px',
virtualization: true,
});
Thanks,
Miro
Miroslav Hristov"]
Hi Miro,I tried this approach of specifying different URLS in child grid configs, but its directly taking that URL as JSON, and throwing the parsing error.