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

JS error : Unable to get value of the property 'getByUid': object is null or undefined

5 Answers 339 Views

ListView (Mobile)

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

Roland Koops asked on 06 Feb 2012, 09:50 AM

I have a list view (#menuList). As soon as i configure a datasource including a schema, i get the following js error when i click an item:
Unable to get value of the property 'getByUid': object is null or undefined

My page:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Compano Online Software</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script src="http://cdn.kendostatic.com/2012.1.124/js/kendo.all.min.js" type="text/javascript"></script>

<script src="http://cdn.kendostatic.com/2012.1.124/js/kendo.mobile.min.js" type="text/javascript"></script>

<link href="/styles/kendo.common.min.css" rel="stylesheet" />

<link href="/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script type="text/javascript">

var vn = "prd.item";

var tm = "<b>${SalesOrganizationShortDescription} ${Code}</b>-<b>${Description}</b><br/>€ ${PurchasePricePerUtilizationUnit}";

function onError(e)

{

}

function menuClick(e) {

vn = e.dataItem.ViewName;

tm = e.dataItem.Template;

var list = $("#list").data("kendoMobileListView");

if (list)

list._refresh();

}

function initList() {

$("#list").kendoMobileListView({

dataSource: {

transport: {

read: {

type: "POST",

url: "/dv.ashx",

data: { vn: vn },

dataType: "json"

}

},

serverPaging: true,

serverSorting: true,

pageSize: 20,

schema: {

data: "d",

total: "count"

},

error: onError

},

template: tm

});

}

$(document).ready(function () {

var app = new kendo.mobile.Application(document.body);

$("#menuList").kendoMobileListView({

dataSource: {

transport: {

read: {

type: "POST",

url: "/webservices/mobile.asmx/GetMenuList",

contentType: "application/json; charset=utf-8",

data: {},

dataType: "json"

}

},

schema: {

data: "d",

model: {

fields: {

__type: { type: "string" },

ViewName: { type: "string" },

Description: { type: "string" },

Template: { type: "string" }

}

},

template: "<a href='tabstrip-grid'>${Description}</a>",

click: menuClick

});

</script>

</head>

<body>

<div data-role="view" id="tabstrip-home" data-title="Home" data-layout="mobile-tabstrip">

<ul data-style="inset" id="menuList" ></ul>

</div>

<div data-role="view" id="tabstrip-grid" data-title="Overzicht" data-init="initList" data-layout="mobile-tabstrip">

<div id="list"></div>

</div>

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div data-role="navbar">

<a class="nav-button" data-align="left" data-role="backbutton">Back</a>

<span data-role="view-title"></span>

<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#tabstrip-home" data-icon="home">Home</a>

<a href="#tabstrip-grid" data-icon="favorites">Overzicht</a>

<a href="#tabstrip-detail" data-icon="favorites">Details</a>

</div>

</body>

</html>

5 Answers, 1 is accepted

Accepted

answered on 08 Feb 2012, 09:47 AM

Hello,

Thanks, I reproduced the problem. Unfortunately, I was not able to modify the page on my side, due to the web service references, so I am not certain if the provided solution will work.

The problem is that the menuList ListView is initialized in the document.ready event. After that, the mobile application view re-initializes it, and removes its datasource.

Although technically correct, this behavior may be misleading - so we are going to prevent secondary widget initialization for the final release.

Can you please try moving the menuList initialization in the view init method? In the other thread, I gave some examples for that.

Greetings,
Petyo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!