CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-treeview
Shailendr singh
Shailendr singh

Reputation: 686

Kendo tree view populate using json

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

Upvotes: 0

Views: 2654

Answers (2)

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

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.

Upvotes: 3

Rudresha Parameshappa
Rudresha Parameshappa

Reputation: 3926

<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>

Upvotes: 0

Related Questions