DropDownList Close Event

10 posts, 0 answers
  1. Jeff
    Jeff avatar
    28 posts
    Member since:
    Aug 2010

    Posted 22 Dec 2011 Link to this post

    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?
  2.
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 23 Dec 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Jeff
    Jeff avatar
    28 posts
    Member since:
    Aug 2010

    Posted 27 Dec 2011 Link to this post

    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.
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 28 Dec 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Jeff
    Jeff avatar
    28 posts
    Member since:
    Aug 2010

    Posted 28 Dec 2011 Link to this post

    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.
  11. Jeff
    Jeff avatar
    28 posts
    Member since:
    Aug 2010

    Posted 29 Dec 2011 Link to this post

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

    Content
    select
    select

    just text, that's it.
  13. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 30 Dec 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Jeff
    Jeff avatar
    28 posts
    Member since:
    Aug 2010

    Posted 03 Jan 2012 Link to this post

    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.
  17. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 04 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  19. Jeff
    Jeff avatar
    28 posts
    Member since:
    Aug 2010

    Posted 04 Jan 2012 Link to this post

    Couldn't reproduce in jsfiddle.

    Finally figured it out. Needed 

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

    in the head. Sheesh...
  20.
Back to Top