This is a migrated thread and some comments may be shown as answers.

AngularJS: Create and access column header dropdown

7 Answers 193 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jakob
Top achievements
Rank 1
Jakob asked on 09 Feb 2015, 03:33 PM
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>

7 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 11 Feb 2015, 11:51 AM
Hello,

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
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>
0
Daniel
Telerik team
answered on 13 Feb 2015, 10:38 AM
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: 
$scope.vm = {
    mappingColumn: "2"
};
headerTemplate: '<select kendo-drop-down-list k-options="dropDownTemplateOptions" k-value-primitive="true" k-ng-model="vm.mappingColumn">'
or by using $parent:
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
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?
0
Accepted
Daniel
Telerik team
answered on 17 Feb 2015, 10:22 AM
Hello,

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
answered on 19 Feb 2015, 01:27 PM
Thank you very much for your help!
0
Aravind
Top achievements
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)?

Tags
Grid
Asked by
Jakob
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Jakob
Top achievements
Rank 1
Aravind
Top achievements
Rank 1
Share this question
or