Syncfusion Blazor: Binding drop-down list in Grid column

Question

I am using Syncfusion Grid in a Blazor Core 3.1.0 App. I am binding data through a Web API. Now I want to show a dropdown list in one of the columns.

By this URL:

Api/Default/GetProjectsList

I get the key and value pair that I need to bind to the drop-down list's text and value.

I have used the EjsDropDownList control and bound the data with the list. But how to show this list as a column in the Grid is where I am struggling at. Tried enclosing it in a tag but the list has not become a part of the Grid.

Please help.

Thanks in advance.

<EjsGrid TValue="Order" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
   <EjsDataManager Url="/Api/Orders" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>
     <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Normal"></GridEditSettings>
       <GridColumns>

          <GridColumn>
                  <EjsDropDownList TValue="string" Placeholder="Select a Project">
                        <EjsDataManager Url="/Api/Default/GetProjectsList" Adaptor="Adaptors.WebApiAdaptor" CrossDomain=true></EjsDataManager>
                        <DropDownListFieldSettings Text="Item1" Value="Item2"></DropDownListFieldSettings>
                  </EjsDropDownList>  
          </GridColumn>

          <GridColumn Field=@nameof(Order.OrderId) DefaultValue="0" IsIdentity="true" IsPrimaryKey="true" HeaderText="ID" TextAlign="TextAlign.Right">
          </GridColumn> 

    </GridColumns>
    </EjsGrid>

Renjith Singh Renjith Singh · Accepted Answer · 2019-11-20T09:51:56

Use the “Column Template feature” of Grid. With this you can display a Dropdown bound with List in a Grid’s column. Please refer the documentation link below,

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/columns/?no-cache=1#column-template https://ej2.syncfusion.com/blazor/documentation/grid/templates/

Please use the code below,

    <EjsGrid TValue="Order" ModelType="@Model" AllowPaging="true" ...>
    ...
   <GridColumns>
        <GridColumn>
            <Template>
                <EjsDropDownList TValue="string" Placeholder="Select a Project">
                    <EjsDataManager Url="/Api/Default/GetProjectsList" Adaptor="Adaptors.WebApiAdaptor" CrossDomain=true></EjsDataManager>
                    <DropDownListFieldSettings Text="Item1" Value="Item2"></DropDownListFieldSettings>
                </EjsDropDownList>
            </Template>
        </GridColumn>
        ...
    </GridColumns>
</EjsGrid>

@code{

    EjsButton accountButton;
    public Order Model = new Order();
    ...
}

And also if you want to display the DropDown when perform editing in Grid. Then set the “EditType” for the column as “DropDownEdit” or you can also use the “Edit Template feature”. Please refer the below documentations for more details regarding this,

Documentations : https://ej2.syncfusion.com/blazor/documentation/grid/editing/#cell-edit-type-and-its-params https://ej2.syncfusion.com/blazor/documentation/grid/editing/#cell-edit-template

Syncfusion Blazor: Binding drop-down list in Grid column

1 Answers