Twice DataBound on dropdownlist

[Syleps]

Hi,

I have an issue with dropdownlist, with run twice the databound (read action)

In my case, I customized the dropdownlist to manage the pagination :

 

Html.Kendo().DropDownList()
        .Name(Model.ElementId)
        .DataTextField(Model.LovTextField.Name)
        .DataValueField(Model.LovField.Name)
        .Value(Model.Value.ToString())
        .IgnoreCase(Model.SearchIgnoreCase)
        .Enable(Model.IsEnabled)
        .Animation(false)
        .AutoWidth(true)
        .Template(Model.ClientTemplate)
        .ValueTemplate(Model.ClientTemplate)
        .DataSource(source =>
        {
            source.Custom()
                .ServerFiltering(true)
                .ServerPaging(true)
                .PageSize(50)
                .Type("aspnetmvc-ajax")
                .Transport(transport =>
                {
                    transport.Read("ReadLovData", "DropDownList", new { area = "Runtime", pageid = ViewBag.PageContext.PageId, elementid = Model.ElementId });
                })
                .Schema(schema =>
                {
                    schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                        .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                }).Events(e => e.RequestEnd(@<text>function(e) {requestEnd(e,"@Model.ElementId");}</text>));
        })
        .Virtual(v =>
        {
            v.ValueMapper("dropDownListValueMapper")
                .MapValueTo("dataItem");
        })
        .FooterTemplate("<span class='k-state-hover'>Page #: instance.dataSource.page() # / #: instance.dataSource.totalPages() # - Total #: instance.dataSource.total() # items found</span>")

        

dropDownListValueMapper is a javascript function that calls an controller/action via ajax in POST mode

requestEnd is a javascript function that that does nothing in this case 

 

In the attached file, I have an example of a page with 3 dropdownlists; and we see for each of them the call of a second databound, just before the call of the valuemapper

 

Like you can see, we are in ASP.NET MVC, and I'm not  good enough in javascript to replicate an example on dojo (especially in server mode)

I also noticed that the example on databound customization did not work properly (https://demos.telerik.com/aspnet-mvc/dropdownlist/custom-datasource), but with the example provided with the DLL it works locally. However there is no valuemapper, so ... 

Note that I just went to the latest version (2018-R1), and I use Visual Studio 2015 (C#)

   

Thanks,

Thierry

 

 

 

[Syleps]

Hi,

 

I have more informations.

The dropdownlist remakes a databound because in the data that I return, the field 'Total' is greater than the size of the page

 

Thanks Thierry

[Dimitar]

Hello Syleps,

I have reviewed the provided code snippet and noticed that the DropDownList is configured with Virtualization. The issue with the read request being called multiple times is probably caused by not configuring the Height and ItemHeight options of the DropDownList. The formula for calculating the correct values, as well as additional information on Virtualziation can be found in the following article:

• https://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization

In addition to the above, you can review the following DropDownList Virtualization Demo, where you can check how the Height and ItemHeight options are configured.

Regards,
Dimitar
Progress Telerik

[Syleps]

Hi Dimitar,

in fact, it's not a problem of height but of number of records.

My solution was to return the value 1 in DataSourceResult.Total.

And I Call Trigger Databound on Open event

I do this, because in my case, changing the value of a dropdownlist is very rare.

However, there remains a small problem of optimization.

When filtering the data, the dropdownlist performs a Databound to update the list on the Close event.

How can I deactivate it?

Regards,

Thierry

[Dimitar]

Hello Syleps,

The dataBound event is triggered when the widget list is bound to its data regardless of the serverFiltering option. When filtering the data, the list of the widget is rebound with the new options, thus the event gets triggered. 

The dataBound event also fires upon initial load (depending on the autoBind option), while the filtering event triggers only when the widget is about to filter the dataSource and contains the filter descriptor in the event data.

For example in the current scenario, the virtualization technique relies on using server paging. With this setup, only a part of the whole data source is retrieved on the client and since filtering is applied on the current source of the widget, the filtering functionality has to be forced on the server. This way, a request is being sent to the server, which queries the whole data set and checks if the searched item/s exist. When the data is returned from the service and is bound to the widget, the DataBound event is triggered. This ensures to proper behavior of the widget and the current implementation does not allow for this event to be prevented while filtering.

What I would suggest is to subscribe to the filtering event of the widget and preserve the filtering state in a global variable. Then use this variable in the dataBound event to apply your custom logic based on the required conditions.

Regards,
Dimitar
Progress Telerik