Question

I am new in kendo ui. and i want to populate treeview. My Json format is like that:-----

         {
        "GetMenu": [
          {
            "OutletCode": "BOL",
            "MenuGroup": [
              {
                "ParentId": 1,
                "ItemName": "BEER",
                "Items": [
                  {
                    "ItemId": 239,
                    "ParentId": 1,
                    "ItemName": "HEINEKEN PINT BEER",
                    "Price": "35.000"
                  },
                  {
                    "ItemId": 241,
                    "ParentId": 1,
                    "ItemName": "HEINEKEN BOTLLE",
                    "Price": "35.000"
                  }
                ]
              },
              {
                "ParentId": 2,
                "ItemName": "BREEZERS",
                "Items": [
                  {
                    "ItemId": 110,
                    "ParentId": 2,
                    "ItemName": "BACARDI BREEZER",
                    "Price": "35.000"
                  }
                ]
              }
            ]
          }
        ]
      }

In treeView I want Output some thing like that:---

enter image description here

I want final treeview like that only.

Note:--> for saving space i escape some value from json as like:

 R BOTLLE
 AMSTEL LIGHT BOTTLE
 FOSTER BOTLLE
 KINGFISHER BEER BOTTLE
 HEINEKEN CAN BEER

I want answer in javascript or jquery only.

may be I can override in original kendoui.

if this type of question asked before then let me know the link.... thanks in advance

Was it helpful?

Solution

Please try with the below code snippet.

<!DOCTYPE html>
<html>
<head> 
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>

<script>
// Your Json Data
var jsondata = {
        "GetMenu": [
          {       
            "OutletCode": "BOL",
            "MenuGroup": [

              {
                "ParentId": 1,
                "ItemName": "BEER",
                "Items": [
                  {
                    "ItemId": 239,
                    "ParentId": 1,
                    "ItemName": "HEINEKEN PINT BEER",
                    "Price": "35.000"
                  },
                  {
                    "ItemId": 241,
                    "ParentId": 1,
                    "ItemName": "HEINEKEN BOTLLE",
                    "Price": "35.000"
                  }
                ]
              },
              {
                "ParentId": 2,
                "ItemName": "BREEZERS",
                "Items": [
                  {
                    "ItemId": 110,
                    "ParentId": 2,
                    "ItemName": "BACARDI BREEZER",
                    "Price": "35.000"
                  }
                ]
              }
            ],
         }]
      };


var testArray = new Array();
var testObject = new Object(); 
testObject.ItemName = jsondata.GetMenu[0].OutletCode;
testObject.Items =  jsondata.GetMenu[0].MenuGroup;
testArray.push(testObject);



$( document ).ready(function() {  

var inlineDefault = new kendo.data.HierarchicalDataSource({
                    data: testArray,
                    schema: {
                        model: {
                                children: "Items"
                        }
                    }
                });

                $("#treeview-left").kendoTreeView({
                    dataSource: inlineDefault ,
            dataTextField: "ItemName",

                });
}); 

</script>

</head>
<body>
<div>
  <div id="treeview-left"></div>
</div>
</body>
</html>

http://jsfiddle.net/ivyansh9897/QgV53/1/ Let me know if any concern.

OTHER TIPS

<div id="treeview"></div>
<script>
            var dataSource = new kendo.data.HierarchicalDataSource({
                data: [
                  { text: "BOL",expanded:true, items: [
                          { text: "Beer",expanded:true,items:[{
                              text:"HEINEKEN CAN BEER"},
                              {text:" KINGFISHER BEER BOTTLE"}] 
                          },
                    { text: "Breezers",expanded:true,items:[{
                              text:"HEINEKEN CAN Breezer"},
                              {text:" KINGFISHER Breezer BOTTLE"}] 
                          },
                      ]
                    },]
            });

            $("#treeview").kendoTreeView({
                dataSource: dataSource 
            });


        </script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top