Change dropdown data dynamicly

[Soren M]

Hi - I have a SFgrid, with one column as a dropdown list. I want to change the content of the dropdown list according to the data in the row. 

Scenario: I click the dropdown and pick the ID of the datarow and call a webservice that gives me a list<string> of what values I should populate in the dropdown, as options to this rowid. 

I have more than 600 rows, so it is to slow to preload, so I have found the OnOpen-event to call the webservice, but how do I change the dropdowncontent on the fly? 

I have attached my testproject. 

 

KR

/Søren

Attachment: DataGridDynamicDropdown_f45931d0.zip

[Rahul Narayanasamy]

Hi Soren, 

Greetings from Syncfusion. 

We are currently checking your reported query at our end and we will update the further details within two business days(January 19, 2022). Until then we appreciate your patience. 

Regards, 

Rahul 

[Rahul Narayanasamy]

Hi Soren, 

Thanks for your patience. 

You want to change the dropdown list data source dynamically on the fly. You can directly assign the new data to the DropDownList in the open event by using the variable assigned to data source. Data to be bound to the dropdownlist should match the previously bound type. Kindly refer to the following code. 

 

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Grids 

 

<SfGrid @ref="Grid" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

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

    <GridEvents TValue="Order" OnBatchSave="BatchSave"></GridEvents> 

    <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" TItem="Order" TValue="string" @bind-Value="@((context as Order).CustomerID)" DataSource="@DropDownData"> 

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

                    <DropDownListEvents  

                                        ValueChange="OnChange"  

                                        OnOpen="@((args) => OnOpenHandler(args, context as Order))" 

                                        TValue="string" TItem="Order"></DropDownListEvents> 

                </SfDropDownList> 

            </EditTemplate> 

        </GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

 

@code{ 

    SfGrid<Order> Grid; 

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

    public List<Order> DropDownData { get; set; } 

    . . . 

 

    private async Task OnOpenHandler(BeforeOpenEventArgs args, Order rowData) 

    { 

        // Call service to give options for each orderID 

        Grid.PreventRender(false); 

        // Data to be bound to the dropdownlist should match the previously bound type.           

        List<Order> returnList = Enumerable.Range(1, 5).Select(x => new Order() 

        { 

            OrderID = 5000 + x, 

            CustomerID = (new string[] { "One", "Two", "Tree", "Four", "Five" })[new Random().Next(5)], 

        }).ToList(); 

 

        DropDownData = returnList; 

        // You can directly bind the list to the variable assigned to the datasource  

        // This returnlist should be content of the choosen dropdown - How do I bind? 

 

    } 

 

    . . . 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/171982/ze/DataGrid-772406153 

Please let us know if you have any concerns. 

Regards, 

Rahul