How to bind kendo ui foreign key from grid dataSource to dropdownlist with angularjs

8 posts, 0 answers
  1. Branimir
    Branimir avatar
    10 posts
    Member since:
    Feb 2016

    Posted 20 Apr Link to this post

    Hi,
    I am working on Kendo UI grid with angularjs application. I use angular service and controller. My data (JSON) is stored in separate file. My grid is located within first tabStrip and data for add/edit is located within second tabStrip.
    This is my JSON for grid (in separate file):
    [{ "Id": 1, "Date": "24.01.2015", "Description": "descr 1", "documentTypeId": 1 },{ "Id": 2, "Date": "26.01.2015", "Description": "description2", "documentTypeId": 2 },{ "Id": 3, "Date": "22.01.2015", "Description": "description3", "documentTypeId": 3 },{ "Id": 4, "Date": "24.01.2015","Description": "description4", "documentTypeId": 2 },{ "Id": 5, "Date": "29.01.2015", "Description": "description5", "documentTypeId": 4 },{ "Id": 6, "Date": "25.01.2015""Description": "description6", "documentTypeId": 6 }]

     

    This is my angular service:

    angular.module("app").factory('myService', function ($http) {
     
          return {
              getAll: function (onSuccess, onError) {
                  return $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) {
                      onSuccess(data);
                  }).error(function (data, status, headers, config) {
                      onError(data);
                  });
              },
              getDocumentTypes: function (onSuccess, onError) {
                  return $http.get('/Scripts/app/data/json/documentType.js').success(function (data, status, headers, config) {
                      onSuccess(data);
                  }).error(function (data, status, headers, config) {
                      onError(data);
                  });
              }
      }
    });

    This is my angular controller:
    var app = angular.module("app", ["kendo.directives"]).controller("myController", function ($scope, myService) {
     
    $scope.tabStrip = null;
    $scope.$watch('tabStrip', function () {
        $scope.tabStrip.select(0);
    });
     
    $scope.masterDataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                url = "/Scripts/app/data/json/master/masterGridData.js",
                myService.getAll(function (data) {
                    options.success(data);
                }).error(function (data) {
                    options.error(data);
                })
            }
        },
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { type: "number" },
                    Date: { type: "string" },
                    Description: { type: "string" },
                    DocumentTypeId: { type: "number" }
                }
            }
        },
        pageSize: 16
    });
     
    $scope.gridMaster = {
        columns: [
                { field: "Id", width: "70px" },
                { field: "Date", title: "Date", width: "70px" },
                { field: "Description", title: "Description", width: "170px" },
                { field: "DocumentTypeId", hidden: true }
        ],
        dataSource: $scope.masterDataSource,
        selectable: true,
        filterable: true,
        scrollable: true,
        pageable: {
            pageSize: 16,
            pageSizes: ["50", "100", "200", "All"]
        },
        toolbar: [{
            name: "create"
        }],
        change: function () {
            var dataItem = this.dataItem(this.select());
            $scope.id = dataItem.Id;
            $scope.date = dataItem.Date;
            $scope.description = dataItem.Description;
            $scope.documentTypeId = dataItem.DocumentTypeId;
        }
    };
     
    $scope.documentType = {
        dataSource: {
            transport: {
                read: function (options) {
                    url = "/Scripts/app/data/json/documentType.js",
                    myService.getDocumentTypes(function (data) {
                        options.success(data);
                    }).error(function (data) {
                        options.error(data);
                    });
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        Name: { type: "string" }
                    }
                }
            }
        },
        dataTextField: "Name",
        dataValueField: "Id"
        }
    });

     

    This is my JSON which contain data for documentType:

    [
      { "Id": 1, "Name": "Document 1" },
      { "Id": 2, "Name": "Document 2" },
      { "Id": 3, "Name": "Document 3" },
      { "Id": 4, "Name": "Document 4" },
      { "Id": 5, "Name": "Document 5" },
      { "Id": 6, "Name": "Document 6" }
    ]

     

    And, this is my HTML:

    <html>
    <head>
        <!-- css and javaScript files -->
    </head>
        <body ng-app="app" ng-controller="myController">
             <div class="divH3Style">
                 <h3 class="h3LabelForm">Grid Master</h3>
             </div>
             <div id="tabstrip" class="k-tabstrip-wrapper" data-kendo-tab-strip="tabStrip">
                                    <ul>
                                        <li>Overview</li>
                                        <li>Update</li>
                                    </ul>
     
                       <div id="tabstrip-1">
                            <div id="gridMaster" kendo-grid k-options="gridMaster" k-data-source="masterDataSource">
                            </div>
                        </div>
     
                        <div id="tabstrip-2">
                            <div id="tabStrip2Half1">
                                <div class="datepickerStyle">
                                    <label for="date" class="labelTextSize">Date:</label>
                                    <input id="date" class="k-datetimepickerMaster" name="date" ng-model="date" />
                                </div>
                                <div class="divHeightStyle">
                                    <label for="desccription" class="labelTextSize">Description:</label>
                                    <input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="description" />
                                 </div>
                                 
                                 <div id="tabStrip2Half2">
                                     <div class="divHeightStyle">
                                         <label for="documentType" class="labelTextSize">Document Type:</label>
                                         <select  kendo-drop-down-list
                                                 class="k-dropdownField" k-options="documentType"
                                                 ng-model="documentTypeId"                                                            ng-bind="documentTypeId"></select>
                                </div>
     
                                <div>
                                    <button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" ng-click="saveDataMasterGrid()">Save</button>
                                    <button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" ng-click="cancelButtonMasterGrid()">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
    </body>
    </html>

    In HTML I have dropdownlist which contain data for documentType and my dropdownlist is populated with JSON data. But, problem is in binding.
    When I select some grid row, dropdownlist always display first item. My grid datasource contain foreign key value (documentTypeId) and this
    value should match with Id value from documentType JSON file.

    My question is how to bind foreign key (documentTypeId) from grid dataSource to dropdownlist?

    Any help will be very useful.

    Regards, Branimir
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 22 Apr Link to this post

    Hello Branimir,

    We have a Grid / ForeignKey column demo that shows how to implement ForeignKey column with the Kendo UI Grid. The same approach can be used in the context of AngularJS. Please refer to the http://dojo.telerik.com/uDoZo example. 

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Branimir
    Branimir avatar
    10 posts
    Member since:
    Feb 2016

    Posted 22 Apr in reply to Boyan Dimitrov Link to this post

    Hello Boyan,

    Thank you very much for your answer. I am not using dropdownlist within grid (inline). My dropdownlist is separated from grid. My grid is displayed within first tabStrip and dropdownlist (and other fields: textbox, datetimepicker) is displayed within second tabStrip. I have two possible cases: 1. foreign key column is displayed within the grid and 2. foreign key column is hidden. I am implement the following scenario for display foreign key in column and working, but I don't know how can bind foreign key value to dropdown list.

    $scope.costCenter = [
          { "value": 1, "text": "Room 1" },
          { "value": 2, "text": "Room 2" },
          { "value": 3, "text": "Room 3" },
          { "value": 4, "text": "Room 4" },
          { "value": 5, "text": "Room 5" },
          { "value": 6, "text": "Room 6" }
            ];
     
    $scope.detailsDataSource = new kendo.data.dataSource({
         read: function (options) {
                    url = "/Scripts/app/data/json/detail/detailsGridData.js",
                    myService.getAll(function (data) {
                        options.success(data);
                    }).error(function (data) {
                        options.error(data);
                    });
                }
         },
         schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        Name: { type: "string" },
                        Description: { type: "number" },
                        CostCenterId: { type: "number" }
                    }
                }
            },
    });
     
    $scope.gridDetails = {
            columns: [
                { field: "Id", hidden: true },
                { field: "Name", title: "Name", width: "90px" },
                { field: "Description", title: "Description", width: 160px },
                { field: "CostCenterId", title: "Cost Center", values: $scope.costCenter, width: "120px" },
            ],
            dataSource: $scope.detailsDataSource,
            selectable: true,
            filterable: true,
            scrollable: true,
            pageable: {
                pageSize: 10,
                //refresh: true,
                pageSizes: ["15", "30", "50", "All"]
            },
            toolbar: [{
                name: "createNew",
                template: '<button class=\'k-button\' ng-click=\'buttonAddDetails()\'>Add new item</button>'
            }],
            change: function () {
                var dataItem = this.dataItem(this.select());
                $scope.name = dataItem.Name;
                $scope.description = dataItem.Description;
                $scope.costCenterId = dataItem.CostCenterId;
            },
            height: 215
        };

    In this case, my grid display foreign key value that corresponding with value from dataSource (CostCenterId), but I don't know how can this value (from foreign key column) display in my separated dropdownlist. In HTML, I have defined dropdownlist such as:
    <select kendo-drop-down-list class="k-dropdownField" data-source="costCenter"
            data-value-field="'value'" data-bind="value: costCenterId"
            data-text-field="'text'" ng-readonly="isReadonly" ></select>

    And always display the first item (whatever grid row I select), from dropdownlist (Room 1). Binding not working. Have you idea how can solve this? Thanks

  5. Branimir
    Branimir avatar
    10 posts
    Member since:
    Feb 2016

    Posted 25 Apr in reply to Branimir Link to this post

    Hi Boyan,
    I solved the problem about binding. I will later explain how can I do this. Thanks
  6. Branimir
    Branimir avatar
    10 posts
    Member since:
    Feb 2016

    Posted 26 Apr in reply to Branimir Link to this post

    Hi,
    I just modified my HTML and change:
    <select  kendo-drop-down-list class="k-dropdownField" k-options="documentType"
    ng-model="documentTypeId" ng-bind="documentTypeId"></select>

    to:
    <input kendo-drop-down-list k-data-text-field="'text'" k-data-value-field="'value'" data-bind="value:documentTypeId" class="k-dropdownField" k-data-source="documentType" ng-readonly="isReadonly" ng-model="documentTypeId" />

    Add JSON local variable:
    $scope.documentTypeDS = [
      { "value": 1, "text": "doc 1" },
      { "value": 2, "text": "doc 2" },
      { "value": 3, "text": "doc 3" },
      { "value": 4, "text": "doc 4" },
      { "value": 5, "text": "doc 5" },
      { "value": 6, "text": "doc 6" }
    ];

    And modified column property from gridMaster definition:
    { field: "DocumentTypeId", hidden: true, values: $scope.documentTypeDS },

    Is there a better way to handle this?


    Regards, Branimir
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Apr Link to this post

    Hello Branimir,

    Indeed this is fully workable solution. 

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Branimir
    Branimir avatar
    10 posts
    Member since:
    Feb 2016

    Posted 26 Apr in reply to Boyan Dimitrov Link to this post

    Actually, my $scope.documentType is kendo.dataSource object:
    $scope.documentType = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    url = "/Scripts/app/data/json/documentType.js",
                    myService.getDocumentTypes(function (data) {
                        options.success(data);
                    }).error(function (data) {
                        options.error(data);
                    });
                }
            }
        });

    Is there a way to use my scope object kendo dataSource ($scope.documentType) for values attribute of gridMaster column property, instead use local scope variable $scope.documentTypeDS.
    When I insert $scope.documentType for values property:
    { field: "DocumentTypeId", hidden: true, values: $scope.documentType },
    foreignKey binding to dropdownlist not working. Is it possible using something such this?

    Regards, Branimir
  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 28 Apr Link to this post

    Hello Branimir,

     

    I am afraid that this is not possible since the values should be an array and each item in the array must have a text and value fields.

     

    Regards,
    Boyan Dimitrov
    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