Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Euler Sánchez on Apr 28, 2009 14:07
open dhtmlx forum
pop-up inside a dhtmlxGrid

Hi, its possible to add a pop-up inside a dhtmlxGrid? or a dhtmlxWindow component? i mean, into a grid put one column of links that open new windows in order to to display websites, images and other content in a beautiful way, i.e, using ligth box or dhtmlxWindow effects??

thanks in advance for your reply!!

eulerss
Answer posted by Support on Apr 28, 2009 14:27
There is no any special support for such scenario, but grid allows to execute any custom kind reaction of specified cell clicking ( through onRowSelect event or through custom HTML elements|events directly inside the cell ) , which can include opening of custom windows.

Please inform if you need a sample of such functionality.
Answer posted on Apr 28, 2009 14:43

>which can include opening of custom windows.

i open a new window with:

"<cell type=\"link\"><![CDATA[".$var1."^http://www.google.com^_blank]]></cell>";

that's the way that you are talking about? If not, can you send me a simple sample with the funcionality?

Thanks in advance foy your quick replay!!

Answer posted by dhxSupport on Apr 29, 2009 01:06

To create dhtmlxWindow by clicking on some column you can use “onRowSelect” event:

//creating dhtmlxWindow
dhxWins = new dhtmlXWindows();
dhxWins.setImagePath("dhtmlxWindows/codebase/imgs/");
…  
mygrid.attachEvent("onRowSelect",function(rowId,cellIndex){
//creating window of the dhtmlxWindows.
var w1 = dhxWins.createWindow("w1", 150, 10, 700, 500);

w1.setText(“new Window”);

w1.attachURL("http://www.google.com",true);

  … 
});

Answer posted on Apr 30, 2009 15:12
hi, here's my code, a window appears with the URL but 'm not able tu close that windows.

thanks for your help

function doOnRowSelected(rowID,celInd){

        if (celInd==8){
        alert("Selected row ID is "+rowID+"\nUser clicked cell with index "+celInd);
        //creating dhtmlxWindow
        dhxWins = new dhtmlXWindows();
        dhxWins.setImagePath("./dhtmlxWindows/dhtmlxWindows/codebase/imgs/");
        mygrid.attachEvent("onRowSelect",function(rowID,cellIndex){
        w1 = dhxWins.createWindow("w1", 150, 150,700, 700);
        w1.setText("Choose the Parameters for the Report");
        w1.attachURL("http://www.google.com");

        }
)};


Answer posted by Alex (support) on May 04, 2009 08:39

Hello,

When is  doOnRowSelected called ?

It seems that you defined several onRowSelect handlers. Please, try to use the following approach - possibly it'll fix the problem

var dhxWins = new dhtmlXWindows();

grid.attachEvent("onRowSelect",function(rowID,celInd){
 
  if (celInd==8){
  alert("Selected row ID is "+rowID+"\nUser clicked cell with index "+celInd);
  //creating dhtmlxWindow
  w1 = dhxWins.createWindow("w1", 150, 150,700, 700);
  w1.setText("Choose the Parameters for the Report");
  w1.attachURL("http://www.google.com");
  }
});



Answer posted on May 06, 2009 08:21

>>When is  doOnRowSelected called ?

here

mygrid.attachEvent("onRowSelect",doOnRowSelected);

i used your sample code, but it doesnt work, here is the complete code

<script>
   mygrid = new dhtmlXGridObject('mygrid_container');
   mygrid.setImagePath("./dhtmlxGrid_pro_v16_80512/dhtmlxGrid/codebase/imgs/");
   mygrid.setHeader("a, b, c, d, e, f, g, h, i");
   mygrid.setInitWidths("*,*,*,*,*,*,*,*,*");
   mygrid.setColAlign("left,right,right,center,center,right,right,center,center")
   mygrid.setSkin("light");
   mygrid.setColSorting("str,int,int,str,str,price,int,int,int");
   mygrid.setColTypes("link,ed,date,str,str,price,price,link,link");
   mygrid.attachEvent("onRowSelect",doOnRowSelected);
   mygrid.enablePaging(true,10,5,"pagingArea",false,"infoArea");
   mygrid.init();
   mygrid.loadXML("./loadXML.php");

function doOnRowSelected(rowID,celInd){

        var dhxWins = new dhtmlXWindows();
        dhxWins.setImagePath("./dhtmlxWindows/dhtmlxWindows/codebase/imgs/");
        mygrid.attachEvent("onRowSelect",function(rowID,cellInd){
  if (celInd==8){

        w1 = dhxWins.createWindow("w1", 150, 150,700, 700);
        w1.setText("Choose the Parameters for the Report");
        w1.attachURL("http://www.google.com");

    }
)};
}

</script>

thanks for your time and for your help!!

Answer posted by Alex (support) on May 06, 2009 08:40

You have set 2 onRowSelect event handlers. Please, try to set one:

...

var dhxWins = new dhtmlXWindows();
dhxWins.setImagePath("./dhtmlxWindows/dhtmlxWindows/codebase/imgs/");

function doOnRowSelected(rowID,celInd){

  if (celInd==8){

  w1 = dhxWins.createWindow("w1", 150, 150,700, 700);
  w1.setText("Choose the Parameters for the Report");
  w1.attachURL("http://www.google.com");

  }

}

Answer posted on May 06, 2009 09:26

hi, thanks for your quick reply, i was wrong with my code (i was defining several times onRowSelect, like you said) a window appears when i clicked celInd==8, but i'm having the same problem, i mean, i cannot close that windows (the window appear like a div), many thanks for your last reply!!

var dhxWins = new dhtmlXWindows();
dhxWins.setImagePath("./dhtmlxWindows/dhtmlxWindows/codebase/imgs/");

function doOnRowSelected(rowID,celInd){

        if (celInd==8){
        w1 = dhxWins.createWindow("w1", 150, 150,700, 700);
        w1.setText("Choose the Parameters for the Report");
        w1.attachURL("http://www.google.com");

    }

}

Answer posted by Alex (support) on May 07, 2009 01:14

Hello, 

please, provide the complete sample to reproduce the issue. Locally the same code works correctly.

Answer posted on May 07, 2009 07:11

hi, here is the complete issue

<html>
<head>
<title>Data Grid</title>
</head>

<script src="./dhtmlxGrid_pro_v16/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script src="./dhtmlxGrid_pro_v16/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script src="./dhtmlxGrid_pro_v16/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script src="./dhtmlxGrid_pro_v16/dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
<script src="./dhtmlxGrid_pro_v16/dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
<script src="./dhtmlxGrid_pro_v16/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_link.js"></script>
<script src="./dhtmlxGrid_pro_v16/dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn.js"></script>
<link rel="STYLESHEET" type="text/css" href="./dhtmlxGrid_pro_v16/dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="./dhtmlxGrid_pro_v16/dhtmlxGrid/codebase/dhtmlxgrid_pgn_bricks.css">
<script src="./dhtmlxWindows/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script src="./dhtmlxWindows/dhtmlxWindows/codebase/dhtmlxcommon.js"></script>

<link rel="STYLESHEET" type="text/css" href="./dhtmlxWindows/dhtmlxWindows/codebase/dhtmlxwindows.css">

<body>

<div id="mygrid_container" style="width:800px;height:250px;"></div> 
<div><span id="pagingArea"></span> <span id="infoArea"></span></div>
<script>
   mygrid = new dhtmlXGridObject('mygrid_container');
   mygrid.setImagePath("./dhtmlxGrid_pro_v16_80512/dhtmlxGrid/codebase/imgs/");
   mygrid.setHeader("Orden de <br>Compra, Pedido <br>Helvex, Fecha de captura, Estatus del pedido, Tipo Pedido, Total <br> Bruto, Total Neto, Notas, Envios");
   mygrid.setInitWidths("*,*,*,*,*,*,*,*,*");
   mygrid.setColAlign("left,right,right,center,center,right,right,center,center")
   mygrid.setSkin("light");
   mygrid.setColSorting("str,int,int,str,str,price,int,int,int");
   mygrid.setColTypes("link,ed,date,str,str,price,price,link,link");
   mygrid.attachEvent("onRowSelect",doOnRowSelected);
   mygrid.enablePaging(true,10,5,"pagingArea",false,"infoArea"); 

   mygrid.init();
   mygrid.loadXML("./load.php");

var dhxWins = new dhtmlXWindows();
dhxWins.setImagePath("./dhtmlxWindows/dhtmlxWindows/codebase/imgs/");

function doOnRowSelected(rowID,celInd){
        if (celInd==8){
        w1 = dhxWins.createWindow("w1", 150, 150,700, 700);
        w1.setText("Choose the Parameters for the Report");
        w1.attachURL("http://www.google.com");

    }

}

</script>

</body>
</html>

and my load.php is correct when i test it, cell type is ro

<cell type=\"ro\"><![CDATA[<a href=\"http://www.google.com\]]>http://www.google.com\">Show</a>]]></cell>

thanks again!!

Answer posted by Alex (support) on May 08, 2009 07:18

Hello, 

the code is correct. The code works correctly locally. But one thing... 

Why did you use <cell type=\"ro\"><![CDATA[<a href=\"http://www.google.com\">Show</a>]]></cell> ?

The window url is set by  w1.attachURL("http://www.google.com");

Try to download the latest window package and use its libraries. If the issue still persists, please, provide the complete demo (with used js an css files).

Answer posted on May 25, 2009 11:09

hi, i'm so sorry but i was cheking some things in my work, that's the way i didn't anwer before, i resolved the problem with these line

 

<link rel="STYLESHEET" type="text/css" href="./dhtmlxWindows/dhtmlxWindows/codebase/dhtmlxwindows.css">

it seems that on window object i must indicated the skin, it was my mistake

thanks a lot for your support dhtmlx team!!