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

Edit dialog customization

In angular gantt chart add/edit dialog pop up,  In custom Tab of task edit dialog  i want to add  two custom button on top right above my custom table
- one dropdown option button and other normal Delete button like below.
 so when I select any row then delete button should enable.
when I click on Add button then a dropdown options(used to navigate on some other page) should open

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



3 Replies

GM Gopinath Munusamy Syncfusion Team October 21, 2022 06:47 AM

Hi Mukarram Ali,


We have prepared a sample to achieve your requirement. In this sample we have used a custom toolbar item inside the custom tab and using toolbarClick event we have rendered the dropdown list for the custom toolbar items. We have attached the sample and code snippets for your reference. Please check the below sample and code snippets for more details,

Code Snippets:

[app.component.ts]

toolbar: ['Add','Delete',

{text: 'DropDownList', tooltipText: 'DropDownList', id: 'DropDownList',}],  

toolbarClick(args: ClickEventArgs): void {

            if (args.item.text === 'DropDownList') {

                  let contextmenuObj: ContextMenu = getInstance(document.getElementById('contextmenu'),ContextMenu) as ContextMenu;

                  var clientRect = document.getElementById('DropDownList').getBoundingClientRect();

                  contextmenuObj.open(clientRect.bottom, clientRect.left);

                }

        },


Sample: https://stackblitz.com/edit/angular-h22jfz-qewp1s?file=app.component.html,app.component.ts

Also, we have attached the documentation for how to customize the toolbar items. Please check this below UG documentation link for more details,

UG Documentation:   https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/tool-bar-items/#custom-toolbar-items


Regards,

Gopinath M



MA Mukarram Ali October 26, 2022 01:06 PM

thank you for the response.

can we change the position of this toolbar buttons to right in Custom column Tab provided above in your sample and I want to navigate to some other page when user click on this dropdownlist options. so need to give routing on option select.



GM Gopinath Munusamy Syncfusion Team October 27, 2022 05:34 AM

Hi Mukarram Ali,


Yes, you can able to change the position of the toolbar button using align property as right. Also, you can use url property inside the menuItems to achieve your requirement, using this you can able to navigate to some other page when click on the dropdownlist options. We have attached the sample and code snippets for your reference. Please check the below sample and code snippets for more details,


Code Snippets:

[app.component.ts]

public menuItems: MenuItemModel[] = [{

      text: 'link',

      url: 'https://ej2.syncfusion.com/home/',

    },

   //....

  ];

//…

toolbar: ['Add','Delete',{text: 'DropDownList',

            tooltipText: 'DropDownList',id: 'DropDownList',

            align: 'right',

            },

],


Sample: https://stackblitz.com/edit/angular-h22jfz-zpuu9x?file=app.component.html,app.component.ts

UG Documentation:   https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/tool-bar-items/#custom-toolbar-items


Regards,

Gopinath M



Loader.
Live Chat Icon For mobile
Up arrow icon