DHTMLX

Start Building Professional
Web Apps Today

dhtmlxSuite 4.2
dhtmlxScheduler 4.3
dhtmlxVault 2.4
dhtmlxGantt 3.2
dhtmlxSuite 4.2

Categories

Question details Back To List

Question posted by shaffi on May 17, 2009 00:18

open dhtmlx forum

first column is getting hided in grid

hi,
first column is getting hided,by using the following code.can u please provide the solutions for this.If i have more columns than a horizontal scroll has to appear to view the remaing columns for this i did the following code,any how scroller is coming,but the first column is getting hided....please help neede very urgent

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="dhtmlxtoolbar.css">

<script src="dhtmlxcommon.js"></script>
<script src="dhtmlxgrid.js"></script>

<script src="dhtmlxgridcell.js"></script>
<script src="dhtmlxprotobar.js"></script>
<script src="dhtmlxtoolbar.js"></script>
<script src="dhtmlxgrid_pgn.js"></script>
<script src="dhtmlxgrid_filter.js"></script>

<script>
//we'll write script commands here
var mygrid;
function doOnCellEdit(stage,rowId,cellInd,newvalue){
if(stage==0){
alert("0");
return true;
}else if(stage==1){
alert("1");
}else if(stage==2){
alert("value of the :::::::::::: "+newvalue);
}
}

function doInitGrid()
{
var js="<rows><row id='90'><cell>fttttt</cell><cell>fttttt</cell><cell>fttttt</cell><cell>text 2</cell><cell></cell></row><row id='91'><cell>ttttt</cell><cell>fttttt</cell><cell>fttttt</cell><cell>text 2</cell><cell></cell></row><row id='92'><cell>ttttt</cell><cell>fttttt</cell><cell>fttttt</cell><cell>text 2</cell><cell></cell></row><row id='93'><cell>fttttt</cell><cell>fttttt</cell><cell>ttttt</cell><cell>text 2</cell><cell></cell></row></rows>";

mygrid = new dhtmlXGridObject('mygrid_container');

mygrid.setImagePath("imgs/");

mygrid.setHeader("Model,Qty,Price,xxx,uuu");

mygrid.setInitWidths("*,150,150,150,150");

mygrid.setColAlign("left,left,left,right,right");

mygrid.setSkin("light");
mygrid.attachEvent("onEditCell",mygrid.attachEvent("onEditCell",function(stage,rowId,cInd,newvalue){
if(cInd==1 && stage==1)
{
mygrid.editor.obj.onkeypress = function(e)
{
if(this.value.length>=20)
{
return false;
}
}
}
alert("new value "+newvalue);
return true;
}));
mygrid.attachEvent("onRowSelect",doOnRowSelected);

mygrid.setColSorting("str,str,str,int,int");
// mygrid.setHeader("Model,img:[imgs/books.gif]QTY,img:[imgs/book.gif]Price");
mygrid.attachHeader("#text_filter,#text_filter,#text_filter");
//mygrid.enablePagingWT(true,10,3,"recinfoArea");
mygrid.enablePaging(true,5,3,"pagingArea",true,"recinfoArea");
mygrid.init();
// mygrid.enableAlterCss("even","uneven");
// mygrid.enableLightMouseNavigation(true);
//mygrid.enableKeyboardSupport(true);
mygrid.enableTooltips("true,true,true,true,true");

//mygrid.load(js,"xml");
//mygrid.loadXMLString(js);
mygrid.parse(js);

// mygrid.parse(js,"xml");

// mygrid=mygrid.destructor();
/*mygrid.enableMultiline(true)
mygrid.init();
mygrid.loadXML("grid.xml",function(){
mygrid.forEachRow(function(id){
mygrid.cells(id,2).cell.className='not_m_line';
})
});*/
}

function addRow(){
var newId = (new Date()).valueOf()
mygrid.addRow(newId,"",mygrid.getRowsNum())
mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true);
doInitGrid();
}
function removeRow(){
var selId = mygrid.getSelectedId()
mygrid.deleteRow(selId);
}

function doOnRowSelected(rowID,celInd){
// alert("Selected row ID is "+rowID+"\nUser clicked cell with index "+celInd);
}

function add()
{
var id =mygrid.cells2(mygrid.getRowIndex(mygrid.getSelectedId()),0).getValue()
alert("id "+id);
alert("333 "+mygrid.getSelectedId()+" callll"+mygrid.cells2(mygrid.getRowIndex(mygrid.getSelectedId()),2).getValue());
mygrid = new dhtmlXGridObject('mygrid_container');
mygrid.addRow(123,"text1,text2",1);
// mygrid.deleteRow(mygrid.getRowId(0));

}
function call()
{
alert("callling");
i=90;
j=0
mygrid.cells(i,j).setValue("shaffiii");

}
</script>

<body onload="doInitGrid()">
<select onchange="mygrid.setSkin(this.value)">
<option value="sbdark" selected>sb dark
<option value="gray">gray
<option value="mt">mt
<option value="xp">xp
<option value="clear">clear
<option value="modern">modern
<option value="light" selected>light
</select>

</div>

<div id="pagingArea" style="width:100%;"></div>
<div id="recinfoArea" style="width:100%;"></div>
<fieldset style="width:600px">
<legend>Filter</legend>
Column
<select id='a10'>
<option value='0'>0</option><option value='1'>1</option><option value='2'>2</option>
</select>
Mask
<input type="text" name="a12" value="" id="a12">
<input type="button" name="a11" value="Filter" id="a11" onclick='mygrid.filterBy(document.getElementById("a10").value,document.getElementById("a12").value);'>

</fieldset>

<table width="600">
<tr>
<td width="50%" valign="top">
<div id="mygrid_container" style="width:100%;height:150px;"></div>
</td> </tr>
</table>

//************************************

</BODY>
</HTML>

Answer posted by Support on May 18, 2009 03:28

>>mygrid.setInitWidths("*,150,150,150,150");�
When * as size used, it means that column will be resized to prevent horizontal scroll, which may result in full column hiding , if there is no enough space.�

You can fix problem in two ways
a) use setColumnMinWidth to define min width for the first column
or�
b) use�
mygrid.setInitWidths("150,150,150,150,150");�
mygrid.enableAutoWidth(true);

In such case, instead of decreasing column size, total width of grid will be increased to show all data without scroll.�