Syncfusion Blazor：网格列中的绑定下拉列表

Question

我在 Blazor Core 3.1.0 应用程序中使用 Syncfusion Grid。我通过 Web API 绑定数据。现在我想在其中一列中显示一个下拉列表。

通过这个网址：

Api/Default/GetProjectsList

我得到了我需要绑定到下拉列表的text和value的键值对。

我使用了EjsDropDownList 控件，并将数据与列表绑定。但是如何将此列表显示为网格中的一列是我苦苦挣扎的地方。尝试将其包含在 <GridColumn> 标记中，但该列表尚未成为 Grid 的一部分。

<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>

Answer 1

使用 Grid 的“列模板功能”。有了这个，您可以在 Grid 的列中显示与 List 绑定的下拉列表。请参考下面的文档链接，

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

请使用下面的代码，

    <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();
    ...
}

如果您想在 Grid 中执行编辑时显示 DropDown。然后将列的“EditType”设置为“DropDownEdit”，或者您也可以使用“Edit Template feature”。请参阅以下文档以了解有关此的更多详细信息，

文档： 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