Check box in treegrid ContextMenu

[Chris Johnson]

We tried with checkbox in ejs contextmenu, its working, but what we need is check box should function in treegrid contextmenu (ejs-treegrid).  Can you please suggest us how can we handle this?

[Farveen Sulthana Thameeztheen Basha]

Hi Chris, 

Greetings from Syncfusion Support. 

Query#:- We tried with checkbox in ejs contextmenu, its working, but what we need is check box should function in treegrid contextmenu (ejs-treegrid) 

Before proceeding this, we need some more additional details to find the cause of the issue. Share us the following details. 

1. Do you want to perform any actions on clicking the checkbox. Share the details.
2. Detail Explanation of your requirement.
3. Share us the purpose of rendering checkbox inside Context menu.(use case of this requirement)

From the above details we will provide you solution as early as possible. 

Regards, 

Farveen sulthana T  

[Chris Johnson]

Alright, let me explain in brief about the requirement, you can in the above that Filter - On/off, yes its working fine in contextmenu, but what we needs is that to be changed to enable Off and On in Check Box (Checked is On/Uncheck is off.  We are using treegrid template.  We tried with,

Show UI components in ContextMenu

UI components can also be placed inside the each li element of ContextMenu.

In the following example, CheckBox component is placed inside each li element and this can be achieved by creating CheckBox component in beforeItemRender event and appending it into the li element.

<ejs-contextmenu id='contextmenu' [target]='target' [items]= 'menuItems' (beforeItemRender)='itemRender($event)' (beforeClose)='beforeClose($event)'></ejs-contextmenu>`

Where we are struck is, how can we get <ejs-contextmenu> into..

<ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' height='350' [treeColumnIndex]='1'

        id="treegridcomp" (created)='created($event)' (beforePaste)='beforePaste($event)' allowPaging='true' [pageSettings]='pageSettings' allowExcelExport='true' allowPdfExport='true'

        [allowSelection]='true' [selectionSettings]='selectionOptions' allowSorting='true'

<ejs-treegrid>

or how can we handle checkbox contextmenu in treegrid template.

Hope this clears your doubt, if not kindly revert me back.

Thanks and regards,

Chris Johnson

[Farveen Sulthana Thameeztheen Basha]

Hi Chris, 

Thanks for your additional details. 

From your query we understood that you need to render Contextmenu with Checkbox component and enable/disable Filtering based on that. To achieve that we have rendered Contextmenu with Checkbox as like explained in the documentation link and set target as “.e-gridheader” to display the context in TreeGrid header. 

Refer to the code below:- 

App.Component.html 

  <ejs-treegrid #treegrid 

                      [dataSource]="data" 

                      childMapping="subtasks" 

                      height="350" 

                      allowPaging="true" 

                      [pageSettings]="pageSettings" 

                      allowSorting="true" 

                      [treeColumnIndex]="1"> 

            <e-columns> 

                <e-column field="taskID" 

                          headerText="Task ID" 

                          width="100" 

                          textAlign="Right"></e-column> 

            </e-columns> 

              .     .    . 

</ejs-treegrid> 

  <ejs-contextmenu id="contextmenu" target=".e-gridheader" [items]="menuItems" 

     (beforeItemRender)="itemRender($event)" (beforeClose)="beforeClose($event)"></ejs-contextmenu> 

 

App.Component.ts 

 

  public beforeClose(args: BeforeOpenCloseMenuEventArgs) { 

    if ((args.event.target as Element).closest('.e-menu-item')) { 

      args.cancel = true; 

      .   .   . 

     let frame: HTMLElement = checkbox.querySelector('.e-frame'); 

      if (checkbox && frame.classList.contains('e-check')) { 

        frame.classList.remove('e-check'); // do your actions when uncheck the checkbox 

        this.treegrid.allowFiltering = false; 

      } else if (checkbox) { 

        frame.classList.add('e-check'); 

        this.treegrid.allowFiltering = true; // do your actions when check the checkbox 

      } 

    } 

  } 

 

  public itemRender(args: MenuEventArgs) { 

    let check: Element = createCheckBox(createElement, false, { 

      label: args.item.text, 

      checked: false, 

    }); 

    args.element.innerHTML = ''; 

    args.element.appendChild(check); 

  } 

} 

 

Sample Link:- https://stackblitz.com/edit/angular-jlhn7i?file=app.component.ts 

 

Screenshot:- 

 

As like mentioned in documentation we have rendered Checkbox component using beforeItemRender event and handled check and uncheck actions with beforeClose event of the context menu 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T