Bind a select element to a kendo.data.DataSource

[Dean]

How can I bind a select element to a kendo.data.DataSource? I know a select element can bind to an array of JavaScript objects but I would like to use the kendo.data.DataSource instead. I've been following the example in the demo here although it doesn't use a DataSource.

The error message I get in the console of the simulator is "Uncaught ReferenceError: DEP_ID is not defined"

Some example code, that shows what I'm trying to do and returns the above error, is below. Note that I am using Graphite and have included the SQLite plugin in my project.

<div data-role="view" id="tabstrip-Employees" data-title="Employees" data-model="employeeVM">
    Department
    <select data-bind="source: departmentSource"
        data-value-field="DEP_ID" data-text-field="DEP_Name">
    </select>
</div>

var employeeVM = kendo.observable({
    departmentSource: new kendo.data.DataSource({
        transport: {
            read: function(options){
                data.db.transaction(function(tx) {
                    tx.executeSql("SELECT DEP_ID, DEP_Name FROM Department", [], 
                        function (tx, rs) {
                            options.success(data.toArray(rs));
                        }, 
                        data.onError);
                });
            }
        }
    });
});

var data = {
    db: null,
    
    init: function() {
        data.openDb();
        data.createTables();
    },
    
    openDb: function() {
        if(window.sqlitePlugin !== undefined) {
            data.db = window.sqlitePlugin.openDatabase("SuperStore");
        } else {
            // For debugging in simulator fallback to native SQL Lite
            console.log("Use built in SQL Lite");
            data.db = window.openDatabase("SuperStore", "1.0", "SuperStore", 200000);
        }
    },
    
    createTables: function() {
        data.db.transaction(function(tx) {
            tx.executeSql("CREATE TABLE IF NOT EXISTS [Department]( \
                [DEP_ID] INTEGER PRIMARY KEY ASC, \
                [DEP_Name] TEXT NULL \
            )", []);
            tx.executeSql("DELETE FROM Department");
            tx.executeSql("INSERT INTO Department(DEP_ID, DEP_Name) VALUES (?,?)",
                [1, "Department 1"]);
            tx.executeSql("INSERT INTO Department(DEP_ID, DEP_Name) VALUES (?,?)",
                [2, "Department 2"]);
            tx.executeSql("INSERT INTO Department(DEP_ID, DEP_Name) VALUES (?,?)",
                [3, "Department 3"]);
        }, data.onError);
    },
    
    toArray: function(result) {
        var length = result.rows.length;
        var data = new Array(length);
        for (var i = 0; i < length; i++) {
            data[i] = result.rows.item(i);
        }
        return data;
    },
    
    onError: function(tx, e) {
        if(e !== undefined){
            console.log("Error: " + e.message);
        }
        else if(tx !== undefined){
            console.log("Error: " + tx.message);
        }
    }    
};

// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
function onDeviceReady() {
    data.init()
    window.app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip", initial: "#tabstrip-Employees" });
    navigator.splashscreen.hide();
}

[Dean]

An example of how I can achieve this would be great. But I'd also like to know if this feature is planned to be included in the future?

[Jan-Dirk]

I am not an expert in this, but aren't you missing a schema in the datasource creation?

[Alexander Valchev]

Hello guys,

@Dean
The DropDownList widget supports binding to remote data through dataSource out of the box. Standard select element supports binding to local array. For more information please check this topic.
My recommendation is to use a DropDownList. If you prefer to work with standard HTML select, then you may bind it to the DataSource's view (not the DataSource itself).

For your convenience I prepared a small example: http://jsbin.com/eqamen/2/edit
I hope this will help.

Regards,
Alexander Valchev
the Telerik team

[Dean]

Thanks Alexander, I have got my select element binding properly thanks to your example.

I would like to keep my DataSource shareable but the change event handler in your example is specific to the ViewModel - is there a way to assign the change event handler in the ViewModel and keep the DataSource declaration outside of it?

[Alexander Valchev]

Hello Dean, 

The DataSource should be part of the ViewModel, however that does not mean that it is not shareable - you can bind another to widget to it.

The scenario which you described is a bit unclear. In the example, the change event handler is specific to the DataSource instance. Could you please edit the sample page so it demonstrates what would you like to achieve and send me back a link? In this way I would be able to understand the details of your case and help you implement it, if it is supported of course.

Regards,
Alexander Valchev
the Telerik team

[Dean]

Hi Alexander,

I have modified your example to show what I would like to achieve: http://jsbin.com/ohaxuf/1/edit

I am trying to organise my code and establish some kind of pattern as I need to create a fairly complex application (for a mobile) and I'm concerned that I'll end up with spaghetti code that I won't be able to maintain. One way I am trying to make things easy to maintain is by having a separate data layer that isn't tightly coupled with the ViewModels. However, I'd appreciate a nudge in the right direction if I'm going about this the wrong way.

Your help is much appreciated.

[Alexander Valchev]

Hello Dean,

The sample which you provided fails with JavaScript error: Uncaught SyntaxError: Unexpected token .
The following code is syntactically incorrect:

var viewModel1 = kendo.observable({
    data: [],
    dataSource: myDataSource,
    dataSource.change: function (e) {
      viewModel1.set("data", this.view());
    }
});

If I understood correctly, you insist to use different View-Model. I modified the sample to demonstrate one possible configuration of this scenario.

• http://jsbin.com/ohaxuf/5/edit

Although that this work, I recommend you to use one single View-Model as it is easier to configure and less error prone.

• http://jsbin.com/ohaxuf/7/edit

Regards,
Alexander Valchev
the Telerik team

[Dean]

The sample I provided was meant to illustrate what I would like to achieve but couldn't, hence the syntax error. I realise it doesn't make much sense in the context of the sample to use 2 View-Models, I'm just getting used to what I can and can't do with the framework.

What your solution tells me is that what I wanted to achieve is simply not possible and that a Data-Source is tightly coupled with a View-Model. I will need to change my approach to kendo ui mobile development to allow for this.

Thanks for your help.

EDIT:
The above statement about tight coupling is not true. It comes down to my lack of understanding of JavaScript. I found the syntax to bind to the change event outside of the Data-Source so that it doesn't have to be tightly coupled. Something like the following works:

myViewModel.dataSource.bind("change", function(e) {
    myViewModel.set("data", this.view());
});

Hopefully this time I'm on the right track. I put the above code into an 'init' function in the View-Model that I call from the "data-init" function of the view.

[Erik]

Hi, I have tried this example (http://jsbin.com/eqamen/2/edit) but I get this error:
Uncaught TypeError: Cannot read property 'parent' of undefined' from http://local/Simulator/kendo/js/kendo.mobile.min.js:12

Any idea what can be the problem?

[Alexander Valchev]

Hello Erik,

I ran your last example but did not observed any JavaScript errors. Are you sure that this is the right link?

Regards,
Alexander Valchev
Telerik

 

 

[Erik]

Sorry, I see that I have not completely clear.
I have copy-pasted this example in a KendoUI mobile project and am running this in the simulator.

[Alexander Valchev]

Hello Erik,

It is still not clear how did you copy-pasted the example as it does not contain any Kendo Mobile View and Application.
I am attaching a sample app builder project which contains your code and works as expected on my end. Please check it and let me know what I am missing.

Regards,
Alexander Valchev
Telerik