I have a grid attached to bottom dhtmlxLayout cell and some of my columns are calendar type. The problem is that when i click on the cells which are on the bottom rows of the grid the div element of the calendar is partly hidden. Only the upper part is visible depending how much space there is available to the bottom of the screen.
How can i fix this?
10x in advance.
any solution?
What version of dhtmlxGrid are you using? Can you provide complete demo where we can reproduce it?
Here is the function that loads the grid.
// ------------- Зарежда таблицата със следите на автомобилите ------------
function initTraceGrid()
{
var tailColInd = 1,
dateColInd = 2,
timeColInd = 3,
parkingColInd = 4,
colorColInd = 5,
widthColInd = 6,
opacityColInd = 7,
stopCheckColInd = 8,
stopsColInd = 9,
kmColInd = 10,
maxSpeedColInd = 11,
avgSpeedColInd = 12,
traceColInd = 13;
var color = "",
width = "",
opacity = "";
tracesGrid = layOut.cells("c").view("tracesGrid").attachGrid();
tracesGrid.setImagePath(dhtmlXGridImagePath);
tracesGrid.setHeader("Автомобил,Опашка,От дата/Час,#cspan,От паркинг,Цвят,Дебелина,Прозрачност,Престои,#cspan,Измн км,Mакс км/ч.,Срдн км/ч.,Следа");
//tracesGrid.attachFooter("<div align='center'>Отметни 'Опашка' за начало на следа от текущата позиция</div>,#cspan,#cspan,#cspan,#cspan,#cspan");
tracesGrid.setInitWidths("*,50,70,70,70,*,60,80,30,30,70,80,90,50");
tracesGrid.setColAlign("left,center,left,left,center,left,right,right,center,left,right,right,right,center");
tracesGrid.setSkin("dhx_skyblue");
tracesGrid.setColTypes("ro,ch,dhxCalendar,ed,ch,cp,coro,coro,ch,ro,ro,ro,ro,ch");
tracesGrid.enableDragAndDrop(true);
var footerDiv = "<div align='center'><a style='text-decoration:none; color:red' href='javascript:void(0)' onclick=\"layOut.cells('c').collapse()\">Затвори</a> </div>";
tracesGrid.attachFooter(footerDiv + ",#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan");
tracesGrid.setSizes();
tracesGrid.init();
tracesGrid.setDateFormat("%Y-%m-%d");
tracesGrid.attachEvent("onCheck", function(rId, cInd, state)
{
if(cInd == tailColInd) //Избрана е опция за опашка от текущата поцизия на превозното средство
{
if(state == 1)
{
tracesGrid.setCellExcellType(rId,dateColInd,"ro");
tracesGrid.setCellExcellType(rId,timeColInd,"ro");
tracesGrid.setCellExcellType(rId,parkingColInd,"img");
tracesGrid.setCellExcellType(rId,stopCheckColInd,"img");
tracesGrid.setCellExcellType(rId,traceColInd,"img");
tracesGrid.cells(rId,dateColInd).setValue(getFormatedDate());
tracesGrid.cells(rId,timeColInd).setValue(getFormatedTime());
tracesGrid.setCellTextStyle(rId,dateColInd,"color:green;font-weight:bold");
tracesGrid.setCellTextStyle(rId,timeColInd,"color:green;font-weight:bold");
tracesGrid.cells(rId,parkingColInd).setValue("/NipoElectronics2/images/red_x.png");
tracesGrid.cells(rId,stopCheckColInd).setValue("/NipoElectronics2/images/red_x.png");
tracesGrid.cells(rId,traceColInd).setValue("/NipoElectronics2/images/check3.png");
color = tracesGrid.cells(rId,colorColInd).getValue();
width = tracesGrid.cells(rId,widthColInd).getValue();
opacity = tracesGrid.cells(rId,opacityColInd).getValue();
vehiclesData.get(rId).prepareTrace(color, width, opacity);
}
else
{
tracesGrid.setCellExcellType(rId,dateColInd,"dhxCalendar");
tracesGrid.setCellExcellType(rId,timeColInd,"ed");
tracesGrid.setCellExcellType(rId,parkingColInd,"ch");
tracesGrid.setCellExcellType(rId,stopCheckColInd,"ch");
tracesGrid.setCellExcellType(rId,traceColInd,"ch");
tracesGrid.cells(rId,dateColInd).setValue(getFormatedDate());
tracesGrid.cells(rId,timeColInd).setValue("00:00:01");
tracesGrid.cells(rId,parkingColInd).setValue("0");
tracesGrid.cells(rId,stopCheckColInd).setValue("0");
tracesGrid.cells(rId,traceColInd).setValue("0");
tracesGrid.cells(rId,kmColInd).setValue(" ");
tracesGrid.cells(rId,maxSpeedColInd).setValue(" ");
tracesGrid.cells(rId,avgSpeedColInd).setValue(" ");
tracesGrid.setCellTextStyle(rId,dateColInd,"color:black;font-weight:normal");
tracesGrid.setCellTextStyle(rId,timeColInd,"color:black;font-weight:normal");
vehiclesData.get(rId).removeTrace(map);
}
}
else if(cInd == parkingColInd) //Избрана е опция за следа от последното спиране на автомобила до момента
{
if(state == 1)
{
if(vehiclesData.get(rId).getEngine() == "изключен")
{
tracesGrid.cells(rId,parkingColInd).setValue("0");
alert("В момента автомобила е с изключен двигател!");
}
else
{
tracesGrid.setCellExcellType(rId,dateColInd,"ro");
tracesGrid.setCellExcellType(rId,timeColInd,"ro");
tracesGrid.setCellExcellType(rId,tailColInd,"img");
tracesGrid.setCellExcellType(rId,stopCheckColInd,"img");
tracesGrid.setCellExcellType(rId,traceColInd,"img");
tracesGrid.cells(rId,dateColInd).setValue("");
tracesGrid.cells(rId,timeColInd).setValue("");
tracesGrid.setCellTextStyle(rId,dateColInd,"color:red;font-weight:bold");
tracesGrid.setCellTextStyle(rId,timeColInd,"color:red;font-weight:bold");
tracesGrid.cells(rId,tailColInd).setValue("/NipoElectronics2/images/check3.png");
tracesGrid.cells(rId,stopCheckColInd).setValue("/NipoElectronics2/images/red_x.png");
tracesGrid.cells(rId,traceColInd).setValue("/NipoElectronics2/images/red_x.png");
color = tracesGrid.cells(rId,colorColInd).getValue();
width = tracesGrid.cells(rId,widthColInd).getValue();
opacity = tracesGrid.cells(rId,opacityColInd).getValue();
}
}
else
{
tracesGrid.setCellExcellType(rId,tailColInd,"ch");
tracesGrid.setCellExcellType(rId,dateColInd,"dhxCalendar");
tracesGrid.setCellExcellType(rId,timeColInd,"ed");
tracesGrid.setCellExcellType(rId,stopCheckColInd,"ch");
tracesGrid.setCellExcellType(rId,traceColInd,"ch");
tracesGrid.cells(rId,tailColInd).setValue("0");
tracesGrid.cells(rId,dateColInd).setValue(getFormatedDate());
tracesGrid.cells(rId,timeColInd).setValue("00:00:01");
tracesGrid.cells(rId,stopCheckColInd).setValue("0");
tracesGrid.cells(rId,traceColInd).setValue("0");
tracesGrid.cells(rId,kmColInd).setValue(" ");
tracesGrid.cells(rId,maxSpeedColInd).setValue(" ");
tracesGrid.cells(rId,avgSpeedColInd).setValue(" ");
tracesGrid.setCellTextStyle(rId,dateColInd,"color:black;font-weight:normal");
tracesGrid.setCellTextStyle(rId,timeColInd,"color:black;font-weight:normal");
}
}
else if(cInd == traceColInd) //Избрана е опция за следа от дадена дата и час до текущото състояние на автомобила
{
if(state == 1)
{
var beginDate = tracesGrid.cells(rId, dateColInd).getValue();
var beginTime = tracesGrid.cells(rId, timeColInd).getValue();
var stops = tracesGrid.cells(rId, stopCheckColInd).getValue();
tracesGrid.setCellExcellType(rId,dateColInd,"ro");
tracesGrid.setCellExcellType(rId,timeColInd,"ro");
tracesGrid.setCellExcellType(rId,tailColInd,"img");
tracesGrid.setCellExcellType(rId,stopCheckColInd,"img");
tracesGrid.setCellExcellType(rId,parkingColInd,"img");
tracesGrid.setCellExcellType(rId,traceColInd,"img");
tracesGrid.setCellTextStyle(rId,dateColInd,"color:green;font-weight:bold;");
tracesGrid.setCellTextStyle(rId,timeColInd,"color:green;font-weight:bold;");
tracesGrid.cells(rId,tailColInd).setValue("/NipoElectronics2/images/check3.png");
tracesGrid.cells(rId,parkingColInd).setValue("/NipoElectronics2/images/red_x.png");
tracesGrid.cells(rId,traceColInd).setValue("/NipoElectronics2/images/indicators/loading_indicator_3.gif");
if(stops == "0") tracesGrid.cells(rId,stopCheckColInd).setValue("/NipoElectronics2/images/red_x.png");
else tracesGrid.cells(rId,stopCheckColInd).setValue("/NipoElectronics2/images/check3.png");
color = tracesGrid.cells(rId,colorColInd).getValue();
width = tracesGrid.cells(rId,widthColInd).getValue();
opacity = tracesGrid.cells(rId,opacityColInd).getValue();
vehiclesData.get(rId).loadTraceFrom(beginDate, beginTime, stops, 0, color, width, opacity, map, function()
{
tracesGrid.setCellExcellType(rId,traceColInd,"ch");
tracesGrid.cells(rId,traceColInd).setValue("1");
var maxSpeed = vehiclesData.get(rId).getTraceMaxSpeed();
var km = vehiclesData.get(rId).getTraceKm();
tracesGrid.cells(rId,kmColInd).setValue(km.toFixed(3));
tracesGrid.cells(rId,maxSpeedColInd).setValue(maxSpeed);
});
}
else
{
tracesGrid.setCellExcellType(rId,tailColInd,"ch");
tracesGrid.setCellExcellType(rId,dateColInd,"dhxCalendar");
tracesGrid.setCellExcellType(rId,timeColInd,"ed");
tracesGrid.setCellExcellType(rId,stopCheckColInd,"ch");
tracesGrid.setCellExcellType(rId,parkingColInd,"ch");
tracesGrid.cells(rId,tailColInd).setValue("0");
tracesGrid.cells(rId,dateColInd).setValue(getFormatedDate());
tracesGrid.cells(rId,timeColInd).setValue("00:00:01");
tracesGrid.cells(rId,stopCheckColInd).setValue("0");
tracesGrid.cells(rId,parkingColInd).setValue("0");
tracesGrid.cells(rId,kmColInd).setValue(" ");
tracesGrid.cells(rId,maxSpeedColInd).setValue(" ");
tracesGrid.cells(rId,avgSpeedColInd).setValue(" ");
tracesGrid.cells(rId,stopsColInd).setValue(" ");
tracesGrid.setCellTextStyle(rId,dateColInd,"color:black;font-weight:normal");
tracesGrid.setCellTextStyle(rId,timeColInd,"color:black;font-weight:normal");
vehiclesData.get(rId).removeTrace(map);
}
}
});
var widthCombo=tracesGrid.getCombo(6);
for(var i=1;i<=5;i++) widthCombo.put(i,i);
var opacityCombo = tracesGrid.getCombo(7);
opacityCombo.put(0.0,"Призрак");
opacityCombo.put(0.1,"Ниво 1");
opacityCombo.put(0.2,"Ниво 2");
opacityCombo.put(0.3,"Ниво 3");
opacityCombo.put(0.4,"Ниво 4");
opacityCombo.put(0.5,"Нормална");
opacityCombo.put(0.6,"Ниво 6");
opacityCombo.put(0.7,"Ниво 7");
opacityCombo.put(0.8,"Ниво 8");
opacityCombo.put(0.9,"Ниво 9");
opacityCombo.put(10,"Плътна");
}
Here is the picture:
any solution?
pld tell me how to fix this problem
Hello,
Couldn’t you lpease provide a complete demo. It will help to resolve this issue in shorter period of time.
Hi,
I also have this problem. Don’t know how is it happened in IE.
<link rel="stylesheet" type="text/css" href="../../codebase25/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase25/ext/dhtmlxgrid_pgn_bricks.css">
<link rel="stylesheet" type="text/css" href="../../codebase25/ext/dhtmlxgrid_dhx_skyblue.css">
<script src="../../codebase25/dhtmlxcommon.js"></script>
<script src="../../codebase25/dhtmlxgrid.js"></script>
<script src="../../codebase25/dhtmlxgridcell.js"></script>
<script src="../../codebase25/ext/dhtmlxgrid_pgn.js"></script>
<script src="../../codebase25/ext/dhtmlxgrid_srnd.js"></script>
<script src="../../codebase25/dhtmlxdataprocessor.js"></script>
<script src="../../codebase/ext/dhtmlxgrid_nxml.js"></script>
<script>
function loadGrid(){
grid = new dhtmlXGridObject('grid');
grid.setImagePath("../../common/codebase25/imgs/");
grid.setHeader("title,title,title,title,title");
grid.setInitWidths("100,100,100,100,100")
grid.setColAlign("left,left,left,left,left")
grid.setColTypes("ed,cp,ed,cp,ed");
grid.setColSorting("str,str,str,str,str");
grid.enableCollSpan(true);
grid.enableEditEvents(true, true, true);
grid.setSerializationLevel(true,false,false,true,true,true);
grid.csv.row="\t";
grid.enableCSVAutoID(false);
grid.enableAutoHeight(true);
grid.init();
}
</script>
<body onload="loadGrid()">
<div id="grid"></div>
</body>
Need response.
Unfortunately the issue cannot be reconstructed.
What version of dhtmlxGrid do you have?
Please, provide a complete demo to reconstruct the issue.
Hello,
Thanks for your response. This issue was causing the designers css styles sheet. this could not happen when you follow the documentation of dhtmlx. I apologize for the post. It was a mistake by the designer and got it restored by replacing styles classes.
Thanks.