Hello,
I've been looking at the example here: http://www.igniteui.com/tree-grid/load-on-demand
Before expanding a node: when the grid is unfiltered the top level 381 node has the expand icon next to it. However when I filter for 381, the expand icon is lost.
Is there a way of making "All expandable unexpanded nodes be expandable" IE if it was possible to expand it before loading its children then is it possible to let be be expanded when it meets filtering requirements?
Thank you very much, the code you provided was excactly what I needed!
Hello David,
In general it’s not recommended to mix local and remote features since the data on which they operate will be different and may yield unexpected results.
Local features expect the whole data to be available on the client and will not take into account values that are not yet loaded on the client.
For instance, if you filter by some value that exists in some child sub-level you will get no results until that child level is expanded and it’s data is loaded.
For this particular scenario where you want the children to be loaded on demand as filtered results after the data is already filtered locally you could re-apply the filtering after the child data becomes available (after the parent row is expanded) in order for it to also be rendered in the current filtering result view. There’s no specific events for load on demand, but you could use the rowExpanding event to handle that specific scenario:
https://staging.igniteui.local/help/api/2017.2/ui.igtreegrid#events:rowExpanding
If you’re expanding a row while there are filtering expressions currently applied and that row does not have children yet (loads them on demand), cancel the event, manually call the expandRow method and in the callback function re-apply the filtering and restore the expansion states, for example:
$(document).delegate("#TreeGrid", "igtreegridrowexpanding", function (evt, ui) {
var row = ui.row, ds = ui.owner.dataSource;
var children = ds.getChildrenByKey(parseInt(row.attr("data-id")));
//check if this is expanding child data on demand when there is already a filter applied.
if (children.length === 0 && ds.settings.filtering.expressions.length > 0) {
$("#TreeGrid").igTreeGrid(
"expandRow",
//methods are type sensitive. If the type of PK is number parse it accordingly.
parseInt(row.attr("data-id")),
function () {
//In callback function re-apply filtering so that the new child data is taken into account and expanded.
$("#TreeGrid").igTreeGridFiltering("filter", ds.settings.filtering.expressions);
$("#TreeGrid").igTreeGrid("expandRow",parseInt(row.attr("data-id")));
});
return false;
}
Let me know if you have any questions.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://ko.infragistics.com/support
Implementing filtering on our API is currently not an option, it would be best to let the grid handle the filtering while still support loadondemand in filtermode.
That is not possible?
Could a solution be to trigger an event when the grid retrieves the childrows and then manually update the grid datasource and refilter?
I have not found an event for when data is retrieved using load on demand.
That’s probably because the filtering feature is local. Since LoadOnDemand is enabled the child data will not be available on the client-side. When filtering is local it operates only on the data that is currently available on the client so it will not take into account the child data until it gets loaded on the client.
Set the type to remote so that the child data is also retrieved when filtering is applied:
<feature name="Filtering" type="remote" advanced-mode-editors-visible="true" mode="advanced" display-mode="showWithAncestorsAndDescendants"></feature>
And let me know if that solves your issue.
Thanks for you're reply.
The "showWithAncestorsAndDescendants" got me one step further, but not where I wanted.
With that setting I am now able to click the expand button, and the expand button turns into a collapse button, but the childrows are not displayed until I remove the filtering text.
(I expected it to work because the filter I applied would also apply to the child rows)
If I then do the same procedure with the same parent row, I can now see child rows, because its already loaded to the client.
Therefore it does not work while loading childtrades ondemand, but only when its already been loaded in the grid.
How can I make it work like I want?
I should mention that I use remote feature only for loading child trades, filtering and all other features are local.
Sorry for not being able to add a jsfiddle, I would then need a public API, and the help pages only contain sample for MVC. I use AngularJS.
<features> <feature name="Resizing" column-resized="{{ColumnResized}}"></feature> <feature name="Sorting"></feature> <feature name="Hiding" column-hidden="{{ColumnHidden}}" column-shown="{{ColumnShown}}"></feature> <feature name="Filtering" type="local" advanced-mode-editors-visible="true" mode="advanced" display-mode="showWithAncestorsAndDescendants"></feature> <feature name="ColumnMoving" column-moving-dialog-containment="window" mode="deferred" column-moving="{{ColumnMoving}}" column-moved="{{ColumnMoved}}"> </feature> <feature name="RowSelectors" enable-check-boxes="true" check-box-mode="biState" enable-select-all-for-paging="true" enable-row-numbering="false" row-selector-column-width="25px" inherit="true"> </feature> <feature name="Selection" mode="row" multiple-selection="true" allow-multiple-range-selection="true" mouse-drag-select="true" event-row-selection-changed="MainGridSelectionsChanged"> </feature> <feature name="Paging" show-page-size-drop-down="true" page-size-drop-down-location="inpager" mode="rootLevelOnly" page-size="5000" page-size-list="50,100,500,1000,2000,5000" page-size-changed="{{ChangedPaging}}"> </feature> <feature name="Tooltips" visibility="always" show-delay="0" hide-delay="350" tooltip-shown="{{IgGridToolTipShownEvent}}"> </feature> </features>