Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Harish Vembu on Aug 19, 2009 15:33
open dhtmlx forum
Attaching dhtmlx gridbox to a Modal Window


Hello All,

I have a problem with attaching a grid to a Modal window. I followed the snippet provided in your documentation as per the
URL : http://dhtmlx.com/docs/products/docsExplorer/index.shtml?node=dhtmlxgrid&type=smpl

it did not work as expected. May be I am missing something here.

Copy of my index.jsp/html page - Basically its grid with data populated by JSON object and then to be attached to the modal window.

When I try attaching the below way it does not display the grid nor the modal window properly.


Code ::

#############################################################################

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title>Skinning</title>
    <link rel="STYLESHEET" type="text/css" href="dhtmlxgrid.css">
    <link rel="STYLESHEET" type="text/css" href="dhtmlxgrid_skins.css">
<link rel="STYLESHEET" type="text/css" href="dhtmlxwindows.css">

    <script src="dhtmlxcommon.js"></script>
    <script src="dhtmlxgrid.js"></script>
    <script src="dhtmlxgridcell.js"></script>
<script src="dhtmlxgrid_filter.js"></script>
<script src="dhtmlxwindows.js"></script>

</head>

<script>

data_val={
rows:[
{ rows_id:101,
data:[
"100",
"A Time to Kill",
"John Grisham",
"12.99",
"25",
"05/01/1998"
] },
{ rows_id:102,
data:[
"1000",
"Blood and Smoke",
"Stephen King",
"0",
"24",
"01/01/2000"
] },
{ rows_id:103,
data:[
"-200",
"The Rainmaker",
"John Grisham",
"7.99",
"24",
"12/01/2001"
] },

{ rows_id:104,
data:[
"-200",
"The Green Mile",
"Stephen King",
"11.10",
"24",
"01/01/1992"
] }
]

}

    function doOnLoad(){


var dhxWins = new dhtmlXWindows();

var win1 = dhxWins.createWindow("win1",10,10,1000,80);

dhxWins.windows('win1').setModal(true);



         mygrid = new dhtmlXGridObject('gridbox');
        
        mygrid.setInitWidths("120,150,*,80,80,150");
        mygrid.setColAlign("left,left,center,right,right,center");
        mygrid.setColTypes("dyn,ed,txt,price,coro,ro");
        mygrid.setColSorting("int,str,str,int,str,na")
        mygrid.getCombo(5).put(1,"1 hour");
        mygrid.getCombo(5).put(12,"12 hours");
        mygrid.getCombo(5).put(24,"24 hours");
        mygrid.getCombo(5).put(48,"2 Days");
        mygrid.setSkin("light");
        mygrid.init();



/*loading from json*/
mygrid.load("data_val.json","json");
/*loading from JSON object*/
mygrid.parse(data_val,"json");

        //mygrid.loadXML("grid_big.xml");
//mygrid.loadXML("grid.xml");

//var grid1 = win1.attachGrid('mygrid');

var grid1 = win1.attachGrid();

    }
</script>
<body onload="doOnLoad()" style="overflow:hidden">
<link rel='STYLESHEET' type='text/css' href='style.css'>
<table cellspacing="0" cellpadding="0" class="sample_header" border="0">
    <tr valign="middle">
        <!-- COMPONENT ICON -->
        <td width="40" align="center"><img src="dhtmlxgrid_icon.gif" border="0"></td>
        <!-- COMPONENT NAME -->
        <td width="150" align="left" nowrap="true">Sample: dhtmlxGrid</td>
        
        <!-- CLOSE BUTTON -->
        <td width="50"><div class="sample_close"><a href="javascript:void(0);" onclick="self.close();"><img src="sample_close.gif" width="14" height="14" border="0" alt="X"></a></div></td>
    </tr>
</table>

    <div style="margin:20px;">

    Choose skin to apply:
    <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>
<br>
<br>

    <div id="gridbox" width="100%" height="500px" style="background-color:white;"></div>


</body>
</html>

##############################################################################


Note : Without the attaching grid to modal window it works perfectly.


Please advise on what could be missing or wrong here as I tried many variations but nothing seems to work.



Many Thanks in Advance


Harish
Answer posted by Alex (support) on Aug 20, 2009 02:34

Hello, 

There are a lot of issues in the provided code. The main of them is that setHeader method isn't missed here. 

We have attached the correct sample

Attachments (1)
1250760010.zip109.26 Kb
Answer posted by Harish Vembu on Aug 21, 2009 10:09

Thanks for your Sample Code and it helped me and I am able to replicate it for a small POC . I will contact you again if I have something more to know


Best Regards

Harish