Make DataGrid search item wider

[Luis Roberto]

Is there a way to make the DataGrid search toolbar item wider than it is by default ?

Thanks

[Vignesh Natarajan]

Hi Luis,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Is there a way to make the DataGrid search toolbar item wider than it is by default ?” 

 

We suggest you to achieve your requirement by applying the below css styles to Grid search element to change the width of the default Search input box. Refer the below code example.  

 

<SfGrid ID="Grid" DataSource="@DataSource" AllowPaging="true" Toolbar=@ToolbarItems> 

     

</SfGrid> 

<style> 

    /*Grid denotes the SfGrid Id*/ 

    #Grid_search { 

        width: 400px; 

    } 

  

        #Grid_search > div { 

            width: 400px !important; 

        } 

</style> 

 

Refer the below screenshot for your reference 

 

 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Luis Roberto]

Thank you very much Vignesh, that worked perfectly.

Take care

[Vignesh Natarajan]

Hi Luis,  

Thanks for the update.  

We are glad to hear that you have achieved your requirement using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan