1. Home
  2. Forum
  3. Blazor
  4. How to change datasource of Dropdown list when in another dropdown list change the value -Version 18.2.59

How to change datasource of Dropdown list when in another dropdown list change the value -Version 18.2.59

I have:
<div class="form-group col-xs-6 col-sm-6 col-lg-6 col-md-6">
                            <SfDropDownList TValue="string" @bind-Value="@(employee.HolidayCountry)" TItem="string" FloatLabelType="FloatLabelType.Always" Placeholder="@Localizer.GetText("State")" DataSource="@_country">
                                <DropDownListEvents ValueChange="CountryChange" TValue="string"></DropDownListEvents>
                                <DropDownListFieldSettings Text="HolidayCountry" Value="HolidayCountry"></DropDownListFieldSettings>
                            </SfDropDownList>
                        </div>
                        <div class="form-group col-xs-6 col-sm-6 col-lg-6 col-md-6">
                            <SfDropDownList TValue="string" @ref="CountryState"  @bind-Value="@(employee.HolidayCountryState)" TItem="string" FloatLabelType="FloatLabelType.Always" Placeholder="@Localizer.GetText("Region")"  DataSource="@_countrystate">
                                <DropDownListFieldSettings Text="HolidayCountryState" Value="HolidayCountryState"></DropDownListFieldSettings>
                            </SfDropDownList>
                        </div>

----------------------------

    protected SfDropDownList<string,string> CountryState;
    protected List<string> _countrystate = new List<string>();

  void CountryChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)
    {
        _countrystate = HolidayApi.GetCountryStateList(args.Value);
        CountryState.DataSource = _countrystate;
        //CountryState.Refresh();

    }

----------------------------
Code above works only for first change of HolidayCountry, but when i change second time the CountryState datasource not working and list are freezing and cannot select anything.
Without         CountryState.DataSource = _countrystate; - not work
With CountryState.Refresh(); - doesn't work too

-----------------------------
Full Page Code in atachement
Pls help.

Attachment: Users_da5c873d.zip

8 Replies 1 reply marked as answer
BL Blazej September 24, 2020 10:15 AM UTC

Ok i solved problem by putting template code in diffrent component and then putting this component to template. But imo it's strange why this not working in direct way.

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 24, 2020 11:31 AM UTC

Hi Blazej, 


Thanks for contacting Syncfusion support. 

We have checked your query and we made sample based on the provided information. In the below sample , two dropdownlist where datasource of the second dropdown is updated for every change of first dropdown according to the changed values. Please find the sample in the attachment. 

Razor

 
      <div class="padding-top"> 
            <SfDropDownList TValue="string" TItem="city" DataSource="@cites"> 
                <DropDownListFieldSettings Text="StartsValue" Value="StartsValue"></DropDownListFieldSettings> 
                <DropDownListEvents TValue="string" ValueChange="OnCityChange"></DropDownListEvents> 
            </SfDropDownList> 
        </div> 
        <div class="padding-top"> 
            <SfDropDownList TValue="string" TItem="Countries" DataSource="@CountryData"> 
                <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings> 
            </SfDropDownList> 
        </div> 
 
 
public async Task OnCityChange(ChangeEventArgs<string> args) 
    { 
        CountryData = await ownservice.GetDataAsync(args.Value); 
    } 
 



Service


 

public class CountryService 
    { 
 
        public async Task<List<Countries>> GetDataAsync(string value) 
        { 
            List<Countries> Country = new List<Countries> 
        { 
            new Countries() { Name = "Australia", ID = "AU" }, 
            new Countries() { Name = "Bermuda", ID = "BM" }, 
            new Countries() { Name = "Canada", ID = "CA" }, 
            new Countries() { Name = "Cameroon", ID = "CM" }, 
            new Countries() { Name = "Denmark", ID = "DK" }, 
            new Countries() { Name = "France", ID = "FR" }, 
            new Countries() { Name = "Finland", ID = "FI" } 
        }; 
            if (value.Length > 0) 
            { 
                return Country.Where(a => a.Name.StartsWith(value)).ToList(); 
            } 
            else 
            { 
                return await Task.FromResult(Country); 
            } 
            
        } 





Alternatively, you can modify the datasource of the dependent dropdownlist by modifying its query. Please find the Cascading demo in the below link.

Demo Link         : https://blazor.syncfusion.com/demos/dropdown-list/cascading?theme=bootstrap4 

Kindly check the samples and get back to us if you need any further assistance on this. 


Regards, 
Jeyanth. 


Marked as answer
BL Blazej September 24, 2020 12:37 PM UTC

Yes, you solution works perfect when i put SfDropDownList outside <Template> in <GridEditSettings>.

When i put it in <Template> then stop working anymore. So when i put all <Template> content to the new component then it was work again.

Thanks for replay.

RN Rahul Narayanasamy Syncfusion Team September 25, 2020 12:13 PM UTC

Hi Blazej, 

Query: When i put it in <Template> then stop working anymore. So when i put all <Template> content to the new component then it was work again 

We have validated your query and you want to change the one dropdown list datasource based on the changed value of other dropdown in DialogTemplate. Here, we have prepared a sample based on your requirement. Here, we have changed the ShipState column dropdown datasource based on the changed value  of the ShipCountry column dropdown. Find the below code snippets and sample for your reference. 

 
<SfGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })"> 
    <GridEvents OnActionBegin="OnActionBegin" TValue="OrdersDetails"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog"> 
        <Template> 
            @{ 
                var Order = (context as OrdersDetails); 
                <div> 
                    . . . 
                    <div class="form-row"> 
                        <div class="form-group col-md-6"> 
                            <label class="e-float-text e-label-top">Ship Country</label> 
                            <SfDropDownList ID="ShipCountry" Placeholder="Select a Country" TItem="string" TValue="string" @bind-Value="@((context as OrdersDetails).ShipCountry)" DataSource="@Countries"> 
                                <DropDownListEvents TValue="string" ValueChange="ValueChange"></DropDownListEvents> 
                                <DropDownListFieldSettings Text="ShipCountry" Value="ShipCountry"></DropDownListFieldSettings> 
                            </SfDropDownList> 
                        </div> 
                        <div class="form-group col-md-6"> 
                            <label class="e-float-text e-label-top">Ship State</label> 
                            <SfDropDownList ID="ShipState" Placeholder="Select a State" TItem="string" Enabled="@Enabled" TValue="string" @bind-Value="@((context as OrdersDetails).ShipState)" DataSource="@States"> 
                                <DropDownListFieldSettings Text="ShipState" Value="ShipState"></DropDownListFieldSettings> 
                            </SfDropDownList> 
                        </div> 
                    </div> 
                </div> 
            } 
        </Template> 
    </GridEditSettings> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    public bool Enabled = false; 
    public List<string> Countries = new List<string>() { "United States", "Australia" }; 
    public List<string> States = new List<string>() { "New York", "Virginia", "Washington", "Queensland", "Tasmania", "Victoria" }; 
 
    . . . 
    public void ValueChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args) 
    { 
        if (args.Value == "United States") 
        { 
            States = new List<string>() { "New York", "Virginia", "Washington" }; 
        } 
        else if (args.Value == "Australia") 
        { 
            States = new List<string>() { "Queensland", "Tasmania", "Victoria" }; 
        } 
        Enabled = true; 
    } 
    public void OnActionBegin(ActionEventArgs<OrdersDetails> args) 
    { 
        if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit || args.RequestType == Syncfusion.Blazor.Grids.Action.Add) 
        { 
            Enabled = false; 
        } 
    } 
} 



Reference: 

Please get back to us if you need further assistance. 

Regards, 
Rahul 


SL Stefan Limpert June 13, 2022 06:05 PM UTC

Hi Rahul,

i tried your last sample in a current environment (net6.0,v20.x) and it worked almost with one exception.

The cascading behaviour did'nt working if you doble-click the records in the grid.

if you try "Add" or "Edit" from ToolBar everything works fine, but not when you direct double-click it.

I figured the same problem in my project, because im adding template buttons per record to edit it and it comes to exact issue like at yours double-clicking.

What is the difference between these procedures? or is it a bug?

Regards

Stefan


SP Sarveswaran Palani Syncfusion Team June 14, 2022 02:14 PM UTC

Hi Stefan,


Greetings from Syncfusion support.


We had checked this scenario by creating a sample in our latest version(20.1.0.59).But we are not able to reproduce the reported issue at our end. We are attaching the sample in this ticket.


Kindly download and refer the sample in this ticket. If you are still facing the reported issue, then the following details would be helpful for us to proceed further.


  1. Share us the entire Grid code snippet
  2. Share the screenshot of the issue you are facing.
  3. If possible, reproduce the reported issue in the provided sample
  4. Or share issue reproducible sample


Above request details will be very helpful for us to further validate the reported query at our end and provide solution as easy as possible.


Regards,

Sarveswaran PK


Attachment: GridSample_a193c94a.zip

SL Stefan Limpert June 15, 2022 07:08 AM UTC

Hello Sarveswaran,

after checking and altering your example (to EditMode.Dialog :-) i found the missing piece. It's the command

GridRef.PreventRender(false);

If it is not set, the cascading did'nt work, but only if you double-click a record.

if you choose the record and click the Toolbar Edit-Button, it works also without PreventRender.

Maybe you could reproduce it, if you set the GridEditSetting Mode to EditMode.Dialog und comments out the PreventRender command in ChangeValue method.

Then test both possibilities to edit a record by changing the cities, maybe you will see the same results.

Nevertheless thanks for your great support

For me the issue is solved.

Regards

Stefan





SP Sarveswaran Palani Syncfusion Team June 16, 2022 05:14 PM UTC

Hi Stefan,


Welcome


We are glad to hear that your query has been resolved by you.


Please get back to us if you need any further assistance.


Regards,

Sarveswaran PK


Loader.
Up arrow icon