Need to add Custom buttons in Grid

[Annangi Sai Kiran]

I wanted to add  3  Custom buttons or icons for different functionalities in single column of each row in a grid . when we click on each button we should be able to get the row data and that button click should be restricted to only particular row and it should not effect other rows.

[Vignesh Natarajan]

Hi Annangi,  

 

Thanks for contacting Syncfusion support.  

 

Query: “ when we click on each button we should be able to get the row data and that button click” 

 

We have analyzed your query and we suggest you to render SfButton component in GridColumn using Column/Cell Template feature of Grid. Refer the below code example.  

 

SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var employee = (context as Order); 

                    <div class="image"> 

                        <SfButton IconCss="e-icons e-chevron-down-fill" OnClick="@(()=>Clicked(employee))"></SfButton> 

                        <SfButton IconCss="e-icons e-chevron-down-fill" OnClick="@(()=>Clicked(employee))"></SfButton> 

                        <SfButton IconCss="e-icons e-chevron-down-fill" OnClick="@(()=>Clicked(employee))"></SfButton> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

  

    SfGrid<Order> Grid { get; set; } 

    public List<Order> Orders { get; set; } 

  

    public void Clicked(Order val) 

    { 

  

    } 

 

 

Inside the template column, we can get the current row details in the Template context variable. So we have passed the row details to clicked event. Refer the below sample for your reference 

 

https://www.syncfusion.com/downloads/support/forum/170997/ze/DataGrid_Server-740173467.zip 

 

Refer our Ug documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns#column-template 

https://blazor.syncfusion.com/documentation/datagrid/templates#template-context 

 

Please get back to us if you have further queries or if above solution does not match your requirement.  

 

Regards, 

Vignesh Natarajan