Conditional Command Button

[William Morgenweck]

I have a column with a Command Button

 <e-column field="Commands" headerText="Details" width="125" :commands="commands"></e-column>

  commands: [ { buttonOption: { content: "Details", cssClass: "e-warning custombutton" } }],

Is there a way to hide the button if a value in that row a certain value such as.

:valueAccessor = hideButton
    hideButton: function(field, data, column){
if(data("LastName") = "Smith"){
//hide button
}

}

  

[Vignesh Natarajan]

Hi William,  

 

Thanks for contacting Syncfusion support. 

 

Query: “Is there a way to hide the button if a value in that row a certain value such as.” 

 

We suggest you to achieve your requirement using rowDataBound event of Grid. In the rowDataBound event, we have applied display none style to command buttons based on the condition. Refer the below code example.  

 

    <ejs-grid 

      ref="grid" 

      id="Grid" 

      :dataSource="data" 

      :allowPaging="true" 

      :pageSettings="pageSettings" 

      :editSettings="editing" 

      :toolbar="toolbar" 

      :rowDataBound="rowDataBound" 

      :commandClick="commandClick" 

    > 

. . . . . . 

    </ejs-grid> 

 

    rowDataBound: function (args) { 

      if (args.data.CustomerID === "VINET") { 

        args.row.querySelectorAll(".e-unboundcelldiv")[0].style.display = 

          "none"; 

      } 

    }, 

 

 

 

For your reference, we have prepared a sample which can be referred from below  

 

Sample: https://codesandbox.io/s/vue-template-forked-0k7djo  

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

[William Morgenweck]

Thank you.  That should work fine.

[Balaji Sekar]

Hi William, 

Thanks for your update. 

We happy to hear that your issue has been resolved. 

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

Regards, 

Balaji Sekar. 

[Mathieu WERQUIN]

Hello,

I have the same problem but I would like hide button when I'm in th edit mode.

Do you have the solution ? 

Regards, 

Matthieu WERQUIN

[Johnson Soundararajan S]

Hi William Morgenweck,

Thank you for reaching out to us.

You would like to hide a command column button when you are editing the row (in edit mode). We can fulfill this requirement by utilizing the actionComplete event. We apply a "display: none" style to the command buttons based on certain conditions.

Please refer to the below sample, code snippet for more information.

Code sample :

App.vue

 

      <ejs-grid

        :dataSource="data"

        :allowPaging="true"

        :pageSettings="pageSettings"

        :allowSorting="true"

        :editSettings="editSettings"

        :actionComplete="actionComplete"

      >

     …….

      </ejs-grid>

 

     ……..

 

      actionComplete: function (args) {

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

        args.row.querySelectorAll('.e-unboundcelldiv')[0].style.display =

          'none';

        }

      },

 

Sample : Ohtk8c (forked) - StackBlitz

Please get back to us, if you need further assistance

Regards,

Johnson Soundararajan S