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" >
                        data-bind="source: productsDS"

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

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

        app.products = {
            viewModel: new ProductViewModel()

    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
    Alexander Valchev avatar
    2887 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 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"
{ session: "123" }); //pass the session to the read.url function

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