How to make Drop-Down list wider in DataGrid

[John]

I can't seem to make the drop-downs wide enough to show all drop-down items.  How is that possible?

In the example below I would like to increase the width of the column containing drop-down list items...

Here is the code

 

  <SfGrid @ref="_fieldRuleGrid" TValue="FieldRule" Query="QueryData" ID="FieldRulesEditor"   Toolbar="@ToolbarItems">

        <SfDataManager @ref="_dataManager" AdaptorInstance="@typeof(RuleSetFieldRuleDataAdaptorModel)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

        

        <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>

        <GridEditSettings  AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.Grids.EditMode.Batch"></GridEditSettings>

        <GridEvents OnActionBegin="OnActionBegin" OnActionComplete="OnActionComplete" OnActionFailure="OnActionFailure" TValue="FieldRule" >  </GridEvents>

        <GridColumns>

            <GridColumn Field="FieldRuleId.Id" HeaderText="Id" IsPrimaryKey="true" Visible=false></GridColumn>

            <GridColumn Field="RuleOrder" HeaderText="Order of Execution"></GridColumn>

            <GridColumn Field="PropertyName" HeaderText="Field To Validate" EditType="EditType.DropDownEdit">

                <EditTemplate>

                    <SfDropDownList ID="FieldItem___Name"

                                    TItem="NextWare.ProductPortalUI.SharedComponents.ValidationEditor.Models.FieldItem"

                                    TValue="string"

                                    @bind-Value="@((context as  FieldRule).PropertyName)"

                                    DataSource="@_aggregateFieldList.Fields" Width="100">

                        <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>

                    </SfDropDownList>

                </EditTemplate>

            </GridColumn>

            <GridColumn Field="RuleType.Name" HeaderText="Rule Type" EditType="EditType.DropDownEdit">

                <EditTemplate>

                    <SfDropDownList ID="RuleType___Name"

                                    TItem="NextWare.Domain.ValidationServices.Validator.ViewModels.RuleType"

                                    TValue="string"

                                    @bind-Value="@((context as  FieldRule).RuleType.Name)"

                                    DataSource="@NextWare.Domain.ValidationServices.Validator.ViewModels.RuleType.Values" Width="100">

                        <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>

                    </SfDropDownList>

                </EditTemplate>

            </GridColumn>

            <GridColumn Field="ErrorDescription" HeaderText="Error Description"></GridColumn>

            <GridColumn Field="ErrorCode" HeaderText="Error Code"></GridColumn>

            

            <GridColumn Field="CascadeMode.Name" HeaderText="Cascade Mode" EditType="EditType.DropDownEdit">

                <EditTemplate>

                    <SfDropDownList ID="CascadeMode___Name"

                                    TItem="NextWare.Domain.ValidationServices.Validator.ViewModels.CascadeMode"

                                    TValue="string"

                                    @bind-Value="@((context as  FieldRule).CascadeMode.Name)"

                                    DataSource="@NextWare.Domain.ValidationServices.Validator.ViewModels.CascadeMode.Values" Width="30">

                        <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>

                    </SfDropDownList>

                </EditTemplate>

            </GridColumn>

            <GridColumn Field="SeverityLevel.Name" HeaderText="Severity Level" EditType="EditType.DropDownEdit">

                <EditTemplate>

                    <SfDropDownList ID="SeverityLevel___Name"

                                    TItem="NextWare.Domain.ValidationServices.Validator.ViewModels.SeverityLevel"

                                    TValue="string"

                                    @bind-Value="@((context as  FieldRule).SeverityLevel.Name)"

                                    DataSource="@NextWare.Domain.ValidationServices.Validator.ViewModels.SeverityLevel.Values" Width="30">

                        <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>

                    </SfDropDownList>

                </EditTemplate>

            </GridColumn>

            <GridColumn Field="IsValid" HeaderText="Is Valid"></GridColumn>

        </GridColumns>

    </SfGrid>

[Vignesh Natarajan]

Hi John,  

 

Thanks for contacting Syncfusion support.  

 

Query: “I can't seem to make the drop-downs wide enough to show all drop-down items.  How is that possible?” 

 

We have analyzed your query and by default editor control inside the Grid column will occupy the Grid column width only. So if you want to increase the width of dropdownlist control, we request you to follow any one of the below solution.  

 

1. Increase the DropDownList popupwidth using PopupWidth property.

 

We suggest you to define the PopupWidtrh property of DropDownList to display the entire value in Drop Down list control. Refer the below code example and screenshot for your reference 

 

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

            <EditTemplate> 

                <SfDropDownList ID="CustomerID" TItem="Order" PopupWidth="200" TValue="string" @bind-Value="@((context as Order).CustomerID)" DataSource="@Orders"> 

                    <DropDownListFieldSettings Value="CustomerID"></DropDownListFieldSettings> 

                </SfDropDownList> 

            </EditTemplate> 

        </GridColumn> 

 

 

 

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth 

  

2. Increase the column width using Width property.

 

Or we suggest you to define Width property GridColumn to display the values property inside the DropDownList control. Refer the below code example 

 

<GridColumn Field=@nameof(Order.CustomerID) Width="250" HeaderText="Customer Name">            <EditTemplate>                <SfDropDownList ID="CustomerID" TItem="Order" TValue="string" @bind-Value="@((context as Order).CustomerID)" DataSource="@Orders">                    <DropDownListFieldSettings Value="CustomerID"></DropDownListFieldSettings>                </SfDropDownList>            </EditTemplate>        </GridColumn>

 

 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#width 

 

Kindly use anyone of the above solution to achieve your requirement. Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan