Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Ramesh manian on Mar 26, 2009 10:37
open dhtmlx forum
Reg Grid loading from HTML Table

Dear Team,
I am having a JSP Page inwhich I am trying to have two grids - one being initialized from a HTML table and the other one being loaded from XML File. The Second grid which gets loaded from XML file, gets Loaded and is working fine. But the first Grid which is being initialized from HTML table is not loading properly. Only header is getting loaded and not the rows. Please assist me in getting this resolved.
Please find below the Code :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel='STYLESHEET' type="text/css" href="../stylesheet/Style.css">
<link rel='STYLESHEET' type="text/css" href="../codebase/dhtmlxgrid.css">
<link rel='STYLESHEET' type='text/css' href='../codebase/dhtmlxcalendar.css'>

<style type="text/css">
    
    
    
    /* Big box with list of options */
    #ajax_listOfOptions{
        position:absolute;    /* Never change this one */
        width:175px;    /* Width of box */
        height:250px;    /* Height of box */
        overflow:auto;    /* Scrolling features */
        border:1px solid #317082;    /* Dark green border */
        background-color:#FFF;    /* White background color */
        text-align:left;
        font-size:0.9em;
        z-index:100;
    }
    #ajax_listOfOptions div{    /* General rule for both .optionDiv and .optionDivSelected */
        margin:1px;        
        padding:1px;
        cursor:pointer;
        font-size:0.9em;
    }
    #ajax_listOfOptions .optionDiv{    /* Div for each item in list */
        
    }
    #ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
        background-color:#317082;
        color:#FFF;
    }
    #ajax_listOfOptions_iframe{
        background-color:#F00;
        position:absolute;
        z-index:5;
    }
    
    form{
        display:inline;
    }
    
    </style>
    
<script>_css_prefix="../codebase/";hF="../codebase/";_js_prefix="../codebase/"; </script>
<script src="../codebase/dhtmlxcommon.js"></script>
    <script src="../codebase/dhtmlxgrid.js"></script>        
    <script src="../codebase/dhtmlxgridcell.js"></script>
    <script src="../codebase/dhtmlxgrid_math.js"></script>
    <script src="../codebase/dhtmlxgrid_excell_cntr.js"></script>
    <script src="../codebase/dhtmlxgrid_keymap_access.js"></script>    
    <script src="../codebase/dhtmlxgrid_rowspan.js"></script>
    <script src="../codebase/dhtmlxgrid_srnd.js"></script>
    <script src='../codebase/dhtmlxcalendar.js'></script>    
    <script src='../codebase/dhtmlxgrid_excell_dhxcalendar.js'></script>
    <script src='../codebase/dhtmlxgrid_nxml.js'></script>
<script src="../codebase/dhtmlxgrid_start.js"></script>

<script type="text/javascript" src="../autocomplete2/js/ajax.js"></script>
    <script type="text/javascript" src="../autocomplete2/js/ajax-dynamic-list.js"></script>

    
    
    <script src="../javascripts/general_functions.js"></script>    
    <script src="../javascripts/DataManipulations.js"></script>
    <script src="../javascripts/otherscripts.js"></script>    

</head>




<body topmargin=0 leftmargin=3>        
<Form id= "Form1" name= "Form1" action = "Frm_89.jsp" method=post>
<Table border=0 cellpadding = 0 cellspacing =0 width=990 >
<TR><TD class=clspanel>

<!-- GRID 1 starts -->

<table id="tab_list">

<TR>
<td class=clstab id=1 name = 1 onmouseover= "this.className='clstabover';" onmouseout= "this.className='clstab';" onclick="fnOpenPage1(212,'7');" > page 1 </td>



<td class=clstab id=3 name = 3 onmouseover= "this.className='clstabover';" onmouseout= "this.className='clstab';" onclick="fnOpenPage1(215,'7');" > Page 2</td>


<td class=clstab id=4 name = 4 onmouseover= "this.className='clstabover';" onmouseout= "this.className='clstab';" onclick="fnOpenPage1(216,'9');" > Page 3 </td>


<td class=clstab id=5 name = 5 onmouseover= "this.className='clstabover';" onmouseout= "this.className='clstab';" onclick="fnOpenPage1(217,'7');" >Page 4</td>


<td class=clstab id=6 name = 6 onmouseover= "this.className='clstabover';" onmouseout= "this.className='clstab';" onclick="fnOpenPage1(218,'9');" > Page 5</td>


</TR></TABLE></TD></TR></TABLE>
<!-- GRID 1 ENDS-->

<!--Start of Grid 2 Grid Display-->

<div id="div1" name="div1" style="width:990px;height:280px;"></div>
<!-- End of Grid 2 Display-->

<textarea rows=2 cols =161 id="status_bar" name="status_bar" class=clsstatusbar readonly ></textarea>

<!-- Hidden Field to Store Grid Values while saving the data -->
<INPUT TYPE=hidden name = "H212_0_0" id = "H212_0_0">
<INPUT TYPE=hidden name = "H215_0_0" id = "H215_0_0">
<INPUT TYPE=hidden name = "H216_0_0" id = "H216_0_0">
<INPUT TYPE=hidden name = "H217_0_0" id = "H217_0_0">
<INPUT TYPE=hidden name = "H218_0_0" id = "H218_0_0">
<INPUT TYPE=hidden name = "H214_0_0" id = "H214_0_0">

<input type = hidden name="hid_retvalues" id="hid_retvalues">
<input type = hidden name="hid_page" id="hid_page" value="">
<input type = hidden name="hid_page_val" id="hid_page_val">

</form>
<script>
mytabs = new dhtmlXGridFromTable("tab_list");

mytabs.setImagePath("../codebase/imgs/");
mytabs.setNoHeader(true);
mytabs.setSkin("modern");

//gRID 2 DISPALY
fnOpenFirstPage(212,'7','' );

</script>
</BODY>
</HTML>


Answer posted by dhxSupport on Mar 27, 2009 03:46

When you create grid form HTML tabe first row is recognized as grid's header. So in your html grid has only header. If you set no header you shoud call this command before grid init. In this case firs table row still will be recognized as grid's header but will be hidden. 

<table id="tab_list" name="tab_list" onbeforeinit="doBeforeInit()"> 

<TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR> 
<td class=clstab id=1 name = 1 onmouseover= "this.className='clstabover';" onmouseout= "this.className='clstab';" onclick="fnOpenPage1(212,'7');" > page 1 </td> 

<td class=clstab id=3 name = 3 onmouseover= "this.className='clstabover';" onmouseout= "this.className='clstab';" onclick="fnOpenPage1(215,'7');" > Page 2</td> 

<td class=clstab id=4 name = 4 onmouseover= "this.className='clstabover';" onmouseout= "this.className='clstab';" onclick="fnOpenPage1(216,'9');" > Page 3 </td> 

<td class=clstab id=5 name = 5 onmouseover= "this.className='clstabover';" onmouseout= "this.className='clstab';" onclick="fnOpenPage1(217,'7');" >Page 4</td> 

<td class=clstab id=6 name = 6 onmouseover= "this.className='clstabover';" onmouseout= "this.className='clstab';" onclick="fnOpenPage1(218,'9');" > Page 5</td> 

</TR></TABLE>
...

//put this function into the header

funciton doBeforeInit() {

tab_list.setNoHeader(true); //table's name is a dthmlxGrid object.

}

//put this script under the table in the body

<script> 
mytabs = new dhtmlXGridFromTable("tab_list"); 
mytabs.setImagePath("../codebase/imgs/"); 
mytabs.setSkin("modern"); 
</script>

Answer posted by Ramesh Manian on Mar 27, 2009 08:14

Dear Team,

I tried this. But still not getting the Grid. Pls assist me in resolving this issue. Is the problem due to having two grids in a single page ? - one being intiailized through HTML table and other using XML file?

 

Thanks and regards

Ramesh

Answer posted by dhxSupport on Mar 27, 2009 10:48
You can find sample in your dhtmlxGrid package dhtmlxGrid\samples\initialization_loading\grid_int_from_html.html