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?
Hello Devid,
Your requirement of making all expandable node to be expanded after filtering is not currently supported out of the box. It has been determined to be a new product idea. You can suggest new product ideas for future versions (or vote for existing ones) at <http://ideas.infragistics.com>.
Submitting your idea will allow you to communicate directly with our product management team, track the progress of your idea at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. You can also link back to this thread for additional details.
Thank you in advance to submitting your product idea.
Thanks For the Reply, I have raised it as a feature request.
Hello David,
The igTreeGrid Filtering feature has two display modes -"showWithAncestors" and "showWithAncestorsAndDescendants". With the second one the children of the items that match the filtering criteria will also be rendered in the grid, so the expansion indicators will be retained.
You can read more about the display modes in our documentation:
http://igniteui.com/help/igtreegrid-filtering#display-mode
Here’s an example on how to set the "showWithAncestorsAndDescendants" mode via the MVC wrapper:
features.Filtering().Type(OpType.Remote).DisplayMode(TreeGridFilteringDisplayMode.ShowWithAncestorsAndDescendants);
Let me know if that solves your issue.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://www.infragistics.com/support
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>
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.
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.
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.
Thank you very much, the code you provided was excactly what I needed!