We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How do I add a ColorPicker to a ContextMenu?

Hello:


I need to show a color picker in a context menu. How can I achieve this? Also, how do I display any angular component in a ContextMenu?


Thank you.


3 Replies 1 reply marked as answer

YA YuvanShankar Arunagiri Syncfusion Team January 23, 2023 12:21 PM UTC

Hi Anthony,


We have checked your reported query and prepared the sample based on your requirement. Please refer to the below code snippet and sample link. Using the beforeItemRender event, we can customize the menu item shown as below.


UG link: https://ej2.syncfusion.com/documentation/context-menu/template-and-multilevel-nesting/#template


<ejs-contextmenu #contextmenu target='#contextmenutarget' [items]='menuItems' (beforeItemRender)='onItemRender($event)'></ejs-contextmenu>

…………………….

public onItemRender (argsMenuEventArgs) {

        let colorPickerColorPicker = new ColorPicker({ 

            value: '#008000'mode: 'Picker'modeSwitcher: falseshowButtons: falseinline: true,

            change: (e :any=> {

                console.log(e.value);

            }

        });

        let firstSpanHTMLElement = createElement('span');

        const inputElemHTMLElement = createElement('input', { className: 'e-input'attrs: { type: 'text' }});

        firstSpan.appendChild(inputElem);

        colorPicker.appendTo(inputElem);

        args.element.appendChild(firstSpan);

    }


Sample link: https://stackblitz.com/edit/angular-dvctza?file=src%2Fapp.component.ts


Get back to us if you need any further assistance on this. 


Regards,

YuvanShankar A


Marked as answer

AN Anthony January 24, 2023 05:18 PM UTC

Thanks for the solution. I have everything working.





YA YuvanShankar Arunagiri Syncfusion Team January 25, 2023 05:27 AM UTC

You are welcome, Anthony. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any other assistance.


If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.


Loader.
Live Chat Icon For mobile
Up arrow icon