Forum
After lot of hard work I have developed a new Tree Grid component. The component is not finished, but I want to know what you think about this.
Here is breief what I have do:
(The link of the demo is at end )
To enable tree grid in the options we should:
treeGrid : true (default is false)
When enabling the tree grid we internally disable (currently) some features
1. subGrid is disabled
2. multiselect is disabled
3. pager elements (but not the pager) are disabled - buttons and etc
4. altRows is disabled
To have independance from data a new options is added
treeReader: {
level_field: "level",
left_field:"lft",
right_field: "rgt",
leaf_field: "isLeaf",
expanded_field: "expanded"
}
This currently is for nested set model
This automatically extend the colModel with these fields.
These fields are added at end of the colModel array
and are hidden.
This means that the data returned from the server should have
values for these fields.
A very important thing here is that the data returned from the server
should be represented (sorted) in appropriate way - example
SELECT category_name, level, lft, rgt FROM categories ORDER BY lft;
level_field, left_field, right_field - should be a numbers
leaf_field, expanded_field - should have values 'true' or 'false'
leaf_field determines if the record is a leaf.
This is easy in Nested set model since of
if( rgt == lft+1 ) isLeaf = true; else isLeaf = false;
expanded_field tells us if the tree at this level should be
expanded when read from grid. If this field is true a child nodes should be sened to grid.
Another options are
tree_root_level : 0
The default value is set to 0.
This tell us at wich level begin the root element.
ExpandColumn: null
This options tell's which column (name from colModel) should be used to expand the tree. If not set the first one is used.
Some things that you should known.
1. Currently adding nodes with addRowData is not supported.
2. When we initialize the grid and the data is read after
this datatype automatically is set to local. This is pariallly
true since grid support autoloading tree nodes.
This means that if you load the data only at root level first
and click at some root node the grid determine that there is
no data and try to load the nodes from the server.
In this case the data that is send to the server have additional parameters
I use in this case a postData array like this
postData:{nodeid:rc.id,n_left:rc.lft,n_right:rc.rgt,n_level:rc.level}
In other words you can grab these values and do something
like this to load the child nodes
SELECT category_name, level, lft, rgt FROM categories
WHERE lft > n_left AND rgt < n_right AND level = n_level +1
ORDER BY lft;
Once when all the nodes are loaded we do not make any other request to
the server
A single click is used to the tree image and double click to the expanded row
Known bugs.
1.In FF2 and IE when try to resize the expandable column
the tree images are shown - i.e - wraping does not resize.
In FF3, Opera and Safari3 all is OK.
2. When double click on the expanded row the text is selected (except in IE).
Planed additions.
1. expandAll and collapseAll methods
2. autoclosing tree nodes - when click on node all nodes at this level should becolapsed automatically and only a clicked will be expanded.
3. addNode, removeNode methods
http://www.trirand.com/jqgrid/.....egrid.html
~Enjoy
Tony
04:06
Moderators
30/10/2007
I hope that this will be finished at beginning of September.
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
10:31
Moderators
30/10/2007
The deep can be unlimited. If you mean that when the deep of the tree is big there will be no room to display all the items - Yes this is true. One solution is to have enought width for this - the other is to resize the grid in appropriate way, but I do not think that this will be ready when the component is redy.
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
13:25
22/08/2008
This this good.
But i have questions :
1) How can i insert in data html blocks?
(Example: <cell><a>Link</a></cell>)
2) How looks data in tree grid? (first -> second level in tree) I 'm
understand just 1-st leval.
3) When be help for tree grid? (your documentation the best) ?
ps my English the bad )))
03:39
Moderators
30/10/2007
Hello,
1. Search the forum how to insert html content in the cell.
2. From my initial post :
.....
I use in this case a postData array like this
postData:{nodeid:rc.id,n_left:rc.lft,n_right:rc.rgt,n_level:rc.level}
In other words you can grab these values and do something
like this to load the child nodes
SELECT category_name, level, lft, rgt FROM categories
WHERE lft > n_left AND rgt < n_right AND level = n_level +1
ORDER BY lft;
Once when all the nodes are loaded we do not make any other request to the server
...
3. When the component is ready the docs will be published.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
07:57
Moderators
30/10/2007
Hi,
1.Could you please explain what you have to do so that no scrollbar?
2. Yes this is true. Edit in place should known about treegrid - thank you.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
02:54
19/08/2008
Hi Tony,
Sorry for my carelessness, the scrollbar is OK, I forgot to adjust the height
For Inline editing, it based on the definition of colModel, so to some column, all rows have the same editor type, could tree grid support custmization for each row, it meas that the column value in row a is drop down list, in row b it's a input text. Sorry for the stupid requirement!
03:40
Moderators
30/10/2007
Hello,
Realy do not understand what you mean. If possible could you please
describe this again.
Thank you
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
02:58
29/08/2008
Please tell me, Which is new ? grid.base-tree.js or grid.base.js
grid.base-tree.js
/*
* jqGrid 3.3- jQuery Grid
* Copyright (c) 2008, Tony Tomov, tony@trirand.com
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/lice.....icense.php
* http://www.gnu.org/licenses/gpl.html
* Date: 2008-07-23 rev 49
*/
grid.base.js
/*
* jqGrid 3.2.3-jQuery Grid
* Copyright (c) 2008, Tony Tomov, tony@trirand.com
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/lice.....icense.php
* http://www.gnu.org/licenses/gpl.html
* Date: 2008-08-13 rev 51
*/
03:38
Moderators
30/10/2007
I placead the 3.3 for the demo on the site. Instead use 3.2.3 with
grid.treegrid.js
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
23:34
23/09/2008
Hi Tony.
First of all, We really appreciate you work!
But of course I have several questions.
I've had no problems with JqGrid (maybe becouse of good docs), but I can't succeed with TreeGrid. I've made an example which works with my JSON data, I've also made an example which works with your XML data I took it from your example). And my XML example works, but at the same time my JSON example doesn't work
Does this plugin work only with XML datatype ?
03:42
Moderators
30/10/2007
Hello,
Currently the version work only with xml. The upcomming beta should
work with json.
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
22:57
23/09/2008
Okey, I've changed my data and it works now... But at the moment I have another question 🙂 First I'm going to explain situation... I have one table in database, there are huge amount of details and constructions in this table. They are connected by id = prior parentid... some thing like tree... But I cant't change database structure and there is no fields like lft, rgt and so on... 🙁 So I put random digits in this XML section and FALSE in leaf section... It works for me, when I expand rows, but it doesn't work when I colapse it.... I've looked into source code and found the solution. I've removed this condition: "parseInt(this.lft,10) > lft && parseInt(this.rgt,10) < rgt" from getNodeChildren method... But it seems ugly to change source code, becouse now I should do it after each update 🙁 Could you add property or some thing else to fix this for cases like I had? Or may be I haven't considered some thing really important that could help me?
02:38
Moderators
30/10/2007
Hello,
I will try to support adjacency model (id - parent_id) soon.
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
06:55
23/09/2008
Hi
Tony, sorry, but I have another question… or problem…
You use ID or NODEID to get NODE childrens throw request to server. It works fine in most cases. But what if several nodes have childrens with same ID.
For example node A has children B and children C, and node D has children B and children F… So that if I try to get the B's childrens your plugin will expand only one node… But I need two undependent branches in this example. So using of ID as NODEID is not good, becouse sometimes we need to generate really unique ID's for this tree, but at the same time we need to get childrens with using of any other fields…
What if we say to JqGrid (treegrid) that we want to use Ñoncrete field as nodeid? Or maybe I've already could use this feature? How?
PS: Sorry for my bad English...
Most Users Ever Online: 715
Currently Online:
36 Guest(s)
Currently Browsing this Page:
2 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66