.data("kendoDropDownList").bind("dataBound" When exactly is this supposed to run?

[Rich]

So frustrating.

I have a scenario not extremely complicated in which i require items in my drop-down actually be databound before selecting a default item.

So when does this databound event actually run? Inside my databound event handler i am checking the count of items in the dropdownlist and it is ZERO.

I have been trying to track down phantom errors which are a result of either this bug or a misunderstanding of the docs for 2 weeks. Can someone from telerik expand on this? from the telerik api:

dataBound

Fires when the drop-down list has received data from the data source.

Example

$("#dropdownlist").kendoDropDownList({
    dataBound: function(e) {
        // handle event
    }
});

To set after initialization

// get a reference to the dropdown list
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// bind to the close event
dropdownlist.bind("dataBound", function(e) {
    // handle event
});

Have i misread "receive" data to mean received and bound the data? When really it's not databound? If so it would be extremely useful to have an actual databound event for the dropdownlist that was fired AFTER the items have been created.

[Atanas Korchev]

Hello,

 The dataBound event is raised when the dropdownlist is bound to a datasource. Here is a demo showing that: http://jsbin.com/ifigun/1/edit

 How do you check the count of your list? Can you be more specific? Ideally you could modify the linked example to show us what you are trying to achieve.

Regards,
Atanas Korchev
the Telerik team

[Rich]

Here is how you can duplicate the issue:

1. Create a datasource with remote data
2. Define a dropdownlist
3. Define a databound handler function where the last statement in the function REMOVES the handler
4. Bind the handler:

$("#mydropdown").data("kendoDropDownList").bind("dataBound", initMyDropDownDataBound);

Trying to duplicate the scenario in jsbin is not something i want to do. But it's absolutely happening for us. Inside the initMyDropDownDataBound function i am alerting the length of items at the beginning of the function and the end. 


var initMyDropDownDataBound = function () {
        $("#mydropdown").data("kendoDropDownList").enable(true);
        $("#mydropdown").data("kendoDropDownList").value(String(userInfo.LastCommodityId));

        var selectedCommodity = $("#mydropdown").data("kendoDropDownList").dataItem();
        alert($("#mydropdown").data("kendoDropDownList").ul.children().length); //ZERO items!!
        
//code removed do some more stuff - check cookie values, set cookie values
alert($("#mydropdown").data("kendoDropDownList").ul.children().length); //NOT ZERO - Correct length!

//code removed do some more stuff update viewmodel
        
//unbind as i only want to run this handler the FIRST time the dropdownlist is bound.
        $("#mydropdown").data("kendoDropDownList").unbind("dataBound", initCommodityDataBound);
    };


So everything in my scenario functions properly and as expected EXCEPT when the databound event fires the first alert shows ZERO length. The second shows the correct length. 

[Georgi Krustev]

Hello Rich,

 
Here is a quote of my answer to the support ticket opened on the same subject:

Thank you for the code snippet. I used part of it in the modified jsBin demo and everything works as expected. As I pointed in my previous answer, the dataBound event is raised when the list is bound and the correct length is shown in the alert. Let me know if I am missing something.

I will ask you to continue our discussion in the support thread in order to avoid any duplications.

Regards,
Georgi Krustev
the Telerik team

[Rich]

So do you have any clues as to why my own implementation is showing the count as zero at the beginning of the event handler and then the correct number a few statements down?

I can send you a PM on where to see this behavior working live for yourself? I can guarantee that it is indeed reporting the length as zero and then a different number:


In your example there are a few differences. One is the complexity of the dataItems themselves. The use of a viewModel and MVVM binding, the use of a template for the dropDownList, the use of parameters for the transport read?

I am just pointing out the differences in case any of this sparks an idea as to why the eventhandler is firing before the items are actually bound.

As i said, if you would like to see our live implementation let me know and i can arrange a login to the membership based site and a demo of the behavior. 

It really blows because some browsers are bailing out of the handler because there is no items available when an attempt is made to set the selected item.. ie: the length is zero, in the handler:


var initCommodityDataBound = function () {

        alert(ddlCommodity.ul.children().length); //ZERO
        ddlCommodity.enable(true);
        ddlCommodity.value(String(userInfo.LastCommodityId));

        var selectedCommodity = ddlCommodity.dataItem();
    
        commodityViewModel.set("CommodityId", selectedCommodity.CommodityId);
        commodityViewModel.set("CommodityName", selectedCommodity.CommodityName);
        commodityViewModel.set("IsInBundle", selectedCommodity.IsInBundle);
        commodityViewModel.set("CommodityChartImageUrl", '/Chart/GetDashBoardCommodityChart?commodityId=' + selectedCommodity.CommodityId);

        alert(ddlCommodity.ul.children().length); //16 items in the image i've attached

        ddlCommodity.unbind("dataBound", initCommodityDataBound);
    };

(updated the above to use js reference)

[Georgi Krustev]

Hello again Rich,

 
Unfortunately, it is hard to determine where could be the problem before I see the issue locally. It will be very helpful to see the current implementation on live - URL to the site. Thus I will be able to investigate the this erroneous behavior and find the cause of it.

Regards,
Georgi Krustev
the Telerik team