We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Conditionally enable/disable command button

Thread ID:

Created:

Updated:

Platform:

Replies:

135727 Feb 1,2018 08:58 PM UTC Feb 5,2018 07:22 AM UTC ASP.NET Core 3
loading
Tags: Grid
Michael Lambert
Asked On February 1, 2018 08:58 PM UTC

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 [Syncfusion]
Replied On February 2, 2018 07:18 AM UTC

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, 

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
Replied On February 2, 2018 09:26 PM UTC

Worked thanks!


Renjith Singh Rajendran [Syncfusion]
Replied On February 5, 2018 07:22 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon