How to auto adjust grid size when click browser's maxmum btn

Suite and Optimus Suite 5
#1

Hello:

I have a grid in the screen, I want to auto adjust grid size like other components like tabbar and layout when the user click the browser window’s maxmum button. attached the pic and my codes. I can not find out what is wrong in my codes. please help me.

Thanks !!!

===========================

function initSearchGrid(){
positionGrid = new dhtmlXGridObject(‘positionGridBoxId’);
positionGrid.setImagePath(imgPath);

positionGrid.enableMultiselect("true");
[b]positionGrid.enableAutoWidth(true);[/b]
positionGrid.enableLightMouseNavigation(true);
positionGrid.setDateFormat("%m/%d/%Y");
positionGrid.setSkin(skin);
positionGrid.init();
positionGrid.load("position_grid_with_conf.xml");
//grid.setStyle(ss_header, ss_grid, ss_selCell, ss_selRow);
positionGrid.setStyle("background-color:navy;color:white; font-weight:bold;", "","color:red;", "");

}
code.rar (4.84 KB)
grid_issue.JPG1194×625 95.1 KB

#2

Try to use grid columns width in percents:

mygrid.setInitWidthsP(“50,40,10”);

#3

Hello Olga

I did as your advice. it did not work also. the issue is as same as before.
my code is like below:

positionGrid.setInitWidthsP(“10,10,10,10,10,10,10,5,5,5,5,5,5”);

#4

Dear Olga

Do you have any update for this issue or there is no solution for it?

#5

Are you loading grid configuration from XML? Can you provide example of position_grid_with_conf.xml?

#6

Dear Olga

I have tried to load grid config using scripts and xml. The issue is same.
1)Using script to load grid config and using xml to feed grid data. please refer to code1.jar(mypage7.html + position_grid.xml)

function initSearchGrid(){
positionGrid = new dhtmlXGridObject(‘positionGridBoxId’);
positionGrid.setImagePath(imgPath);

positionGrid.setHeader("<div style='text-align:center;color:red;'>Position_Id*</div>,<div style='text-align:center;color:red;'>Position Name Short Caption*</div>,<div style='text-align:center;color:red;'>Position Code*</div>,<div style='text-align:center;color:red;'>Position Name*</div>,<div style='text-align:center;'>Position Type Code</div>,<div style='text-align:center;'>Parent Position</div>,<div style='text-align:center;color:red;'>Internal Division*</div>,<div style='text-align:center;'>Org Name</div>,<div style='text-align:center;'>Start Date</div>,<div style='text-align:center;'>End Date</div>,<div style='text-align:center;'>Version</div>,<div style='text-align:center;'>Position Name Long Caption</div>,<div style='text-align:center;'>Default_CaptionId(Internal Use)</div>");
positionGrid.attachHeader("#connector_text_filter,#rspan,#connector_text_filter,#connector_text_filter,#rspan,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_text_filter,#rspan,#rspan,#rspan");
positionGrid.setColumnHidden(0,true);
positionGrid.setColumnHidden(10,true);
positionGrid.setColumnHidden(12,true);
var positionGridCombo = positionGrid.getCombo(4);
positionGridCombo.put("","--None--");
positionGrid.setInitWidths("*,*,*,*,*,*,*,*,*,*,*,*,*");
positionGrid.setColTypes("ro,ed,ed,ed,co,ed,ed,ro,dhxCalendar,dhxCalendar,ro,ed,ed");
positionGrid.setColSorting("str,str,str,str,str,str,str,str,date,date,int,str,str");
positionGrid.setColAlign("left,left,left,left,left,left,left,left,center,center,right,left,left");
positionGrid.enableMultiselect("true");
positionGrid.enableAutoWidth(true);
positionGrid.enableLightMouseNavigation(true);

positionGrid.setDateFormat("%m/%d/%Y");
positionGrid.setSkin(skin);
positionGrid.init();
positionGrid.setEditable(true);
positionGrid.load("position_grid.xml");

......

}

=================

2)Using script and xml to load grid conf, please refer to code2.jar(mypage11.html + position_grid_with_conf.xml)

======== script part:============
function initSearchGrid(){
positionGrid = new dhtmlXGridObject(‘positionGridBoxId’);
positionGrid.setImagePath(imgPath);

positionGrid.enableMultiselect("true");
positionGrid.enableAutoWidth(true);
positionGrid.enableLightMouseNavigation(true);
positionGrid.setDateFormat("%m/%d/%Y");
positionGrid.setSkin(skin);
positionGrid.init();
positionGrid.load("position_grid_with_conf.xml");
//grid.setStyle(ss_header, ss_grid, ss_selCell, ss_selRow);
positionGrid.setStyle("background-color:navy;color:white; font-weight:bold;", "","color:red;", "");

}

============ xml part:=============
code2.rar (4.84 KB)
code1.rar (4.66 KB)

#7

This is how I keep the grid sized to the window.

HTH!

name
#8

Can you please provide complete demo including files which you are using to initialize grid?
You can send such example to support.dhtmlx.com/

#9

Dear Olga

I have new findings for the issue as below, to simplify and easy understand my problem, I am using your demo code in your product suit as my base code.
1)if using grid independently, the grid work fine. please refer to the code “07_init_grid_ok.rar” which comes from “…\dhtmlxSuite2.6\dhtmlxGrid\samples\12_initialization_loading\07_init_grid.html”
I did change as below:

2)if using grid inside tabbar, the issue will be happened. please refer to the code “01_grid_tabbar.rar” which comes from “…\dhtmlxSuite2.6\dhtmlxTabbar\samples\05_components\01_grid_inside.html”
I did change as below:

3)if using grid inside layout, the issue will be happened sometime in IE
I did change as below:

..... dhxLayout = new dhtmlXLayoutObject("parentId", [b]"2E"[/b]);

please help to check what is wrong in these codes.

Thanks
02_grid_layout.rar (1.86 KB)
01_grid_tabbar.rar (1.85 KB)
07_init_grid_ok.rar (1.95 KB)

#10

In case of Tabbar add following code after Tabbar initialization:

dhtmlxEvent(window, "resize", function(){ tabbar.adjustOuterSize() });

In case of Layout add following code after Layout initialization:

dhtmlxEvent(window, "resize", function(){dhxLayout.setSizes()});
#11

Dear Olga

Now my codes work fine.

Thank you very much!!! :smiley: