List View data-click event returns e with undefined dataItem properties

[Maurice]

Hi,
I've been having trouble getting at the data associated with a list view item.  In the event handler for the data-click event event I get an event parameter that doesn't seem to have any of the properties referenced in the sdk.  Only the data-item property is undefined.  

onLibraryItemClick e:[object Object]
06-26 13:01:29.439    1203-1203/com.verbum.wordhose.android    I/Web Console: app: onLibraryItemClick e:onLibraryItemClick e.item:[object Object]
06-26 13:01:29.459    1203-1203/com.verbum.wordhose.android    I/Web Console: app: onLibraryItemClick e.target:[object Object] at :2
06-26 13:01:29.459    1203-1203/com.verbum.wordhose.android    I/Web Console: app: onLibraryItemClick e.dataItem:undefined at :2

The weird thing is that I am able to add new items to listview and they render correctly.  So the template seems to be wired up correctly. 

The related HTML is:

<div id="libraryPage" data-role="view" data-layout="appLayout" data-title="library" data-init="initLibraryListView">
            <p id="wh_status">disconnected</p>
            <div class="head">Wordhose Library</div>
            <ul id="library-listview"
                data-role="listview"
                data-init="initLibraryListView"
                data-click="onLibraryItemClick">
            </ul>
            <!--    <img class="item-photo" src="${url}" />  -->

            <script type="text/x-kendo-template" id="libraryListViewTemplate">
                <h3 class="item-title">${Title}</h3>
                <p class="item-info">Text Status Data Here</p>
            </script>

        </div>

The click event JS is:

function onLibraryItemClick(e) {
    console.log("app: onLibraryItemClick e:" + e);
    console.log("app: onLibraryItemClick e.item:" + e.item);
    console.log("app: onLibraryItemClick e.target:" + e.target);
    console.log("app: onLibraryItemClick e.dataItem:" + e.dataItem);


    //console.log("app: onLibraryItemClick e.target:" + JSON.stringify(e.target));
    _CurrentTextData = e.dataItem;

    //console.log("app: e.dataItem.Title=" + e.dataItem.Title);
};

And the code that adds the json item to the dataSource is:

_LibraryListViewDataSource.add(sampleText);

Like I said, items get added and rendered correctly in the listview itself, but there's no associated dataItem.

Help :) ?

Thanks.

[Alexander Valchev]

Hi Maurice,

I noticed the following syntax mistakes in your code:

1. The ListView is not bound to a dataSource (there is no data-source attribute). I assume that you are re-initializing the component in the init event of the View (or somewhere else). Multiple initialization is not supported - please build the widget with either data-attributes or with jQuery plug-in syntax.
   
   
2. ListView does not have init property/event, respectively it does not have a data-init attribute.

Please correct those issues and let me know if the problem still persists. Thank you in advance.

Regards,
Alexander Valchev
Telerik

[Maurice]

Hi Alexander,
I tried to make the changes you recommended.  I have the init only on the view that contains the list-view.  I've tried all the variations (declarative v. jquery instantiation) I can think of but have had no luck.

Is there any chance you can post an example that has a list-view bound to a collection of json objects which:

•  are templated in the list-view 
• which can be added to at runtime using the data source add method 
• and where the data-click handler is able to get at the json item associated with the list view item

Thanks

[Alexander Valchev]

Hello Maurice,

Please check this sample and let me know what I am missing.

• http://jsbin.com/oradap/2/edit
  
  

Thank you in advance.

Regards,
Alexander Valchev
Telerik

[Maurice]

Hi Alexander,
This is really helpful.  To be clear: Can/should I use the schema to define the entire structure of the JSON objects I'll be adding to the datasource?  In particular, if I have a field which is, itself, an array of JSON objects, can and should I describe that using the schema mechanism?

Alternatively, I could make a "stub" data type for use with the list view and and then keep the more complex "real" JSON collection separately.  It would mean looking up the deeper data using the item id derived from the item click(s) but maybe that's more realistic/easier than trying to use the data source to everything?

Thanks in advance for the help - I'm already way past where I was before.

[Alexander Valchev]

Hello Maurice,

Regarding your questions:

1. The schema is used to describe structure of your data and should not be omitted especially if you are going to perform CRUD operations with the DataSource. In some cases, for example when the DataSource is read-only the schema might be missing.
   
   
2. I am not sure whether I understood the scenario correctly. Could you please share some code/sample data which demonstrates the case? 

Regards,
Alexander Valchev
Telerik

[Maurice]

Hi Alexander,
Before I work up a small sample, I think I can better describe my question.  Assume I have a json object like:

var jsonShap = 
{ 
"someID": "1200ef69-20d9-e211-93f6-bc764e10c14d", 
"anotherID": "36e29b9b-5fba-4dc0-b45b-5f0cc8de", 
"aUrl": "someUrl", 
"anotherUrl": null, 
"yetAnotherUrl": null, 
"someCount": 1354, 
"aString": "Some phrase", 
"anObject": null, //could be a json object itself ??
"CreatedAt": "06/19/2013 20:40:02.467", 
"startIndex": 0, 
"aName": "john.doe", 
"stringArray": ["once", "upon", "a", "time"], 
"intArray": [1, 2, 3, 4], 
"anotherStringArray":["", "", "", ""], 
"yetAnotherStringArray": ["", "", "", ""]
};

I can't find the documentation to specify  a schema structure that has arrays like in this structure.  And what if one of those fields, like "anObject" above was, itself, a json object?  Can you show me the right way to instantiate the data source with a more complex schema like this?  To be clear, I can't know the size of the arrays in advance - just that they are arrays.

That clarify my earlier post?

Maurice

[Alexander Valchev]

Hello Maurice,

Yes, this clarifies your question. I am afraid that what you would like to achieve is not supported. By design the DataSource works only with flat data, it is not possible to define field that contains array of values inside the schema.model configuration.

Please try to break up the data into simple key-value pairs.

Regards,
Alexander Valchev
Telerik