jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by Monish 9 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

issue with jqxTreeGrid Posts

October 8, 2015 at 7:36 am issue with jqxTreeGrid #76550

Monish

Participant

The following is the code. The data is not displayed properly as shown with your examples in jqxTreeGrid. Don’t know where I made mistake. Kindly help..

<html lang="en">
<head>
<script type="text/javascript">
        $(document).ready(function () {          
                var employees = [
		{"skuId":"6029","Id":10,"pName":" GENERAL PRODUCTS","parentId":null,"mon1":73782,"mon2":68667,"mon3":64730,"mon4":53384.2,"mon5":52143,"mon6":57640}, {"skuId":"6029","Id":11,"pCode":"ENTHT001E3","pName":"ENAMEL THINNER - 10 X 1 LTR","parentId":10,"mon1":240,"mon2":400,"mon3":240,"mon4":130,"mon5":407,"mon6":180}, {"skuId":"6029","Id":11,"pCode":"ENTHT001C4","pName":"ENAMEL THINNER - 20 X 500 ML","parentId":10,"mon1":0,"mon2":160,"mon3":70,"mon4":20,"mon5":60,"mon6":10}, {"skuId":"6029","Id":11,"pCode":"ENTHT001G1","pName":"ENAMEL THINNER - 4 X 3 LTR","parentId":10,"mon1":48,"mon2":36,"mon3":48,"mon4":0,"mon5":12,"mon6":0}, {"skuId":"6029","Id":11,"pCode":"ENTHT001J2","pName":"ENAMEL THINNER - 4 X 5 LTR","parentId":10,"mon1":80,"mon2":480,"mon3":560,"mon4":240,"mon5":320,"mon6":120}, {"skuId":"6029","Id":11,"pCode":"ENAFA501P1","pName":"KPF PUTTY - 1 X 35 KG","parentId":10,"mon1":0,"mon2":0,"mon3":0,"mon4":0,"mon5":385,"mon6":0}, {"skuId":"6029","Id":11,"pCode":"ENAFA501C2","pName":"KPF PUTTY - 12 X 500 GM","parentId":10,"mon1":12,"mon2":138,"mon3":126,"mon4":24,"mon5":0,"mon6":0}, 
		{"skuId":"6029","Id":30,"pName":" WOOD PRODUCTS","parentId":null,"mon1":3248,"mon2":2941,"mon3":2610,"mon4":1555,"mon5":1961,"mon6":1686}, {"skuId":"6029","Id":31,"pCode":"MEWFU501I3","pName":"MELAMINE SEALER - 1 X 4 L","parentId":30,"mon1":0,"mon2":36,"mon3":0,"mon4":0,"mon5":0,"mon6":20}, {"skuId":"6029","Id":31,"pCode":"MEWFU501E1","pName":"MELAMINE SEALER - 6 X 1 L","parentId":30,"mon1":0,"mon2":0,"mon3":6,"mon4":0,"mon5":0,"mon6":0}, {"skuId":"6029","Id":31,"pCode":"PUWFT501I3","pName":"PU (DP) GLOSSY EXT - 1 X 4 L","parentId":30,"mon1":4,"mon2":0,"mon3":0,"mon4":0,"mon5":0,"mon6":0}, {"skuId":"6029","Id":31,"pCode":"PUWFT501O1","pName":"PU (DP) GLOSSY EXT - 20 L","parentId":30,"mon1":0,"mon2":20,"mon3":0,"mon4":0,"mon5":0,"mon6":0}, {"skuId":"6029","Id":31,"pCode":"PUWFT512E1","pName":"PU (SP)GLOSSY OAKYELLOW   - 6 X 1 L","parentId":30,"mon1":0,"mon2":30,"mon3":60,"mon4":0,"mon5":6,"mon6":0}, {"skuId":"6029","Id":31,"pCode":"PUWFT512C1","pName":"PU (SP)GLOSSY OAKYELLOW   - 6 X 500 ML","parentId":30,"mon1":0,"mon2":15,"mon3":0,"mon4":0,"mon5":0,"mon6":12}, {"skuId":"6029","Id":31,"pCode":"PUWFT512B1","pName":"PU (SP)GLOSSY OAKYELLOW - 10 X 200 ML","parentId":30,"mon1":0,"mon2":10,"mon3":0,"mon4":0,"mon5":0,"mon6":4}, {"skuId":"6029","Id":35,"pName":" DECORATIVE PRODUCTS","parentId":null,"mon1":166,"mon2":1814,"mon3":1234,"mon4":694,"mon5":688,"mon6":1298.8}, {"skuId":"6029","Id":36,"pCode":"WBEXTD540E1","pName":"EXT.EMUL.MEHENDI - 6 X 1 L","parentId":35,"mon1":0,"mon2":0,"mon3":0,"mon4":0,"mon5":0,"mon6":12}, {"skuId":"6029","Id":36,"pCode":"WBEXT540E1","pName":"EXT.EMUL.MEHENDI - 6 X 1 L","parentId":35,"mon1":0,"mon2":0,"mon3":0,"mon4":18,"mon5":0,"mon6":0}, {"skuId":"6029","Id":36,"pCode":"WBEXT542E1","pName":"EXT.EMUL.MILAN RED - 6 X 1 L","parentId":35,"mon1":6,"mon2":0,"mon3":0,"mon4":0,"mon5":0,"mon6":0}, {"skuId":"6029","Id":36,"pCode":"WBEXT543E1","pName":"EXT.EMUL.MING RED - 6 X 1 L","parentId":35,"mon1":0,"mon2":0,"mon3":0,"mon4":18,"mon5":0,"mon6":0}, {"skuId":"6029","Id":36,"pCode":"WBEXT550E1","pName":"EXT.EMUL.NUT BROWN - 6 X 1 L","parentId":35,"mon1":0,"mon2":0,"mon3":0,"mon4":0,"mon5":0,"mon6":6}, {"skuId":"6029","Id":36,"pCode":"WBEXTD554E1","pName":"EXT.EMUL.REVEL - 6 X 1 L","parentId":35,"mon1":0,"mon2":0,"mon3":12,"mon4":0,"mon5":0,"mon6":6}, {"skuId":"6029","Id":36,"pCode":"WBEXTD559E1","pName":"EXT.EMUL.SPL. SIGNAL RED - 6 X 1 L","parentId":35,"mon1":0,"mon2":24,"mon3":18,"mon4":12,"mon5":0,"mon6":0}, {"skuId":"6029","Id":36,"pCode":"WBEXT559E1","pName":"EXT.EMUL.SPL.SIGNAL RED - 6 X 1 L","parentId":35,"mon1":30,"mon2":0,"mon3":0,"mon4":0,"mon5":0,"mon6":0}, {"skuId":"6029","Id":50,"pName":" AUTO FINISHES","parentId":null,"mon1":0,"mon2":4,"mon3":0,"mon4":0,"mon5":0,"mon6":0}, 
		{"skuId":"6029","Id":51,"pCode":"PUAFT501B1","pName":"AF DP CLEAR - 10 X 200 ML","parentId":50,"mon1":0,"mon2":4,"mon3":0,"mon4":0,"mon5":0,"mon6":0}, {"skuId":"6029","Id":70,"pName":" SHEENWORLD","parentId":null,"mon1":92,"mon2":717,"mon3":356,"mon4":0,"mon5":0,"mon6":193}, {"skuId":"6029","Id":71,"pCode":"WBEXT509L1","pName":"ALL SN AEPE 20 - 9 L","parentId":70,"mon1":0,"mon2":0,"mon3":0,"mon4":0,"mon5":0,"mon6":27}, {"skuId":"6029","Id":71,"pCode":"WBEXTD502O1","pName":"ALL SN PRE EXT-AEPE 02 BASE - 1 X 20 L","parentId":70,"mon1":0,"mon2":80,"mon3":0,"mon4":0,"mon5":0,"mon6":0}, {"skuId":"6029","Id":71,"pCode":"WBEXTD577O1","pName":"SCP FOUR EXT- AEE 02 BASE - 1 X 20 L","parentId":70,"mon1":0,"mon2":40,"mon3":0,"mon4":0,"mon5":0,"mon6":0}, {"skuId":"6029","Id":71,"pCode":"WBEXTD577E1","pName":"SCP FOUR EXT- AEE 02 BASE - 6 X 1 L","parentId":70,"mon1":0,"mon2":12,"mon3":0,"mon4":0,"mon5":0,"mon6":18}, {"skuId":"6029","Id":71,"pCode":"WBEXTD578M1","pName":"SCP FOUR EXT- AEE 06 BASE - 1 X 10 L","parentId":70,"mon1":0,"mon2":20,"mon3":0,"mon4":0,"mon5":0,"mon6":0}
                ];
		            // prepare the data
		            var source =
		            {
		                dataType: "json",
		                datafields : [ {name : 'pName',type:'string'},{ name : 'mon1', type : 'string' }, { name : 'mon2', type : 'string' }, { name : 'mon3', type : 'string' }, 
						               { name : 'mon4', type : 'string' }, { name : 'mon5', type : 'string' }, { name : 'mon6', type : 'string' }, { name : 'increment', type : 'string' },
						               { name : 'reqLtr', type : 'string' }, { name : 'cases', type : 'string' }, { name : 'reqVal', type : 'string' }, { name : 'nonMovQty', type : 'string' },
						               { name : 'nonMovVal', type : 'string' }, { name : 'nonMovDay', type : 'string' },{name : 'Id',type:'number'},{name : 'parentId',type:'number'}
						             ],
						hierarchy:
						           {
						              keyDataField: { name: 'Id' },
						              parentDataField: { name: 'ParentId' }
						           },
					    id: 'Id',
		                localData: employees
		            };
		            var dataAdapter = new $.jqx.dataAdapter(source);
		            // create Tree Grid
		            $("#treeGrid").jqxTreeGrid(
		            {
		                width: 850,
		                source: dataAdapter,
		                sortable: true,
		                 columns: [
				         {
				        	 text : 'Product Name',
				        	 // : '3%',
				        	 align : "center",
				        	 datafield: 'pName',
				        	 cellsalign: 'left',
				         }, {
				        	 text: 'Increment %',
				        	 //width: '3%',
				        	 datafield: 'increment',
				        	 align: "center",
				        	 cellsalign: 'right'  ,
				         }, {
				        	 text: 'Required(Ltr)',
				        	 //width: '7%',
				        	 datafield: 'reqLtr',
				        	 align: "center",
				        	 cellsalign: 'right'  ,
				         }, {
				        	 text: 'Cases',
				        	 //width: '3%',
				        	 datafield: 'cases',
				        	 align: "center",
				        	 cellsalign: 'right'   ,
				         }, {
				        	 text: 'Required(Value)',
				        	 //width: '3%',
				        	 datafield: 'reqVal',
				        	 align: "center",
				        	 cellsalign: 'right' 
				         }, {
				        	 text: 'Non Moving Qty',
				        	 //width: '3%',
				        	 datafield: 'nonMovQty',
				        	 align: "center",
				        	 cellsalign: 'right' 
				         }, {
				        	 text: 'Non Moving Value',
				        	 //width: '3%',
				        	 datafield: 'nonMovVal',
				        	 align: "center",
				        	 cellsalign: 'right'
				        
				         }, {
				        	 text: 'Non Moving Days',
				        	 //width: '3%',
				        	 datafield: 'nonMovDay',
				        	 align: "center",
				        	 cellsalign: 'right'   ,
				         } , {
				        	 text: 'skuId',
				 			 hidden:true
				         } , {
				        	 text: 'pcode',
					 		 hidden:true
					         }]
            });
    </script>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
</body>
</html>

Note: The data in employees are the data i get from database which I convert to json values and move it to script

October 8, 2015 at 8:16 am issue with jqxTreeGrid #76552

ivailo

Participant

Hi immonish,

You have to attach right datafields in your relation between columns and data source.
Here is simplified version of your TreeGrid.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

October 8, 2015 at 11:26 am issue with jqxTreeGrid #76564

Monish

Participant

Hi Ivailo,

Thanks for the support. Its working fine now

Regards,
Monish

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.