Edit Task - Resource Tab - Radio Button

[Donika, Jetwani]

 Can we have radio button instead of checkbox in resource tab of edit task in gantt chart of syncfusion Angular?

[Udhayakumar Anand]

Hi Donika,

Greetings from Syncfusion

We have carefully reviewed your query and we assume that you would like to have a single resource selection instead of multiple resources in the resource tab of the edit task in the Gantt chart of Syncfusion Angular.

To address your requirement, you can utilize the actionBegin and actionComplete events. Within the actionBegin event, specifically with the requestType of beforeOpenEditDialog and beforeOpenAddDialog, you can remove the checkbox option.

Furthermore, inside the actionComplete event, you can ensure that the selected resource is preserved accordingly.

Code Snippet:

/*app.component.ts*/

actionBegin(args): void {

    if (

      args.requestType == 'beforeOpenEditDialog' ||

      args.requestType == 'beforeOpenAddDialog'

    ) {

      args.Resources.columns.splice(0, 1);

    }

  }

  actionComplete(args): void {

    if (

      args.requestType == 'openEditDialog' ||

      args.requestType == 'openAddDialog'

    ) {

      var resources = args.data.ganttProperties.resourceInfo;

      var tabObj =

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

      tabObj.selected = function (args) {

        if (args.selectedIndex == 2) {

          var gridObj = document.getElementById(

            'ganttDefaultResourcesTabContainer_gridcontrol'

          )['ej2_instances'][0];

          gridObj.selectionSettings = {

            checkboxOnly: false,

 

            type: 'Single',

 

            persistSelection: false,

          };

          var currentViewData = gridObj.getCurrentViewRecords();

          var indexs = [];

          if (resources && resources.length > 0) {

            currentViewData.forEach(function (data, index) {

              for (var i = 0; i < resources.length; i++) {

                if (

                  data.taskData['resourceId'] === resources[i]['resourceId'] &&

                  !isNullOrUndefined(gridObj.selectionModule) &&

                  gridObj.getSelectedRowIndexes().indexOf(index) === -1

                ) {

                  //  gridObj.selectRow(index);

                  indexs.push(index);

                }

              }

              gridObj.selectRows(indexs);

            });

          }

          // gridObj.selectionSettings = {

          //   checkboxOnly: false,

          //   type: 'Multiple',

          //   persistSelection: false,

          // };

        }

      };

    }

  }

 

Sample Link : https://stackblitz.com/edit/angular-zagaeq-hfhof5?file=src%2Fapp.component.html,src%2Fapp.component.ts

If you require the radio Button, please revert back to us, we will provide you with altered solutions

Regards,

Udhayakumar

[Donika, Jetwani]

yes we require radio button in place of checkbox. Please provide solution to it.

[Udhayakumar Anand]

Donika,

To accomplish this, we recommend utilizing the actionBegin event and actionComplete event. Within the actionBegin event, you can remove the checkbox and incorporate a radio button by using the column template function of the grid. This will allow you to customize the appearance and behavior of the radio button according to your needs.

Furthermore, in the actionComplete event, you can maintain the selected resources and ensure that the radio button remains checked as desired.

/*app.component.ts*/

actionBegin(args): void {

    if (

args.requestType == 'beforeOpenEditDialog' ||

args.requestType == 'beforeOpenAddDialog'

    ) {

      debugger;

      args.Resources.columns.splice(0, 1);

      args.Resources.columns.unshift({

        headerText: 'Button',

        width: '180',

        textAlign: 'Center',

        template: `<input type="radio" id="html" name="fav_language" value="HTML">`

      });

    }

  }

actionComplete(args): void {

    if (

      args.requestType == 'openEditDialog' ||

      args.requestType == 'openAddDialog'

    ) {

      var resources = args.data.ganttProperties.resourceInfo;

      var tabObj =

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

      tabObj.selected = function (args) {

        if (args.selectedIndex == 2) {

          var gridObj = document.getElementById(

            'ganttDefaultResourcesTabContainer_gridcontrol'

          )['ej2_instances'][0];

          gridObj.selectionSettings = {

            checkboxOnly: false,

 

            type: 'Single',

 

            persistSelection: false,

          };

          var currentViewData = gridObj.getCurrentViewRecords();

          var indexs = [];

          if (resources && resources.length > 0) {

            currentViewData.forEach(function (data, index) {

              for (var i = 0; i < resources.length; i++) {

                if (

                  data.taskData['resourceId'] === resources[i]['resourceId'] &&

                  !isNullOrUndefined(gridObj.selectionModule) &&

                  gridObj.getSelectedRowIndexes().indexOf(index) === -1

                ) {

                  indexs.push(index);

                }

              }

              var instance = document.getElementById('ganttDefaultResourcesTabContainer_gridcontrol');

              indexs.forEach(element => instance.querySelectorAll("#html")[element]['checked'] = true);

              gridObj.selectRows(indexs);

            });

          }

        }

      };

    }

  }

 

Sample Link : https://stackblitz.com/edit/angular-zagaeq-kqgkdm?file=src%2Fapp.component.html,src%2Fapp.component.ts

We hope this solution has answered your query, please feel free to contact us

Regards,

Udhayakumar

[Bhavika Chauhan]

To use radio buttons instead of checkboxes in the resource tab of the Edit Task dialog within the Gantt chart of Syncfusion Angular, you'll need to customize the resource tab of the task editor. Here's a general approach for implementing radio buttons:

1. Extend the Edit Dialog: Customize the editDialogFields property to modify the task editor's fields.
2. Custom Editor for Resources: Create a custom editor component that uses radio buttons instead of checkboxes.
3. Integrate the Custom Editor: Register your custom editor with the Gantt chart's editSettings to replace the default checkbox behavior.

Step 1: Create a Custom Radio Button Component

import { Component } from '@angular/core';

@Component({

  selector: 'app-resource-radio',

  template: `

    <div *ngFor="let resource of resources">

      <input

        type="radio"

        [name]="name"

        [value]="resource.value"

        (change)="onSelect(resource)"

        [checked]="selectedValue === resource.value">

      {{ resource.text }}

    </div>

`

})

export class ResourceRadioComponent {

  resources = [

    { value: 'resource1', text: 'Resource 1' },

    { value: 'resource2', text: 'Resource 2' },

    // Add more resources as needed

  ];

  name: string;

  selectedValue: string;

  onSelect(resource: any) {

    this.selectedValue = resource.value;

    // Emit or handle the change event

  }

}

Step 2: Integrate the Custom Radio Button Component

import { GanttComponent, EditSettingsModel, ColumnsModel } from '@syncfusion/ej2-angular-gantt';

@Component({

  selector: 'app-root',

  template: `<ejs-gantt [dataSource]='data' [editSettings]='editSettings'></ejs-gantt>`

})

export class AppComponent {

  public editSettings: EditSettingsModel = {

    allowEditing: true,

    allowAdding: true,

    allowDeleting: true

  };

  // Define your Gantt dataSource here

  public data: object[] = [

    // Your task data

  ];

  // Use the custom editor for the resources field

  public columns: ColumnsModel[] = [

    { field: 'resource', headerText: 'Resource', editType: 'dropdownedit', edit: ResourceRadioComponent }

  ];

}

[Sridharan Jayabalan]

Bhavika,

For your query, we suggest you use actionBegin event to render the radio button in resuorce tab instead using a separate component. Inside the event, you can get the resource tab's columns and you can able to customize it by using the template property. Refer code snippet and sample for more information. 

 

Code-Snippet:   

actionBegin(args): void {

    if (

      args.requestType == 'beforeOpenEditDialog' ||

      args.requestType == 'beforeOpenAddDialog'

    ) {

      args.Resources.columns.splice(0, 1);

      args.Resources.columns.unshift({

        headerText: 'Button',

        width: '180',

        textAlign: 'Center',

        template: `<input type="radio"  name="resourceSelection" value="HTML">`,

      });

      args.Resources.columns[0].allowEditing = false;

    }

  }

 

Sample - Ovu3ys (forked) - StackBlitz

If we misuunderstood your query, share more detailed information about your requirement. (video/screenshot.) 

 

 

Regards,

Sridharan