Wijmo 5 [Flex Grid]

Childitems object.property method

by Manish Gupta

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.188/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="app" ng-controller="appCtrl">
        <wj-flex-grid allow-merging="All" control="flex" items-source="data" child-items-path="topping" initialized=initFlex(s,e)>
            <wj-flex-grid-column header="Id" binding="id"></wj-flex-grid-column>
            <wj-flex-grid-column header="Name" binding="id"></wj-flex-grid-column>
          
        </wj-flex-grid>
        
    </div>

JavaScript

var data = [
	{
	    id: "0001",
	    type: "donut",
	    name: "Cake",
	    ppu: 0.55,
	    batters:
			{
			    id: "2001",
			    batter:
					[
						{ id: "1001", type: "Regular" },
						{ id: "1002", type: "Chocolate" },
						{ id: "1003", type: "Blueberry" },
						{ id: "1004", type: "Devil's Food" }
					]
			},
	    topping:
			[
				{ id: "5001", type: "None",price:500 },
				{ id: "5002", type: "Glazed", price:1000 },
				{ id: "5005", type: "Sugar", price:588 },
				{ id: "5007", type: "Powdered Sugar", price:258},
				{ id: "5006", type: "Chocolate with Sprinkles" },
				{ id: "5003", type: "Chocolate" },
				{ id: "5004", type: "Maple" }
			]
	},
	{
	    id: "0002",
	    type: "donut",
	    name: "Raised",
	    ppu: 0.55,
	    batters:
			{
			    id: "2002",
			    batter:
					[
						{ id: "1001", type: "Regular" }
					]
			},
	    topping:
			[
				{ id: "5001", type: "None" },
				{ id: "5002", type: "Glazed" },
				{ id: "5005", type: "Sugar" },
				{ id: "5003", type: "Chocolate" },
				{ id: "5004", type: "Maple" }
			]
	},
	{
	    id: "0003",
	    type: "donut",
	    name: "Old Fashioned",
	    ppu: 0.55,
	    batters:
			{
			    id: "2003",
			    batter:
					[
						{ id: "1001", type: "Regular" },
						{ id: "1002", type: "Chocolate" }
					]
			},
	    topping:
			[
				{ id: "5001", type: "None" },
				{ id: "5002", type: "Glazed" },
				{ id: "5003", type: "Chocolate" },
				{ id: "5004", type: "Maple" }
			]
	}
        ];
        var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            $scope.data = new wijmo.collections.CollectionView(data);
            $scope.initFlex=function(s,e){
                s.rows[0].allowMerging=true;
            }
           
        });