Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
100
Column edit template with tree control
posted

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?

Parents
No Data
Reply
  • 740
    Offline posted

    Hello Nate,

    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.

Children