1. Home
  2. Forum
  3. Blazor
  4. Button inside edit box inside DataGrid

Button inside edit box inside DataGrid

Hi,
Is it possible, to put a button inside a cell in grid (Editmode.Inline). My goal is to have a button to with I can bind an event (eg.OnClick) which can navigate me to another page. I want  to have this kind of solution in many cells in row, so I need also to recognize which button was pressed. Thanks in advance!!


3 Replies 1 reply marked as answer
RN Rahul Narayanasamy Syncfusion Team May 13, 2021 10:55 AM UTC

Hi Lukasz, 
 
Greetings from Syncfusion. 
 
Query: Button inside edit box inside DataGrid - Is it possible, to put a button inside a cell in grid (Editmode.Inline). My goal is to have a button to with I can bind an event (eg.OnClick) which can navigate me to another page. 
 
We have validated your query and you want to put a buttons in inline editing form for some columns. While clicking the button you want to navigate to another page. You can achieve your requirement by using EditTemplate.  
 
Here, we have placed a button along with textbox for CustomerID column using EditTemplate and while clicking the button we have navigate to counter page(we have moved to counter page based on the edited row details). 
 
Find the below code snippets and sample for your reference. 
 
@using Syncfusion.Blazor.Inputs 
@inject NavigationManager NavManager 
 
<SfGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings> 
    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="300"> 
            <EditTemplate> 
                <div class="form-group col-md-3"> 
                    <SfTextBox ID="CustomerID" Placeholder="Customer Name" @bind-Value="@((context as Order).CustomerID)" FloatLabelType='@FloatLabelType.Auto'></SfTextBox> 
                </div> 
                <div class="form-group col-md-3"> 
                    <button @onclick="Click">Button</button> 
                </div> 
            </EditTemplate> 
        </GridColumn> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
 
@code{ 
    public List<Order> Orders { get; set; } 
    Order EditRowDetail { get; set; } 
 
    . . . 
 
    public void Click() 
    { 
        if(EditRowDetail.OrderID == 1002 || EditRowDetail.OrderID == 1003 || EditRowDetail.OrderID == 1004)   //moved to counter page if it contains the mentioned OrderID's 
        { 
            NavManager.NavigateTo("/counter");    //navigate to another page 
        } 
 
    } 
    public void ActionBeginHandler(ActionEventArgs<Order> args) 
    { 
        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit)) 
        { 
            EditRowDetail = args.Data;    //get the edited row details 
        } 
        // Here you can customize your code 
    }} 
 
 
Reference: 
 
If you want to place buttons in a column without in edit mode, then you can achieve your requirement by using Column template. Find the below link for reference. 
 
Reference: 
 
Please let us know if you have any concerns. 
 
Regards, 
Rahul 


Marked as answer
LP Lukasz Pesik May 14, 2021 08:06 AM UTC

Hi Rahul,

Thanks for your reply, it helped me a lot!

RN Rahul Narayanasamy Syncfusion Team May 17, 2021 05:23 AM UTC

Hi Lukasz, 
 
Thanks for the update.                                                     
 
We are happy to hear that the provided solution was helpful for achieving your requirement. Please let us know if you have any concerns. 
 
Regards, 
Rahul 


Loader.
Up arrow icon