I'm trying to create an edit template for the igx-grid that will display a tree to select a value from. The igx-drop-down with grouping is close to what I'm looking for but it only supports a single level of grouping. If it supported multiple levels of grouping I think it would get me what I'm looking for.
I was able to create an edit template by simple putting the igx-tree within it and it functions but the entire row grows to the size of the tree. I tried to get around this by using the igxOverlayService to display below the cell (similar to how the drop down works) but haven't been able to get that to work.
When the tree is first displayed it should align to the current value for the cell and when an item is selected from the tree the value for the cell should be updated to the selected value.
Any suggestions?
Hello Nate,
I am glad that you managed to achieve your requirement!
Please do not hesitate to let me know if you have any further questions on this matter.
Regards,Martin EvtimovSoftware DeveloperInfragistics, Inc.
This is exactly what I was looking for!
I ran into one tiny issue where the setTimeout call didn't always work to scroll the tree to the selected item. I moved that code to the "opened" event on the toggle and it fixed that right up.
Thank you so much for your help!!
Thank you for getting back to me!
I have updated the provided sample so that the igx-tree is placed within an igx-toggle.
Please test this sample on your side and let me know if you need any further information.
Best Regards,Martin EvtimovSoftware DeveloperInfragistics, Inc.
Thank you for the reply and example but what you did is pretty much the same as what I had done. What I'm looking for is something more like how a drop down works. Where the row stays the same size and the tree pops up as an overlay.
Thank you for contacting Infragistics Community!
I believe that you will find the following sample I have prepared very helpful. I have placed an igx-tree within the igxCellEditor template in order to handle data of type array. Please note that in order to keep the sample simple, the data used in the sample is not hierarchical, however following the same approach hierarchical data can be used as well.
In order to limit the size of the igx-tree an approach I could suggest is setting its max-height to a value depending on your requirement, as demonstrated in the sample above.
Regarding your question about how to scroll the igx-tree to the first selected node, my suggestion is to handle the cellEditEnter event and mark the required node as active. This way the node will be brought into view.
In order to update the cell value properly the igx-tree selection event should be handled and the cell.editValue should be set to the new selection collection.
Please note that during the creation of the attached sample I have noticed the following issue. Once it is fixed, handling the cellEditExit event won’t be necessary.
Please test the provided sample on your side and let me know if you need any further information.
Best Regards, Martin Evtimov Software Developer Infragistics, Inc.