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

[Branimir]

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

[Boyan Dimitrov]

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