Binding dropdownedit datasource in grid to Database

[Patrick]

Hi there,

I have a grid control that has a column with the edit type DropDownEdit. I am attempting to bind the DropDownEdit edit control to my SQL Server database to obtain the dynamic values stored in the table and bind the values to the column of the grid.

I am using Dapper with my database to bind the grid using a custom adaptor.

Can someone show me an example of binding the DropDownEdit control to class and obtain the values stored in the database?

Thank you!

[Rahul Narayanasamy]

Hi Patrick, 

Greetings from Syncfusion. 

We have validated your query and you want to bind a custom dropdown datasource to one of the Grid columns. You can achieve your requirement by using EditTemplate. You can render a dropdown component in EditTemplate and bind the datasource from your database using CustomAdaptor. Find the below code snippets and documentation links for reference. 

 

<SfGrid TValue="Order" ID="Grid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })"> 

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

    <GridPageSettings PageSize="8"></GridPageSettings> 

    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn> 

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

            <EditTemplate> 

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

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

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

                </SfDropDownList> 

            </EditTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    public static List<Order> Orders { get; set; } 

 

    . . . 

 

    // Implementing custom adaptor by extending the DataAdaptor class 

    public class CustomAdaptor : DataAdaptor 

    { 

        // Performs data Read operation 

        public override object Read(DataManagerRequest dm, string key = null) 

        { 

            IEnumerable<Order> DataSource = Orders; 

             

            . . . 

            return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; 

        } 

 

        . . . 

 

        // Performs Update operation 

        public override object Update(DataManager dm, object value, string keyField, string key) 

        { 

            var data = Orders.Where(or => or.OrderID == (value as Order).OrderID).FirstOrDefault(); 

            if (data != null) 

            { 

                //update the values to your database 

                data.OrderID = (value as Order).OrderID; 

                data.CustomerID = (value as Order).CustomerID; 

                data.Freight = (value as Order).Freight; 

            } 

            return value; 

        } 

    } 

} 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template  

https://blazor.syncfusion.com/documentation/dropdown-list/data-source/#custom-adaptor  

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/  

Please let us know if you have any concerns. 

Regards, 

Rahul