Hi,
I changed the AngularJS Snippet from your demo section so that i can display a dropdown in one column header.
My problem is, that the dropdown has no data. If there was data, how can i get the selected item (without using the change event from that dropdown)
Thanks for your help.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions" />
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.dropDownTemplateOptions = function(){
return {
dataSource: [
{ text: "Black", value: "1" },
{ text: "Orange", value: "2" },
{ text: "Grey", value: "3" }
],
dataTextField: "text",
dataValueField: "value"
};
};
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: false,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "180px",
headerTemplate: '<select kendo-drop-down-list k-options="dropDownTemplateOptions">'
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
})
</script>
</body>
</html>
I changed the AngularJS Snippet from your demo section so that i can display a dropdown in one column header.
My problem is, that the dropdown has no data. If there was data, how can i get the selected item (without using the change event from that dropdown)
Thanks for your help.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions" />
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.dropDownTemplateOptions = function(){
return {
dataSource: [
{ text: "Black", value: "1" },
{ text: "Orange", value: "2" },
{ text: "Grey", value: "3" }
],
dataTextField: "text",
dataValueField: "value"
};
};
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: false,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "180px",
headerTemplate: '<select kendo-drop-down-list k-options="dropDownTemplateOptions">'
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
})
</script>
</body>
</html>
7 Answers, 1 is accepted
0
Hello,
The data will not be bound because the options should be an object and not a function:
As for your other question - you can get the current value with the value method:
Another option would be to bind the value and get it from the scope.
Regards,
Daniel
Telerik
The data will not be bound because the options should be an object and not a function:
$scope.dropDownTemplateOptions = { dataSource: [ { text: "Black", value: "1" }, { text: "Orange", value: "2" }, { text: "Grey", value: "3" } ], dataTextField: "text", dataValueField: "value"};As for your other question - you can get the current value with the value method:
headerTemplate: '<select kendo-drop-down-list id="headerDropDown" k-options="dropDownTemplateOptions">'var dropdownlist = $("#headerDropDown").data("kendoDropDownList");var value = dropdownlist.value();Another option would be to bind the value and get it from the scope.
Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jakob
Top achievements
Rank 1
Rank 1
answered on 11 Feb 2015, 04:08 PM
Hi Daniel.
thanks for your reply. I changed my example so that the dropdown is working now. I decided to use the ng-model option. It works for setting the property, but it is not updated when the selection in the dropdown is changed:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1411/js/jszip.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions" />
Current selected value:
{{
mappingColumn
}}
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.dropDownTemplateOptions = {
dataSource: [
{ text: "Black", value: "1" },
{ text: "Orange", value: "2" },
{ text: "Grey", value: "3" }
],
dataTextField: "text",
dataValueField: "value"
};
$scope.mappingColumn = "2";
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: false,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "180px",
headerTemplate: '<select kendo-drop-down-list k-options="dropDownTemplateOptions" k-value-primitive="true" k-ng-model="mappingColumn">'
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
})
</script>
</body>
</html>
thanks for your reply. I changed my example so that the dropdown is working now. I decided to use the ng-model option. It works for setting the property, but it is not updated when the selection in the dropdown is changed:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1411/js/jszip.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions" />
Current selected value:
{{
mappingColumn
}}
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.dropDownTemplateOptions = {
dataSource: [
{ text: "Black", value: "1" },
{ text: "Orange", value: "2" },
{ text: "Grey", value: "3" }
],
dataTextField: "text",
dataValueField: "value"
};
$scope.mappingColumn = "2";
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: false,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "180px",
headerTemplate: '<select kendo-drop-down-list k-options="dropDownTemplateOptions" k-value-primitive="true" k-ng-model="mappingColumn">'
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
})
</script>
</body>
</html>
0
Hi again,
It seems that the headers are compiled in a child scope. You can bind the value in this case by wrapping the field in an object:
or by using $parent:
Regards,
Daniel
Telerik
It seems that the headers are compiled in a child scope. You can bind the value in this case by wrapping the field in an object:
$scope.vm = { mappingColumn: "2"};headerTemplate: '<select kendo-drop-down-list k-options="dropDownTemplateOptions" k-value-primitive="true" k-ng-model="vm.mappingColumn">'headerTemplate: '<select kendo-drop-down-list k-options="dropDownTemplateOptions" k-value-primitive="true" k-ng-model="$parent.mappingColumn">'Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jakob
Top achievements
Rank 1
Rank 1
answered on 13 Feb 2015, 04:35 PM
Thanks, $parent.mappingColumn works fine.
My next problem is - how can i update the Dropdowns datasource from the scope?
My next problem is - how can i update the Dropdowns datasource from the scope?
0
Accepted
Hello,
If you wish to set new data then this can be achieved by using any of the following approaches:
If you wish to change the current data values then please check this documentation topic.
Regards,
Daniel
Telerik
If you wish to set new data then this can be achieved by using any of the following approaches:
- Use the k-data-source attribute to set the dataSource and change the specified field:
'<select kendo-drop-down-list k-options="dropDownTemplateOptions" k-data-source="dropDownDataSource" k-value-primitive="true" k-ng-model="$parent.mappingColumn">'$scope.dropDownDataSource = NewDataSource; - Use the k-rebind attribute for the options and change the options dataSource field.
- Use a dataSource instance for the options and the data method.
If you wish to change the current data values then please check this documentation topic.
Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jakob
Top achievements
Rank 1
Rank 1
answered on 19 Feb 2015, 01:27 PM
Thank you very much for your help!
0
Aravind
Top achievements
Rank 1
Rank 1
answered on 04 Nov 2015, 01:33 PM
Hi Jakob,
can you please tell me whether we can add a drop down menu in a column header using only jQuery?
Also, can you please share the fiddle in which you've done it(the one you've done already)?