Kendo Mobile Datasource Init on MVVM

2 posts, 0 answers
  1. Gisli
    Gisli avatar
    10 posts
    Member since:
    Jun 2013

    Posted 13 Aug 2014 Link to this post

    hi, i have a simple MVVM listview that get data from a json webservice.:

    <div data-role="view"  
         data-model="app.products.viewModel" >
        <ul 
                        data-role="listview" 
                        data-bind="source: productsDS"
                        data-template="product-template">
            
        </ul>                              
    </div>

    and my viewModel:
    (function (global) {
        var ProductViewModel,
            app = global.app = global.app || {};

        ProductViewModel = kendo.data.ObservableObject.extend({   
            productDS: "",        
            init: function() {         
                var that = this,
                    dataSource;         
                kendo.data.ObservableObject.fn.init.apply(that, []);
                // Get Session from localStorage when user login.
                var session = getSession();
               
                var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http:/.... my service" +  session,
                        dataType: "json"
                    }
                },
                schema: {
                   data: "results.data"
                }
            });
                that.set("productDS", dataSource);
           }      
        });

        app.products = {
            viewModel: new ProductViewModel()
        };
    })(window);



    When i start the app, i get no data from the datasource because session is still "undefined". Session is a value the user get doing a previous login.
    If i refresh the app (appBuilder Simulator), then the session is not nul and everything works.

    how i can trigger the dataSource when i have the session already?





  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 15 Aug 2014 Link to this post

    Hi Gisli,

    In order to prevent the automatic DataSource reading you should set the autoBind configuration option of the ListView to false.
    In your case you will have to build the read URL address dynamically after the DataSource is initialized and session is retrieved. To achieve that you may define the transport.read.url as a function and pass the session as optional parameter of the read request. For example:

    read: {
      url: function(data) { //use function
        return "http:/.... my service" + data.session;
      },
      dataType: "json"
    }
     
    dataSource.read({ session: "123" }); //pass the session to the read.url function


    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top