Вопрос

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

Это было полезно?

Решение

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.

Другие советы

<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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top