Twice DataBound on dropdownlist

5 posts, 0 answers
  1. Syleps
    Syleps avatar
    12 posts
    Member since:
    Nov 2013

    Posted 28 Jan Link to this post

    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

     

     

     
  2. Syleps
    Syleps avatar
    12 posts
    Member since:
    Nov 2013

    Posted 28 Jan Link to this post

    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

  3. Dimitar
    Admin
    Dimitar avatar
    351 posts

    Posted 31 Jan Link to this post

    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:


    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Syleps
    Syleps avatar
    12 posts
    Member since:
    Nov 2013

    Posted 03 Feb in reply to Dimitar Link to this post

    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

  5. Dimitar
    Admin
    Dimitar avatar
    351 posts

    Posted 06 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top