DropDownList Close Event

[Jeff]

I have a DropDownList with checkboxes. I want to keep the list open when the user checks a checkbox, and only close it when they click the document or the combo element itself. I can't seem to get the logic right. I have

       var consumers = dataSource.get(id).data.Consumers;
           var dd = $(this).kendoDropDownList({
               dataSource: consumers,
               template: $("#consumerTemplate").html(),
               close: function(e) { e.preventDefault(); },
           });     

<script id="consumerTemplate" type="text/x-kendo-tmpl">
    <input type="checkbox"
    name="${ data.Name }" 
    value="${ data.Name }" ${ data.IsSelected ? "checked" : "" }  /><span style="padding-left: 10px;">${ data.Name }</span>

</script>  

Can someone please advise on how to make this work?

[Kamen Bundev]

Hello Jeff,

Unfortunately at this time the DropDownList doesn't have a its own close event. However, there is a close event on the Popup base widget that the DropDownList is opening. You can bind and prevent it like this:
$("#dropdown")
    .kendoDropDownList()
    .data("kendoDropDownList")
    .popup
    .bind("close", function (e) {
        e.preventDefault();
    });

Greetings,
Kamen Bundev
the Telerik team

[Jeff]

Hi,

This doesn't seem to work for me at all. If I try to bind to the close event, only one of my dropdownlists displays at all.

My code is

var dataSource = kendo.data.DataSource.create({
    data: [ 
        { id: 1, Consumers: [ { Name: "John", IsSelected: false }, { Name: "Jane", IsSelected: true }] }, 
        { id: 2, Consumers: [ { Name: "John", IsSelected: true }, { Name: "Jane", IsSelected: false}] } 
    ], 
    schema: { model: {id: "id"} }
    });

$("#grid").kendoGrid({
   dataSource: dataSource,
   height: 200,
   scrollable: {
     virtual: true
   },
   dataBound: function(e) { 
       this.element.find(".consumers").each(function() {
           // Get the matching grid data row.
           var id = $(this).closest("tr").data("id");
           var consumers = dataSource.get(id).data.Consumers;
           var dd = $(this).kendoDropDownList({
               dataSource: consumers,
               template: $("#consumerTemplate").html()
           });
           
           dd.popup.bind("close", function(e) { /* left empty just to demonstrate */ });
       });
   },
   columns: [
       { 
         name: "Consumers", 
         template: $("#consumersTemplate").text(),
       }
   ],
   
   selectable: true
});  

<table id="grid" height="300px">
    <thead>
        <tr>
            <th data-field="Consumers">Content</th>
        </tr>
    </thead>
</table>
   
<script id="consumersTemplate" type="text/x-kendo-tmpl">
    <select class="consumers"></select>
</script>

<script id="consumerTemplate" type="text/x-kendo-tmpl">
    <input type="checkbox" name="${ data.Name }" value="${ data.Name }" ${ data.IsSelected ?"checked" : "" } />
    <span>${ data.Name }</span>
</script>  

Also, using the example you gave, how can I tell if the user has clicked on the outer container vs. one of the items?

Thank you.

[Kamen Bundev]

Hello,

You need first to get the Kendo UI object with .data("kendoDropDownList") in order to bind to its popup.

Unfortunately the close event doesn't provide any info about what triggered it (since there may be no mouse event at all). To do what you want, you can bind to the mouseup event and save its target somewhere, so that you can check later if it was inside the container. Look at the example below:


All the best,
Kamen Bundev
the Telerik team

[Jeff]

Wonderful! Thanks.

How can I go about updating the IsSelected property on my data object when the checkbox changes? I mean, I know how to update the property and I know how to add the event handler....but how can I get the scoped data item in the event handler?

Thanks.

[Jeff]

Also (far more importantly), I can't get these samples to work in IE9 at all, I just get

Content

select
select

• John
• Jane

• John
• Jane

just text, that's it.

[Kamen Bundev]

Hi Jeff,

There are three reasons for the example not working in IE7/8 engines (its working fine in real IE9) - one is the trailing comma in your columns object, another is that text() in IE7/8 doesn't get the contents of script elements and you need to use html(), and the last is a bug in the DropDownList which seems can't be initialized from an empty select element. We've noted it for fixing, as a workaround you can add an empty option in the select template. Check the updated example below:


As for your other question - you can bind to the checkbox's change event and on change go about finding the TR and updating the dataSource, as you similarly do in the dataBound event.

Greetings,
Kamen Bundev
the Telerik team

[Jeff]

This works well, thank you!

I have a problem in IE9 though. It seems only to reproduce when I embed the Grid with the DropDownList in an IFRAME:

Screenshot

The DropDownLists in my Grid still appear even after I collapse the Grouping in the Grid. Also, if I turn on virtualized scolling in IE, the DropDownLists hang steady even when I scroll down.

Chrome works fine.

Any idea what's going on here?

Thanks.

[Kamen Bundev]

Hello Jeff,

I will need a live URL in order to reproduce the issue and help you fix it. Or maybe you can update the jsFiddle (it uses an iframe to show the result)?

Regards,
Kamen Bundev
the Telerik team

[Jeff]

Couldn't reproduce in jsfiddle.

Finally figured it out. Needed 

  <meta http-equiv="X-UA-Compatible" content="IE=8" />

in the head. Sheesh...