Error when data-bind a dropdown list in a tempate

2 posts, 0 answers
  1. Gauthier
    Gauthier avatar
    1 posts
    Member since:
    Jan 2014

    Posted 03 Feb 2014 Link to this post


    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{<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
  2. Petyo
    Petyo avatar
    2436 posts

    Posted 05 Feb 2014 Link to this post

    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.

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