add a toolbar button with an icon

[haizhi zhong]

Hi Guys,

In the grid, I need to add a button in the toolbar with an check mark icon, the code I can find like below doesn't allow me to do that.

     

                    <EjsGrid Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "MyButton"})">

                    </EjsGrid>

Do you have a solution? Thanks!

[Vignesh Natarajan]

Hi Haizhi, 

Thanks for contacting Syncfusion forums. 

Query: “In the grid, I need to add a button in the toolbar with an check mark icon, the code I can find like below doesn't allow me to do that.” 

We have achieved your requirement by using custom toolbar item support in Grid. Refer the below code example.  

<EjsGrid DataSource="@Orders" @ref="Grid" AllowPaging="true" Height="200" Toolbar="Toolbaritems"> 

. . . . . . 

</EjsGrid> 

 

<style> 

    .e-check::before { 

        content: '\e7ff'; 

    }    

</style> 

 

@code{ 

    EjsGrid<Order> Grid; 

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

    private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", "Delete", "Update", "Cancel", new ItemModel() { Text = "Checked", TooltipText = "Checked", PrefixIcon = "e-check", Id = "Check" } }; 

. . . . . ..   

} 

Refer the below screenshot for the output  

 

We have already documented this request in our UG documentation. Kindly refer the below link for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/tool-bar/#built-in-and-custom-items-in-toolbar  

Kindly get back to us if you have further queries. 

Regards, 

Vignesh Natarajan. 

[haizhi zhong]

Great.

Thank you so much!

[Vignesh Natarajan]

Hi Haizhi,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you need any further assistance from us. 

Regards, 

Vignesh Natarajan.