is there any way to create this type of grid by using kendo grid?

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

Solution

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>