Binding listview inside drawer not working after framework upgrade

2 posts, 0 answers
  1. Timothy
    Timothy avatar
    5 posts
    Member since:
    Oct 2013

    Posted 12 Mar 2015 Link to this post

    We recently upgraded the kendo mobile framework on our app from 2013.2.729 to 2014.3.1416

    In the app we have a drawer containing a listview that is now throwing very generic "TypeError: undefined is not a function" error when binding. Here is the setup -- What could be wrong here? I've tried binding declaratively  and programmatically (using this syntax $("#ulAlertBuckets").kendoMobileListView({...) but any way I try gives the same result. Any insight would be greatly appreciated!

    Relevant Markup:

    <div id="drawerAlertInboxes"
            class="Drawer"
             data-role="drawer"
             data-before-show="app.AlertInboxesDrawer.BeforeShow"
            data-show="app.AlertInboxesDrawer.Show"
            data-hide="app.AlertInboxesDrawer.Hide"
            data-views='["viewAlertsList", "Views/AlertsMap.html"]'>

            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title">Alert / Message Inboxes</span>
                </div>
            </div>

            <div data-role="content">
                <ul id="ulAlertBuckets"
                    data-role="listview"
                    data-bind="source: GetAvailableAlertBuckets"
                    data-template="templateAlertBucketsDrawer">
                    
                </ul>
            </div>
        </div>

        <script type="text/x-kendo-template" id="templateAlertBucketsDrawer">
    <li><a class="km-listview-link" data-bind="click: AlertBucketClicked, html:Text"></a></li>
        </script>


    View Script:


    app.AlertInboxesDrawer =
        {
           ViewModel:
    new AlertInboxesViewModel(),
         
           PreventSwipeOpen:
    false,
           BeforeShow:
    function(drawerBeforeShowEvent)
           {
               
    if (app.AlertInboxesDrawer.PreventSwipeOpen) {
                    drawerBeforeShowEvent.preventDefault();
               }
    else {
                  kendo.bind(drawerBeforeShowEvent.sender.element.find(
    "#ulAlertBuckets"), app.AlertInboxesDrawer.ViewModel);
               }
           },
         
           Show:
    function (drawerShowEvent) {
             console.log(
    "app.AlertInboxesDrawer.PreventSwipeOpen: " + app.AlertInboxesDrawer.PreventSwipeOpen);
             app.ShowViewCover();
             app.AlertInboxesDrawer.PreventSwipeOpen =
    false;
           },
         
           Hide:
    function()
           {
               app.RemoveViewCover();
           },
        };


    View Model:

    var AlertInboxesViewModel = kendo.data.ObservableObject.extend(
    {
        GetAvailableAlertBuckets:
    function()
        {
         
    var alertBuckets = new kendo.data.ObservableArray([]);
         
    for (var alertBucketKey in Constants.AlertBuckets)
          {
             
    var pushIt = false;
             
    if (alertBucketKey == "Group" )
             {
                 pushIt = app.Settings.DeviceRegistration.IsLoggedIn();
             }
             
    else if (alertBucketKey == "MyOrganization" )
             {
                 pushIt = app.Settings.DeviceRegistration.IsNotifierLoggedIn();
             }
             
    else if (alertBucketKey == "CurrentLocation" )
             {
                 pushIt = app.Settings.AlertPreferences.HasCurrentLocation();
             }
             
    else           
             {
                 pushIt =
    true;
             }          

             
    if (pushIt)
             {
                 
    var alertBucket = new kendo.data.ObservableObject(
                  {
                      Key: alertBucketKey,
                      Text: Constants.AlertBuckets[alertBucketKey].Text,
                      AlertBucketClicked:
    function (clickEvent) {
                         
    var whichBucket = clickEvent.data.get("Key");
                         app.AlertsList.ViewModel.set(
    "AlertBucket", Constants.AlertBuckets[whichBucket]);

                         $(clickEvent.currentTarget).closest(
    'div[data-role="drawer"]').data("kendoMobileDrawer").hide();
                      },
                  });

                  alertBuckets.push(alertBucket);
             }
           }
           
    return alertBuckets;
        },
    });
  2. Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 17 Mar 2015 Link to this post

    Hello Timothy,

    As I have answered in the identical support ticket, I cannot identify the problem from the provided code alone. You have not specified where you get this error. "Undefined is not a function" usually means you have used an instance of an object before it has been initialized or the objects has been overwritten etc.. However, I cannot be sure what is causing this because such errors might be caused by code in another file. Please, send me the project or a sample project where I can reproduce this in the support ticket you opened.

    I am looking forward to your reply.

    Regards,
    Martin Yankov
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top