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

Grouping data

4 Answers 115 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 07 Jul 2015, 10:19 PM

Hi there,

 

I took the code from Kendo Dojo library and modified it to the following and I was wondering if it can be grouped by country.  I have a similar sample and it doesn't work.  TIA

Steve

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="customers" style="width: 400px" />
<script>
    $(document).ready(function() {
      var x = [];
      x.push({ContactName: "A", CustomerID:"1", Country: "W"},
            {ContactName: "B", CustomerID:"18", Country: "V"},
            {ContactName: "C", CustomerID:"12", Country: "W"},
            {ContactName: "D", CustomerID:"13", Country: "W"},
            {ContactName: "AA", CustomerID:"15", Country: "T"},
            {ContactName: "AB", CustomerID:"21", Country: "T"},
            {ContactName: "AC", CustomerID:"41", Country: "V"},
            {ContactName: "AE", CustomerID:"31", Country: "V"},
            {ContactName: "AF", CustomerID:"21", Country: "T"},
            {ContactName: "AX", CustomerID:"11", Country: "T"},
            {ContactName: "AQ", CustomerID:"19", Country: "T"},
            {ContactName: "AM", CustomerID:"15", Country: "W"})
        $("#customers").kendoDropDownList({
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            height: 400,
            dataSource: x,
            group: "Country" 
            
        });
    });
</script>
</body>
</html>

4 Answers, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 1
answered on 08 Jul 2015, 09:58 PM

sorry the previous code works, but this does not and it's part of the grid column

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="customers" style="width: 400px" />
<script>
    $(document).ready(function() {
      var x = [];
      x.push({ContactName: "A", CustomerID:"1", Country: "W"},
            {ContactName: "B", CustomerID:"18", Country: "V"},
            {ContactName: "C", CustomerID:"12", Country: "W"},
            {ContactName: "D", CustomerID:"13", Country: "W"},
            {ContactName: "AA", CustomerID:"15", Country: "T"},
            {ContactName: "AB", CustomerID:"21", Country: "T"},
            {ContactName: "AC", CustomerID:"41", Country: "V"},
            {ContactName: "AE", CustomerID:"31", Country: "V"},
            {ContactName: "AF", CustomerID:"21", Country: "T"},
            {ContactName: "AX", CustomerID:"11", Country: "T"},
            {ContactName: "AQ", CustomerID:"19", Country: "T"},
            {ContactName: "AM", CustomerID:"15", Country: "W"})

     $('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            height: 400,
            dataSource: x,
            group: "Country" 
            
        });
    });
</script>
</body>
</html>

0
Plamen Lazarov
Telerik team
answered on 09 Jul 2015, 01:37 PM

Hello Steve,

 

In order to achieve the described functionality you could use the grouping configuration of the data source. For your convenience I updated the provided code snippet -  http://dojo.telerik.com/asitO

 

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Steve
Top achievements
Rank 1
answered on 09 Jul 2015, 07:21 PM

Hi Plamen,

 

Thanks for the solution, but when I added to my project, the items are now showing up as undefined..  Here is my actual trimmed down code.

var ds = []; // ds is being populated before entering the code below.

$("#grid").kendoGrid({
        dataSource: {
            data: ds,
            schema: {
                model: {
                    fields: {
                       ...
                        jobType: { type: "string", editable: true }
                    }
                }
            },
            pageSize: 10
        },
        editable: true,    
        navigatable: true,
        selectable: "inline",
        pageable: {
            input: true,
            numeric: false,
            refresh: true,                    
            buttonCount: 5,
            pageSize: 10,
            pageSizes: [10, 20, 30, 50]
        },
        columns: [
{ other fields...},
            { field: "Col1", title: "Type", width: "130px" },
            { field: "Col2", title: "Description", width: "300px" },
            {
                field: "jobType",
                title: "Create Option",
                width: "175px",
                template: "#=jobType#",                
                editor: TypeDDL
            }
        ]
    }).data("kendoGrid");

function TypeDDL(container, options) {
  var DDLData = [];
  
for (var i = 0; i < DDLArray.length; i++) {

for (var k = 0; k < DDLArray[i].Type1.length; k++) {
DDLData.push({ Id: DDLArray[i].Type1[k].Id, Description: DDLArray[i].Type1[k].Description, Code: "TYPE-A" });
}

for (var j = 0; j < DDLArray[i].Type2.length; j++) {
DDLData.push({ Id: DDLArray[i].Type2[j].Id, Description: DDLArray[i].Type2[j].Description, Code: "TYPE-B" });
}
break;
}


$('<input id="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
optionLabel: ' ',
dataTextField: "Description",
dataValueField: "Id",
select: onSelect,
dataSource: {
data: ticketClassData, 
group: { field: "Code" }
},
group: "Code"
});
}

 

 

0
Plamen Lazarov
Telerik team
answered on 13 Jul 2015, 03:14 PM

Hello Steve,

I see that in the provided code snippet ticketClassData is used as data source instead of DDLData. If this is intended make sure that it contains object/s with "Description" field and "Id" field, since these are specified for dataTextField and dataValueField. 

However in case you would like to use DDLData as dataSource replace ticketClassData.  Please keep in mind without having a simple project where the issue could be reproduced we are not able to say what is the exact reason for the observed behavior.  

Regards,
Plamen Lazarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
DropDownList
Asked by
Steve
Top achievements
Rank 1
Answers by
Steve
Top achievements
Rank 1
Plamen Lazarov
Telerik team
Share this question
or