Button inside edit box inside DataGrid

[Lukasz Pesik]

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!!

[Rahul Narayanasamy]

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 

    }} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165408/ze/SAmpleEditTemplate-587482321  

 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template 

 

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: 

https://blazor.syncfusion.com/documentation/datagrid/columns/#using-hyperlink-column-and-performing-routing-on-click  

 

Please let us know if you have any concerns. 

 

Regards, 

Rahul 

[Lukasz Pesik]

Hi Rahul,

Thanks for your reply, it helped me a lot!

[Rahul Narayanasamy]

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