Custom Tab with form on Phase Edit

[Kumar, K Bharath]

Hi,

In Gantt chart on task edit, in task edit popup i have added custom tab containing Radio Button Group and text box. There is one Add button, on click of Add button new Radio Button group and text box should be added.

Custom tab should be visible when i click on phase edit not task edit.

On Click of save form should be submit and on cancel click and close icon changes should be discarded. After saving data in database, submitted data should shown in the custom tab.

After add button there is one more button for delete. on click on any row that entire record should be removed from array.

Below is the screenshot for reference.

Below is the workaround..

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

[Gopinath Munusamy]

Hi Kumar,

we have prepared a sample to render radio button group inside the custom tab. To achieve this, we have used the actionComplete event of requestType as beforeOpenEditDialog and rendered a add button and delete button inside the custom tab using tab selected function. And we can add radio buttons when click on the Add button based on the click event of addEventListener, as like add we can be able to delete the selected row using the delete button. Please check the attached code snippets and sample for more details.

Code Snippets:

[app.component.ts]

public actionComplete(args: any) {

    if (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 =

          '<button ejs-button" id="add">+ Add</button><button ejs-button id="delete">Delete</button>';

        content.append(generalTab);

        document.getElementById('add').addEventListener('click', (event) => {

          let gantt =document.getElementsByClassName('e-gantt')[0].ej2_instances[0];

          gantt.RadioRow = gantt.RadioRow > 0 ? gantt.RadioRow : 0;

          let radioGroup = document.getElementById('MainRadioGroup');

          let RadioGroup = radioGroup.cloneNode(true);

          RadioGroup.id = 'radioGroup' + gantt.RadioRow;

          RadioGroup.className = 'radioClass';

          document.getElementById('e-content-ganttDefault_Tab_4').appendChild(RadioGroup);

          gantt.RadioRow += 1;

          document.querySelectorAll('.radioClass').forEach((parent) => parent.addEventListener('click', (event) => {

          event.currentTarget.classList.add('e-selected');

          event.currentTarget.style.backgroundColor = 'blue';}));

            });

        document.getElementById('delete').addEventListener('click', (event) => {

          document.querySelectorAll('.radioClass').forEach((parent)=> {if(parent.classList.contains('e-selected')){parent.remove();}});

        });

      }.bind(this);

    }

  }

[app.components.ts]

<div id="MainRadioGroup">

    <ejs-radiobutton label="Option A" value="1"></ejs-radiobutton>

    <ejs-radiobutton label="Option B" value="2"></ejs-radiobutton>

    <ejs-radiobutton label="Option C" value="3"></ejs-radiobutton>

    <input type="text" />

</div>

<ejs-gantt

    id="ganttDefault"

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

Sample: https://stackblitz.com/edit/angular-doeslw-3sec8r?file=app.component.ts,app.component.html,app%2Fapp.module.ts

Regards,

Gopinath M

[Kumar, K Bharath]

How to show saved array of form details?. And on cancel click and close icon if i do any changes, changes should should be discarded. On save click only array should have saved changes.

This tab should be visible only on Phase edit only not for task edit. Form can be different for each phase.

How to achieve above?

[Gopinath Munusamy]

Hi Kumar,

We have modified the sample to achieve your requirement. In this example, we have utilized an array object named "radioState" to keep track of the selected state of the radio buttons within the dataSource. Additionally, the changes will only be applied when the "save" button is clicked, and any changes will be discarded when the "cancel" button is clicked. We have done this by using the "requestType" of the actionComplete event set to "save". A sample and relevant code snippets have been included in the attachment for your reference. Check this below sample and code snippets for more details.

Code Snippets:

[app.component.ts]

public actionComplete(args: any) {

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

      let gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];

      gantt.customData = args.data;

      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 =

          '<button ejs-button" id="add">+ Add</button><button ejs-button id="delete">Delete</button>';

        content.append(generalTab);

        if (gantt.customData.custom) {

          let count = gantt.customData.custom;

          for (var i = 0; i < count; i++) {

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

            RadioGroup.className = 'radioRow' + i;

            var radioCheck = gantt.customData.taskData.radioState[i];

            var rOne = radioCheck == 0 ? 'checked' : '';

            var rTwo = radioCheck == 1 ? 'checked' : '';

            var rThree = radioCheck == 2 ? 'checked' : '';

            RadioGroup.innerHTML =

              '<input type="radio" id="buttonOne" value="One" ' +

              rOne +

              '><label>Option A</label><input type="radio" id="buttonTwo" value="two" ' +

              rTwo +

              '><label>Option B</label><input type="radio" id="buttonThree" value="three" ' +

              rThree +

              '><label>Option C</label><input type="text" />';

            content.appendChild(RadioGroup);

            RadioGroup.addEventListener('click',this.radioRowSelect.bind(this));

          }

        }

        document.getElementById('add').addEventListener('click', (event) => {

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

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

          RadioGroup.className = 'radioRow' + gantt.customData.custom;

          RadioGroup.innerHTML = '<div><input type="radio"  id="buttonOne" value="One"><label>Option A</label><input type="radio" id="buttonTwo" value="two"><label>Option B</label><input type="radio" id="buttonThree" value="three"><label>Option C</label><input type="text" /></div>';

          content.appendChild(RadioGroup);

          gantt.customData.custom += 1;

          RadioGroup.addEventListener('click', this.radioRowSelect.bind(this));

        });

 

        document.getElementById('delete').addEventListener('click', (event) => {

          var gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];

          var count = gantt.customData.custom;

          for (var i = 0; i < count; i++) {

            if (document.querySelector('.radioRow' + i).style.backgroundColor !=='') {

              document.querySelector('.radioRow' + i).remove();

            }

            gantt.customData.custom -= 1;

          }

        });

      }.bind(this);

    }

    if (args.requestType == 'save') {

      var gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];

      args.data.custom = gantt.customData.custom;

    }

 

  }

public radioRowSelect(args: any) {

    var gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];

    var count = gantt.customData.custom;

    for (var i = 0; i < count; i++) {

      document.querySelector('.radioRow' + i).style.backgroundColor = '';

    }

   args.currentTarget.style.backgroundColor = 'blue';

  }

 

Sample: https://stackblitz.com/edit/angular-doeslw-57czda?file=app.component.ts,app.component.html,data.ts

Also, could you please clarify what you mean by "phase edit"? This information will help us in providing you with a better solution.