Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Paul K on Jul 21, 2008 16:25
open dhtmlx forum
Automatically add a row to grid

I want to be able to add a row to a grid as the user is entering data in the last row. That is when the user presses the tab key in the rightmost column of the last row I want to be able to add a new row to the grid so they can continue to enter data (in the new row).

How can this be done?
Answer posted by Support on Jul 22, 2008 02:12
You can attach custom code to onEditCell event similar to next

mygrid.attachEvent("onEditCell",function(stage,id,ind){
    if (stage==2 && ind == MAX_IND && id == this.getRowId(this.getRowsNum()-1)){
       //last cell of last row
       this.addRow(this.getUID(),"");
       this.selectCell(this.getRowsNum()-1,0);
       this.editCell();
    }
    return true;
})
Answer posted on Jul 22, 2008 15:41
I tried the event code you provided.  With the event handler attached to the onEditCell event the tab key no longer works.  That is I can't move to the next cell in the table.  Instead the tab key starts cycling through the fields at the top of Internet Explorer (version 5). 

If I comment out the attachEvent, then the tab key works properly.  Here is the page I am using to test this:

<html>
<head>
    <title>Test event</title>
    <link rel="STYLESHEET" type="text/css" href="./codebase/dhtmlxgrid.css">
    <link rel="STYLESHEET" type="text/css" href="./codebase/dhtmlxgrid_skins.css">
    <script src="./codebase/dhtmlxcommon.js"></script>
    <script src="./codebase/dhtmlxgrid.js"></script>
    <script src="./codebase/dhtmlxgridcell.js"></script>
</head>
<body class="thrColFix" onUnload="saveStuff()">
    <table>
    <tr>
    <td><div id="placeItHere" style="width:99%; height:99%"></div></td>
    </tr>
    </td>
    </table>
<script>
        function addRowAtEnd(stage,rowId,colNumber){
            if (stage==2 && colNumber == MAX_IND && rowId == this.getRowId(this.getRowsNum()-1)){
                //last cell of last row
               this.addRow(this.getUID(),"");
               this.selectCell(this.getRowsNum()-1,0);
               this.editCell();
            }
            return true;
        }
        testGrid = new dhtmlXGridObject('placeItHere');
        testGrid.setImagePath("./codebase/imgs/");
        testGrid.setHeader("Line of Business,Description");
        testGrid.setInitWidthsP("30,70");
        testGrid.setColAlign("left,left");
        testGrid.setColTypes("ed,txt");
        testGrid.enableTooltips("false,false");
        testGrid.enableMultiline(true);
        testGrid.enableEditEvents(true,true,false); // single click, double click, not f2 key.
        //testGrid.enableAlterCss("even","uneven");
        /*  This doesn't work either.
        testGrid.attachEvent("onEditCell",function(stage,rowId,colNumber){
            if (stage==2 && colNumber == MAX_IND && rowId == this.getRowId(this.getRowsNum()-1)){
                //last cell of last row
               this.addRow(this.getUID(),"");
               this.selectCell(this.getRowsNum()-1,0);
               this.editCell();
            }
            return true;
        }) */
        testGrid.attachEvent("onEditCell",addRowAtEnd);
        testGrid.init();
        testGrid.addRow("Row1",["",""]);
        testGrid.addRow("Row2","");
        testGrid.addRow("Row3","&nbsp;");
        testGrid.addRow("Row4","&nbsp;");
</script>
</body>
</html>

Paul
Answer posted by Paul K on Jul 22, 2008 16:33
I noticed there was an extra </td> tag:

    <table>
    <tr>
    <td><div id="placeItHere" style="width:99%; height:99%"></div></td>
    </tr>
    </td>  <===  Delete this.
    </table>
 
But removing this tag doesn't fix the problem.
Answer posted by Support on Jul 23, 2008 03:05
Please check attached sample.
The MAX_IND in snippet above need to be replaced with actual maximum index of column ( 1 in your case )
Attachments (1)
1216808425.zip86.67 Kb
Answer posted on Jul 23, 2008 09:49
Changing MAX_IND to 1 made it work better.  However the selectCell call does not select the first column of the last row in the table, instead it's the second column.  This is the code (the selectCell code is commented out in the sample.html in the attachment in the previous message):

               this.addRow(this.getUID(),"");
               this.selectCell(this.getRowsNum()-1,0);
               this.editCell();
 
When I click tab in the last column of the last row a new row is added but I am editing the second (last) column not the first column.

Also I can't find any documentation about the getUID method.  What does this do?  Since the row id needs to be unique for each row, does this method generate a new UID each time it's called?
Answer posted on Jul 24, 2008 01:34
>>I am editing the second (last) column not the first column
The situation is next
a) grid switch first cell of next row to edit mode
b) as reaction on tab key grid moves focus to the next cell
So, to have correct code you may just comment two last commands, or run them through timeout
    this.addRow(this.getUID(),"");
    window.setTimeout(function(){
               grid.selectCell(grid.getRowsNum()-1,0);
               grid.editCell();
    },1);

>>What does this do?
Just return unique ID ( it based on current timestamp )

>>does this method generate a new UID each time it's called?
yes, each next call will return unique number