Cant disable a button

[Carl-Johan]

Hi, I'm trying to disable a command button in a grid based on the value of a different column. Normally I would do this on the server-side but as far as I understand it, the grid doesn't have any server-side events for this.

I'm trying to do this by the RowDataBound client-side event but I'm not able to set the button to disabled.

My code so far:

<script type="text/javascript">

 function rowDataBound(args) {

  if (args.data.CanBeDeleted == false) {

    args.row............... <- Cant find the Button to disable

   }

}

</script>

<ej:Grid ID="Grid_MainItems" runat='server' >

 <ClientSideEvents RowDataBound="rowDataBound" />

  <Columns>

   <ej:Column Field="ID" HeaderText="ID" IsIdentity="true" IsPrimaryKey="true"/>

   <ej:Column Field="CanBeDeleted" HeaderText="CanBeDeleted" />

   <ej:Column HeaderText="Delete" >

   <Command>

     <ej:Commands Type="Delete">

       <ButtonOptions Type="Button" ContentType="ImageOnly" Text="Delete" PrefixIcon="fa fa-trash" />

     </ej:Commands>

  </Command>

  </ej:Column>

</Columns>

</ej:Grid>

Any pointers?

[Padmavathy Kamalanathan]

Hi Carl, 

 

Thanks for contacting Syncfusion Forums. 

 

Query: I'm trying to disable a command button in a grid based on the value of a different column 

 

We have achieved your requirement by disabling the command column based on other column value in “QueryCellInfo” event of Grid. 

 

Please check the below code snippet,

 

 

    <ej:Grid ID="FGrid" runat="server" AllowPaging="true"> 

        <PageSettings PageSize="5" /> 

        <ClientSideEvents QueryCellInfo="QueryCellInfo" /> 

        <Columns> 

            <ej:Column Field="OrderID" IsPrimaryKey="true" /> 

            <ej:Column Field="CustomerID" EditType="StringEdit" /> 

            <ej:Column Field="ShipCity" /> 

            <ej:Column HeaderText="Manage Records" Width="130"> 

                <Command> 

                    <ej:Commands Type="delete"> 

                        <ButtonOptions Text="Delete"></ButtonOptions> 

                    </ej:Commands> 

                </Command> 

            </ej:Column> 

        </Columns> 

    </ej:Grid> 

    <script> 

        function QueryCellInfo(e) { 

            if (e.column["headerText"] == "Manage Records" 

                && e.data["CustomerID"] == "BOLID") { 

                $(e.cell).find('.e-button').ejButton({ enabled: false });  

                 //disable the button in the manage record column.  

            }  

        } 

    </script> 

 

Please check the below screenshot, 

 

 

Please check the below API help documentation, 

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

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan 

[Carl-Johan]

Many thanks Padmavathy, works perfectly. Never thought about doing it on a cell level. Have a great day.

[Padmavathy Kamalanathan]

Hi Carl, 

 

We are glad to hear that you have achieved your requirement. Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan