This is a migrated thread and some comments may be shown as answers.

Binding listview inside drawer not working after framework upgrade

1 Answer 58 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Timothy
Top achievements
Rank 1
Timothy asked on 12 Mar 2015, 09:03 PM
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;
    },
});

1 Answer, 1 is accepted

Sort by
0
Martin Yankov
Telerik team
answered on 17 Mar 2015, 12:08 PM
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.

 
Tags
General Discussion
Asked by
Timothy
Top achievements
Rank 1
Answers by
Martin Yankov
Telerik team
Share this question
or