Add Text to Grid ToolBar

[JaeHyeong Jang]

Hi

I can't speak English. So I use Google Translate.

Please understand if the explanation is not natural.

I want to display the title for the Grid in the Grid ToolBar.

When creating a custom item in a ToolBar, the only values that can be set in the ItemType property are Button/Separator/Input.

Can't you just add text?

Any help to me would be appreciated.

[Rahul Narayanasamy]

Hi JaeHyeong, 

Greetings from Syncfusion. 

Query: Add Text to Grid ToolBar - When creating a custom item in a ToolBar, the only values that can be set in the ItemType property are Button/Separator/Input. Can't you just add text? 

We have validated your query and you want to add text in Grid toolbar. You can achieve your requirement by using Template Property. Here, we have achieved your requirement by defining ToolbarTemplate. In this template, we have rendered Custom text(div element with text) using RenderFragment. Find the below code snippets and sample for your reference. 

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

                        new ToolbarItem() 

                        { Template = Text, Id = "text", TooltipText = "Text", Align = ItemAlign.Right, 

                            Type = ItemType.Button, CssClass = "custom-toolbar-item-label" 

                        }})" Height="315"> 

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

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    . . . 

    private RenderFragment Text =>@<div> Custom Text Here... </div>; 

 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/158487/ze/BlazorAppToolbarTex3-2089095190  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[JaeHyeong Jang]

Hi

Thanks for the reply and sample source.

It works perfectly.

Thanks for any help.

[Rahul Narayanasamy]

Hi JaeHyeong, 

 

Thanks for the update. 

 

We are happy to hear that the provided solution was helpful to achieve your requirement. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rahul