Custom components in column menu

[Charles Eichelberger]

Hello, 

I was wondering if it is possible to add a custom component to the grid's column menus. I would like to add a context menu with a text input in it for changes the number of decimals a column has.

Thanks,

Charles

[Joseph Christ Nithin Issack]

Hi Charles,

   Thanks for your update.

   Currently we are checking the feasibility of your requirement, we will provide further updates on or before 25^th May, 2022.

Regards,

Joseph I.

[Charles Eichelberger]

Thank you for the update with a timeline

[Joseph Christ Nithin Issack]

Hi Charles,

  Sorry for the inconvenience caused. We have forwarded your requirement to the concerned team. We need some more time for validating the feasibility of the requirement. We will update further details on or before 31^st May 2022. We appreciate your patience until then.

Regards,

Joseph I.

[YuvanShankar Arunagiri]

Hi Charles,

We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet. We can achieve your requirement by using the beforeOpen and beforeClose event of the context menu.

[app.component.html]:

<div class="contextmenu-section">

    <div id="contextmenu-control">

        <div id="contextmenutarget">{{content}}</div>

        <ejs-contextmenu #contextmenu target='#contextmenutarget' [items]='menuItems' (beforeOpen)='itemBeforeRender($event)' (beforeClose)="onclose($event)"></ejs-contextmenu>

    </div>

</div>

[app.component.ts]:

public itemBeforeRender (args: MenuEventArgs) {

        let div: HTMLElement = createElement('div', {className: 'custom-ckb'});

        div.style.display = 'inline-flex';

        let firstSpan: HTMLElement = createElement('span');

        var textBox: TextBox = new TextBox ({

            placeholder:'menu',

            value: args.items[0].text,

            change: (e: any) => {

                var textValue = e.value;

                this.canClose = true;

                this.contextmenu.close();

            }

        });  

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

        firstSpan.appendChild(inputElem);

        textBox.appendTo(inputElem);

        div.appendChild(firstSpan);

        args.element.appendChild(div);

    }

 

    public onclose (args: BeforeOpenCloseMenuEventArgs){

        if (!this.canClose) {

            args.cancel = true;

        }

   

Sample link: https://stackblitz.com/edit/angular-27jegw-8uqv9l?file=app.component.html,app.component.ts

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

Yuvan Shankar A