Error when data-bind a dropdown list in a tempate

[Gauthier]

Hi,

I try to bind data on a select list in a template with this code

var oPersonForm =<br>[<br>    { Key: "Type", Type: "select", Label: "Type", HightLight: false, Values: [{ Key: "Type1", Value: "Type1" }, { Key: "Type2", Value: "Type2" }, { Key: "Type3", Value: "Type3" }] }<br>];<br><br>$(function ()<br>{<br>    Data.Person = {<br><br>        dsFields: new kendo.data.DataSource({<br>            transport: {<br>                read: function (options)<br>                {<br>                    options.success(oPersonForm);<br>                }<br>            }<br>        }),

<div id="personViewForm" data-role="content"><br>        <ul id="lsFields" data-role="listview" data-style="inset" data-template="ul-fromPersonTemplate" data-bind="source: dsFields"></ul><br>   </div><br><br>    <script><br>        var viewModel = kendo.observable({<br>            dsFields: Data.Person.dsFields<br>        });<br><br>        kendo.bind($("ul"), viewModel);<br>    </script><br><br><script id="ul-fromPersonTemplate" type="text/x-kendo-template"><br>    <span data-bind="text:Label"></span><br><br>    #if (Type == 'checkbox') {#<br>    <input type="checkbox" <br>            data-role="switch" <br>            name="#: Key #" <br>            data-checked="#: oPerson[Key] #" /><br>    #} else if(Type == 'select') {#<br>    <select <br>            name="#: Key #" <br>            data-value-field="Key" <br>            data-text-field="Value" <br>            data-bind="value : "Type1", source: this.Values"></select><br>    #} else {#<br>    <input type="#: Type #" <br>            name="#: Key #" <br>            value="#: oPerson[Key] #" /><br>    # } #<br></script><br>

But i have a javascript erreor and i don't undersand why, this is the error :

Uncaught TypeError: Cannot read property 'length' of null (index):1
r (index):1
s (index):1
s (index):1
F.widget.source.v.extend.itemChange (index):1
b.isFunction.i jquery-1.9.1.js:7223
n.extend.trigger (index):1
(anonymous function) (index):1
_.extend._renderItems (index):1
_.extend.insertAt (index):1
_.extend.replace (index):1
g.Class.extend.refresh (index):1
_refreshHandler (index):1
n.extend.trigger (index):1
ut.extend.query (index):1
ut.extend._query (index):1
(anonymous function) (index):1
b.extend.Deferred jquery-1.9.1.js:7541
ut.extend.fetch (index):1
_.extend.setDataSource (index):1
F.widget.source.v.extend.refresh (index):1
D.extend.bind (index):1
w.extend.applyBinding (index):1
w.extend.bind (index):1
s (index):1
a (index):1
h (index):1
_.extend.init (index):1
dt.initWidget (index):1
(anonymous function) (index):1
b.extend.each jquery-1.9.1.js:7123
b.fn.b.each jquery-1.9.1.js:6735
dt.init (index):1
ht.init (index):1
d.extend._model (index):1
d.extend.init (index):1
dt.initWidget (index):1
F.extend._createView (index):1
F.extend.append (index):1
(anonymous function) (index):1
c jquery-1.9.1.js:7341
p.fireWith jquery-1.9.1.js:7403
k jquery-1.9.1.js:9597
r

[Petyo]

Hello Gauthier,

Based on the data-role=content attribute I assume that you are developing Kendo UI Mobile application. From the code posted I managed to assemble the following example. There were several errors in it:

- You should not use kendo.bind in a mobile context;
- There were invalid nested quotes in the data-bind attribute;
- You should not use this in template expressions.

Please compare the example with your implementation.

Regards,
Petyo
Telerik