Start Building Professional
Web Apps Today

Tab order inside Grid

Dear sir,

I am facing a problem with dhtmlxGrid as I am adding feautures to my project.

Let me explain to you the situation. I tried simple combo as inplace editor first and I found that it did not have
a dropdown arrow while editing the grid. Therefore, I downloaded dhtmlxCombo as GPL license to make it as the
inplace editor. This is the columns details

mygrid.setColTypes("cntr,combo,dhxCalendarA,mynum,ed,combo,ro,ro");

Everything works fine but tabbing has gone a total mess.

I have placed an input outside the grid in such a way that the focus goes to the grid from the input box.

Once I tab from the combo selection the focus goes out of the grid to the input box and next tab will focus the first cell of the grid
and only the third tab makes the next cell focused.

When I used 'co' type this issue does not exist.

Does this grid remember the last cell selected. Each time I tab from an outside control the focus goes to the last focused cell instead of the first cell of
the first editable row? Can I disable this feature? I want to have the focus in the first cell always on grid enter.

About the tab issue, if I click on the combo and tab off, it works just fine. I am using 'Access-key mapping' which suppose to go editing
upon entering cell.  What I assume is when I tab to the the column of type combo, though the combo drops down it does not actually gets focused.
until I click on the combo. How can I make automatically selected?

I can cut and paste the code here:)

<script>
    var CCY = "$";
    var Pct = "%";
    var DPnt = ".";
    var Sep = ",";   

    function eXcell_mynum(cell){                                    //excell name is defined here
        if (cell){                                                     //default pattern, just copy it
            this.cell = cell;
            this.grid = this.cell.parentNode.grid;
        }
        this.setValue=function(val){
            this.setCValue(val);                                    
        }
        this.getValue=function(){
            return this.cell.innerHTML;
        }
        this.edit=function(){
            this.val = this.getValue(); //save current value
            this.cell.innerHTML="<INPUT  type= 'num_textbox' size= 8 maxLength=14 style= 'text-align:right;padding-right:3px;' onkeypress= 'return onlyNumbers(this, event, 2);' onkeydown='return NoCursorKeys(event);' onfocus='return Arrive(this, event);' onclick='return Arrive(this, event);'>";
            this.cell.firstChild.onclick=function(e){ (e||event).cancelBubble=true; } //block onclick event
            this.cell.firstChild.value=this.val; //set data to edit box 
            this.cell.firstChild.focus();   
            this.cell.firstChild.select(); //preselect text in input 
        }
        this.detach=function(){
            this.setValue(this.cell.firstChild.value);
            return this.val!=this.getValue();
        }
    }
    eXcell_mynum.prototype = new eXcell;    // nest all other methods from base class

    function myf(stage,id,index){
        var ind=mygrid.getRowIndex(id);
        if ((index==1)&&(stage==0))//start edit Shipping column
        {
            var combo=mygrid.getColumnCombo(index);
            if (ind==0)
            {                      //for even rows
                  combo.clearAll();
                  combo.addOption("1","Loan");
                  combo.addOption("2","Payment");
                  combo.addOption("3","Deposit");
                  combo.addOption("4","Withdrawal");
                  combo.addOption("5","Commision");
            }
            else
            {
                  combo.clearAll();
                  //alert(mygrid.cells(1,1).getValue());
                  if ((mygrid.cells(1,1).getValue() == 'Loan') ||
                   (mygrid.cells(1,1).getValue() == '1'))
                  {
                    combo.addOption("1","Payment");
                    combo.addOption("2","Rate");                 
                  }
                  else
                  {
                    combo.addOption("1","Withdrawal");
                    combo.addOption("2","Rate");
                  }
            }
        }
        //else if ((index==1)&&(stage==2))             //for finishing edit
        //;//   mygrid.getCombo(1).restore();        //restore combo state
        else if ((index==5)&&(stage==0))
        {
            var combo=mygrid.getColumnCombo(index);
            combo.clearAll();
            combo.addOption("1","Monthly");
            combo.addOption("2","Bi-Monthly"); 
            combo.addOption("3","Weekly");      
            combo.addOption("4","Daily");      
            combo.addOption("5","Bi-Weekly");      
            combo.addOption("6","Annual");     
        };
        return true;
    }
   
    function Button1_onclick() {
        var newId =  mygrid.uid();
        mygrid.addRow( newId," " + newId + ",Payment,10/10/2007, 0, 0,Monthly,,",-1);
        mygrid.selectRow(mygrid.getRowIndex(newId),false,false,false);
    }

    function Button2_onclick() {
       var newId =  mygrid.getRowsNum()+1;
        mygrid.addRow(newId,"2,inserted,10/10/2007, 0, 0,Monthly,,", mygrid.getRowIndex(mygrid.getSelectedId())+1);
        mygrid.selectRow(mygrid.getRowIndex(newId),false,false,false);
    }

    function Button3_onclick() {
        var selId = mygrid.getSelectedId();
        mygrid.deleteRow(selId);
    }

    function Button4_onclick() {
        mygrid.moveRowDown(mygrid.getSelectedId());//move selected row one position down
    }

    function Button5_onclick() {
        mygrid.moveRowUp(mygrid.getSelectedId());//move selected row one position down
    }
    function onButtonClick(menuitemId,type){
            var data=mygrid.contextID.split("_"); //rowInd_colInd
                var rId = data[0];
                var cInd = data[1];
                switch(menuitemId){
                    case "add":
                        mygrid.addRow((new Date()).valueOf(),["","","","","","","",""],mygrid.getRowIndex(data[0]));
                        break;
                    case "delete":
                        window.setTimeout("mygrid.deleteRow("+rId+");",200)
                        break;
                    case "inc":
                        var value = parseFloat(mygrid.cells(rId,cInd).getValue())+100;
                        mygrid.cells(rId,cInd).setValue(value);
                        break;
                    case "dec":
                        var value = parseFloat(mygrid.cells(rId,cInd).getValue())-200;
                        mygrid.cells(rId,cInd).setValue(value);
                        break;
                    case "link":
                        var url = mygrid.getUserData(rId,"link")
                        if(url) window.open(url)
                        else alert("Page for this author wasn't set")
                        break;
                    case "edit":
                        var rIndex = mygrid.getRowIndex(rId)
                        mygrid.selectCell(rIndex,cInd)
                        mygrid.editCell();
                        break;
                    case "set_avail":
                        mygrid.cells(rId,cInd).setValue(1);
                        break;
                    case "set_unavail":
                        mygrid.cells(rId,cInd).setValue(0);
                        break;
                    case "del_best":
                        mygrid.cells(rId,cInd).setValue(0);
                        break;
                    case "add_best":
                        mygrid.cells(rId,cInd).setValue(1);
                        break;
                }
            }

    function my_pre_func(rowId,celInd,grid){
        if (celInd==1) return false;
        return true;
    }
    menu = new dhtmlXMenuObject(null, "standard");
    menu.setImagePath("dhtmlxGrid_v20_pro_81009-EVAL/dhtmlxMenu/codebase/imgs/");
    menu.setIconsPath("dhtmlxTabbar_v20_pro_81009-EVAL/dhtmlxTabbar/samples/images/");
    menu.renderAsContextMenu();
    menu.setOpenMode("web");
    menu.attachEvent("onClick",onButtonClick);
    menu.loadXML("dyn_context.xml");

    schedule = new dhtmlXGridObject('gridbox2');
    schedule.setImagePath("dhtmlxGrid_v20_pro_81009-EVAL/dhtmlxGrid/codebase/imgs/");
    schedule.setHeader("Date, Loan, Payment, Interest, Principal, Balance");
    schedule.setInitWidths("50, 100, 100, 100, 100, 100");    
    schedule.init();
    schedule.setSkin("modern")
       
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("dhtmlxGrid_v20_pro_81009-EVAL/dhtmlxGrid/codebase/imgs/");
    mygrid.setHeader("&nbsp;,Events,Date, Amount, #Periods, Frequency, EndDate, Special Series");
    mygrid.setInitWidths("50, 120, 95, 80, 72, 100, 100, 160");
    mygrid.setColAlign("left,left,center,right,right,left,center,left");
    mygrid.setColSorting("na,na,na,na,na,na,na,na");
    //mygrid.setColTypes("cntr,co,dhxCalendarA,mynum,ed,co,ro,ro");
    mygrid.setColTypes("cntr,combo,dhxCalendarA,mynum,ed,combo,ro,ro");
    mygrid.enableMultiselect(false); //false
    mygrid.sortRows(3);
    //mygrid.enableLightMouseNavigation(true);
    mygrid.enableEditEvents(true,true,true);
    //mygrid.setNumberFormat("0,000",3);
    mygrid.setDateFormat("%m/%d/%Y");
    mygrid.enableEditTabOnly(1);
    mygrid.setSortImgState(false)
    mygrid.attachEvent("onEditCell",myf);
    //mygrid.setExternalTabOrder("Text1","Button1")
    mygrid.enableContextMenu(menu);
     mygrid.attachEvent("onBeforeContextMenu", my_pre_func);
    mygrid.attachEvent("onKeyPress",function(keycode,ctrl,shift,event_object, value){
    //alert(keycode);
        return true;
    });
    mygrid.attachEvent("onFilterStart",function(){
       mygrid.setSortImgState(false);
       return true;
    });   
      mygrid.setColumnColor("#D6D6D6");
    mygrid.init();
    mygrid.splitAt(1);
    mygrid.setSkin("modern")
    myrow = new Array("1","Loan","10/10/2007", "45000", "0","Monthly","","" );  
    mygrid.addRow(1, myrow);
    
    tabbar=new dhtmlXTabBar("a_tabbar","top");
    tabbar.setImagePath("dhtmlxTabbar_v20_pro_81009-EVAL/dhtmlxTabbar/codebase/imgs/");
    tabbar.setSkinColors("#FCFBFC","#F4F3EE");
    tabbar.addTab("a1","Cash Flow","100px");
    tabbar.addTab("a2","Schedule","100px");   
    tabbar.setContent("a1","gridbox");               
    tabbar.setContent("a2","gridbox2");               
    tabbar.setTabActive("a1");
    mygrid.loadXML("grid.xml",myf);    
</script>

To set elements which get focus when tab is pressed in the last or first you should use the function:
mygrid.setExternalTabOrder(start, end)
start - html object or its id - gets focus when tab+shift are pressed in the first cell
end - html object or its id - gets focus when tab is pressed in the last cell


Problem with cntr column in the grid  confirmed and fixed, fix will be available as part of next build, if you need it ASAP - you can use attached patch. 

Hi,

Thanks for the replay. Please let me know where to copy the patch? is it in the codebase? In my case,
dhtmlxGrid_v20_pro_81009-EVAL\dhtmlxGrid\codebase and put a link inside the file?
 

Thanks.
Biju

Yes, place the file in folder with other js files and include it in page after other js files 
( also, you can use just add the content of patch.js to the end of dhtmlxgrid.js , in such case you will not need any extra files )