Datasource generated via SQL to local database

[Bob]

Two general questions from a relative beginner at this client side SPA stuff. I've had to bridge from a variety of "demos" (for which I'm thankful) and I thank you for any assistance you can provide.

I'm attempting to generate a datasource using sql to a local database which will then be bound to a mvvm listview and rendered via user interaction

Here's the Listview segment I'm using. Note that I've created my own 'accordion like' display mechanism which toggles the "display" which is why it's set to "none" initially in the div.

<div class = "no-arrow-listview" id = "hoursCategoryAttractionsListview" style = "display:none;">
             <ul data-role="listview" data-source=" app.GeneralEstateHours_Attractions_DataFile.data" data-template="hours-template" data-style = "inset"> </ul>
 </div>

 

Here's the code I'm working on to generate the datasource for the listview

app.GeneralEstateHours_Attractions_DataFile = {
            data: new kendo.data.DataSource({
               transport: {
                       read:  function(options) {
                       app.db.transaction(function(tx) {
                                    tx.executeSql('SELECT * from masterDataTable where appMapCategoryID = ? ', [ 'Attraction'],
                                                function(tx, result){
                                                            var data = [];
                                                            for (var i = 0; i < result.rows.length; i++){
                                                                        data[i] = result.rows.item(i);
                                                 }
                                                options.success(data);
                                    });
                        });
                  }
            },
            group: {
                        field: "appMapCategoryID"

            },
            sort:  {
                        field: "appListOrder", dir: "asc"
            }
            })
    };  

The issue is that if I omit the "group" filter from the datasource (though I can verify that there is a valid result set returned via the fetch function and some console output listed below) the listview does not display anything. Whereas, if I include the group filter (as I did in the code above) it does indeed render the listview but adds a header to the listview and I don't want to include the "header" that is generated by using the 'group' filter.

If I can't work with the raw return is there away to remove the "listview header" from the generated listview .

     app.GeneralEstateHours_Attractions_DataFile.data.fetch(function(){
            var test = app.GeneralEstateHours_Attractions_DataFile.data.view();
            //alert ("The length of attractions is " + test.length);
            for (var i = 0; i<test.length; i++){

          console.log("From the Fetch of the new GeneralEstateHours_Attractions_DataFile Data source we have " + test[i].title + "image" + test[i].image + " id = " + test[i].id + "");
        }
       });

[Stefan]

Hello Bob,

This is not a known issue with the Kendo UI MobileListView.

I can assume that the issue is caused by the data-source binding.

I can suggest checking the following example demonstrating how to use the MVVM approach to bind the DataSource to the ListView:

http://dojo.telerik.com/UWuRe

Also, we have an example using grouped data, but if the grouping is removed the data will still be shown and the headers will not be displayed:

http://demos.telerik.com/kendo-ui/m/index#mobile-listview/databinding

Additionally, I can suggest using the template property to modify the appearance of the items:

http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/listview#configuration-template

If these examples are not helpful, could you please share a fully runnable example reproducing the issue, so I can provide suggestion best suited for it.

Regards,
Stefan
Telerik by Progress

 

 

[Bob]

Thanks for the input, unfortunately the examples weren't too useful and to craft up a fully functioning example would be too time consuming at this point. When I'm done with the project I'll do so. Ultimately,  I'm thinking that the issue is in the format that the "raw" result set from the database is made available via the the datasource without the 'grouping' wrapper applied. I'm also sure there are other approaches I could try.

Fortunately I found a solution / workaround which allows me to use the approach listed above. I simply styled out the group-title by using:

#kendoUiMobileApp .km-group-title{

display:none;

}

I'm hoping that this doesn't cause hidden issues going forward, but for now it seems to work.

Thanks for your time and effort

[Stefan]

Hello Bob,

I`m glad to hear that you found a solution in this scenario.

The CSS selector looks specific enough and should not interfere with the other part of the application.

Still, if you manage to craft up a fully functioning example, I will be happy to check it and see if there is a better approach to resolve this.

Regards,
Stefan
Telerik by Progress