Datasource generated via SQL to local database

4 posts, 0 answers
  1. Bob
    Bob avatar
    2 posts
    Member since:
    Jan 2016

    Posted 17 Oct Link to this post

    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 + "");
            }
           });

  2. Stefan
    Admin
    Stefan avatar
    272 posts

    Posted 19 Oct Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Bob
    Bob avatar
    2 posts
    Member since:
    Jan 2016

    Posted 19 Oct in reply to Stefan Link to this post

    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

  5. Stefan
    Admin
    Stefan avatar
    272 posts

    Posted 20 Oct Link to this post

    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
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready