Grid Command Button with Custom Icon

[Amjad Khan]

Dear Support,

I want to have a command button in grid with a custom icon in it. The icon will be fetched from a local images directory. How can I achieve it and I may want to resize the icon according to the size of the button.

Regards,

Amjad.

[Rahul Narayanasamy]

Hi Amjad, 

Greetings from Syncfusion. 

Query: Grid Command Button with Custom Icon 

We have validated your query and you want to add custom icon in Grid command button. You can achieve your requirement by using IconCss property of CommandButtonOptions. Find the below code snippets and screenshot for your reference. 

<SfGrid DataSource="@Orders" AllowPaging="true" Height="315"> 

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

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <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"></GridColumn> 

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

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

            <GridCommandColumns> 

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

            </GridCommandColumns> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Amjad Khan]

Ok, this is somewhat helpful. 

But what if want to load my own graphic instead?

Also, you showed e-add here, are there where is the list of other icons that can be added?

Regards,

Amjad.

[Rahul Narayanasamy]

Hi Amjad, 

Thanks for the update. 

Query: But what if want to load my own graphic instead? Also, you showed e-add here, are there where is the list of other icons that can be added? 

We have validated your query and if you want to change the button icon, then you can change the icon by using CSS class reference. If you want to render a image then we suggest you to achieve your requirement by using Column template. You can render the image and perform the required actions manually in click event of that image element. 

Reference: 

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

You can find all the available icons in below link. 

Reference: 

https://blazor.syncfusion.com/documentation/appearance/icons/ 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Ian Burt]

has this been resolved? can I use my own custom icon since the button is used for a different action and I need to maintain the design principals

[Prathap Senthil]

Hi lan Burt,

Yes, you can use your own custom icon in the DataGrid. To customize the button's icon, you can use the template feature. This allows you to define your own html and include custom icons as per your design requirements. Kindly refer to the below code snippet and sample for your reference.

  <GridColumn HeaderText="Actions" Width="150" >

      <Template>

          @{

                var data = context as OrderData;

              <button class="custom-icon" @onclick="@(args => CustomAction(data))"></button>

 

          }

      </Template>

  </GridColumn>

Sample: https://blazorplayground.syncfusion.com/embed/BjLpZmWXKGWhCXly?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

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

Additionally, you can use the custom command column to customize the button based on your requirements. Kindly refer to the documentation below for more details.

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

Regards,
Prathap Senthil