Customizing grid's search bar width with custom toolbar

[nizameddin kale]

<style>

    .e-toolbar {

        width: 1000px !important;

    }

        .e-toolbar .e-toolbar-items {

            width: 1000px !important;

        }

            .e-toolbar .e-toolbar-items .e-toolbar-item {

                width: 1000px !important;

            }

                .e-toolbar .e-toolbar-items .e-toolbar-item input {

                    width: 1000px !important;

                }

</style>

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

I'm trying to fit width of grid search input but none of these methods changed width of the input.

[Vignesh Natarajan]

Hi Nizameddin,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Customizing grid's search bar width with custom toolbar” 

 

We have analyzed your query and we understand that you want to increase the width of Search toolbar. Kindly refer the below solution (CSS Selector) to achieve your requirement of default Grid search toolbar width.  

 

@{ 

    var Tool = (new List<string>() { "Search" }); 

} 

<SfGrid ID="Grid" DataSource="@Orders" Toolbar=@Tool> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

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

    </GridColumns> 

</SfGrid> 

  

<style> 

    /*Grid_search - Grid denotes the id of Grid control*/ 

    #Grid_search div { 

        width: 1000px !important; 

    } 

</style> 

 

 

Please get back to us if you have further queries. Or if you want to achieve your requirement using Custom toolbar item kindly sahre details how you have defined the custom toolbar item in Grid.  

 

Regards, 

Vignesh Natarajan 

[nizameddin kale]

Thanks for the answer. The unchanged width issue for me was the isolation css cached. After trying to change its width and doing a little searching I found out that my problem is cache related.

I wish you a good work  Vignesh Natarajan

[Vignesh Natarajan]

Hi Nizameddin,  

Thanks for the update.  

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

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan 

[Shoaib Ahmed]

What if instead of fixed px, I want it to take whole screen width? For some reason, 

width: 100% !important; 

is not working.

[Prathap Senthil]

Based on your requirements to use the whole-screen-width search option toolbar, we suggest the following possible way to achieve your needs: Kindly refer to the code snippet and modified sample provided below for your reference.

<SfGrid DataSource="@Orders" ID="Grid" AllowPaging="true" Height="200" @ref="Grid">

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

    <GridTemplates>

        <ToolbarTemplate>

            <SfToolbar>

                <ToolbarItems>

                    <ToolbarItem Type="@ItemType.Input" Id="GridSearch">

                        <Template>

                            <span class="e-input-group e-control-wrapper  @InputFocus">

                                <input type="text" id="SearchID" class="e-control e-textbox e-lib e-searchinput e-input" value="@SearchInput" @oninput="@((e) => InputArgs(e))" @onblur="@OnBlur" @onfocus="@OnFocus" placeholder="Search Value">

                                @if (SearchInput != null && !string.IsNullOrEmpty(SearchInput))

                                {

                                    <span class="e-clear-icon" @onclick="@((e) => CancelIconClick(e))">

                                    </span>

                                }

                                <span class=" e-search-icon e-icons e-input-group-icon" @onclick="@((e) => SearchText(e))"></span>

                            </span>

                        </Template>

                    </ToolbarItem>

                </ToolbarItems>

            </SfToolbar>

        </ToolbarTemplate>

    </GridTemplates>

   

</SfGrid>

<style>

    #Grid .e-toolbar .e-toolbar-items {

        width: 100%;

    }

 

    #GridSearch {

        width: 100%;

    }

</style>

 

Reference:

https://blazor.syncfusion.com/documentation/datagrid/custom-toolbar

Attachment: DataGridSearchToolBar_c5a81982.zip