can anyone find error in the following example
Expand|Select|Wrap|Line Numbers
- <%@ include file="JspBean.jsp" %>
- <%@ page import="java.util.*"%>
- <html>
- <head>
- <%
- response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
- response.setHeader("Pragma","no-cache"); //HTTP 1.0
- response.setHeader("Expires", "-1"); //prevents caching at the proxy server
- response.setDateHeader("Expires", 0); //prevents caching at the proxy server
- %>
- <link rel="stylesheet" type="text/css" href="../static/js/dojox/grid/_grid/Grid.css">
- <style type="text/css">
- .greenColumn {
- color: yellow;
- background-color: #006666;
- font-style: italic;
- }
- .whiteRow{
- background-color: #FFFFFF;
- }
- .grayRow{
- background-color: #006666;
- }
- #grid{
- height: 50em;
- }
- #grid .dojoxGrid-cell {
- text-align: left;
- font-family:Verdana, Arial,Helvetica, sans-serif;
- font-size:11px;
- height:25px;
- font-weight:normal;
- border:0.05em solid ;
- border-top:none;
- }
- #grid .dojoxGrid-sort-down{
- background: url(../static/images/arrowdown.gif) left no-repeat;
- padding-left:16px;
- margin-left:4px;
- }
- #grid .dojoxGrid-sort-up{
- background: url(../static/images/arrowup.gif) left no-repeat;
- padding-left:16px;
- margin-left:4px;
- }
- #grid .selectedRow.specialRow .dojoxGrid-cell {
- background-color: #FFCC99;
- }
- </style>
- <script type="text/javascript" src="../static/js/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
- <script type="text/javascript">
- dojo.require("dojox.grid.Grid");
- dojo.require("dojox.data.QueryReadStore");
- dojo.require("dojo.data.ItemFileReadStore");
- dojo.require("dojo.parser");
- function getData(inRowIndex)
- {
- if((inRowIndex % 2) == 0)
- return "<a href=\"#\" style=\"color: blue\">IBM</a>";
- else
- return "<a href=\"#\" style=\"color: blue\">CISCO</a>";
- }
- function getPr(inRowIndex)
- {
- if((inRowIndex % 3) == 0)
- return "PR Image";
- }
- getDetailData = function(inRowIndex) {
- return inRowIndex;
- }
- getName = function(inRowIndex) {
- return "Name";
- }
- function getCheck(inRowIndex) {
- var image = (detailRows[inRowIndex] ? 'open.gif' : 'closed.gif');
- var show = (detailRows[inRowIndex] ? 'false' : 'true')
- return '<img height="11" width="11" src="images/' + image + '" onclick="toggleDetail(' + inRowIndex + ', ' + show + ')">';
- }
- // provide html for the Detail cell in the master grid
- function getDetail(inRowIndex) {
- var cell = this;
- setTimeout(function() { buildSubgrid(inRowIndex, cell); }, 1);
- var subGrid = dijit.byId(makeSubgridId(inRowIndex));
- var h = (subGrid ? subGrid.cacheHeight : "120") + "px";
- // insert a placeholder
- return '<div style="height: ' + h + '; background-color: white;"></div>';
- }
- // the Detail cell contains a subgrid which we set up below
- var subCol0 = { name: "subAccount",headerStyles: 'background-image: none; background-color: #039;FONT-FAMILY: Arial, Verdana, Helvetica, san-serif;FONT-SIZE: 12px;FONT-WEIGHT:bold;COLOR: #FFF;',width:5};
- var subCol1 = { name: "subTradeRef",width:7 };
- var subCol2 = { name: "subTd",width:3 };
- var subCol3 = { name: "subSd",width:5 };
- var subCol4 = { name: "subIbd",width:5 };
- var subCol5 = { name: "subExch",width:5 };
- var subCol6 = { name: "subSide",width:5 };
- var subCol7 = { name: "subSymbol",width:5};
- var subCol8 = { name: "subPrice",width:5 };
- var subCol9 = { name: "subQty",width:5 };
- var subCol10 = { name: "subPr",width:5 };
- var subCol11 = { name: "subMoney",width:5 };
- var subCol12 = { name: "subSiso",width:5 };
- var subCol13 = { name: "subFm",width:5 };
- var subGridCells = [{
- noscroll: true,
- cells: [
- [
- subCol0,
- subCol1,
- subCol2,
- subCol3,
- subCol4,
- subCol5,
- subCol6,
- subCol7,
- subCol8,
- subCol9,
- subCol10,
- subCol11,
- subCol12,
- subCol13
- ]
- ]}];
- var subGridProps = {
- structure: subGridCells,
- rowCount: 1,
- autoHeight: true,
- autoRender: false,
- "get":getDetailData
- };
- // identify subgrids by their row indices
- function makeSubgridId(inRowIndex) {
- return grid.widgetId + "_subGrid_" + inRowIndex;
- }
- // render a subgrid into inCell at inRowIndex
- function buildSubgrid(inRowIndex, inCell) {
- alert("buildSubgrid");
- var n = inCell.getNode(inRowIndex).firstChild;
- var id = makeSubgridId(inRowIndex);
- var subGrid = dijit.byId(id);
- alert("subGrid--- 1 --"+subGrid);
- if (subGrid) {
- alert("inside if");
- n.appendChild(subGrid.domNode);
- } else {
- subGridProps.dataRow = inRowIndex;
- subGridProps.widgetId = id;
- subGrid = new dojox.Grid(subGridProps, n);
- }
- alert("subGrid-----"+subGrid);
- if (subGrid) {
- subGrid.render();
- subGrid.cacheHeight = subGrid.domNode.offsetHeight;
- inCell.grid.rowHeightChanged(inRowIndex);
- }
- }
- // when user clicks the +/-
- detailRows = [];
- function toggleDetail(inIndex, inShow) {
- detailRows[inIndex] = inShow;
- grid.updateRow(inIndex);
- }
- var col00 = {name:'Account #',colSpan:13,
- headerStyles: 'background-image: none; background-color: #039;FONT-FAMILY: Arial, Verdana, Helvetica, san-serif;FONT-SIZE: 12px;FONT-WEIGHT:bold;COLOR: #FFF;'
- };
- var col0 = {name:'Account #',field:'account',width:5,
- headerStyles: 'background-image: none; background-color: #039;FONT-FAMILY: Arial, Verdana, Helvetica, san-serif;FONT-SIZE: 12px;FONT-WEIGHT:bold;COLOR: #FFF;',
- get: getCheck
- };
- var col1 = {name:'Trade Ref#',field:'tradeRef',width:7,
- headerStyles: 'background-image: none; background-color: #C6942B;FONT-FAMILY: Arial, Verdana, Helvetica, san-serif;FONT-SIZE: 12px;FONT-WEIGHT:bold;COLOR: #FFF;'
- };
- var col2 = {name:'<a href="#" style="color: white">TD</a>',field:'td',width:3,
- headerStyles: 'background-image: none; background-color: #039;FONT-WEIGHT:bold;'
- };
- var col3 = {name:'<a href="#" style="color: white">SD</a>',field:'sd',width:5,
- headerStyles: 'background-image: none; background-color: #006666;FONT-WEIGHT:bold;',classes:"greenColumn"
- };
- var col4 = {name:'<a href="#" style="color: white">IBD</a>',field:'ibd',width:5,
- headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
- };
- var col5 = {name:'<a href="#" style="color: white">Exch</a>',field:'exch',width:5,
- headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
- };
- var col6 = {name:'<a href="#" style="color: white">Side</a>',field:'side',width:5,
- headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
- };
- var col7 = {name:'<img src="../static/images/arrowdown.gif"><a href="#" style="color: white">Symbol</a>',
- field:'symbol',get:getData,width:5,
- headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
- };
- var col8 = {name:'<a href="#" style="color: white">PR</a>',field:'qty',get:getPr,width:5,
- headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
- };
- var col9 = {name:'<a href="#" style="color: white">Price</a>',field:'price',width:5,
- headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
- };
- var col10 = {name:'<a href="#" style="color: white">Money</a>',field:'money',width:5,
- headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;',classes:"greenColumn"
- };
- var col11 = {name:'<a href="#" style="color: white">SI/SO</a>',field:'siso',width:5,
- headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
- };
- var col12 = {name:'FM',field:'fm',width:5,
- headerStyles: 'background-image: none; background-color: #039;FONT-FAMILY: Arial, Verdana, Helvetica, san-serif;FONT-SIZE: 12px;FONT-WEIGHT:bold;COLOR: #FFF;'
- };
- var structure = [
- {
- onBeforeRow: function(inDataIndex, inSubRows) {
- inSubRows[1].hidden = !detailRows[inDataIndex];
- },
- cells: [[
- col0,
- col1,
- col2,
- col3,
- col4,
- col5,
- col6,
- col7,
- col8,
- col9,
- col10,
- col11,
- col12
- ], [
- { name: '', get: getDetail, colSpan: 13, styles: 'padding: 0; margin: 0;'}
- ]]
- }
- ];
- function onStyleRow(inRow) {
- with (inRow) {
- var i = index;
- var special = (i < 4);
- if (special)
- customClasses += ' specialRow';
- }
- }
- </script>
- <script type="dojo/method" event="sort">
- this.render();
- this.edit.apply();
- this.model.sort(this.getSortField());
- </script>
- </head>
- <body>
- <form name="f1">
- <div dojoType="dojox.data.QueryReadStore" jsId="storeID", url="DojoGrid/jsp/testQueryDSController.jsp" requestMethod="post"></div>
- <div dojoType="dojox.grid.data.DojoData" jsId="model" rowsPerPage="20" store="storeID" query="{ namespace: '*' }"></div>
- <div id="grid" jsId="grid" dojoType="dojox.grid.Grid" model="model" onStyleRow="onStyleRow" structure="structure" delayScroll="true"></div>
- </form>
- </body>
- </html>
In the above code,"open.gif" is placed as first column data.. when its clicked ..."subgrid" is shown.. For me,only the header of the subgrid got rendered and not the values for that sub grid...
"getDetailData" method is not called.... can anyone pl help me out.......
Thanks in Advance