Click here to Skip to main content

Article

JScript Tree Grid Control

Jong-Ha Ahn

Rate me:

4.45/5 (11 votes)

11 Jan 2004

79.5K

1.3K

16

13

Tree Grid control for JScript.

Download source files - 4.08 Kb

Introduction

This article demonstrates a Tree Grid control for JScript.

How to use

JavaScript

// Create wsGrid Instance
 m_wsGridCtrl = new wsGridCtrl();
 
 // Initialize
 // Param1: width
 // Param2: OnMouseOver Color
 m_wsGridCtrl.initializeDocument(500, "#FF9999");
 // Titles Create
 // Param1: Text
 // Param2: Width
 m_wsGridCtrl.InsTab("Title", "*");
 m_wsGridCtrl.InsTab("Content", "400");
 

 // Insert Item Example
 // Param1: Parent Item
 // Param2: Item. If title is two..
//          you must write two Items. (delimiter is ';')
 // Param3: hyper link (it also delimiter is ';')
 m_wsGridCtrl.InsItem(null, "Menu1;Content1;", 
   "http://yahoo.com;http://google.com;", "_self;_blank;");
 m_wsGridCtrl.InsItem(null, "Menu2;Content2;", 
   "http://yahoo.com;http://google.com;", "_blank;_blank;");
 
 // Sub Item Example
 var iItem = m_wsGridCtrl.InsItem(null, "Menu3;Content3;", 
   "http://yahoo.com;http://google.com;", "_blank;_blank;");
 m_wsGridCtrl.InsItem(iItem, "Menu5;Content5;", 
   "http://yahoo.com;http://google.com;", "_blank;_blank;");
 m_wsGridCtrl.InsItem(null, "Menu6;Content6;", 
   "http://yahoo.com;http://google.com;", "_blank;_blank;");
 m_wsGridCtrl.InsItem(null, "Menu7;Content7;", 
   "http://yahoo.com;http://google.com;", "_blank;_blank;");
  

 // finilly generate code (It is important!)
 m_wsGridCtrl.GenerateCode(); 
 // First state setting (ExpandAllTree or RecudeAllTree)
 m_wsGridCtrl.RecudeAllTree();
// m_wsGridCtrl.ExpandAllTree();

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Written By

Jong-Ha Ahn

Software Developer

Korea (Republic of)

Computer Programmer

Comments and Discussions

another small change

master.zion7-Jul-09 10:25

7-Jul-09 10:25

Allow itens without link (blank)

Change
------------------------ Original code ----------------------------
function GenerateSubContent(ContentText, CurNode)
{
var ArrItemDesc = Item[CurNode][1].split(";");
var ArrItemHref = Item[CurNode][2].split(";");
var ArrItemTarget = Item[CurNode][3].split(";");

for(var i=1; i<ItemTab.length; i++) {
DocWrite("<td><a href='" + ArrItemHref[i] + "' target='" + ArrItemTarget[i] + "'>" + ArrItemDesc[i] + "</a></td>");
}
}
------------------------ Original code ----------------------------

to:
------------------------ My change ----------------------------

function GenerateSubContent(ContentText, CurNode)
{
var ArrItemDesc = Item[CurNode][1].split(";");
var ArrItemHref = Item[CurNode][2].split(";");
var ArrItemTarget = Item[CurNode][3].split(";");

for(var i=1; i<ItemTab.length; i++) {
if ( ArrItemHref[i] == '' ) {
DocWrite("<td><a href='" + ArrItemHref[i] + "' target='" + ArrItemTarget[i] + "'>" + ArrItemDesc[i] + "</a></td>");
} else {
DocWrite("<td>" + ArrItemDesc[i] + "</td>");
}

}
}

------------------------ My change ----------------------------

by

Master_Zion (Brazil)

This is a asp.net edition

sherwinzhu2-Oct-08 23:55

2-Oct-08 23:55

http://www.codeproject.com/KB/custom-controls/TreeGrid.aspx[^]

You did a GREAT JOB !!!!!!!!

Cheung Tat Ming25-Oct-07 0:09

Cheung Tat Ming

25-Oct-07 0:09

I am chinese guy who live in HongKong, so forgive my bad english. Smile | :)

Smile | :)

2 years ago, i start to create a NNTP(Usenet) application by ASP.NET,

and i need to bind the article from TCP Stream to treelist / treegrid (just like the outlook express inbox)

i search all around yahoo & google, i cannot find any Free & open-source DHTML or ASP.NET control to

work ,so i build my own with asp.net datagrid & repeater control. But unfortunately it make me hard to

development.so i give up this project.

Today, i pick up this project again, and i wonder is it any free treegrid stuff have been release in

this 2 years, finally, i found your one!

It's simple code but reliable, it's good for create dyncmic hyperlink from database, that's is what

i seeking in this 2 years.

so i can build my own nntp application again.

You did a great Job!!! I believe it many developer need your TreeGrid!! Blush | :O

Blush | :O

Blush | :O

This is exactly what I needed

BigJoe7141-Jun-07 4:31

1-Jun-07 4:31

Thank you for providing this. I was looking for something exactly like this and couldnt find anything. I thought I was going to have to create something from scratch. THen I found yours and was so happy! You saved me so many hours of work!!! THANKS!!!!!!! Smile | :)

Smile | :)

Re: This is exactly what I needed

Cheung Tat Ming25-Oct-07 0:11

Cheung Tat Ming

25-Oct-07 0:11

same here !!;) :-Ocheer ~~~~~~ Blush | :O

Blush | :O

Blush | :O

Blush | :O

;);)

ilikeopensource23-May-07 8:11

ilikeopensource

23-May-07 8:11

Hello,
First thanks for the wonderful code.
but i noticed a small bug in the code which would prevent it from displaying more than 2 columns.
---------------Original code----------------------------------
function GenerateSubContent(ContentText, CurNode)
{
for(var i=0; i<ItemTab.length-1; i++) {

var ArrItemDesc = Item[CurNode][1].split(";");
var ArrItemHref = Item[CurNode][2].split(";");
var ArrItemTarget = Item[i][3].split(";");

for(var j=1; j<ArrItemDesc.length-1; j++) {
DocWrite("<td><a href='" + ArrItemHref[j] + "' target='" + ArrItemTarget[j] + "'>" + ArrItemDesc[j] + "</a></td>");
}
}
}
---------------Original code----------------------------------
---------------Modified code----------------------------------
function GenerateSubContent(ContentText, CurNode)
{
var ArrItemDesc = Item[CurNode][1].split(";");
var ArrItemHref = Item[CurNode][2].split(";");
var ArrItemTarget = Item[CurNode][3].split(";");

for(var i=1; i<ItemTab.length; i++) {
DocWrite("<td><a href='" + ArrItemHref[i] + "' target='" + ArrItemTarget[i] + "'>" + ArrItemDesc[i] + "</a></td>");

}
}
---------------Modified code----------------------------------
Hope this helps some one
thanks

Opensource

BigJoe7141-Jun-07 4:29

1-Jun-07 4:29

THANK YOU for this bug fix. It was extremely helpful! Smile | :)

Smile | :)

joepen26-Jan-09 16:02

26-Jan-09 16:02

Thanks for the fix... It was really helpful... I spent almost an hour trying to figure out why it generates 2 extra columns... then i decided to see the forum and found this... thanks

manugoel200313-Sep-06 0:34

13-Sep-06 0:34

Hi there,

I really appreciate this effort. But I have a very specific need. It would be nice if you could direct me a bit.

I require that the rows in the tree grid are created dynamically. Actually, the complete row and column details, including child details are fetched through AJAX in JSON format which is converted to an array at client side. Then I use a recursive loop to create rows according to the array.

I am using recursion because the number of child levels is not known. I need 5 columns. But when I do this in ur script it repeats the last 4 columns 3 times.

I am not able to get the child rows to appear as well. I am unable to find the prob.

This is the code I am using

<code>
function getJSON(url)
{
var XHRObj = false;

try {
// For Internet Explorer.
XHRObj = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e) {
try {
// Gecko-based browsers, Safari, and Opera.
XHRObj = new XMLHttpRequest();
}
catch (e) {
// Browser supports Javascript but not XMLHttpRequest.
XHRObj = false;
}
}
if(XHRObj)
{
XHRObj.open("GET", url, false);
XHRObj.send(null);
strJSON = XHRObj.responseText;
return strJSON;
}

}

function build_treegrid(tg, tg_arr, parent)
{
if (typeof parent == "undefined")
parent = null;

for (var i = 0; i < tg_arr.length; i++)
{
var str_RowText = "";
var str_links = "";
var str_target = "";

if (tg_arr[i]["cells"])
{
for (var x = 0; x < tg_arr[i]["cells"].length; x++)
{
str_RowText += tg_arr[i]["cells"][x]["text"] + ";";
str_links += ";";
str_links += "_self;";
}
}
var thisId = tg.InsItem(parent, str_RowText, str_links, str_target);

if (tg_arr[i]["children"])
{
build_treegrid(tg, tg_arr[i]["children"], thisId);
}
}
}

// Create wsGrid Instance
var tg = new wsGridCtrl();

// Param1: width
// Param2: OnMouseOver Color
tg.initializeDocument(500, "#FFeeee");

// Titles
// Param1: Text
// Param2: Width
tg.InsTab("View Name", "*");
tg.InsTab("Modified On", "100");
tg.InsTab("Modified By", "100");
tg.InsTab("Filter Description", "100");
tg.InsTab("Image", "100");

tg_str = getJSON("treegridjson.php");
var tg_array = tg_str.parseJSON();

build_treegrid(tg, tg_array);

tg.GenerateCode();
tg.RecudeAllTree();

</code>

Thanx in advance

timothymm3-Apr-06 7:57

3-Apr-06 7:57

Thanks so much for posting this; the theory behind it makes a lot of people's like easier! Smile | :)

Smile | :)

One quesiton: When i use the script, I am trying to add 8 colums x 4 rows, but it doesn't create new rows; everything is on the one row... any idea why?

Thanks in advance,

Tim

Dynamic include Item.

leandronardo5-Jul-05 3:34

5-Jul-05 3:34

Hi,

Its possible include a dynamic item, without refresh the browser ?

Thanks

Leandro

DFU₂₃20-Jan-04 3:38

DFU₂₃

20-Jan-04 3:38

I like this control ... it appears to run rather smoothly and to be cross-browser compatible.

One question and one suggestion:

Question - why are you using buttons for the title bar area?

Suggestion - use classes for the different elements of the Grid Control so people could build their own style for it using CSS instead of modifying the JS file.

Wally Atkins
Newport News, VA, USA

Re: Very Slick!

Jong-Ha Ahn22-Jan-04 13:42

22-Jan-04 13:42

Thank you for having interest.

Reason that use button for title area is that tried to sorting function in next version.

And contents that suggestion will try to embody in next versino.

Thank you. Smile | :)

Smile | :)

Jongha Ahn.
KOREA
Ahn@jongha.pe.kr
http://whitespray.com

General News Suggestion Question Bug Answer Joke Praise Rant Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Go to top