Sync remote datasource with switch

3 posts, 0 answers
  1. d2uX
    d2uX avatar
    16 posts
    Member since:
    Jul 2012

    Posted 17 Jul 2012 Link to this post

    Hi there,

    I'm new to kendo and just exploring the almighty MVVM. Since I guess I grasped the fundamentals I wanted go a bit further.
    I set up a small environment which let's me query data from a remote database (a PHP-script). Binding this data to a kendo.observable works!

    Now, in a detail view, I want to provide a switch, that changes the status of the corresponding record.
    Here's the template of the detail view:
    <div data-role="content">
        <aside>
            <p>Hello, I'm the Detail's page (Product)</p>
        </aside>
        <h2 data-bind="text: product.desc"></h2>
        <p data-bind="text: product.price"></p>
        <p data-bind="text: isChecked"></p>
        <p>visible <input id="visibilitySlider" data-role="switch" data-bind="checked: isChecked" /></p>
    </div>

    When fetching the data the isChecked method is executed (which simply returns true or false, depending on the database value)
    var productDetailModel = kendo.observable({
        isChecked: function() {
            var product = this.get('product');
            if(typeof product != 'undefined')
            {
                return (product.status == 1)?true:false;   
            }
            productDS.sync();
        }
    })

    I though simply calling DS.sync() would synchronize the model data with the server data, but a test console.log() isnt't even called upon clicking the slider (which I thought reacts to the checked-binding)

    Here are my model and the used DS
    var Product = new kendo.data.Model.define({
        id: 'id'
    });
     
    var productDS = kendo.data.DataSource.create({
        transport: {
            read: {
                url: '/get.php',
                dataType: 'jsonp',
                data: {
                    type: 'products'
                }
            },
            update: {
                url: '/set.php',
                type: 'POST'
            }
        },
        schema: {
            model: Product
        },
        requestStart: function() {
            app.showLoading();
        },
        pageSize: 10
    });

    So my question is: How do I keep the data from the (hopefully correctly defined)  Model in sync with the server data (everytime s.o. changes the slider)

    Thx
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 20 Jul 2012 Link to this post

    Hello Erik,

    I am afraid that your scenario is a bit unclear. Judging by the usage of app.showLoading(); and data-role="switch" I assume that you would like to build a mobile application. If that is the case, you should hook up to the change event of the control via data-change="isChecked" (where isChecked is a name of the event handler function). To illustrate the approach I prepared a small example.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. d2uX
    d2uX avatar
    16 posts
    Member since:
    Jul 2012

    Posted 20 Jul 2012 Link to this post

    Thx for the reply.
    My problem was, that the switch (which should change a boolean value) wasn't recognized by the DS.sync() event. I guess that was because I wired it up wrong. I also came up with binding it to data-change. And that worked ;)
    Now I'm binding the value that actually should be changed to the switch's "checked" binding. After this I'm calling the DS.sync() (when hitting the backbutton) and it tracks the change correctly and syncs back to the dataSource.
    For anyone interested:

    data-bind="checked: product.status"
    <a data-role="backbutton" data-align="left" href="#tab-products" data-click="syncProductData">Back</a>

    So it was completely the wrong direction for what I tried to achieve (maybe thats why it was a bit unclear)
    Thx again...
Back to Top