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

2 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 angular application. I use angular service and controller. Grid is displayed within first tabStrip and data for add/edit is displayed within second tabStrip. My grid dataSource contain JSON data which is within separated file.

    This is my JSON data for grid:

    [{ "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 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.dateConfig = {
            format: "dd.MM.yyyy"
        }
    $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" kendo-date-picker class="k-datetimepickerMaster" k-options="dateConfig" 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 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,

    I already replied to the same question in the How to bind kendo ui foreign key from grid dataSource to dropdownlist with angularjs forum thread. 

    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
Back to Top