Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted on Jan 21, 2009 01:48
open dhtmlx forum
sub grid How to create and load the data in sub grid

How to create and Load the data in sub grid



<%@ Page Language="C#" AutoEventWireup="true" %>

<!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 runat="server">
<title>Grid Demo</title>

<link rel="STYLESHEET" type="text/css" href="App_Themes/css/dhtmlxgrid.css"/>
<script language="javascript" type="text/javascript" src="script/dhtmlXCommon.js"></script>
<script language="javascript" type="text/javascript" src="script/dhtmlXGrid.js"></script>        
<script language="javascript" type="text/javascript" src="script/dhtmlXGridCell.js"></script>

<script language="javascript" type="text/javascript" src="script/dhtmlXGrid_math.js"></script>

<link rel="STYLESHEET" type="text/css" href="App_Themes/css/dhtmlxcalendar.css"/>
<script language="javascript" type="text/javascript" src="script/dhtmlxcalendar.js"></script>
<script language="javascript" type="text/javascript" src="script/dhtmlxgrid_excell_dhxcalendar.js"></script>

<link rel="stylesheet" type="text/css" href="App_Themes/css/dhtmlXGrid_calck.css"/>
<script language="javascript" type="text/javascript" src="script/dhtmlXGrid_excell_calck.js"></script>
<script language="javascript" type="text/javascript" src="script/dhtmlXGrid_excell_acheck.js"></script>
<script language="javascript" type="text/javascript" src="script/dhtmlxgrid_excell_sub_row.js"></script>



</head>
<body>
<form id="form1" runat="server">
<div id="gridbox" width="50%" height="300px" style="background-color:white;overflow:hidden"></div>
<div style="display:none">
<div id="Plan_flt_box"><input type="text" style="border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onkeyup="filterBy()"/></div>
<div id="Type_flt_box"><select style="width:100%" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="filterBy()"></select></div>
</div>

<script type="text/javascript" language="javascript">
     mygrid = new dhtmlXGridObject('gridbox');
    
     //_css_prefix="App_Themes/css/";
         //_js_prefix="script/";
            
            //cal1 = new dhtmlxCalendarObject('calInput1');
    
     mygrid.imgURL = "imgs/";
    
     mygrid.setHeader("Hotel,Room,Country,Date,Currency,Plan,Type,Tax,Rates,#cspan,#cspan,#cspan,RateDesc,MealsRates,#cspan,#cspan,#cspan,TaxOn(%),#cspan,Total");
mygrid.attachHeader("#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,Sgl,Dbl,Ext,Total,#rspan,B/F,Lunch,Dinner,Total,Room,Meal,#rspan");
mygrid.setInitWidths("50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50");
mygrid.setColAlign("left,left,left,center,center,left,left,center,right,right,right,right,left,right,right,right,right,right,right,right");
mygrid.setColTypes("sub_row_grid,ro,ro,dhxCalendar,coro,coro,coro,acheck,calck,ed,ed,ed[=c8+c9+c10],txt,ed,ed,ed,ed[=c13+c14+c15],ed,ed,ed[=c11*c17/100+c16*c18/100]");
mygrid.setMathRound(0);
mygrid.enableMathEditing(true);
mygrid.setColSorting("str,str,str,str,str,str,str,str,int,int,int,int,int,int,int,int,int,int,int,int,int");
     mygrid.init();
    
     mygrid.loadXML("grid.xml", function(){
mygrid.attachHeader("#rspan,#rspan,#rspan,#rspan,#rspan,<div id='Plan_flt'></div>,<div id='Type_flt'></div>,#rspan,Sgl,Dbl,Ext,Total,#rspan,B/F,Lunch,Dinner,Total,Room,Meal,#rspan");
document.getElementById("Plan_flt").appendChild(document.getElementById("Plan_flt_box").childNodes[0])
var authFlt = document.getElementById("Type_flt").appendChild(document.getElementById("Type_flt_box").childNodes[0]);
populateSelectWithAuthors(authFlt);
mygrid.setSizes();
});
     mygrid.attachEvent("onSubGridCreated",function(subgrid,id,index,data)
     { //data - data from related XML cell
     alert('fun');
subgrid.loadXMLString("grid.xml");
subgrid.callEvent("onGridReconstructed",[]);
return false;//block default logic
});

function filterBy()
{
var tVal = document.getElementById("Plan_flt").childNodes[0].value.toLowerCase();
var aVal = document.getElementById("Type_flt").childNodes[0].value.toLowerCase();

for(var i=0; i< mygrid.getRowsNum();i++)
{
var tStr = mygrid.cells2(i,5).getValue().toString().toLowerCase();
var aStr = mygrid.cells2(i,6).getValue().toString().toLowerCase();
if((tVal=="" || tStr.indexOf(tVal)==0) && (aVal=="" || aStr.indexOf(aVal)==0))
mygrid.setRowHidden(mygrid.getRowId(i),false)
else
mygrid.setRowHidden(mygrid.getRowId(i),true)
}
}

function populateSelectWithAuthors(selObj)
{
selObj.options.add(new Option("All Types",""))
var usedAuthAr = new dhtmlxArray();
for(var i=0;i<mygrid.getRowsNum();i++)
{
var authNm = mygrid.cells2(i,6).getValue();
if(usedAuthAr._dhx_find(authNm)==-1)
{
selObj.options.add(new Option(authNm,authNm))
usedAuthAr[usedAuthAr.length] = authNm;
}
}
}
    
</script>

</form>
</body>
</html>




xml are here
<?xml version="1.0" standalone="yes"?>
<rows>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/01/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special FIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/01/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special GIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/01/2008</cell>
<cell>INR</cell>
<cell>Room Only</cell>
<cell>Rack Rate</cell>
<cell>false</cell>
<cell>37000</cell>
<cell>37000</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>0</cell>
<cell>0</cell>
<cell>0</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/02/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special FIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/02/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special GIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/02/2008</cell>
<cell>INR</cell>
<cell>Room Only</cell>
<cell>Rack Rate</cell>
<cell>false</cell>
<cell>37000</cell>
<cell>37000</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>0</cell>
<cell>0</cell>
<cell>0</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/03/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special FIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/03/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special GIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/03/2008</cell>
<cell>INR</cell>
<cell>Room Only</cell>
<cell>Rack Rate</cell>
<cell>false</cell>
<cell>37000</cell>
<cell>37000</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>0</cell>
<cell>0</cell>
<cell>0</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/04/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special FIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/01/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special FIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/01/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special GIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/01/2008</cell>
<cell>INR</cell>
<cell>Room Only</cell>
<cell>Rack Rate</cell>
<cell>false</cell>
<cell>37000</cell>
<cell>37000</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>0</cell>
<cell>0</cell>
<cell>0</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/02/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special FIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/02/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special GIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/02/2008</cell>
<cell>INR</cell>
<cell>Room Only</cell>
<cell>Rack Rate</cell>
<cell>false</cell>
<cell>37000</cell>
<cell>37000</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>0</cell>
<cell>0</cell>
<cell>0</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/03/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special FIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/03/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special GIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/03/2008</cell>
<cell>INR</cell>
<cell>Room Only</cell>
<cell>Rack Rate</cell>
<cell>false</cell>
<cell>37000</cell>
<cell>37000</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>0</cell>
<cell>0</cell>
<cell>0</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
<row>
<cell>THE IMPERIAL</cell>
<cell>Deco suite Inside facing</cell>
<cell>Cambodia</cell>
<cell>05/04/2008</cell>
<cell>INR</cell>
<cell>Breakfast Included</cell>
<cell>Special FIT</cell>
<cell>false</cell>
<cell>24125</cell>
<cell>24125</cell>
<cell>5000</cell>
<cell/>
<cell>Tentative Extra Bed.</cell>
<cell>1041</cell>
<cell>1659</cell>
<cell>1659</cell>
<cell/>
<cell>12.5</cell>
<cell>8</cell>
<!--<cell/>-->
</row>
</rows>
Answer posted by Support on Jan 21, 2009 05:00
If you are overriding sub-grid creating logic you need to specify configuration of subgrid
It can be created in two ways

a) you can add code to the onSubGridCreated event
  mygrid.attachEvent("onSubGridCreated",function(subgrid,id,index,data) 
  { //data - data from related XML cell 
  alert('fun'); 
subgrid.setHeader(...);
subgrid.setInitWidths(...)
subgrid.init();
subgrid.loadXMLString("grid.xml"); 
subgrid.callEvent("onGridReconstructed",[]); 
return false;//block default logic 
});

or

b) you can add configuration XML inside grid.xml
<?xml version="1.0" standalone="yes"?> 
<rows> 
         <head>
              <column ...
         </head>
<row> 
<cell>THE IMPERIAL</cell>