We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Define Width on Grid toolbar item

Dear Support,

a)I am trying to define the width in a Grid Toolbar custom Item for

 a) SfDropDownList Width="100px"

b) SfDatePicker Width="130px"

c)<SfTextBox Width="90px"

and is not working.

can provide a working code sample based on the code below, on how to achieve that?


 <SfGrid AllowPaging="true" ID="GridnameVisitActivities" @attributes="@GridnameVisitActivitiesAttributes"  @ref="GridnameVisitActivities"  DataSource="@VisitActivityObjects" Height="100%" Width="100%">
                    <ToolbarEvents Clicked="ToolbarClickHandler"></ToolbarEvents>
                        <ToolbarItem Type="@ItemType.Button" Id="refresh" TooltipText="refresh" PrefixIcon="e-icons e-refresh"></ToolbarItem>
                        <ToolbarItem Type="@ItemType.Input">
                                <SfDropDownList Width="100px" TValue="string" TItem="SelectStatusClass" DataSource=@LocalDataStatus @bind-Value="@SelectStatusClassDropVal" AllowFiltering="false" Placeholder="STATUS">
                                    <DropDownListFieldSettings Text="text" Value="text"> </DropDownListFieldSettings>
                                    <DropDownListEvents TValue="string" TItem="SelectStatusClass" ValueChange="SelectStatusOnChange"> </DropDownListEvents>
                        <ToolbarItem Type="@ItemType.Input">
                                <SfDatePicker Width="130px" TValue="DateTime?" @bind-Value="@MyFilterModelObj.ExamStartFilter" Format="dd/MM/yyyy" Placeholder="exams FROM">
                                    <DatePickerEvents TValue="DateTime?" ValueChange="SelectExamStartOnChange"></DatePickerEvents>

                        <ToolbarItem Type="@ItemType.Input">
                                <SfTextBox Width="90px" @bind-Value="MyFilterModelObj.txtReceptionNotesFilter" Placeholder="REnotes" @onkeydown='@(e => OnMyKeyPressed(e))'></SfTextBox>
                        <ToolbarItem Type="@ItemType.Button" Text="SEARCH" Id="search" TooltipText="search">
                        <ToolbarItem Type="@ItemType.Button" Text="CLEAR" Id="clear" TooltipText="clear"> </ToolbarItem>

1 Reply

SP Sarveswaran Palani Syncfusion Team January 4, 2023 03:44 AM UTC

Hi Dan,

Greetings from Syncfusion support.

From your query, we suspect that you’re facing issue in defining width in grid custom toolbar item. So, we prepare sample based on your shared code snippet. But we’re unable to reproduce the reported issue at our end. Kindly share the video demo or screenshot of an issue and reproduce the reported issue in the provided sample or share simple issue reproducible sample to us. It’ll will be very helpful for us to validate the reported query at our end and provide the solution as early as possible. Kindly refer the attached sample for your reference.


Attachment: SfGrid_ToolbarItem_302567d.zip

Live Chat Icon For mobile
Up arrow icon