to disable command column buttons

[Prangya Tiwari]

 hi, 

 i have grid here.i have a command column is here with no header text and field.

 ex-data populated in grid

 {

 id:1;

 isfinal:true;

 name:ram;

 }

 

 here my requirement is that when ever the final value is true ,buttons prsent in command column would be disable.i have tried using "rowDataBound"  event i got the data by

 rowdataBoundargs.data and row by rowdataBoundargs.row .could you please explain how would i disable the edit and delete buttons.

 i have tried by following sol in forum

  function onRowdataBound(args){ 

            if(!ej.isNullOrUndefined(args.data.StartDate)){ 

                //Disable the command button, if the StartDate is not null  

                args.row.find(".e-unboundcell").find("button").ejButton("disable"); 

            } 

        } 

But it is showing error.I have attached my code sample below.if i have done any mistake please let me know.

could please give me example how would i achieve this?

 

 html:

 

 <ej-grid #studiesGrid [(dataSource)]='studiesData' [allowSorting]='true' (recordDoubleClick)="onRowDblClick($event)" showColumnChooser='true'

 (dataBound)="dataBound()" (rowDataBound)="rowDtBound($event)">

              <e-columns>

               

                <e-column [commands]='commands' width='10%' textAlign="left" [showInColumnChooser]='false'></e-column>

       <e-column field="isFinal" width='10%' textAlign="left"></e-column>

               

              </e-columns>

  </ej-grid>

  

  .ts:

  import { Grid, RowDataBoundEventArgs } from '@syncfusion/ej2-ng-grids';

  

   ngOnInit() {

   

    // Initialize Button to open the modal Dialog

    this.modalButtons = [

      { click: this.closeDeleteModal, buttonModel: { content: 'Cancel', cssClass: 'cancelBtn' } },

      { click: this.deleteSelectedStudy, buttonModel: { content: 'Confirm', cssClass: 'confirmBtn' } }

    ];

   

  }

   rowDtBound(rowdataBoundargs: RowDataBoundEventArgs) {

   

    console.log('----->123',  rowdataBoundargs.data);

    console.log('----->1234', rowdataBoundargs.row);

   }

  

  

[Isuriya Rajan]

Hi Prangya, 

Thanks for contacting Syncfusion support, 

Here we can disable the command columns button in rowDataBound event. We have disabled the button by adding this class”e-disabled”. We have prevented the edit and delete action inside the actionBegin event by setting the args.cancel as a true.   

Please find the below code snippet 

DataBound(args){ 

        if(args.data.isFinal){ 

        args.row.querySelectorAll('.e-btn-icon.e-edit')[0].classList.add('e-disabled') 

        args.row.querySelectorAll('.e-btn-icon.e-delete')[0].classList.add('e-disabled') 

        } 

    } 

actionBegin(args:EditEventArgs){ 

       if((args.requestType== "delete" && args.tr[0].querySelectorAll('.e-btn-icon.e-delete')[0].classList.contains('e-disabled'))||(args.requestType == 'beginEdit' && args.row.querySelectorAll('.e-btn-icon.e-edit')[0].classList.contains('e-disabled'))) 

          args.cancel = true; 

    } 

Refer the  below sample and documentation link for your reference 

Sample: http://plnkr.co/edit/8qXZmH0YVF7JhGokt6R5?p=preview 

Documentation link: http://ej2.syncfusion.com/15.4.23/angular/documentation/grid/api-gridComponent.html#actionbegin 

Regards, 

Isuriya R