Popover binding to close event?

2 posts, 0 answers
  1. chris
    chris avatar
    19 posts
    Member since:
    Jan 2013

    Posted 21 Jan 2013 Link to this post

    So i have a popover and clicking the close button works well to close the popover, but i would like to bind the popover's close event to a custom function where i can send an ajax request and do some custom processing.  I would like to bind the close because if you open the popover, select elements and click somewhere on the page the popover will close and i would like to capture that close event and fire my custom function..  I tried doing this:

    <div data-role="popover" id="popover-locations" data-popup='{"height": 230, "width": 350}'>
                       <div data-role="view" data-title="Clinic Locations">
                           <div data-role="header">
                               <div data-role="navbar">
                                   <span data-role="view-title"></span>
                                   <a data-role="button" data-align="right" data-click="updateSelectedLocation">Close</a>
                               </div>
                           </div>
                           <ul data-role="listview">
                                   @{
                                       var locs = (List<Location>) Session["Locations"];
                                       foreach (var l in locs)
                                       {
                                           if (l.IsActive)
                                           {
                                               <li><label>@l.DisplayText<input data-ident="@l.Identifier" type="checkbox" checked="checked" name="chbx-location"/></label></li>
                                           }
                                           else
                                           {
                                               <li><label>@l.DisplayText<input data-ident="@l.Identifier" ype="checkbox"  name="chbx-location"/></label></li>
                                           }
                                       }
                                   }
                           </ul>
                       </div>
                       </div>
    And then in document.ready i'm trying to bind to the close event like this. 

             
    $(document).ready(function () {
        // bind the location popover close event to the updateSlectedLocation function.
        var locPopover = $('#popover-locations');
        locPopover.bind('close', updateSelectedLocation);
    });


    But nothing is firing when i open the popover then click somewhere else on the page to close it... Any thoughts?
  2. chris
    chris avatar
    19 posts
    Member since:
    Jan 2013

    Posted 21 Jan 2013 Link to this post

    Fixed it, i was incorrectly binding to the close method.  This how i had to changed the document.ready to get it to bind properly:
    $(document).ready(function () {
                   // bind the location popover close event to the updateSlectedLocation function.
                   setTimeout(function() {
                       var locPopover = $("#popover-locations").data("kendoMobilePopOver");
                       locPopover.bind('close', updateSelectedLocation);
                   },1000);
     
               });



    Found this which helped: http://docs.kendoui.com/api/mobile/popover#close
  3. Kendo UI is VS 2017 Ready
Back to Top