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

Show table in custom Tab of Add/Edit dialog pop up of gantt chart angular

In Add/Edit dialog pop up of gantt chart angular,i want to add one custom Tab and want to show my data in a table having my custom fields only like below.



3 Replies

GM Gopinath Munusamy Syncfusion Team October 20, 2022 07:23 AM UTC

Hi Mukarram Ali,


Greetings from Syncfusion support.


We have checked your query and we have prepared a sample to render a custom tab with custom table. In this sample, we have used actionComplete event to render the table inside the custom tab using the tab selected function. We have created a table element and then append the table element into the custom tab. 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 actionComplete(args: any) {

    if (args.requestType == 'openAddDialog' ||args.requestType == 'openEditDialog') {

      var tabObj = document.getElementById('ganttDefault_Tab').ej2_instances[0];

      tabObj.selected = function (args) {

        var content = document.getElementById('e-content-ganttDefault_Tab_4');

        content.children[0].remove();

        var generalTab = document.createElement('div');

        generalTab.innerHTML ='<table style="width: 100%;"><tbody style="border: solid;"><tr style="border: solid;"><th style="padding: 15px;">Title</th><th>Description</th></tr><tr><td style="padding: 15px;">Issue name</td><td>lorem ispum</td></tr><tbody></table>';

        content.append(generalTab);

      }.bind(this);

    }

[app.component.html]

<ejs-gantt #gantt id="ganttDefault"

    (actionComplete)="actionComplete($event)">


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


Regards,

Gopinath M



MA Mukarram Ali October 20, 2022 08:35 AM UTC

Thank you for the response, and how we can achieve to add two button ADD and DELETE as shown in attachment
one button should be dropdown option button and other normal Delete button like below.
 so when I click on 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




GM Gopinath Munusamy Syncfusion Team October 21, 2022 11:46 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon