This is a migrated thread and some comments may be shown as answers.

How does DataBound Work?

1 Answer 191 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
chobo2
Top achievements
Rank 1
Veteran
chobo2 asked on 19 Jan 2021, 06:22 PM

Hi

I want to have 2 dropdownlists but I want to hide the second list if nothing gets populated into it.

You would first choose from Dropdown A, if the selection of Dropdown A does not populate anything into Dropdown B then I want to hide Dropdown B, If something is populated into Dropdown B then I want to show it.

I thought DataBound Event would do this and be fired each time something switched in A  but what I am noticing, that if I say make a choice in dropdown A which renders a result in Dropdown B then the databound event is triggered, then if I go and make another choice on dropdown A which renders no result in B the databound event is triggered.

However after that no databound event is triggered.

@(Html.Kendo().DropDownListFor(x => x.Country)
 
                                .OptionLabel("Select country...")
 
                                .DataValueField("Code")
 
                                .DataTextField("Name")
 
                                .Filter(FilterType.Contains)
 
                                .DataSource(ds => ds.Read(r => r.Action("GetCountries", "Countries")))
 
                                )

 

 

@(Html.Kendo().DropDownListFor(x => x.State)
 
                         .OptionLabel("Select State")
 
                         .DataValueField("Code")
 
                         .DataTextField("Name")
 
                         .Filter(FilterType.Contains)
 
                         .DataSource(ds => ds.Read(r => r.Action("GetStates", "States").Data("getCountryCode")))
 
                         .CascadeFrom("Country")
 
                         .Enable(false)
 
                         .Events(e =>
 
                          {
 
                              e.DataBound("onStateDataBound");
 
                          })
 
                         )

 

function onStateDataBound(e) {
    if (e.sender.dataSource.data().length <= 0) { // hide } else {// show}
 
}

 

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 21 Jan 2021, 04:10 PM

Hi,

I've tested this scenario and can verify that the dataBound event of the State DropDownList fires every time a value is selected in the Country DropDownList (except in the case where the optionLabel is selected). The problem however is not in the dataBound event, it is in the fact that the State DropDownList's dataSource is not configured to use server filtering. As a result:

e.sender.dataSource.data().length

will always return the same value, i.e. the number of all the items in the data, regardless of whether the State DropDownList shows any states in its list or doesn't show any data. And because of that the length <= 0 condition will never get hit.

Consider configuring the dataSource to use server filtering:

.DataSource(ds => ds.Read(r => r.Action("GetStates", "States").Data("getCountryCode")).ServerFiltering(true))

and implement the actual filtering in the GetStates action, based on the value selected in the Country DropDownList. This value can be sent to the GetStates action through the getCountryCode function, and can be used to filter the data and return states, only if a country with corresponding states has been selected.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
DropDownList
Asked by
chobo2
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or