Conditionally enable/disable command button

[Michael Lambert]

When the grid is filled I want to conditionally enable/disable a command button in a column depending on the value of a item in that row.  This should do done on a per row basis and when it's filled, not just when it's in edit state.

I have the following, just can't figure out the details:

.......
        <e-column header-text="Supplier" width="100">
            <e-column-commands>
                <e-column-command type="Details">
                    <e-button-options click="onGetPO" text="Get"></e-button-options>
                </e-column-command>
            </e-column-commands>
        </e-column>
......

JavaScript

     What event should this be in? 
            if (this.getCurrentViewData()[args.rowIndex]["Supplier"] == "xyz") {
                   Set the command button to enabled
            else
                  Set the command button to disabled
            }
       

Thanks,
Mike

[Renjith Singh Rajendran]

Hi Michael, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suspect that you want to disable the button in a command column when data gets loaded in grid. We suggest you to use the query-cell-info event of Grid. And to disable the button we suggest you to set the enabled property of ejButton to false. Please refer the documentation link below, 

https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo  

https://help.syncfusion.com/api/js/ejbutton#members:enabled 

Please refer the code example below, 

<ej-grid id="TagsGrid" allow-paging="true" datasource="@ViewBag.dataSource" query-cell-info="cellinfo"> 

            ... 

           <e-columns> 

                ... 

               <e-column header-Text="Manage Records"> 

                    <e-column-commands> 

                        <e-column-command type="edit"> 

                            <e-button-options content-type="TextOnly" text="Edit"></e-button-options> 

                        </e-column-command> 

                    </e-column-commands> 

                </e-column> 

            </e-columns> 

</ej-grid> 

 

<script type="text/javascript"> 

    function cellinfo(e) { 

        if (e.column["headerText"] == "Manage Records" && e.data["customerID"] == "ANATR") { 

            $(e.cell).find('.e-button').ejButton({ enabled: false }); //disable the button in the manage record column. 

        } 

    } 

</script> 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Michael Lambert]

Worked thanks!

[Renjith Singh Rajendran]

Hi Michael, 

Thanks for the update. 

We are happy to hear that your requirement has been achieved. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.