We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

cascading dropdown don't work inside grid Dialog form template

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" }

    };

}





7 Replies

MS Monisha Saravanan Syncfusion Team June 3, 2022 12:59 PM UTC

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



MS Mahmood Salim October 5, 2023 07:35 PM UTC

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


MS Monisha Saravanan Syncfusion Team October 6, 2023 01:10 PM UTC


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




MS Mahmood Salim replied to Monisha Saravanan October 6, 2023 07:00 PM UTC

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);


            //}

        }

    }

Image_4231_1696618813656





MS Mahmood Salim October 6, 2023 07:01 PM UTC

this what i want i yellow line i want cascading