Start Building Professional
Web Apps Today

auto selecting in simple edit mode when addrow() to TreeGrid

Hi,

I have code that adds a new row to a treegrid (tree, ro, ro). I want to auto select the first cell in the new row and it in edit mode with the text selected. How can I do that when the column type is "tree"? I've tried several methods, but nothing seem to work. Thanks in advance.

Basically the tree cell works in same way as other ones

    var id=some;
    grid.addRow(id,["new","new","new"]);
    grid.opentItem(id); //to be sure that row not in closed branch
    grid.selectCell(grid.getRowIndex(id),0);
    grid.editCell();

Please beware that if you are using some button outside of grid the next may occur
    - click occurs
        - editCell called
            - cell switched to edit state
    - click event reachs document.body
        - grid detects click outside the grid
            - current active editor closed

To prevent such behaviour you may stop event propoganation
    <input type="button" value="add row" onclick=" doRowAdding(); (arguments[0]||event).cancelBubble=true; " />

Thanks for the quick response. 

I tried your example and it selects the new node I added with no js errors, but it still doesn't put the cell in "edit mode", ready for the user to type in the name of the new node.  Anything missing?  Here's my code for the control:

//event handlers

function hideRow(rowId)

{

if (mylistsgrid.getLevel(rowId) > 0)

mylistsgrid.setRowHidden(rowId, true);

else

{

mylistsgrid.openItem(rowId); //to be sure that row not in closed branch

mylistsgrid.selectCell(mylistsgrid.getRowIndex(rowId),0);

mylistsgrid.editCell();

}

}

 

//init and load

mylistsgrid = new dhtmlXGridObject('listgridview');

mylistsgrid.setHeader(""); //no header, but keep spacing

mylistsgrid.setInitWidths("*,0,0")

mylistsgrid.imgURL = "images/";

mylistsgrid.setColAlign("left,left,left")

mylistsgrid.setColTypes("tree,ro,ro");

mylistsgrid.enableEditEvents(false, true, true);

mylistsgrid.enableDragAndDrop(true);

mylistsgrid.setSkin("vss_listview");

mylistsgrid.setDragHandler(OnListDrop);

mylistsgrid.init();

mylistsgrid.loadXML("test2.xml");

mylistsgrid.attachEvent("onRowAdded",hideRow);

 

Please check attached sample, after adding
    (arguments[0]||event).cancelBubble=true;
to the onclick event - all works as expected - tree cell goes to edit state.

By the way, if you need to have a hidden header the correct way is
    mylistsgrid.setHeader("A,B,C"); //no header, but keep spacing
    mylistsgrid.setNoHeader(true)

The new node does get put into "Edit Mode" with a button, but the text isn't highlighted. 

I am triggering this from a toolbar.setOnClickHandler function and not a button.  I've tried the cancelBubble in the function that the handler calls but no edit mode when using the toolbar.  Can I attach an "onclick" event to your toolbar?

>>but the text isn't highlighted
    The cells of grid doesn't highlight their value on selection, you can add next code to force cell value selection, but it will not work for all types of columns
       grid.editor.select();

>>Can I attach an "onclick" event to your toolbar?
    You can block all events on toolbar level as
    var container=document.getElementById("toolbar");
    var z=new dhtmlXToolbarObject(container,...
    container.onclick=function(e){ (e||event).cancelBubble=true; };