Cell column type does not work

I am trying to make the first column of my grid read only and one as txt; but all columns behave like ed; I can edit my first column; let me know where I am making the mistake thanks

here is the code

   <div id="grid_here" style="width:700px; height:500px;"></div>
    <input type="button" name="some_name" value="update" onclick="dp.sendData();">

    
   <div style="float:left" id="pagingArea"> </div>
    <script type="text/javascript" charset="utf-8">
        var grid = new dhtmlXGridObject("grid_here");
        grid.setImagePath("../../dhtmlx/dhtmlxGrid/codebase/imgs/");
         grid.setInitWidths("50,120,120,*");grid.setColAlign("left,left,left,left");grid.setColTypes("ro,ed,ed,txt");grid.setHeader("id,name,contact,phone2");grid.setColSorting("int,str, str,str");	grid.attachHeader("#numeric_filter,#text_filter,#text_filter,#text_filter");
       
        
        grid.enablePaging(true,10,5,"pagingArea");
         grid.setSkin("dhx_skyblue");
        grid.setPagingSkin("toolbar", "dhx_skyblue");
      // grid.enableMultiline(true);

        // grid.setInitWidths("100,100,*");
       
        grid.init();
        grid.load("/mydata/orgdata");
        dp = new dataProcessor("/mydata/orgdbaction/"); dp.setUpdateMode("off");
dp.init(grid);

 function addRow(){
    var newId = (new Date()).valueOf()
    grid.addRow(newId,"",grid.getRowsNum())
    grid.selectRow(grid.getRowIndex(newId),"", 1);
}
function removeRow(){
    var selId = grid.getSelectedId()
    grid.deleteRow(selId);
}
    </script>
   
    <br/>
        <button onclick="addRow()">Add Row</button>   <button onclick="removeRow()">Remove Row</button>

To resolve the issue put your
grid.setHeader(“id,name,contact,phone2”);

method before the
grid.setInitWidths(“50,120,120,*”);