How to get the rows value of the type check-box XUL tree JavaScript

Question

I'm a newbie in XUL & Java-Script programming.

I just realized that I was completely in a wrong direction before merging two rows the user must choose the values which they want to merge. I want to show those values in a separate window with dropdown menulist.

I have a "type="checkbox"" xul tree and the tree is formed using XML tree template.

How can I get the values of the selected check-box of the corresponding row(Getting the text from the selected rows)the check-box is implemented using CSS.

<treecol type="checkbox" label="CheckBox" editable="true"/>

2.I have a drop down menu and I want to display the selected rows of the tree-cell values there.

How can i get the values of the select check-box tree row values and append it into the drop down menu dynamically? Please guide me friends.

This is my XUL tree code:

tree editable="true" id="myTodoListTree" flex="1" seltype="multiple"
datasources="file://C:/mercredi.xml" ref="*" querytype="xml" enableColumnDrag="true">

        <treecols>
        <treecol type="checkbox" label="CheckBox" editable="true"/>
        <treecol sortActive="true" sort="?name" id="name" label="FirstName" flex="1" persist="width ordinal hidden"  sortDirection="ascending"/>
               <splitter class="tree-splitter" />                   
            <treecol sortActive="true" sort="?lastname" id="lastname" label="LastName" flex="1" persist="width ordinal hidden" sortDirection="ascending"/>
                <splitter class="tree-splitter" />                    
            <treecol sortActive="true" sort="?gmail" id="gmail" label="Gmail" flex="1" persist="width ordinal hidden"  sortDirection="ascending"/>
                <splitter class="tree-splitter" />
        </treecols> 
 </tree>

 <row>
<label  value="FirstName"/>
<label  value="LastName"/>
<label  value="Gmail"/>

</row>
    <row>

   <menulist id="firstname">
    <menupopup >
    </menupopup>
    </menulist>

     </row>
</window>

First I tried to get the values of the selected row, it's not working: https://developer.mozilla.org/en/XUL/tree

function getCellChecked(tree, columnid)
{
alert('1');
  var arr = [];
  var column = tree.columns.getNamedColumn(columnid);
  for (var i = 0; i < tree.view.rowCount; i++){
    if (tree.view.getCellValue(i, column) == 'true')
      arr.push(i);
  }
  return arr;
  alert('final'+arr);

}

The css file:

treechildren::-moz-tree-checkbox(checked)
{
  list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif");
}
treechildren::-moz-tree-checkbox(disabled)
{
  list-style-image: url("chrome://global/skin/checkbox/cbox-check-dis.gif")
}

Please see the image of xul tree here:[url=http://postimage.org/image/2t1lnsczo/][img]http://s1.postimage.org/2t1lnsczo/jeudi1.jpg[/img][/url]

linguini linguini · Accepted Answer · 2011-08-12T15:41:03

After 2days of banging my head with this problem, finally managed to fix the problem with the help of my friend. Few documents in the Firefox website is not quite clear to understand and no proper examples.

Here is the solution: This function use to get the values of select check-box tree rows and append those values to my menu-list. The type of tree is "check-box" and it's implemented using CSS.

We can get the values of the tree rows by getNamedColumn Method tree.columns.getNamedColumn().

Then use getCellValue() method to get the value(text content) of the selected row(rows).

 function merge()
    {
      var tree = document.getElementById('myTodoListTree');//Id of the tree
      for (var i = 0; i < tree.view.rowCount; i++) {
      if (tree.view.getCellValue(i, tree.columns.getColumnAt(0)) == 'true') 
//To get the cell values of the entire row, if the check-box is selected(True)// 
{
    alert(
    tree.view.getCellText(i, tree.columns.getNamedColumn("name"))+"\n"+
    tree.view.getCellText(i, tree.columns.getNamedColumn("lastname")));
//Testing my output with alert message.

//Appending my output to my menu-list.  
  var firstName= tree.view.getCellText(i, tree.columns.getNamedColumn("name"));
    var menu = document.getElementById("firstname");
      menu.appendItem(firstName);

    var lastName= tree.view.getCellText(i, tree.columns.getNamedColumn("lastname"));
    var menu = document.getElementById("laastname");
      menu.appendItem(lastName);

        }
      }
      return arr;  
    }

How to get the rows value of the type check-box XUL tree JavaScript

1 Answers