Updating a listview in Kendo UI Mobile from a remote databse

Question

I am building an cross platform mobile app using Icenium in a very short period of time and as such I am trying to learn HTML5 and CSS in a very short period of time. I am using the Kendo UI Mobile framework to build the app and I need to link a load a list of events from a remote database and have that database populate a listview in the app.

The database can be anything as I have open access to the server and can put what ever I want on it. I literally don't know where to begin though, any help would be very good. ATM I was looking at a mySQL database as it was the easiest and most secure to maintain.

Any ideas / experience in this matter?

Answer 1

The database that you choose has nothing to do with your front end. You can use any DB like SQL Server, Oracle, MySQL(if you have budget constraints) etc. Your Kendo front end will not talk to your server DB directly; for that you need to write an HTTP service using .NET/Java/or any server side technology. Now this service will talk to your DB and return data (preferably in JSON format) to Kendo UI.

Kendo UI <-> HTTP Services <-> DataBase[Independent of the UI]

Answer 2

You might consider using the KendoUI MVVM data model and templates with AJAX.

Post to your server endpoint - it should return a JSON response:

function getRoutineDetailData(e) {
            //get data from server
            $.ajax({
                url: "http://dot.com/your_endpoint.php",
                dataType: "jsonp",
                type: "GET",
                data: { userID: userID},
                success: function(response) {
                    routineInfo = response.results;
                    routine_viewModel.set("info", routineInfo);

                }
            });
    }

Now bind the results:

       //bind the results to the viewmodel            
        var routine_viewModel = kendo.observable({
            info: []
        });

The view should also have a template:

        <script id="routineInfo-template" type="text/x-kendo-template">

        <div id="routineHeader" >
        <span id="RoutineText">${title} created on ${entry_stamp} by ${user_name}</span>
        </div>

    </script>

Your view should then call the function to do the server-post using data-show as well as use the data-model to give you access to the data ie. ${title} used in the template:

<div data-role="view" id="view-routineDetail" data-show="getRoutineDetailData" data-model="routine_viewModel" data-title="routineDetail">
<div id="routineInfo" data-template="routineInfo-template" data-bind="source: info" ></div>
</div>

This is a quick explaination and more can be found at http://docs.kendoui.com/getting-started/mobile/mvvm