Currently, I'm returning a partial view with a model from my controller method. In the partial view, I'm binding an igTreeGrid using jQuery syntax.
$("#mytableidselector").igTreeGrid({ dataSource: @(Html.Raw(Json.Encode(Model.GetDataRows()))), autoGenerateColumns: false, autofitLastColumn: true, primaryKey: "PrimaryKey", foreignKey: "ParentId", foreignKeyRootValue: "0_0", initialExpandDepth: 0, enableHoverStyles: true, autoCommit: false, fixedHeaders: true, renderExpansionIndicatorColumn: true, columns: getColumns(), features: [ { name: "Filtering", type: "local", mode: "simple", columnSettings: getFilteringColumnSettings() }, { name: "Sorting", type: "local", mode: "single", applySortedColumnCss: false, columnSettings: getSortingColumnSettings() }, { name: "Updating", enableAddRow: false, enableDeleteRow: false, enableAddChild: false, editMode: "none", horizontalMoveOnEnter: true, columnSettings: getUpdatingColumnSettings() }, { name: "Selection", mode: "cell", multipleSelection: false, activation: true }, { name: "Tooltips", visibility: "always", style: "popover", cursorLeftOffset: 25, columnSettings: getToolTipColumnSettings() }, { name: "Hiding", columnChooserContainment: "window", hiddenColumnIndicatorHeaderWidth: 3, columnChooserHeight: 430, columnChooserWidth: 350, columnChooserHideText: "Hide", columnChooserShowText: "Show", columnSettings: getHidingColumnSettings(), columnHidden: handleColumnHidden }, { name: "ColumnMoving", columnSettings: getColumnMovingSettings() }, { name: "Resizing", deferredResizing: false, allowDoubleClickToResize: true, columnSettings: getResizingColumnSettings() }, { name: "Paging", mode: "allLevels",pageSize: 20, pageSizeDropDownTrailingLabel: "quotes", pageSizeDropDownLocation : "inpager", showPagerRecordsLabel : false, defaultDropDownWidth: 50, currentPageIndex: 0 } ], cellClick: treegridClickHandler, rendered: treegridRenderedHandler, headerRendered: handleHeaderRendered });
Model.GetDataRows() returns IQueryable. DataRow is a flattened custom class holding the data.
I'm observing performance issue with large number of DataRows returned. I wish to enable remote on filtering, sorting, and paging.
Would you please give me few pointers on how best to accomplish this remote functionality.
Hello,
Thank you for writing in Infragistics forums!
You can create an “ActionResult” method decorated with “GridDataSourceAction” attribute that returns your data. Then use it as a dataSourceUrl in the grid. After that you can change the type of the features to “remote”.
Kind Regards,
Petko Zhekov
Software Developer
Infragistics, Inc.
Petko,
Appreciate the response.
I updated igTreeGrid with dataSourceUrl attribute. Also, added your suggested other attributes to enable remote. [All in bold]
But, I'm getting a 404 error.
Here is the updated igTreeGrid.
$("#mytableidselector").igTreeGrid({ dataSourceUrl: '/Home/GetDataRows', enableRemoteLoadOnDemand: true, autoGenerateColumns: false, autofitLastColumn: true, responseDataKey: "DataRow", primaryKey: "PrimaryKey", foreignKey: "ParentId", foreignKeyRootValue: "0_0", initialExpandDepth: 0, enableHoverStyles: true, autoCommit: false, fixedHeaders: true, renderExpansionIndicatorColumn: true, columns: getColumns(), features: [ { name: "Filtering", type: "remote", mode: "simple", columnSettings: getFilteringColumnSettings() }, { name: "Sorting", type: "remote", mode: "single", applySortedColumnCss: false, columnSettings: getSortingColumnSettings() }, { name: "Updating", enableAddRow: false, enableDeleteRow: false, enableAddChild: false, editMode: "none", horizontalMoveOnEnter: true, columnSettings: getUpdatingColumnSettings() }, { name: "Selection", mode: "cell", multipleSelection: false, activation: true}, { name: "Tooltips", visibility: "always", style: "popover", cursorLeftOffset: 25, columnSettings: getToolTipColumnSettings() }, { name: "Hiding", columnChooserContainment: "window", hiddenColumnIndicatorHeaderWidth: 3, columnChooserHeight: 430, columnChooserWidth: 350, columnChooserHideText: "Hide", columnChooserShowText: "Show", columnSettings: getHidingColumnSettings(), columnHidden: handleColumnHidden }, { name: "ColumnMoving", columnSettings: getColumnMovingSettings() }, { name: "Resizing", deferredResizing: false, allowDoubleClickToResize: true, columnSettings: getResizingColumnSettings() }, { name: "Paging", mode: "allLevels", type: "remote", pageSize: 20, pageIndexUrlKey: "page", pageSizeUrlKey: "pageSize", recordCountKey: "totalRecordCount", pageSizeDropDownTrailingLabel: "quotes", pageSizeDropDownLocation : "inpager", showPagerRecordsLabel : false, defaultDropDownWidth: 50, currentPageIndex: 0 } ], cellClick: treegridClickHandler, rendered: treegridRenderedHandler, headerRendered: handleHeaderRendered });
My controller method -
[HttpPost] [GridDataSourceAction] public ActionResult GetDataRows() {
System.Linq.IQueryable<DataRow> dataRows = GetMyDataRows();
return Json(dataRows, JsonRequestBehavior.AllowGet); }
I removed the HttpPost, and now I'm able to hit the method in the controller.
Follow up question - If I want to pass a parameter to the method, how would i do this ?
Got this done..
dataSourceUrl: '/Home/GetDataRows?guid=@(Model.Guid)',
Still unable to get the data displayed on treegrid.
Receiving - "Uncaught Error: The remote request to fetch data has failed: ( 500 Internal Server Error ) "
From controller, I'm returning a JSon result back. Is this acceptable ? Can't I just return the IQueryable<DataRow> ?