Having two dropdown lists, how to dynamically refresh second dropdown DataSource and Enabled attribute when the second dropdown selected item changed?

[Wioletta Manka]

Description:
I created two dropdown lists. DataSource @Categories should change if the value of TransactionType changes. Dropdown are inside dialog edit template of SfGrid.

Blazor code:

SfGrid ----> GridEditSettings Mode="@EditMode.Dialog" ----> Template--->

<SfDropDownList ID="Type"

                                        @bind-Value="@(transaction.Type)"

                                        TItem="string"

                                        TValue="TransactionType"

                                        DataSource="@Enum.GetNames(typeof(TransactionType))">

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

                            <DropDownListEvents TItem="string" 

                                                TValue="TransactionType" 

                                                ValueChange="ChangeTransactionType"></DropDownListEvents>

                        </SfDropDownList>

<SfDropDownList ID="Category"

                                        @bind-Value="@(transaction.Category)"

                                        Enabled="@EnableCategoriesDropDown"

                                        Query="@CategoryQuery"

                                        TItem="CategoryResult"

                                        TValue="string"

                                        DataSource="@Categories">

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

                        </SfDropDownList>

C# Code:

    public bool EnableCategoriesDropDown = false;

    public string CategoryValue { get; set; }

    public async void ChangeTransactionType(Syncfusion.Blazor.DropDowns.ChangeEventArgs<TransactionType, string> args)

    {

        Console.WriteLine("Changed");

        Console.WriteLine(args.Value);

        EnableCategoriesDropDown = true;

        Console.WriteLine(EnableCategoriesDropDown);

        if (args.Value == TransactionType.Expense)

        {

            Categories = Categories.Where(x => x.TransactionType == TransactionType.Expense).ToList();

        }

        CategoryValue = null;

        this.StateHasChanged();

    }

Result:

Method ChangeTransactionType fires correctly and the values are assigned and can be displayed in console, but categories dropdown DataSource UI doesn't change and dropdown is still disabled at all times.

[Ponmani Murugaiyan]

Hi Wioletta, 

Greetings from Syncfusion support. 

We have validated your reported query. We have prepared sample as per your requirement using two dropdowns (Cascading Dropdown).Based on the first dropdown item selected, the second dropdown datasource will be changed. Please find the code snippet and test sample below for your reference. 

div class="col-lg-12 control-section"> 

<div class="control-wrapper"> 

    <div class="padding-top"> 

        <SfDropDownList TItem="TransactionType" TValue="string" DataSource="@TransactionTypes"> 

            <DropDownListEvents TItem="TransactionType" TValue="string" ValueChange="ChangeTransactionType"></DropDownListEvents> 

            <DropDownListFieldSettings Text="CountryName" Value="CountryId"></DropDownListFieldSettings> 

        </SfDropDownList> 

    </div> 

    <div class="padding-top"> 

        <SfDropDownList Enabled="@EnableCategoriesDropDown" TValue="string" TItem="CategoryResult" @bind-Value="@CategoryValue" Query="@CategoryQuery" DataSource="@Categories"> 

            <DropDownListFieldSettings Text="StateName" Value="StateId"></DropDownListFieldSettings> 

        </SfDropDownList> 

    </div> 

</div> 

</div> 

@code { 

    public bool EnableCategoriesDropDown = false; 

    public string CategoryValue { get; set; } = null; 

    public Query CategoryQuery { get; set; } = null; 

    public void ChangeTransactionType(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, TransactionType> args) 

    { 

        this.EnableCategoriesDropDown = true; 

       this.CategoryQuery = new Query().Where(new WhereFilter() { Field = "CountryId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false }); 

        this.CategoryValue = null; 

    } 

    ... 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Dropdown-187980283  

 

Kindly check with the above sample. If issue still exists in your end or if we misunderstood the query, please provide below details. 

1. Issue replicating procedure as video demonstration.
2. Is possible provide the issue reproducing sample.

The above requested details will help us to provide you the exact solution at earliest. 

Regards, 

Ponmani M  

[Wioletta Manka]

Thank you for answering, the sample works exactly as I expected, however I still cannot achieve the same result while using it inside the edit template of data grid. I've attached file containing the whole component structure.

Attachment: Transactions_a1f82739.zip

[Vignesh Natarajan]

Hi Wioletta,  

 

Thanks for the update.  

 

Query: “however I still cannot achieve the same result while using it inside the edit template of data grid. I've attached file containing the whole component structure.” 

 

We have analyzed your query and we understand that you are facing issue (not able to enable second dropdownlist component) with cascading dropdownlist inside the Grid Dialog template. We suggest to resolve the issue by rendering the component inside the Dialog template as a separate razor component.  

 

Refer the below code example  

 

<SfGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit", "Delete", "Update", "Cancel"})" AllowPaging="true"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams"> 

        <Template> 

            @{ 

                var transaction = (context as TransactionDetails); 

                <DialogEditComponent Transaction="transaction"></DialogEditComponent> 

            } 

        </Template> 

    </GridEditSettings> 

    <GridPageSettings PageSizes="true"></GridPageSettings> 

    <GridEvents OnActionComplete="ActionComplete" TValue="TransactionDetails"></GridEvents>     

</SfGrid> 

 

[DialogEditComponent.razor] 

 

. . . . .     <div class="form-group col-md-8">        <label class="e-float-text e-label-top">Transaction Type</label>        <SfDropDownList ID="Type"                        @bind-Value="@(Transaction.Type)"                        TItem="string"                        TValue="TransactionType"                        DataSource="@Enum.GetNames(typeof(TransactionType))">            <DropDownListEvents TItem="string" TValue="TransactionType" ValueChange="ChangeTransactionType"></DropDownListEvents>        </SfDropDownList>    </div>    <div class="form-group col-md-8">        <label class="e-float-text e-label-top">Category</label>        <SfDropDownList ID="Category"                        @bind-Value="@(Transaction.Category)"                        Enabled="@EnableCategoriesDropDown"                        TItem="CategoryResult"                        TValue="string"                        Query="@CategoryQuery" DataSource="@Categories">            <DropDownListFieldSettings Value="Name" Text="Name" />        </SfDropDownList>    </div></div>

 

For your convenience we have prepared a sample  using above solution which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/159429/ze/BlazorApp151418177  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Wioletta Manka]

Thank you, rendering the dialog template inside the new component resolved the issue.

[Vignesh Natarajan]

Hi Wioletta,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan 

[Jacky]

Hi  Vignesh ,

I download above sample and try it, found when Add and Edit mode seems not work.

Test Case1 . original environment : vs2022 + .NET Core 3.1+ Syncfusion 18.3.0.44 --->run as follows caption screen.

Test Case 2 . my current new enviorment : .vs2022 + Net 7.0 + Syncfusion 24.2.7--->Add and Edit Dialog not display.

Question 1 : For my  current new enviorment, how to adjust the code ?

Question 2 : if the Cascading in Dropdown List is packaged into a public Blazor component for  communication other Blazor pages , Is there a sample for reference or key points to note.

Thanks!

Jacky

Add mode

Edit mode

[Prathap Senthil]

Hi Jackey,

Based on your requirement, we have modified the sample Net7 and Syncfusion Blazor NuGet version 24.2.7. Kindly refer to the modified sample for your reference. Regarding the requirement, here is to create a public Blazor component that encapsulates the Syncfusion Dropdown List component and allows for communication with other Blazor pages. This likely involves utilizing Blazor's  parameters feature to pass data or state from the parent component (the page where the Dropdown List component is used) to its child components (other Blazor pages).

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Data

 

@typeparam TVal;

@typeparam TItemss;

 

 

<SfDropDownList TValue="TVal" TItem="TItemss" Query="DropDownQuery" Enabled="@IsEnable" ShowClearButton="true" DataSource="@Data">

    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>

    <DropDownListEvents TItem="TItemss" TValue="TVal" ValueChange="valuechangevent"></DropDownListEvents>

</SfDropDownList>

 

 

@code {

 

    [Parameter]

    public IEnumerable<TItemss> Data { get; set; }

 

    private TVal _value { get; set; }

    [Parameter]

    public string ID { get; set; }

 

    [Parameter]

    public  Query DropDownQuery  { get; set; }

 

 

 

    [Parameter]

    public bool IsEnable { get; set; } = true;

 

 

    [Parameter]

    public string FieldSettingText { get; set; }

 

    [Parameter]

    public string FieldSettingName { get; set; }

 

    [Parameter]

    public TVal Value

    {

        get => _value;

        set

        {

            if (!EqualityComparer<TVal>.Default.Equals(value, _value))

            {

                _value = value;

                ValueChanged.InvokeAsync(value);

            }

        }

    }

    [Parameter]

    public EventCallback<TVal> ValueChanged { get; set; }

 

 

    [Parameter]

    public EventCallback<ChangeEventArgs<TVal,TItemss>> valuechangevent { get; set; }

 

 

 

 

}

Reference:
https://blazor.syncfusion.com/documentation/datagrid/how-to/cascading-dropdownlist-with-grid-editing

Regards,
Prathap S

Attachment: BlazorDataGrid_ebaf7454.zip