Action button in Grid

[KINS]

I have an sfgrid control with action button.

I need to show grid action button (edit/delete/view)  in below format

 

https://www.screencast.com/t/sVHnwQyh

[Rahul Narayanasamy]

Hi KINS, 

Greetings from Syncfusion. 

You want to show action buttons while clicking the button icon in the GridColumn. You can achieve your requirement by using ColumnTemplate feature. Here, we have rendered a SfDropDownButton in the GridColumn and performed the necessary(Edit/Delete/ etc) operations while clicking the corresponding items. Find the below code snippets and sample for your reference. 

 

<SfGrid ID="Grid" @ref="Grid" DataSource="@Employees" Width="900"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

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

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Left" Width="180"></GridColumn> 

        <GridColumn TextAlign="TextAlign.Center" Width="150"> 

            <Template> 

                @{ 

                    var employee = (context as EmployeeData); 

                    <SfDropDownButton Content=". . ."> 

                        <DropDownButtonEvents ItemSelected="@((e) => ItemSelected(e, employee))"></DropDownButtonEvents> 

                        <DropDownMenuItems> 

                            <DropDownMenuItem Text="Edit"></DropDownMenuItem> 

                            <DropDownMenuItem Text="Delete"></DropDownMenuItem> 

                            <DropDownMenuItem Text="View"></DropDownMenuItem> 

                        </DropDownMenuItems> 

                    </SfDropDownButton> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<EmployeeData> Grid; 

    private bool IsVisible { get; set; } = true; 

    public List<EmployeeData> Employees { get; set; } 

 

    private async Task ItemSelected(MenuEventArgs args, EmployeeData data) 

    { 

        if (args.Item.Text == "Edit") 

        { 

            await Task.Yield(); 

            await Grid.StartEditAsync(); 

        } 

        if (args.Item.Text == "Delete") 

        { 

            await Grid.DeleteRecordAsync(); 

        } 

        if (args.Item.Text == "View") 

        { 

            //show the passed record details(data) in dialog view based on your requiremnet 

        } 

   } 

 

 

    . ..  

} 

Sample: https://www.syncfusion.com/downloads/support/forum/173302/ze/WebApplication1-1878717331  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[KINS]

Thanks for reply..

I need as above screencast format.

please help,,,

[Rahul Narayanasamy]

Hi KINS, 

Thanks for the update. 

We are currently checking the feasibility to achieve the requirement from our end. We will update the further details within two business days. Until then we appreciate your patience. 

Regards, 

Rahul 

[Vignesh Natarajan]

Hi KINS,  

 

Thanks for the patience.  

 

Query: “I need as above screencast format please help,,,” 

 

We would like to inform you that we can achieve your requirement using custom command column feature of Grid. It is used to render custom button component in the Grid column and handle the actions as per our own. Kindly refer the below code example.  

 

<SfGrid ID="Grid" @ref="Grid" DataSource="@Employees" Width="900"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 

    <GridEvents CommandClicked="OnCommandClicked" TValue="EmployeeData"></GridEvents> 

    <GridColumns> 

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

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Left" Width="180"></GridColumn> 

        <GridColumn HeaderText="Manage Records" Width="150"> 

            <GridCommandColumns> 

                <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss="e-icons e-more-icon", CssClass = "e-flat" })"></GridCommandColumn> 

            </GridCommandColumns> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

<SfDialog Width="250px" IsModal="true" @bind-Visible="@IsVisible"> 

    <DialogTemplates> 

        <Content> 

            <SfButton CssClass="e-round" IconCss="e-icons e-plus-icon" OnClick="Clicked" IsPrimary="true"></SfButton> 

            @*similarly render button as per your*@ 

        </Content> 

    </DialogTemplates> 

</SfDialog> 

 

<style> 

    .e-plus-icon::before { 

        content: '\e823'; 

    } .e-more-icon::before { 

        content: '\e615'; 

    } 

</style> 

@code { 

    public void Clicked() 

    { 

        Grid.AddRecordAsync(); 

    } 

    SfGrid<EmployeeData> Grid; 

    private bool IsVisible { get; set; } = true; 

    public List<EmployeeData> Employees { get; set; } 

 

    public void OnCommandClicked(CommandClickEventArgs<EmployeeData> args) 

    { 

        IsVisible = true; 

        // Perform required operations here 

    } 

 

Kindly refer the below sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/173302/ze/WebApplication874952752.zip 

 

 As an example we have displayed the add icon inn dialog component while clicking the custom button icon. Similarly we request you to achieve your requirement by rendering / customizing the component as per your requirement. 

 

Refer the below documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/command-column-editing#custom-command-column 

 

If you are facing any trouble using above the approach. Kindly get back to us with more details about your requirement. we are happy to assist.  

 

Regards, 

Vignesh Natarajan