jQuery Grid Plugin - jqGrid - Topic: JSON and XML Treegrid complete sample (SOLVED) http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved Simple:Press Version 5.7.5.3 matthieu on JSON and XML Treegrid complete sample (SOLVED) http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p26462 TreeGrid http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p26462 Thank you that is something I was looking for!

Btw do you have any performance results using different format with local data?

I try to load about hundreds entries and the browser takes times before showing up the page. Using XML is it faster? Does it use local data streaming?

]]> Tue, 24 Apr 2012 13:01:19 +0300 Brian W on JSON and XML Treegrid complete sample (SOLVED) http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9398 TreeGrid http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9398 Hi Claudio,

    You r right, I missed the "jquery.searchFilter.css" in my dependense, and that will cause the IE can not display the tree.

    Thx for your help.Kiss

    Brian

]]> Sun, 06 Sep 2009 11:06:36 +0300 c.barca on JSON and XML Treegrid complete sample (SOLVED) http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9370 TreeGrid http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9370 Hello Brian,

I read your request, I can't reply you until Monday 7, because my source are in office….

But I'm sure my tree run also on IE8. I will retry it next week.

Good week-end,

Claudio

]]> Fri, 04 Sep 2009 13:04:17 +0300 Brian W on JSON and XML Treegrid complete sample (SOLVED) http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9362 TreeGrid http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9362 Thx a lot , Claudio

From the latest released, the includer is in the http://github.com/tonytomov/jq.....ree/master, the includer is the “jquery.jqGrid.js” now.

Any way, my tree is working now. The problem is the “parent” is alway 0 in your test data.

But now I get the another problem. The tree can not be shown up in IE (8). and it fine in firefox.

Code is here

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
<html>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
        <title>Insert title here</title>
        <link rel=”stylesheet” type=”text/css” media=”screen” href=”themes/redmond/jquery-ui-1.7.1.custom.css” />
        <link rel=”stylesheet” type=”text/css” media=”screen” href=”themes/ui.jqgrid.css” />
        <script src=”js/jquery-1.3.2.min.js” type=”text/javascript”>
        </script>
        <script src=”js/i18n/grid.locale-en.js” type=”text/javascript”>
        </script>
        <script src=”js/jquery.jqGrid.min.js” type=”text/javascript”>
        </script>
        <script type=”text/javascript”>
            $(function(){
                $(”#treegrid”).jqGrid({
                    treeGrid: true,
                    treeGridModel: 'adjacency',
                    ExpandColumn: 'id',
                    ExpandColClick: true,
                    url: 'testData.xml',
                    datatype: 'xml',
                    mtype: 'GET',
                    colNames: ["id", "menu", "aaa"],
                    colModel: [{ name: 'id', index: 'id', width: 120,  hidden: false, key: true }, { name: 'menu', index: 'menu', width: 120, hidden: false, sortable: false }, { name: 'aaa', width: 120, hidden: false }],
     height: “auto”,
     caption: 'Tree Example',
    })
            });
        </script>
    </head>
    <body>
        Hello World!!
        <table id=”treegrid” class=”scroll” cellpadding=”0″ cellspacing=”0″>
        </table>
    </body>
</html>

]]> Fri, 04 Sep 2009 11:04:07 +0300 c.barca on JSON and XML Treegrid complete sample (SOLVED) http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9307 TreeGrid http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9307 Hello Brian,

I think also a missing include...

This is my html code.

...
<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../src/css/jquery.searchFilter.css" />

<script type="text/javascript" src="../js/jquery.js">
</script>
<script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js">
</script>
<script type="text/javascript" src="../src/grid.loader.js">
</script>
<!-- jQuery UI theme switcher -->
<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/">
</script>
<script type="text/javascript" src="navigatorJson.js">
</script>
...

where navigatorJson.js is js code on Sample1.

Regards,
Claudio

]]> Fri, 04 Sep 2009 03:49:37 +0300 Brian W on JSON and XML Treegrid complete sample (SOLVED) http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9275 TreeGrid http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9275 Nice work, but I my tree is still not working. I think the problem is caused by the dependens included.. Code is here..

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
        <script src="js/jquery-1.3.2.min.js" type="text/javascript">
        </script>
        <script src="js/i18n/grid.locale-en.js" type="text/javascript">
        </script>
        <script src="js/jquery.jqGrid.min.js" type="text/javascript">
        </script>
   <script src="js/src/grid.treegrid.js" type="text/javascript">
        </script>
   <script src="js/src/grid.base.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            $(function(){
                $(document).ready(function(){
                    jQuery("#treegrid").jqGrid({
                        treeGrid: true,
                        treeGridModel: 'adjacency',
                        ExpandColumn: 'menu',
                        ExpandColClick: true,
                        url: 'testData.xml',
                        datatype: 'xml',
                        mtype: 'GET',
                        colNames: ["id", "menu", "aaa"],
                        colModel: [{ name: 'id', index: 'id', width: 1,  hidden: true, key: true }, { name: 'menu', index: 'menu', width: 120, hidden: false, sortable: false }, { name: 'aaa', width: 1, hidden: true }],
      height: 600, width: 200,  pager: false, 
      imgpath: 'themes/redmond/images',
      caption: '',
     })
                });
            });
        </script>
    </head>
    <body>
        Hello World!!
        <table id="treegrid" class="scroll" cellpadding="0" cellspacing="0">
        </table>
        <div id="ptreegrid" class="scroll">
        </div>
    </body>

]]> Thu, 03 Sep 2009 11:20:59 +0300 c.barca on JSON and XML Treegrid complete sample (SOLVED) http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9260 TreeGrid http://www.trirand.com/blog/?page_id=393/treegrid/json-and-xml-treegrid-complete-sample-solved#p9260 Hello,

after many search to load a treegrid with JSON and XML data, I would be share this code.

All two samples working fine with local data. Wink

Sample 1 : Treegrid with JSON data 

$(document).ready(function(){
    jQuery("#treegrid2").jqGrid({
        treeGrid: true,
        treeGridModel: 'adjacency',
        ExpandColumn: 'menu',
        ExpandColClick: true,
        url: 'tree.json',
        datatype: 'json',
        colNames: ["menu", "url"],
        colModel: [{
            name: 'menu',
            index: 'menu',
            width: 220,
            hidden: false,
            sortable: false
        }, {
            name: 'url',
            width: 1,
            hidden: true
        }],
        height: 600,
        width: 200,
        pager: false,
        viewrecords: true,
        imgpath: '../js/themes/basic/images',
        caption: '',
    })
});

Sample 1: JSON data (tree.json) 

{
        total:1,
        page:1,
        records:6,
        rows:[
            {
			id: 1,
                cell:[
                    'Tabelle',
                    '1a2',
                    0,
                    null,
                    false,
                    false
                ]
            },
            {
			id: 2,
                cell:[
                    'Gestione Strutture',
                    '2a2',
                    0,
                    1,
                    true,
                    false
                ]
            },
            {
			id: 3,
                cell:[
                    'Gestione Centri',
                    '3a2',
                    0,
                    1,
                    true,
                    false
                ]
            },
            {
			id: 4,
                cell:[
                    'Cedolino online',
                    '1b2',
                    0,
                    null,
                    false,
                    false
                ]
            },
            {
			id: 5,
                cell:[
                    'Visibilita',
                    '2b2',
                    0,
                    4,
                    true,
                    false
                ]
            },
            {
			id: 6,
                cell:[
                    'Cambio mese',
                    '3b2',
                    0,
                    4,
                    true,
                    false
                ]
            }
        ]
}

Sample 2: Treegrid with XML data 

$(document).ready(function(){
    jQuery("#treegrid2").jqGrid({
        treeGrid: true,
        treeGridModel: 'adjacency',
        ExpandColumn: 'menu',
		ExpandColClick : true,
        url: 'tree2.xml',
        datatype: 'xml',
        mtype: 'GET',
        colNames: ["id", "menu", "aaa"],
        colModel: [{
            name: 'id',
            index: 'id',
            width: 1,
            hidden: true,
            key: true
        }, {
            name: 'menu',
            index: 'menu',
            width: 120,
			hidden: false,
            sortable: false
        }, {
            name: 'aaa',
            width: 1,
            hidden: true
        }],
        height: 600,
        width: 200,
        pager: false,
        imgpath: '../js/themes/basic/images',
        caption: '',
    })
});

Sample 2: XML data (tree2.xml)
<?xml version='1.0' encoding='utf-8'?> <rows> <page>1</page> <total>1</total> <records>6</records> <row> <cell>1</cell> # row id <cell>Tabelle</cell> # expanding column <cell>1a2</cell> # column 2 <cell>0</cell> # node level 0 <cell>NULL</cell> # parent row id <cell>false</cell> # is this a leaf? <cell>false</cell> # expand? </row> <row> <cell>2</cell> # row id <cell>Gestione Strutture</cell> # expanding col <cell>2a2</cell> # column 2 <cell>0</cell> # node level 1 <cell>1</cell> # parent row id <cell>true</cell> # is this a leaf? <cell>false</cell> # expand? </row> <row> <cell>3</cell> # row id <cell>Gestione centri</cell> # expanding col <cell>3a2</cell> # column 2 <cell>0</cell> # node level 1 <cell>1</cell> # parent row id <cell>true</cell> # is this a leaf? <cell>false</cell> # expand? </row> <row> <cell>4</cell> # row id <cell>Cedolino online</cell> # expanding column <cell>1b2</cell> # column 2 <cell>0</cell> # node level 0 <cell>NULL</cell> # parent row id <cell>false</cell> # is this a leaf? <cell>false</cell> # expand? </row> <row> <cell>5</cell> # row id <cell>Visibilita</cell> # expanding col <cell>2b2</cell> # column 2 <cell>0</cell> # node level 1 <cell>4</cell> # parent row id <cell>true</cell> # is this a leaf? <cell>false</cell> # expand? </row> <row> <cell>6</cell> # row id <cell>Cambio mese</cell> # expanding col <cell>3b2</cell> # column 2 <cell>0</cell> # node level 1 <cell>4</cell> # parent row id <cell>true</cell> # is this a leaf? <cell>false</cell> # expand? </row> </rows>

Enjoy with Treegrid !

Tony, thanks for your work.

Regards

Claudio

]]> Thu, 03 Sep 2009 07:42:48 +0300