How to display column as radio button in dialog editing in Angular Grid

[RakhiS]

Hi, 

Sorting order column in my grid, will display value as : "asc", "desc" and none. 

I want to show this field as radio button just like below in edit mode i.e while clicking on add or edit button of the toolbar.

Please help

Thanks

[Thiyagu Subramani]

Hi RakhiS, 

Thanks for contacting Syncfusion forum. 

Based on your reported information we have created a sample as per your requirement. In this sample we have applied sort actions for ShipCountry column using radioButton change event.  Here we have created one additional toolbar(Sort) using custom toolbar concept and when clicking this toolbar we have created dialog popup using show method and with this content we rendered radio buttons using content Template. Using this concept you can achieve your requirement. 

  

Please refer to the below code and sample link. 

[app.component.ts] 

 this.toolbar = [{ text: 'Sort', tooltipText: 'sort', id: 'sort' }, 'Add', 'Edit', 'Update', 'Delete']; 

 clickHandler(args) { 

    if (args.item.id === 'sort') { 

      this.Dialog.show(); 

    } 

  } 

  Descending(args) { 

    this.grid.setProperties({ 

      sortSettings: { columns: [{ field: 'ShipCountry', direction: args.value }] } 

    }); 

  } 

  Ascending(args) { 

    this.grid.setProperties({ 

      sortSettings: { columns: [{ field: 'ShipCountry', direction: args.value }] } 

    }); 

  } 

  None(args) { 

    this.grid.clearSorting(); 

  } 

[app.compoenent.html] 

  <ejs-grid #grid [dataSource]='data' allowSorting='true' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' 

    (toolbarClick)='clickHandler($event)' [toolbar]='toolbar'> 

    <e-columns> 

. . . .  

    </e-columns> 

  </ejs-grid> 

  <ejs-dialog #Dialog [header]='header' [allowDragging]='dialogdragging' [animationSettings]='animationSettings' [showCloseIcon]='showCloseIcon' 

    [visible]='hidden' [target]='target' [width]='width' > 

    <ng-template #content> 

      <div class="radiobutton-control"> 

        <h4>Sort data using this column</h4> 

        <div class="row"> 

            <ejs-radiobutton label="None" name="sort" value="None" checked="true" (change)="None($event)"></ejs-radiobutton> 

        </div> 

        <div class="row"> 

            <ejs-radiobutton label="Ascending" name="sort" value="Ascending" (change)="Ascending($event)"></ejs-radiobutton> 

        </div> 

        <div class="row"> 

            <ejs-radiobutton label="Descending" name="sort" value="Descending" (change)="Descending($event)"></ejs-radiobutton> 

        </div> 

    </div> 

    </ng-template> 

  </ejs-dialog> 

[app.component.css] 

ejs-dialog.e-control.e-dialog.e-lib.e-popup.e-popup-open { 

    max-height: 190px !important; 

} 

Sample link :  https://stackblitz.com/edit/angular-s1kaek-zxj76z?file=app.component.ts 

Reference link:  https://ej2.syncfusion.com/angular/documentation/api/radio-button/#change 

                          : https://ej2.syncfusion.com/angular/documentation/api/dialog#show 

                          : https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/?no-cache=1 

                          :  https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/?no-cache=1#custom-toolbar-items 

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

Regards, 

Thiyagu S.