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

[Branimir]

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

[Boyan Dimitrov]

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

 

 

[Branimir]

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

[Branimir]

Hi Boyan,
I solved the problem about binding. I will later explain how can I do this. Thanks

[Branimir]

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

[Boyan Dimitrov]

Hello Branimir,

Indeed this is fully workable solution. 

Regards,
Boyan Dimitrov
Telerik

 

 

[Branimir]

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

[Boyan Dimitrov]

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