Forums Ignite UI for Angular
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
Close
Alla Powers
60
How to create custom cell editor in igx grid as a dropdown control?
posted

Hi all,

I need to create a custom editor for igx-grid cell. It needs to be a multi-select tree control.

I have a tree control component but if I use it as an editor for a cell, then entire row expands to accommodate the height of my control.

<igx-column...>
    <ng-template igxCellEditor let-cell="cell" let-value >                              
         <tree-checklist></tree-checklist>
    </ng-template>
                              

How can I display custom editor in a cell as a dropdown?

Thank you in advance 

Parents
No Data
Reply
  • 740
    Offline posted

    Hello Alla,

    Thank you for contacting Infragistics Community!

    I have prepared the following sample for you demonstrating a possible way of editing a grid cell via dropdown. Please take a look at the “Available At” column. As you can observe when you enter cellEdit mode there is a disabled input field and via clicking on it an igxDropDown will appear. Тhis happens with help of the igxCellEditor template. Following the igxDropDown topic and the igxOverlay topic you have to configure custom OverlaySettings and pass them to the dropdown toggle method. This gives you the opportunity to specify the dropdown’s positionStrategy, scrollStrategy, closeOnOutsideClick and modal options. This is really useful especially for dropdowns shown in a grid because, for example, you can choose to open the dropdown above the triggering button/input if the row is displayed close to the bottom edge of the grid or to close the dropdown when scrolling the grid. I have implemented both of this strategies in the attached sample.

    Now, when the dropdown is set, you can display your tree-checklist inside an igx-drop-down-item and cancel the igxDropDown selection event. This gives you the opportunity to handle the clicks within the dropdown via the events, exposed in your component. I have demonstrated this approach as well, using the igxCarouselComponent instead of the tree-checklist. As you can observe, clicking on the “-“ button of the carousel logs a console message and closes the dropdown.

    Please let me know if you need any further information.

    Thank you for using Infragistics Components!

    Best Regards,
    Martin Evtimov
    Entry Level Software Developer
    Infragistics, Inc.

Children