Align Search toolbar item to the left

[Baba Goud]

Hi team,

I am trying to figure out the way on how to align the Search toolbar item to the left side of the Toolbar.

Currently my grid has around 10-15 columns and to search i have to scroll all the way to the right side of the grid.

Is there a way I can achieve this. I tried the below style but that did not work.

.e-toolbar{ 

        text-align:left; 

   } 

So i tried with below code

<SfToolbar>

            <ToolbarItems>

                <ToolbarItem Type="ItemType.Input" Align="ItemAlign.Left">

                    <Template>

                        <SfTextBox Placeholder="Search Term" @ref="SearchTextBox"></SfTextBox>

                    </Template>

                </ToolbarItem>

                <ToolbarItem Type="ItemType.Button" Align="ItemAlign.Left">

                    <Template>

                        <SfButton Content="Search" OnClick="@SearchClick"></SfButton>

                    </Template>

                </ToolbarItem>

            </ToolbarItems>

        </SfToolbar>

But doing so adds another row on top of the existing Toolbar. Below is the current Grid code in razor

<SfGrid DataSource="@OrdersList" AllowPaging="true" AllowSorting="true" AllowGrouping="true" ID="SalesGrid" GridLines="GridLine.Both"

            AllowFiltering="true" @ref="salesOrdersGrid" AllowTextWrap="true" AllowExcelExport="true" AllowPdfExport="true" PrintMode=PrintMode.CurrentPage

            Toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "Search", "Print", "PdfExport", "ExcelExport",

                           })" Height="100%" Width="100%" EnablePersistence="true">

Thanks

Baba

[Satheesh Kumar Balasubramanian]

Hi Baba, 

Greetings from Syncfusion.

We suspect that you want to align the Grid search box to the left side of the toolbar. Here, we have achieve your requirement by using CSS with default toolbar items. Find the below code snippets for your reference.

 

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

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

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

    <GridPageSettings PageSize="8"></GridPageSettings> 

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

<style> 

    .e-toolbar-right {      

        left: 0; 

    } 

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

        left: 230px; 

    } 

</style> 

 

Please let us know if you have any concerns.

Regards,

Satheesh Kumar B 

[Gerald Peng]

Hi Syncfusion,

What if we would like to the search box to be directly to the right of the last button on the right, but not justified all the way to the right like how it is by default? Could you provide us with the appropriate code and sample for this? Many thanks in advance.

G

[Monisha Saravanan]

Hi Gerald,

Thanks for the update.

Query: “What if we would like to the search box to be directly to the right of the last button on the right, but not justified all the way to the right like how it is by default? ”

We have checked your query and suspect that you need to display the search bar at the right side of the last toolbar button. We suggest you to achieve your requirement by using below javascript solution. We have used DataBound event to render the search bar at the left side. Kindly check the attached sample and code snippet for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid_Server-595415811.zip

 

@using Syncfusion.Blazor.Grids

@inject IJSRuntime JSInterop

 

<SfGrid @ref="_pickOrderGrid" DataSource="@Orders" AllowFiltering="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Search" })" AllowPaging="true" Height="315">

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

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

   

    ...

</SfGrid>

 

@code{

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

 

    SfGrid<Order> _pickOrderGrid { get; set; }

 

    public bool IsFirstRender = true;

 

    public async Task DataBound()

    {

        if (IsFirstRender)

        {

            await JSInterop.InvokeVoidAsync("search");

            IsFirstRender = false;

        }

    }

 

}

 

search = function () {

    var left = document.getElementsByClassName('e-toolbar-left')[0];

    var right = document.getElementsByClassName('e-toolbar-right')[0];

    var searchbar = right.childNodes[0];

 

    right.childNodes[0].remove();

    var ele = left.childElementCount;

    left.insertBefore(searchbar, left.children[ele]);

 

}

Please let us know if you have any concern.

Regards,

Monisha

[Olteteanu Bogdan Andrei]

Hello team,

This does not work anymore. 

[Sanjay Kumar Suresh]

Hi Olteteanu Bogdan Andrei,

To achieve your requirement of aligning the search toolbar to the left side, we suggest proceeding with the following changes:

Please apply the below CSS customization to reposition the search input within the toolbar:

Code Snippet:

<style>

 

     .e-toolbar-item.e-template:has(.e-searchinput.e-input) {

     margin-right: calc(100% - 250px) !important; /* Apply your styles here */

 }

 

</style>

 

Snip:

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

Regards,

Sanjay Kumar Suresh

[Olteteanu Bogdan Andrei]

Thank you!

[Sanjay Kumar Suresh]

Hi Olteteanu Bogdan Andrei,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards,

Sanjay Kumar Suresh