Select Item in Dynamic Dropdown List

[Marc]

Hi.

I have 3 dropdown list on a page as shown here.  The AHRI drop is selected.  When this value get selected, a database lookup populates the value for the ODU drop down.  This works well.

In the code below, I then populate the IDU list to only show the IDU values constrained by the ODU value.  The list gets built ok.  

My issue is that I would like to set a default IDU val.  This is not working because I think the IDU DDL is not rendered yet.

I have the correct IDU value, but when I update the bound variable, it is not working.

Any thoughts on how to get this to work?

Thanks,

Marc.

Page HTML:

==========================================================

<div class="col-sm">

            <div class="cascading">

                @*AHRI*@

                <SfDropDownList TValue="String" TItem=VAhri PopupHeight="230px" Placeholder="Select AHRI" DataSource=@AhriDataA @bind-Value="@AhriVal"

                                AllowFiltering="true" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains">

                    <SfDataManager Url="api/alldata/getahri" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>

                    <DropDownListEvents TItem=VAhri TValue="string" Blur="@BlurHandlerAHRI"></DropDownListEvents>

                    <DropDownListFieldSettings Value="Ahri" Text="Ahri"></DropDownListFieldSettings>

                </SfDropDownList>

                <div>

                    <SfButton IsPrimary="true" CssClass="e-outline" @onclick="onToggleClickAHRI">Refresh</SfButton>

                </div>

            </div>

        </div>

        <div class="col-sm">

            <div class="cascading">

                @*ODU*@

                <SfDropDownList TValue="string" TItem=VOdu PopupHeight="230px" Placeholder="Select ODU" DataSource=@OduA @bind-Value="@OduVal"

                                AllowFiltering="true" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains">

                    <SfDataManager Url="api/alldata/GetODU" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>

                    <DropDownListEvents TItem="VOdu" TValue="string" ValueChange="ValueChangeODU"></DropDownListEvents>

                    <DropDownListFieldSettings Value="Odu" Text="Odu"></DropDownListFieldSettings>

                </SfDropDownList>

                @*IDU*@

                <SfDropDownList TValue="string" TItem=VOduidu PopupHeight="230px" Placeholder="Select IDU" DataSource=@OduIduA @bind-Value="@IduVal" Query="@IduQry"

                                AllowFiltering="true" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

                                Enabled="@EnableDDL_IDU">

                    <SfDataManager Url="api/alldata/GetODUIDU" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>

                    <DropDownListFieldSettings Value="Idu" Text="Idu"></DropDownListFieldSettings>

                </SfDropDownList>

                <div>

                    <SfButton IsPrimary="true" CssClass="e-outline" @onclick="onToggleClickODU">Refresh</SfButton>

                </div>

            </div>

        </div>

Code Behind
==============================================================

using rebQry.App.Services;

using rebQry.shared;

using Microsoft.AspNetCore.Components;

using Syncfusion.Blazor.Grids;

using Syncfusion.Blazor.DropDowns;

using Syncfusion.Blazor.Data;

namespace rebQry.app.Pages

{

    public partial class MITS_Test2

    {

        public string ProvVal { get; set; } = "";

        public string AhriVal { get; set; } = "";

        public string RebVal { get; set; } = "";

        public string OduVal { get; set; } = "";

        public string IduVal { get; set; } = "";

        public string RebValFed { get; set; } = "";

        public string RebValProv { get; set; } = "";

        public Query? IduQry { get; set; } = null;

        public bool EnableDDL_IDU = false;

        [Inject]

        public IProvDataService? ProvDS { get; set; }

        [Inject]

        public IAhriDataService? AhriDS { get; set; }

        public IEnumerable<Prov>? ProvsA { get; set; }

        public IEnumerable<VAhri>? AhriDataA { get; set; }

        public IEnumerable<VOdu>? OduA { get; set; }

        public IEnumerable<VOduidu>? OduIduA { get; set; }

        public IEnumerable<VOduiduAhri>? OduIduAHRI { get; set; }

        protected override async Task OnInitializedAsync()

        {

            ProvsA = (await ProvDS.GetProvs()).ToList();

            AhriDataA = (await AhriDS.GetAll()).ToList();

            OduA = (await AhriDS.GetODU()).ToList();

            OduIduA = (await AhriDS.GetIDU()).ToList();

        }

        private void onToggleClickAHRI(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)

        {

            RebVal = AhriDS.GetFedRebate(AhriVal, ProvVal);

            RebValFed = RebVal;

            RebVal = AhriDS.GetProvRebate(AhriVal,ProvVal);

            RebValProv = RebVal;

        }

        private void onToggleClickODU(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)

        {

            RebVal = AhriDS.GetFedRebate(OduVal,IduVal,ProvVal);

            RebValProv = RebVal;

            RebVal = AhriDS.GetProvRebate(OduVal, IduVal, ProvVal);

            RebValProv = RebVal;

        }

        public void ValueChangeODU(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, VOdu> args)

        {

            EnableDDL_IDU = !string.IsNullOrEmpty(args.Value);

            UpdateIDUList(args.Value);

            //IduQry = new Query().Where(new WhereFilter() { Field = "ODU", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false });

            //IduVal = "";

        }

        private async Task BlurHandlerAHRI(Object args)

        {

            //Lookup the ahri to set values for ODU and IDU

            OduIduAHRI = (await AhriDS.GetODUIDOfromAHRU(AhriVal)).ToList();

            OduVal = OduIduAHRI.First().Odu;

            string s1 = OduIduAHRI.First().Idu;

            UpdateIDUList(OduVal);

            IduVal = s1;

        }

        private void UpdateIDUList(string pdODU, string? psIDU = "")

        {

            IduQry = new Query().Where(new WhereFilter() { Field = "ODU", Operator = "equal", value = pdODU, IgnoreCase = false, IgnoreAccent = false });

            IduVal = "";

        }

    }

}

[Mohanraj Mathaiyan]

Hi CENK GUNAY,

Greetings from Syncfusion support.

We ensured the reported issue based on the shared details, we suggest to use OnActionComplete event on IDU dropdown list. after binding this event you can set the default IDU value in binded method.
We

have attached the documentation for your reference. If you still face any issues in your end, please sent sample to us. This will help us provide a prompt solution.

Documentation : https://blazor.syncfusion.com/documentation/dropdown-list/events#onactioncomplete

kindly refer the below snippet for your reference.

@*IDU*@

 

                <SfDropDownList TValue="string" TItem=VOduidu PopupHeight="230px" Placeholder="Select IDU" DataSource=@OduIduA @bind-Value="@IduVal" Query="@IduQry"

 

                                AllowFiltering="true" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

 

                                Enabled="@EnableDDL_IDU">

 

                    <SfDataManager Url="api/alldata/GetODUIDU" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>

 

                                    <DropDownListEvents TItem="VOduidu" TValue="string" OnActionComplete="@OnActionCompletehandler"></DropDownListEvents>

 

 

                    <DropDownListFieldSettings Value="Idu" Text="Idu"></DropDownListFieldSettings>

 

                </SfDropDownList>

 

 

@code

{

 

        

    private void OnActionCompletehandler()

    {

        IduVal = "Game2";

        // Here, you can set the value.

    }

 

Regards,

Mohanraj M

Attachment: dropdownlist_(3)_f5a45832.zip

[Marc]

Hi.  Thx for the input on this.

I am noticing in the AHRI DDL component, that when I define multiple events such as below, the BLUR event does not fire.  If I disable the VALUESELECT event, it works fine.  Am I correct in assuming multiple event handler should be definable?

<div class="cascading">

                @*AHRI*@

                <SfDropDownList TValue="String" TItem=VAhri PopupHeight="230px" Placeholder="Select AHRI" DataSource=@AhriDataA @bind-Value="@AhriVal"

                                AllowFiltering="true" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains">

                    <SfDataManager Url="api/alldata/getahri" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>

                    <DropDownListEvents TItem=VAhri TValue="string" Blur="@BlurHandlerAHRI"></DropDownListEvents>

                    <DropDownListEvents TItem="VAhri" TValue="string" ValueChange="ValueChangeAHRI"></DropDownListEvents>

                    <DropDownListFieldSettings Value="Ahri" Text="Ahri"></DropDownListFieldSettings>

                </SfDropDownList>

                <div>

[Sureshkumar P]

You can bind the multiple events using a single DropDownListEvents tag helper element. When you render the multiple DropDownListEvents tag helper element then final elements events are only binded to the component. which is the reason on your end you have faced the issue. so, we suggest you render single DropDownListEvents tag helper element to bind multiple events.

Find the code example here:

<SfDropDownList TValue="String" TItem=VAhri PopupHeight="230px" Placeholder="Select AHRI" DataSource=@AhriDataA @bind-Value="@AhriVal"

                AllowFiltering="true" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains">

 

    <SfDataManager Url="api/alldata/getahri" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>

 

    <DropDownListEvents TItem=VAhri TValue="string" Blur="@BlurHandlerAHRI" ValueChange="ValueChangeAHRI"></DropDownListEvents>

 

    <DropDownListFieldSettings Value="Ahri" Text="Ahri"></DropDownListFieldSettings>

 

</SfDropDownList>

[Marc]

Makes sense.  I will give that a go.  Thanks.

[Prince Oliver]

Most welcome. we are glad to assist you.