Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Scot Kersten on Jan 26, 2008 11:33
open dhtmlx forum
Columns are shifted one row to the left

I am having some difficulty with using cntr on DHTMLX grid and data processor. I have all my data coming in from a mySQL DB and loading just fine. The problem is that I added the cntr row at the beginning and now everything is off by one column and the last column is blank.

I assume that this has to do with the mygrid.setColumnIds line...but not sure.

Here is what I have:

html>
    <head>
        <title>Save Data dynamicaly</title>    
    </head>

    <body>
        <link rel='STYLESHEET' type='text/css' href='../../includes/dhtmlx/Grid/samples/common/style.css'>
        <link rel="STYLESHEET" type="text/css" href="../../includes/dhtmlx/Grid/codebase/dhtmlxgrid.css">
        <link rel="STYLESHEET" type="text/css" href="../../includes/dhtmlx/Grid/codebase/dhtmlxgrid_skins.css">
        
        <script>_js_prefix = "../../includes/dhtmlx/Grid/codebase/";</script>
        <script>_css_prefix="../../includes/dhtmlx/Grid/codebase/";</script>
        <script src="../../includes/dhtmlx/Grid/codebase/dhtmlxcommon.js"></script>
        <script src="../../includes/dhtmlx/Grid/codebase/dhtmlxgrid.js"></script>        
        <script src="../../includes/dhtmlx/Grid/codebase/dhtmlxgridcell.js"></script>
        <script src="../../includes/dhtmlx/Grid/codebase/excells/dhtmlxgrid_excell_calendar.js"></script>
        <script src="../../includes/dhtmlx/DataProcessor/codebase/dhtmlxdataprocessor.js"></script>
        <script src="../../includes/dhtmlx/Grid/codebase/excells/dhtmlxgrid_excell_clist.js"></script>
        <script src="../../includes/dhtmlx/Grid/codebase/excells/dhtmlxgrid_excell_cntr.js"></script>
        <script src="../../includes/dhtmlx/Grid/codebase/excells/dhtmlxgrid_excell_link.js"></script>
        <script src="../../includes/dhtmlx/Grid/codebase/ext/dhtmlxgrid_split.js"></script>
        
        <table width="95%">
            <tr>
                <td>
                    <div id="gridbox" width="100%" height="500px" style="background-color:white;overflow:hidden"></div>
                </td>
            </tr>
            <tr>
                <td>
                    * - fields which shouldn't have empty value marked with <font color="#FF0000">red border</font>.
                </td>
            </tr>
            <tr>
                <td>
                    <div id="messanger"> </div>
                    <a href="javascript:void(0)" onclick="mygrid.addRow((new Date()).valueOf(),[0,'','','',false,'na',false,''],mygrid.getRowIndex(mygrid.getSelectedId()))">Add row</a><br>
                    <a href="javascript:void(0)" onclick="mygrid.deleteSelectedItem()">Remove Selected Row</a>
                    <br><br>
                    <input type="Checkbox" onclick="doOnAutoupdateChecked(this.checked)"> Enable Auto Update    
                    <div id="updatemodes" style="display:none;">
                    <input type="radio" name="updm" id="updmdflt" value="cell" style="margin-left:20px;" onclick="myDataProcessor.setUpdateMode(this.value)" checked>Cell based<br>
                    <input type="radio" name="updm" value="row" style="margin-left:20px;" onclick="myDataProcessor.setUpdateMode(this.value)">Row based
                    </div>
                    <input type="Button" onclick="myDataProcessor.sendData()" id="updatebutton" value="Update" style="display:inline;">
                </td>
            </tr>
        </table>
    
        <br>
        <script>
            //init grid and set its parameters (this part as always)
            mygrid = new dhtmlXGridObject('gridbox');
            mygrid.setImagePath("../../includes/dhtmlx/Grid/codebase/imgs/");
            var flds = " ,Store,Name,District,Territory,Address,City,State,Zip Code,Longitude,Latitude,Retailer,Create Date,Modify Date";
                mygrid.setHeader(flds);
                mygrid.setInitWidths("40,60,100,70,70,*,125,60,70,80,80,100,100,100")
                mygrid.setColAlign("center,center,left,center,center,left,left,center,right,right,right,center,center,center")
                mygrid.setColTypes("cntr,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,calendar,calendar");
                mygrid.setColumnIds("$nbsp;,store,name,district,territory,address,city,state,zip,lng,lat,type,create,modify")
                mygrid.setSkin("modern");
                mygrid.setColSorting("na,str,str,str,str,str,str,str,str,str,str,str,date,date")
                mygrid.init();

        //============================================================================================
            mygrid.loadXML("php/get.php");
            myDataProcessor = new dataProcessor("php/update.php");
            //myDataProcessor.enableDebug(true);
            myDataProcessor.enableDataNames(true);
            myDataProcessor.setVerificator(1)
            myDataProcessor.setVerificator(3,checkIfNotZero)
            myDataProcessor.setUpdateMode("off");//available values: cell (default), row, off
            myDataProcessor.defineAction("error",myErrorHandler);
            myDataProcessor.setTransactionMode("GET");
            myDataProcessor.init(mygrid);
Answer posted by Support on Jan 29, 2008 07:20
Please don't use special characters in the ids of columns
    mygrid.setColumnIds("$nbsp;,store
because they will be used for request constructing , and special chars may harm it.

Please beware that while cntr column doesn't require any data from xml, it still takes one column, so if you have

    cntr,ro,ro,ro
and in XML
    <row id="1"><cell>a1</cell><cell>a2</cell><cell>a3</cell></row>

it will render as
    1,a2,a3

the data from first column will be missed, you need to add empty cell tag in xml for cntr column