Binding jsdo kendo.datasource to a listview using angularjs - Forum - Mobile - Progress Community

Binding jsdo kendo.datasource to a listview using angularjs

 Forum

Binding jsdo kendo.datasource to a listview using angularjs

  • I'm converting your mvvm pattern template to use angular instead (or trying to anyway).

    I get the data , but the binding is showing [object Object]. It's obviously nesting the data further in, but how do I get to it.

    In the mvvm examples, we used $(field_name). I'm trying to use {{ field_name }} or {{ dataItem.field_name }} and I get that same output. I get the right amount of rows, but they are just the object.

    Here is how I am requesting the data (which works as far as getting the data):

    $scope.listDataSource = new kendo.data.DataSource({
                    type: "jsdo",
                    serverPaging: true,
                    serverFiltering: true,
                    filter: { field: "cust_no", operator: "eq", value: "abc" },
                    serverSorting: true,
                    sort: { field: "connect_type", dir: "asc" },
                    transport: {
                        jsdo: jsdoSettings.resourceName,
                        tableRef: "ttCustomerConnection",
                        countFnName: "Count"
                    },
                    schema: {
                      model: {
                          fields: {
                              id: { type: "string" },
                              seq: { type: "number" },
                              cust_no: { type: "string" },
                              connect_type: { type: "string" },
                              connect_type_desc: { type: "string" },
                              ip_address: { type: "string" },
                              user_name: { type: "string" },
                              password: { type: "string" },
                              server_name: { type: "string" },
                              VPN_required: { type: "Boolean" },
                              notes: { type: "string" },
                              change_userid: { type: "string" },
                              change_date: { type: "date" },
                              change_time: { type: "string" }
                          }
                      }  
                    },
                    error: function(e) {
                      // removed for brevity
                    }
                } );

    And here is the html:

    <kendo-mobile-view id="list" k-title="'List View'" k-layout="'default'" k-on-before-show="OnBeforeShow()" ng-controller="ListController">
            <kendo-mobile-list-view id="conList" class="item-list" k-data-source="listDataSource">
                <h3 class="item-title">{{ dataItem.cust_no }}</h3>
                <p class="item-info">{{ dataItem.ip_address }}</p>
            </kendo-mobile-list-view>
        </kendo-mobile-view>


    Anybody able to help with this one?

  • Hello,

    It might help to see what the data assigned to the DataSource looks like.

    To see the data, you can do $scope.listDataSource.data(); from the JavaScript Console or the debugger at a breakpoint.

    Is the Business Entity using a multi-table DataSet? (tableRef is only required if you are using a multi-table DataSet.)

    When using type: "jsdo", the model for the DataSource is set automatically based on the information in the catalog.

    I wonder if your program would behave differently if you comment out the schema property.

    I hope this helps.

  • I saw that the tableRef wasn't required for my single table data set, but figured that it couldn't hurt. I removed it for giggles and it reacted the same (of course).

    I did the call to get the data and got this with the first record expanded:

    I was curious about the schema as well, which is why I tried it before posting the question in the first place. No go, I get the same results.

    Thanks

  • It was my fault.

    I added a wrapper div to the html and used k-template and it works.

    <kendo-mobile-view id="list" k-title="'List View!'" k-layout="'default'" k-on-before-show="OnBeforeShow()" ng-controller="ListController">
       <kendo-mobile-list-view id="conList" class="item-list" k-data-source="listDataSource">
          <div k-template>
               <h3 class="item-title">{{ dataItem.cust_no }}</h3>
               <p class="item-info">{{ dataItem.ip_address }}</p>
           </div>
       </kendo-mobile-list-view>
    </kendo-mobile-view>

    With that, I am getting my data.

    My app.js entry-point:

    It wasn't working originally with my template defined in the index page due to the fact that I had my factory for the templates (like shown in the sushi app) wrong. I looked more closely at that and got it working the original way:

    var app = angular.module('ListMobileApp', [ 'kendo.directives' ]);
    app.run(["$rootScope", function($rootScope) {
            $rootScope.initialView = "views/home.html"
          }])
    
    app.factory('templates', function() {
            return {
                conTemplate: $("#conTemplate").html()
            };
        });
    

    Template definition in the index.html:

    <script id="conTemplate" type="text/x-kendo-templ">
            <h3 class="item-title">{{ dataItem.cust_no }}</h3>
            <p class="item-info">{{ dataItem.ip_address }}</p>
    </script>

    And the use of the template in my list view (back to how I had it in the original post):

    <kendo-mobile-view id="list" k-title="'List View!'" k-layout="'default'" k-on-before-show="OnBeforeShow()" ng-controller="ListController">
        <kendo-mobile-list-view id="conList" class="item-list" k-template="templates.conTemplate" k-data-source="listDataSource">
        </kendo-mobile-list-view>
    </kendo-mobile-view>

    And the missing piece was passing the templates into the controller for the list:

    app.controller("ListController", ['$rootScope', '$scope', 'templates', function($rootScope, $scope, templates) {
        $scope.templates = templates;

    Oh, didn't need the schema definition (glad because it was a lot of extra work and I only added it because I thought I might need it to do the mapping).

  • Great!

    Thank you for sharing your findings.

  • Btw: there is now angular 2.0.  "removed from Angular: $scope":  eisenbergeffect.bluespire.com/all-about-angular-2-0 and chariotsolutions.com/.../ng-conf-2015-misko-heverys-angular-2-0-keynote-syntax-approach

    No idea if this has importance for you, but it could be wortwhile to check out why it was removed. ;-)

    --

    Kind regards,

    Stefan Houtzager

    Houtzager ICT consultancy & development

    www.linkedin.com/in/stefanhoutzager