Grid Button command code-behind

[Alessio Iannetti]

Hello,

in a Syncfusion grid how can I manage multiple server-side custom events for each row?

Example:

• record 1 with 
• button1 => custom event1 code-behind
• button2 => custom event2 code behind
• ...
• record 2 with
• button1 => custom event1 code-behind
• button2 => custom event2 code behind
• ...

As it happens in the classic grid of asp.net web forms:

<asp:Button ID="bAccept" runat="server" Text="Accept" OnClick="bAction1Click" CommandName="Accept" />

<asp:Button ID="bReject" runat="server" Text="Reject" OnClick="bAction2Click" CommandName="Reject" />

Code-behind:

protected void bAction1Click(object sender, EventArgs e) {

   ...

}

protected void bAction2Click(object sender, EventArgs e) {

   ...

}

Regards,

Alessio.

[Padmavathy Kamalanathan]

Hi Alessio, 

 

Thanks for contacting Syncfusion Forums. 

 

Query: Grid Button command code-behind 

 

From your code, we could understand that you need to have multiple button in each row of Grid and also bind server side click event for each row buttons. In order to achieve this requirement, we suggest you to use “Custom Command”. For custom command button, we have sever end click (OnSeverCommandButtonClick) event by default. 

 

Please check the below help documentations, 

https://help.syncfusion.com/aspnet/grid/columns#custom-buttons  

https://help.syncfusion.com/aspnet/grid/server-side-events?cs-save-lang=1&cs-lang=html#onservercommandbuttonclick  

 

Please check the below code snippet, 

 

 

             <ej:Grid ID="FlatGrid" runat="server"   

                  AllowPaging="True"  OnServerCommandButtonClick="FlatGrid_ServerCommandButtonClick"> 

                <Columns> 

                    <ej:Column Field="EmployeeID" HeaderText="Order ID" IsPrimaryKey="true"  TextAlign="Right"> 

                    </ej:Column> 

                    <ej:Column HeaderText="Employee Details" TextAlign="Center" Width="150">                     

                    <Command> 

                        <ej:Commands Type="accept"> 

                            <ButtonOptions Text="Accept" Width="100"></ButtonOptions> 

                        </ej:Commands> 

                        <ej:Commands Type="reject"> 

                            <ButtonOptions Text="Reject" Width="100"></ButtonOptions> 

                        </ej:Commands> 

                    </Command> 

                </ej:Column>   

                </Columns> 

            </ej:Grid> 

 

     [in code behind] 

       protected void FlatGrid_ServerCommandButtonClick(object sender, GridEventArgs e) 

        { 

            //code corresponding to any custom operation 

        } 

 

 

Please check the below screenshots, 

Screenshot 1: Grid rows with multiple buttons 

 

 

 

Screenshot 2: Server end event with button type 

 

 

 

 

 

Screenshot 3: Server end event with row data 

 

 

 

For both “Accept” and “Reject” button click, server end event will be triggered. From the parameters of server end event, we can get button type (accept/reject) and also row data and index. Based on these values, you can customize your action. 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan