javascript - How to bind foreign key kendo ui dropdownlist (with angular) -
i working kendo ui , angular grid application. grid populated json data (separate file) , use angular service:
my json data:
[ { "id": 1, "accountno": "10236", "postingdate": "20.01.2015", "maturitydate": "24.01.2015", "description": "description1", "documenttypeid": 1 }, { "id": 2, "accountno": "10648", "postingdate": "26.01.2015", "maturitydate": "28.01.2015", "description": "description2", "documenttypeid": 2 }, { "id": 3, "accountno": "10700", "postingdate": "22.01.2015", "maturitydate": "25.01.2015", "description": "description3", "documenttypeid": 3 }, { "id": 4, "accountno": "10810", "postingdate": "24.01.2015", "maturitydate": "27.01.2015", "description": "description4", "documenttypeid": 2 }, { "id": 5, "accountno": "10101", "postingdate": "29.01.2015", "maturitydate": "30.01.2015", "description": "description5", "documenttypeid": 4 }, { "id": 6, "accountno": "10364", "postingdate": "25.01.2015", "maturitydate": "31.01.2015", "description": "description6", "documenttypeid": 6 } ] 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 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" }, accountno: { type: "string" }, postingdate: { type: "string" }, maturitydate: { type: "string" }, description: { type: "string" }, documenttypeid: { type: "number" } } } }, pagesize: 16 }); $scope.gridmaster = { columns: [ { field: "id", hidden: true }, { field: "accountno", title: "account no", width: "77px", template: '<div style="text-align:left;">#= kendo.tostring(accountno) #</div>' }, { field: "postingdate", title: "posting date", width: "70px" }, { field: "maturitydate", title: "maturity 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, //refresh: true, pagesizes: ["50", "100", "200", "all"] }, toolbar: [{ name: "create" }], change: function () { var dataitem = this.dataitem(this.select()); $scope.isrowselected = true; $scope.id = dataitem.id; $scope.accountnumber = dataitem.accountno; $scope.postingdate = dataitem.postingdate; $scope.description = dataitem.description; $scope.maturitydate = dataitem.maturitydate; $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 json contain data 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 html:
<html> <head> <!-- css , 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" style="overflow: hidden"> <div id="tabstrip2half1"> <div class="divheightstyle"> <label for="accountnumber" class="labeltextsize">account number:</label> <input id="accountnumber" type="number" class="k-textboxfield" name="accountnumber" ng-model="accountnumber" placeholder="account number" /> </div> <div class="datepickerstyle"> <label for="postingdate" class="labeltextsize">posting date:</label> <input id="postingdate" class="k-datetimepickermaster" name="postingdate" ng-model="postingdate" /> </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 class="datepickerstyle"> <label for="maturitydate" class="labeltextsize">maturity date:</label> <input id="maturitydate" class="k-datetimepickermaster" name="maturitydate" ng-model="maturitydate" /> </div> </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" onclick="savedatamastergrid()">save</button> <button type="button" id="canceldatamastergrid" class="k-button buttonsavecancel" onclick="cancelbuttonmastergrid()">cancel</button> </div> </div> </div> </div> </body> </html> in html have dropdownlist contain data documenttype , dropdownlist populated json data. but, problem in binding. when select grid row dropdownlist display first item. grid datasource contain foreign key value (documenttypeid) , value should match id value documenttype json file, ie $scope.documenttype property datavaluefiled value. how can bind dropdownlist? pls help..
for solve problem use hardcoded 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 definition gridmaster. in gridmaster column property insert:
{ field: "documenttypeid", hidden: true, values: $scope.documenttypeds }, and, in html modified code lines, this:
<select kendo-drop-down-list class="k-dropdownfield" k-options="documenttype" ng-model="documenttypeid" ng-bind="documenttypeid"></select> to this:
<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" /> i suppose there better solution of this, because use hardcoded part of code define $scope.documenttypeds.
Comments
Post a Comment