Customize Built in Toolbar Search Item

[Stephanie Koronidou]

Dear Support,

Is it possible to align the built in grid toolbar search item to the left and also change the placeholder from "Search" to something else e.g. "Type to Filter"?  

Please note that I do not want this change  to affect rest of the items that are aligned to the right.

Thank you

[Renjith Singh Rajendran]

Hi Stephanie, 

Greetings from Syncfusion support. 

Query 1 : built in grid toolbar search item to the left 

We suggest you to apply the below style for the corresponding search toolbar item to align the item to your required position in the Grid’s toolbar. Please add the below style in your application, 

 

<style> 

    .e-toolbar-right { 

        left: 85px;             /*Set the styles based on your requirement*/ 

    } 

</style> 

Query 2 : change the placeholder from "Search" to something else e.g. "Type to Filter"?   

We suggest you to use the “Localization feature” of Grid. With this feature you can customize the display texts in Grid, based on the corresponding locale keys. The customized locale text for the search text key(Grid_Search) will be displayed in the place holder of Search input text box. Please refer the below documentation for more details, 

Documentation :  

https://blazor.syncfusion.com/documentation/datagrid/global-local/#localization 

https://blazor.syncfusion.com/documentation/common/localization/?no-cache=1 

 

You can change the below locale key(Grid_Search) in the resx file to apply your customized text in Grid’s search input box place holder, 

 

  <data name="Grid_Search" xml:space="preserve"> 

    <value>Type the filter</value> 

  </data> 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Stephanie Koronidou]

Hello,

Thanks for your reply.

Regarding Query 1, by applying the suggested CSS, it also affects my rest of the toolbar items that are aligned to the right. 

I want only to change the alignment of the Search Item from right to left. 

[Renjith Singh Rajendran]

Hi Stephanie, 

Thanks for your update. 

Based on your scenario, we suggest you to use the below style to align only the search textbox to the left in Grid’s toolbar. Please add the below style to your application, 

 

<style> 

    .e-toolbar-right .e-search {     /*Apply for only the search input box*/ 

        right: 632px; 

    } 

</style> 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Stephanie Koronidou]

Hello,

Thanks a lot for the reply. 
However the grid width is not static since it changes based on the screen size. So the right attribute cannot be a static value.
Is it possible that I can use something like left: 0px for the search item only? 

[Renjith Singh Rajendran]

Hi Stephanie, 

Thanks for your update. 

We need more details to further proceed on this based on your scenario. Please get back to us with the following details for better assistance. 

1. Share the details of the List of toolbar items you will be containing in Grid toolbar.
2. Share the screenshot showing your requirement.
3. Share the complete Grid rendering code. We need to check with the toolbar items you will contain in Grid.

The provided information will help us analyze your scenario, and provide you a solution based on your requirement.  

And also we suggest you to refer to our below documentation for the Custom toolbar item feature of Grid. With this you can define your own customized toolbar items in Grid. 

Documentation : https://blazor.syncfusion.com/documentation/datagrid/tool-bar/#custom-toolbar 

 

You can use this feature if this suits your requirement. We have discussed this topic to achieve the custom search toolbar item in the below thread, 

https://www.syncfusion.com/forums/152545/combining-standsearch-toolbar-items-with-templated-items 

Regards, 

Renjith Singh Rajendran 

[Stephanie Koronidou]

Hello,

Thanks for your reply.

Below is the Toolbar Items I have.I have a custom item and the search build in toolbar item.

private List<object> Toolbaritems { get; set; } = new List<object>() { "Search", new ItemModel() { Text = "Add", PrefixIcon = "e-add", Id = "Add", Align = (Syncfusion.Blazor.Navigations.ItemAlign.Right) } };

My requirement is to have the build in search toolbar item to the left hand side of the grid.

I have added the proposed style. 

.e-toolbar-right .e-search {

    right: 300px;

} 

However, this number should change based on the screen size.

For example, on large screen it is shown exactly as I want it (on the Left hand side of the grid)

But in smaller screen, since the grid width is smaller now, the right: 300px; is not correct anymore.

Here is the Grid component.(I haven't included the Grid Column definitions)

Thank you in advance.

[Renjith Singh Rajendran]

Hi Stephanie, 

Thanks for your update. 

Based on your requirement, we have prepared a sample. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11386318811 

 

In the above sample, we have used the default Grid Add and Search toolbar items and apply the below styles. As we could see that, you are using your own customized add action(instead of default), we suggest you to cancel the default add using args.Cancel in OnToolbarClick event handler and do your customized operation.  

Please use as like the below code, 

 

<SfGrid @ref="GridInstance" ID="Grid" DataSource="@Orders" Toolbar="@Toolbaritems" AllowPaging="true"> 

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

    <GridEvents OnToolbarClick="OnToolbarClick"  TValue="Order"></GridEvents> 

    ... 

</SfGrid> 

 

<style> 

    .e-toolbar-right {      

        left: 0; 

    } 

    .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left { 

        left: unset; 

        right: 0; 

    } 

</style> 

 

@code{ 

    ... 

    private List<object> Toolbaritems { get; set; } = new List<object>() { "Search", "Add" }; 

    public void OnToolbarClick(ClickEventArgs args) 

    { 

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

        { 

            args.Cancel = true;  //Cancel the default toolbar add action. 

            //Perform your custom action here 

        } 

    } 

    ... 

} 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran