cascading dropdown don't work inside grid Dialog form template

7 Replies
4 Participants

Created by
LI Libardo

Platform
Blazor

Platform
Blazor

Control
TreeGrid

Created On
Jun 2, 2022 03:46 PM UTC

Last Activity On
Oct 10, 2023 12:44 AM UTC

Want to subscribe?
SIGN IN

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

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

</HeaderTemplate>

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

</SfDropDownList>

</div>

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

</SfDropDownList>

</div>

</SfDropDownList>

</div>

</Template>

</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

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.

Have you tried the above suggested solutions in this forum?
Share us the entire Grid code snippet.
Share us the video demonstration of the reported issue.
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

var Employee = (context as EmployeeModel);

</div>

</div>

</SfDropDownList>

</div>

</SfDropDownList>

</div>

</SfDropDownList>

</div>

</div>

</div>

</div>

</div>

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

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

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

</SfDropDownList>

</div>

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

</SfDropDownList>

</div>

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

</SfDropDownList>

</div>

</form>

}

</Template>

</GridEditSettings>

var Employee = (context as EmployeeModel);

</div>

}

</Template>

</GridColumn>

</GridColumn>

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

Field="@nameof(EmployeeModel.Ministery_ID)"

ForeignDataSource="ministrynameData"

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

</SfDropDownList>

</EditTemplate>

</GridForeignColumn>

<GridForeignColumn TValue="BudgetModel"

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

ForeignDataSource="budgetData"

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

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

</SfDropDownList>

</EditTemplate>

</GridForeignColumn>

var Employee = (context as EmployeeModel);

if (Employee.Status == "Active")

{

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

</div>

}

else

{

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

</div>

}

</Template>

</GridColumn>

<GridCommandColumn Type="CommandButtonType.Edit"

ButtonOption="@(new CommandButtonOptions(){

IconCss="e-icons e-edit",

CssClass="e-flat "

})">

</GridCommandColumn>

</GridCommandColumns>

</GridColumn>

var ticket = (context as EmployeeModel);

}

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

</Template>

</GridColumn>

</GridColumns>

</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

Image_6867_1696618867560

MS Mahmood Salim October 7, 2023 08:30 AM UTC

any one have idea to solve this

NP Naveen Palanivel Syncfusion Team October 10, 2023 12:44 AM UTC

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

7 Replies
4 Participants
Want to subscribe?
SIGN IN
Created by
LI Libardo
Platform
Blazor
Control
TreeGrid
Created On
Jun 2, 2022 03:46 PM UTC
Last Activity On
Oct 10, 2023 12:44 AM UTC

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

cascading dropdown don't work inside grid Dialog form template

Enterprise Solutions

Free Tools

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Learning

Resources

Support

cascading dropdown don't work inside grid Dialog form template