Grouping data

5 posts, 0 answers
  1. Steve
    Steve avatar
    35 posts
    Member since:
    Apr 2015

    Posted 07 Jul 2015 Link to this post

    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>

  2. Steve
    Steve avatar
    35 posts
    Member since:
    Apr 2015

    Posted 08 Jul 2015 in reply to Steve Link to this post

    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>

  3. Kendo UI is VS 2017 Ready
  4. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 09 Jul 2015 Link to this post

    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!
     
  5. Steve
    Steve avatar
    35 posts
    Member since:
    Apr 2015

    Posted 09 Jul 2015 in reply to Plamen Lazarov Link to this post

    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"
    });
    }

     

     

  6. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 13 Jul 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready