0

I'm new to kendo and I would like to know whether is there a way to program my kendo grid like the image below.

I had saw some sample online where they use kendo-grid grouping but it doesn't generate the layout I needed

Output

Cylex
  • 17
  • 5
  • You could use the a template for your last column, but difficulty will depend on the content of the groups: – yhabib Sep 21 '16 at 08:36

1 Answers1

0

Yes, it is possible by using a column template with a script expression that will transform the array of child items into an HTML list:

http://dojo.telerik.com/AqezO

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

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
  </head>
  <body>

    <div id="grid"></div>

    <script>
      var sampleData = [
        { id: 1, name: "name", items: ["foo", "bar"] }
      ];

      $(function () {
        var dataSource = new kendo.data.DataSource({
          data: sampleData,
          schema: {
            model: {
              id: "id",
              fields: {
                id: { type: "number" },
                name: { },
                items: { }
              }
            }
          }
        });

        $("#grid").kendoGrid({
          dataSource: dataSource,
          columns: [
            { field: "id" },
            { field: "name" },
            { field: "items", template: "#= showItems(items) #" }
          ]
        });

      });

      function showItems(arr) {
        return "<ul><li>" + arr.join("</li><li>") + "</li></ul>";
      }

    </script>
  </body>
</html>
dimodi
  • 3,969
  • 1
  • 13
  • 23
  • @dimodi the link provided by you : http://dojo.telerik.com/AqezO is not working mean there is no data inside , is it mandatory to have account to see the link? – Kalpesh Dusane Sep 21 '16 at 13:00
  • @KalpeshDusane It should be a temporary problem with the Dojo playground. I have included the whole page in my updated reply. – dimodi Sep 21 '16 at 13:02