cascading dropdown don't work inside grid Dialog form template

[Libardo]

I need to implement a cascading dropdown list in my application, I followed your examples (Web Api, datasource , etc) but none of them worked, the change event fires but does nothing. 

I finally decided to put all the code of one of your examples to validate what I was doing wrong, and I was surprised that this doesn't work inside the grid edition template either. 

I tried it on a page and it works.

The code:

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Data

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

     <HeaderTemplate >

          <h2 ><strong>@Titulo</strong></h2>

    </HeaderTemplate>

    <Template>

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

            <div class="control-wrapper">

                <div class="cascading">

                    <label class="example-label">Country</label>

                    <SfDropDownList TItem="Countries" TValue="string" Placeholder="Select a country" PopupHeight="auto" DataSource="@Country">

                        <DropDownListEvents TItem="Countries" TValue="string" ValueChange="ChangeCountry"></DropDownListEvents>

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

                    </SfDropDownList>

                </div>

                <div class="cascading">

                    <label class="example-label">State</label>

                    <SfDropDownList Enabled="@EnableStateDropDown" TValue="string" TItem="State" @bind-Value="@StateValue" Placeholder="Select a state" Query="@StateQuery" PopupHeight="auto" DataSource="@States">

                        <DropDownListEvents TItem="State" TValue="string" ValueChange="ChangeState"></DropDownListEvents>

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

                    </SfDropDownList>

                </div>

                <div class="cascading">

                    <label class="example-label">City</label>

                    <SfDropDownList Enabled="@EnableCitytDropDown" TValue="string" TItem="city" @bind-Value="@CityValue" Placeholder="Select a city" Query="@CityQuery" PopupHeight="auto" DataSource="@cites">

                        <DropDownListFieldSettings Text="CityName" Value="CityId"></DropDownListFieldSettings>

                    </SfDropDownList>

                </div>

            </div>

        </div>

   </Template>

    <FooterTemplate>

    </FooterTemplate>

</GridEditSettings>

<style>

    .control-wrapper {

        max-width: 250px;

        margin: 0 auto;

        padding: 10px 0px 0px;

    }

    .example-label {

        font-size: 14px;

        margin-bottom: 6px;

    }

    .control-wrapper .cascading {

        padding: 30px 0px 0px;

    }

</style>

@code {

    public bool EnableStateDropDown = false;

    public bool EnableCitytDropDown = false;

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

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

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

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

    public void ChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args)

    {

        this.EnableStateDropDown = !string.IsNullOrEmpty(args.Value);

        this.EnableCitytDropDown = false;

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

        this.StateValue = null;

        this.CityValue = null;

    }

    public void ChangeState(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, State> args)

    {

        this.EnableCitytDropDown = !string.IsNullOrEmpty(args.Value);

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

        this.CityValue = null;

    }

    public class State

    {

        public string StateName { get; set; }

        public string CountryId { get; set; }

        public string StateId { get; set; }

    }

    public class Countries

    {

        public string CountryName { get; set; }

        public string CountryId { get; set; }

    }

    public class city

    {

        public string CityName { get; set; }

        public string StateId { get; set; }

        public string CityId { get; set; }

    }

    public List<Countries> Country = new List<Countries>() {

        new Countries(){ CountryName= "Australia", CountryId= "2" },

        new Countries(){ CountryName= "United States", CountryId= "1" }

    };

    public List<State> States = new List<State>() {

        new State() { StateName= "New York", CountryId= "1", StateId= "101" },

        new State() { StateName= "Queensland", CountryId= "2", StateId= "104" },

        new State() { StateName= "Tasmania ", CountryId= "2", StateId= "105" },

        new State() { StateName= "Victoria", CountryId= "2", StateId= "106" },

        new State() { StateName= "Virginia", CountryId= "1", StateId= "102" },

        new State() { StateName= "Washington", CountryId= "1", StateId= "103" }

    };

    public List<city> cites = new List<city>()

    {

         new city() { CityName = "Aberdeen", StateId= "103", CityId= "207" },

         new city() { CityName = "Albany", StateId= "101", CityId= "201" },

         new city() { CityName = "Brisbane ", StateId="104", CityId= "211" },

         new city() { CityName = "Colville ", StateId= "103", CityId= "208" },

         new city() { CityName ="Emporia", StateId= "102", CityId= "206" },

         new city() { CityName = "Hampton ", StateId= "102", CityId= "205" },

         new city() { CityName ="Hobart", StateId= "105", CityId= "213" },

         new city() { CityName ="Lockport", StateId= "101", CityId= "203" },

         new city() { CityName = "Pasco", StateId= "103", CityId= "209" },

         new city() { CityName= "Alexandria", StateId= "102", CityId= "204" },

         new city() { CityName= "Beacon ", StateId= "101", CityId= "202" },

         new city() { CityName= "Cairns", StateId= "104", CityId= "212" },

         new city() { CityName= "Devonport", StateId= "105", CityId= "215" },

         new city() { CityName= "Geelong", StateId= "106", CityId= "218" },

         new city() { CityName= "Healesville ", StateId="106", CityId= "217" },

         new city() { CityName= "Launceston ", StateId= "105", CityId= "214" },

         new city() { CityName= "Melbourne", StateId= "106", CityId="216" },

         new city() { CityName= "Townsville", StateId= "104", CityId= "210" }

    };

}

[Monisha Saravanan]

Hi Libardo,

Greetings from Syncfusion support.

We have checked your query and we suspect that you are facing an issue with cascading dropdown when used inside an Grid edit template. We would like to inform you that we have prevented unwanted rendering of Grid component during the external action for better performance. Hence the edit component is not updated on external value change event. We request you to overcome the behavior by calling PreventRender(false) on value change event.

Kindly refer the attached code snippet and sample for your reference.

public void ChangeState(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, State> args)

 

    {

 

        this.EnableCitytDropDown = !string.IsNullOrEmpty(args.Value);

 

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

 

        this.CityValue = null;

        

        public void ChangeState(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, State> args)

 

    {

 

        this.EnableCitytDropDown = !string.IsNullOrEmpty(args.Value);

 

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

 

        this.CityValue = null;

        

        GridRef.PreventRender(false);

 

    }

    }

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

Kindly get back to us if you have further queries.

Regards,

Monisha

[Mahmood Salim]

i am tring to use same this logic of cascading in grid edit mode or Add button but not workig 

[Monisha Saravanan]

Hi Salim,

Before proceeding further kindly share us some more details about your requirement.

1. Have you tried the above suggested solutions in this forum?
2. Share us the entire Grid code snippet.
3. Share us the video demonstration of the reported issue.
4. If possible share us an simple issue reproduceable sample.

The above requested details will be very helpful for us to validate the reported issue at our end.

Regards,

Monisha

[Mahmood Salim]

hello , thankyou for replay please check this all grid and also with tempelet grid fields 

<SfGrid DataSource="@employees" @ref="SfEmployeeGrid" AllowPaging="true" AllowGrouping="true" Toolbar="@toolbar">

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

          <Template>

                    @{

                var Employee = (context as EmployeeModel);

                          <form class="row gx-3 gy-2 align-items-center">

                            <div class="col-sm-6">

                            <SfTextBox Placeholder='Employee Name Ar' @bind-Value="@(Employee.FullName_Ar)" FloatLabelType='@FloatLabelType.Auto'></SfTextBox>

                            </div>

                    <div class="col-sm-6">

                        <SfTextBox Placeholder='Employee Name En' @bind-Value="@(Employee.FullName_En)" FloatLabelType='@FloatLabelType.Auto'></SfTextBox>

                    </div>

                         <div class="col-sm-6">

                            <SfDropDownList Placeholder='Ministry Name' ID="Ministery_ID" TItem="MinistryModel" TValue="int" @bind-Value="@((context as EmployeeModel).Ministery_ID)" DataSource="@ministrynameData" FloatLabelType='@FloatLabelType.Auto'>

                                <DropDownListFieldSettings Value="Ministery_ID" Text="Ministry_Name"></DropDownListFieldSettings>

                            </SfDropDownList>

                    </div>

                    <div class="col-sm-6">

                            <SfDropDownList ID="Budget_ID" Placeholder="Budget No" TItem="BudgetModel" TValue="int" @bind-Value="@((context as EmployeeModel).Budget_ID)" DataSource="@budgetData" FloatLabelType='@FloatLabelType.Auto'>

                                <DropDownListFieldSettings Value="Budget_ID" Text="Budget_No"></DropDownListFieldSettings>

                            </SfDropDownList>

                    </div>

                    <div class="col-sm-6">

                        <SfDropDownList ID="Budget_ID" Placeholder='Account NO' TItem="BudgetModel" FloatLabelType='@FloatLabelType.Auto' TValue="int" @bind-Value="@((context as EmployeeModel).Budget_ID)" DataSource="@budgetData">

                            <DropDownListFieldSettings Value="Budget_ID" Text="Budgent_Account"></DropDownListFieldSettings>

                        </SfDropDownList>

                    </div>

                    <div class="col-sm-6">

                        <SfTextBox Placeholder='Job' @bind-Value="@(Employee.Job_Title)" FloatLabelType='@FloatLabelType.Auto'></SfTextBox>

                    </div>

                    <div class="col-sm-6">

                        <SfNumericTextBox Placeholder='Civil No' TValue="int" Format="###.##" FloatLabelType='@FloatLabelType.Auto' @bind-Value="@(Employee.Civil_No)"></SfNumericTextBox>

                    </div>

                    <div class="col-sm-6">

                        <SfTextBox Placeholder='Email' @bind-Value="@(Employee.Email)" FloatLabelType='@FloatLabelType.Auto'></SfTextBox>

                    </div>

                     <div class="col-sm-6">

                        <SfNumericTextBox Placeholder='Mobile' TValue="int" Format="###.##" FloatLabelType='@FloatLabelType.Auto' @bind-Value="@(Employee.Mobile_No)"></SfNumericTextBox>

                        </div>

                         <div class="col-sm-6">

                            <Syncfusion.Blazor.DropDowns.SfDropDownList ID="Status" Placeholder='Stauts' FloatLabelType='@FloatLabelType.Auto' DataSource="statusCollection" TItem="string" TValue="string"

                                                                    @bind-Value="@((context as EmployeeModel).Status)">

                            </Syncfusion.Blazor.DropDowns.SfDropDownList>

                        </div>

                        <div class="col-sm-6">

                        <SfDatePicker TValue="DateTime?" Enabled="false" Placeholder='Choose a Date' FloatLabelType='@FloatLabelType.Auto' @bind-Value="@(Employee.CreatedDate)" ></SfDatePicker>

                    </div>

                    <div class="col-sm-6">

                        <Syncfusion.Blazor.DropDowns.SfDropDownList ID="Gender" Placeholder='Gender' FloatLabelType='@FloatLabelType.Auto' DataSource="genderCollection" TItem="string" TValue="string"

                                                                    @bind-Value="@((context as EmployeeModel).Gender)">

                        </Syncfusion.Blazor.DropDowns.SfDropDownList>

                    </div>

                        <div class="cascading">

                            <label class="example-label">Ministry</label>

                            <SfDropDownList TItem="MinistryModel" TValue="string" Placeholder="Select a ministry" PopupHeight="auto" DataSource="@ministrynameData2">

                                <DropDownListEvents TItem="MinistryModel" TValue="string" ValueChange="ChangeMinistry"></DropDownListEvents>

                                <DropDownListFieldSettings Text="Ministry_Name" Value="Ministery_ID"></DropDownListFieldSettings>

                            </SfDropDownList>

                        </div>

                        <div class="cascading">

                            <label class="example-label">Budget</label>

                            <SfDropDownList Enabled="@EnableBudgetDropDown" TValue="string" TItem="BudgetModel" @bind-Value="@BudgetValue" Placeholder="Select budget" Query="@BudgetQuery" PopupHeight="auto" DataSource="@budgetData2">

                                <DropDownListEvents TItem="BudgetModel" TValue="string" ValueChange="ChangeBudget"></DropDownListEvents>

                                <DropDownListFieldSettings Text="Budget_No" Value="Budget_ID"></DropDownListFieldSettings>

                            </SfDropDownList>

                        </div>

                        <div class="cascading">

                            <label class="example-label">Account</label>

                            <SfDropDownList Enabled="@EnableAcountDropDown" TValue="string" TItem="BudgetModel" @bind-Value="@AccountValue" Placeholder="Select a account" Query="@AccountQuery" PopupHeight="auto" DataSource="@budgetData2">

                                <DropDownListFieldSettings Text="Budgent_Account" Value="Budget_ID"></DropDownListFieldSettings>

                            </SfDropDownList>

                        </div>

                            </form>

}

</Template>

    </GridEditSettings>

    <GridColumns>

        <GridColumn AllowAdding="false" Visible="false" Field=@nameof(EmployeeModel.EmployeeId) IsPrimaryKey="true" HeaderText=" ID" TextAlign="TextAlign.Right" Width="50"></GridColumn>

        <GridColumn HeaderText="Profile" Width="10px" AllowAdding="false" AllowEditing="false">

            <Template>

                @{

                    var Employee = (context as EmployeeModel);

                    <div class="profile-image-container">

                        <img src="@(Employee?.Profile_img)" />

                    </div>

                }

            </Template>

        </GridColumn>

            <GridColumn Field="@nameof(EmployeeModel.Civil_No)" HeaderText="Civil No" TextAlign="TextAlign.Center" Width="10px"></GridColumn>

            <GridColumn Field=@nameof(EmployeeModel.FullName_Ar) HeaderText="Name Ar" Width="30" TextAlign="TextAlign.Center">

        </GridColumn>

        <GridColumn Field=@nameof(EmployeeModel.FullName_En) HeaderText="Name En" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="100" Visible="false"></GridColumn>

        <GridForeignColumn HeaderText="Ministry Name" TValue="MinistryModel"

                           Field="@nameof(EmployeeModel.Ministery_ID)"

                           ForeignDataSource="ministrynameData"

                           ForeignKeyValue="Ministry_Name" Width="30px" TextAlign="TextAlign.Center">

            <EditTemplate>

                <SfDropDownList ID="Ministery_ID" TItem="MinistryModel" TValue="int" @bind-Value="@((context as EmployeeModel).Ministery_ID)" DataSource="@ministrynameData" HeaderText="Ministry">

                    <DropDownListFieldSettings Value="Ministery_ID" Text="Ministry_Name"></DropDownListFieldSettings>

                </SfDropDownList>

            </EditTemplate>

        </GridForeignColumn>

        <GridForeignColumn TValue="BudgetModel"

                           Field="@nameof(EmployeeModel.Budget_ID)" HeaderText="Budget No"

                           ForeignDataSource="budgetData"

                           ForeignKeyValue="Budget_No" Width="10px" TextAlign="TextAlign.Center">

            <EditTemplate>

                <SfDropDownList ID="Budget_ID" TItem="BudgetModel" TValue="int" @bind-Value="@((context as EmployeeModel).Budget_ID)" DataSource="@budgetData">

                        <DropDownListFieldSettings Value="Budget_ID" Text="Budget_No" Width="20px"></DropDownListFieldSettings>

                </SfDropDownList>

            </EditTemplate>

        </GridForeignColumn>

        <GridForeignColumn HeaderText="Account No" TValue="BudgetModel"

                           Field="@nameof(EmployeeModel.Budget_ID)"

                           ForeignDataSource="budgetData"

                           Visible=false

                           ForeignKeyValue="Budgent_Account" Width="20px" TextAlign="TextAlign.Center">

            <EditTemplate>

                <SfDropDownList ID="Budget_ID" TItem="BudgetModel" TValue="int" @bind-Value="@((context as EmployeeModel).Budget_ID)" DataSource="@budgetData">

                    <DropDownListFieldSettings Value="Budget_ID" Text="Budgent_Account"></DropDownListFieldSettings>

                </SfDropDownList>

            </EditTemplate>

        </GridForeignColumn>

            <GridColumn Field="@nameof(EmployeeModel.Status)" Width="10px">

                <Template>

                    @{

                        var Employee = (context as EmployeeModel);

                        if (Employee.Status == "Active")

                        {

                            <div class="statustemp e-activecolor">

                                <span class="statustxt e-activecolor">@Employee.Status</span>

                            </div>

                        }

                        else

                        {

                            <div class="statustemp e-inactivecolor">

                                <span class="statustxt e-inactivecolor">@Employee.Status</span>

                            </div>

                        }

                    }

                </Template>

            </GridColumn>

            <GridColumn HeaderText="Action" Width="20">

                <GridCommandColumns>

                    <GridCommandColumn Type="CommandButtonType.Edit"

                                       ButtonOption="@(new CommandButtonOptions(){

                        IconCss="e-icons e-edit",

                        CssClass="e-flat "

                    })">

                    </GridCommandColumn>

                </GridCommandColumns>

            </GridColumn>

        <GridColumn Width="10">

            <Template>

                @{

                    var ticket = (context as EmployeeModel);

                }

                <SfButton @ref="EditBtnResolved" @onclick="@((args) => onToggleClick_Resolved(args,ticket))" IsToggle="true" IsPrimary="true">Transaction</SfButton>

            </Template>

        </GridColumn>

    </GridColumns>

        <GridPageSettings PageSize="10"></GridPageSettings>

    <GridEvents OnActionBegin="ActionBeginHandler" OnActionComplete="ActionCompleteHandler" CommandClicked="OnCommandClicked" TValue="EmployeeModel"></GridEvents>

</SfGrid>

    private List<EmployeeModel> employees = new List<EmployeeModel>();

 public bool EnableBudgetDropDown = false;

        public bool EnableAcountDropDown = false;

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

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

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

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

        public void ChangeMinistry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, MinistryModel> args)

        {

            this.EnableBudgetDropDown = !string.IsNullOrEmpty(args.Value);

            this.EnableAcountDropDown = false;

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

            this.BudgetValue = null;

            this.AccountValue = null;

        }

        public void ChangeBudget(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, BudgetModel> args)

        {

            this.EnableAcountDropDown = !string.IsNullOrEmpty(args.Value);

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

            this.AccountValue = null;

            SfEmployeeGrid.PreventRender(false);

        }

protected override async Task OnInitializedAsync()

        {

            employees = await EmployeeFullService.GetEmployeesAsync();

            ministrynameData = await MinisteryService.GetMinisteres();

            budgetData = await BudgetService.GetBudgets();

            budgetData2 = await BudgetService.GetBudgets();

            ministrynameData2 = await MinisteryService.GetMinisteres();

            VisibleProp = true;

        }

        public async Task ActionBeginHandler(ActionEventArgs<EmployeeModel> args)

        {

            if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save))

            {

                if (args.Action == "Add")

                {

                    await EmployeeFullService.AddEmployeeAsync(args.Data);

            }

            //else if (args.Action == "Edit")

            //{

            // await BudgetService.UpdateBudget(args.Data);

            //}

        }

    }

[Mahmood Salim]

this what i want i yellow line i want cascading

[Mahmood Salim]

any one have idea to solve this

[Naveen Palanivel]

Hi Mahmood Salim,

We checked your query, it seems that you facing issue in cascading dropdown in Grid. In ValueChange event(ChangeMinistry) PreventRender(false)
is not defined . We would like to inform you that we have prevented unwanted rendering of Grid component during the external action for better performance so the value is not updated. We suggest you to use PreventRender(false) on value change event to reflect the changes correctly.

Kindly use the below highlighted changes in the value change event and check the reported issue at your end

      public void ChangeMinistry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, MinistryModel> args)

 

        {

 

            this.EnableBudgetDropDown = !string.IsNullOrEmpty(args.Value);

 

            this.EnableAcountDropDown = false;

 

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

 

            this.BudgetValue = null;

 

            this.AccountValue = null;

SfEmployeeGrid.PreventRender(false);

        }

Regards,

Naveen Palanivel

Attachment: SfGridBlazor_cascading_6e2aaadc.zip