Sync remote datasource with switch

[d2uX]

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

[Alexander Valchev]

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

[d2uX]

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...