Bind a select element to a kendo.data.DataSource

13 posts, 0 answers
  1. Dean
    Dean avatar
    73 posts
    Member since:
    Oct 2012

    Posted 06 Mar 2013 Link to this post

    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();
    }



  2. Dean
    Dean avatar
    73 posts
    Member since:
    Oct 2012

    Posted 06 Mar 2013 Link to this post

    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?
  3. Kendo UI is VS 2017 Ready
  4. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 11 Mar 2013 Link to this post

    I am not an expert in this, but aren't you missing a schema in the datasource creation?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Dean
    Dean avatar
    73 posts
    Member since:
    Oct 2012

    Posted 11 Mar 2013 Link to this post

    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?
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Dean
    Dean avatar
    73 posts
    Member since:
    Oct 2012

    Posted 14 Mar 2013 Link to this post

    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.
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 19 Mar 2013 Link to this post

    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.

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

    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!
  10. Dean
    Dean avatar
    73 posts
    Member since:
    Oct 2012

    Posted 19 Mar 2013 Link to this post

    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.
  11. Erik
    Erik avatar
    24 posts
    Member since:
    Sep 2013

    Posted 21 Mar 2014 in reply to Alexander Valchev Link to this post

    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?
  12. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 25 Mar 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Erik
    Erik avatar
    24 posts
    Member since:
    Sep 2013

    Posted 25 Mar 2014 in reply to Alexander Valchev Link to this post

    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.
  14. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 28 Mar 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready