By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,146 Members | 1,816 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,146 IT Pros & Developers. It's quick & easy.

Expand and Collapse (subgrids)in dojo.grid

100+
P: 184
Hi,
can anyone find error in the following example

Expand|Select|Wrap|Line Numbers
  1.  
  2. <%@ include file="JspBean.jsp" %>
  3. <%@ page import="java.util.*"%>
  4. <html>
  5. <head>
  6. <%
  7. response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
  8. response.setHeader("Pragma","no-cache"); //HTTP 1.0
  9. response.setHeader("Expires", "-1"); //prevents caching at the proxy server
  10. response.setDateHeader("Expires", 0); //prevents caching at the proxy server
  11.  
  12.  
  13. %>
  14. <link rel="stylesheet" type="text/css" href="../static/js/dojox/grid/_grid/Grid.css">
  15. <style type="text/css">
  16.  
  17. .greenColumn {
  18.                 color: yellow;
  19.                 background-color: #006666;
  20.                 font-style: italic;
  21.         }    
  22.  
  23. .whiteRow{
  24.   background-color: #FFFFFF;
  25. }
  26.  
  27. .grayRow{
  28.   background-color: #006666;
  29. }        
  30.  
  31.  
  32. #grid{
  33.  
  34.             height: 50em;
  35.  
  36.         }
  37. #grid .dojoxGrid-cell {
  38.             text-align: left;
  39.             font-family:Verdana, Arial,Helvetica, sans-serif;
  40.             font-size:11px;
  41.             height:25px;
  42.             font-weight:normal;
  43.             border:0.05em solid ;
  44.             border-top:none;
  45.  
  46.  
  47.  
  48.  
  49.         }
  50.  
  51. #grid .dojoxGrid-sort-down{
  52.   background: url(../static/images/arrowdown.gif) left no-repeat; 
  53.     padding-left:16px;
  54.     margin-left:4px;
  55.  
  56. }
  57. #grid .dojoxGrid-sort-up{
  58.   background: url(../static/images/arrowup.gif) left no-repeat; 
  59.     padding-left:16px;
  60.     margin-left:4px;
  61. }
  62.  
  63. #grid .selectedRow.specialRow .dojoxGrid-cell {
  64.  
  65.             background-color: #FFCC99;
  66.         }
  67.  
  68.  
  69. </style>
  70.  
  71.  
  72. <script type="text/javascript" src="../static/js/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
  73.  
  74.  
  75. <script type="text/javascript">
  76.   dojo.require("dojox.grid.Grid");
  77.   dojo.require("dojox.data.QueryReadStore");
  78.   dojo.require("dojo.data.ItemFileReadStore");
  79.   dojo.require("dojo.parser");
  80.  
  81.  
  82.  
  83.  
  84.     function getData(inRowIndex)
  85.     {
  86.      if((inRowIndex % 2) == 0)
  87.      return "<a href=\"#\" style=\"color: blue\">IBM</a>";
  88.      else
  89.      return "<a href=\"#\" style=\"color: blue\">CISCO</a>";
  90.     }
  91.  
  92.     function getPr(inRowIndex)
  93.     {
  94.     if((inRowIndex % 3) == 0)
  95.      return "PR Image";
  96.     }
  97.  
  98. getDetailData = function(inRowIndex) {
  99.    return inRowIndex;
  100. }                        
  101. getName = function(inRowIndex) {                        
  102.                         return "Name";
  103.     }         
  104.  
  105.  
  106.  
  107. function getCheck(inRowIndex) { 
  108.         var image = (detailRows[inRowIndex] ? 'open.gif' : 'closed.gif');
  109.         var show = (detailRows[inRowIndex] ? 'false' : 'true')
  110.         return '<img height="11" width="11" src="images/' + image + '" onclick="toggleDetail(' + inRowIndex + ', ' + show + ')">';
  111. }
  112.  
  113.                     // provide html for the Detail cell in the master grid        
  114. function getDetail(inRowIndex) {
  115.     var cell = this;
  116.   setTimeout(function() { buildSubgrid(inRowIndex, cell); }, 1);
  117.     var subGrid = dijit.byId(makeSubgridId(inRowIndex));
  118.     var h = (subGrid ? subGrid.cacheHeight : "120") + "px";
  119.     // insert a placeholder
  120.     return '<div style="height: ' + h + '; background-color: white;"></div>';
  121.  
  122. }
  123.  
  124.                     // the Detail cell contains a subgrid which we set up below
  125.  
  126.  
  127.  
  128. 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}; 
  129. var subCol1 = { name: "subTradeRef",width:7 };
  130. var subCol2 = { name: "subTd",width:3 };
  131. var subCol3 = { name: "subSd",width:5 };
  132. var subCol4 = { name: "subIbd",width:5 };
  133. var subCol5 = { name: "subExch",width:5 };
  134. var subCol6 = { name: "subSide",width:5 };
  135. var subCol7 = { name: "subSymbol",width:5};
  136. var subCol8 = { name: "subPrice",width:5 };
  137. var subCol9 = { name: "subQty",width:5 };
  138. var subCol10 = { name: "subPr",width:5 };
  139. var subCol11 = { name: "subMoney",width:5 };
  140. var subCol12 = { name: "subSiso",width:5 };
  141. var subCol13 = { name: "subFm",width:5 };
  142.  
  143. var subGridCells = [{
  144.             noscroll: true,
  145.             cells: [
  146.                 [
  147.                     subCol0,
  148.                     subCol1,
  149.                     subCol2,
  150.                     subCol3,
  151.                     subCol4,
  152.                     subCol5,
  153.                     subCol6,
  154.                     subCol7,
  155.                     subCol8,
  156.                     subCol9,
  157.                     subCol10,                                                    
  158.                     subCol11,
  159.                     subCol12,
  160.                     subCol13
  161.                         ]
  162. ]}];
  163. var subGridProps = {
  164.     structure: subGridCells, 
  165.     rowCount: 1, 
  166.     autoHeight: true, 
  167.     autoRender: false,
  168.     "get":getDetailData
  169.  
  170. };
  171.  
  172. // identify subgrids by their row indices
  173. function makeSubgridId(inRowIndex) {
  174.     return grid.widgetId + "_subGrid_" + inRowIndex;
  175. }
  176.  
  177.  
  178. // render a subgrid into inCell at inRowIndex
  179. function buildSubgrid(inRowIndex, inCell) {
  180. alert("buildSubgrid");
  181. var n = inCell.getNode(inRowIndex).firstChild;
  182. var id = makeSubgridId(inRowIndex);
  183. var subGrid = dijit.byId(id);
  184. alert("subGrid--- 1 --"+subGrid);
  185. if (subGrid) {
  186. alert("inside if");
  187.     n.appendChild(subGrid.domNode);
  188. } else {
  189.     subGridProps.dataRow = inRowIndex;
  190.     subGridProps.widgetId = id;
  191.     subGrid = new dojox.Grid(subGridProps, n);
  192. }
  193. alert("subGrid-----"+subGrid);
  194. if (subGrid) {
  195.     subGrid.render();
  196.     subGrid.cacheHeight = subGrid.domNode.offsetHeight;
  197.     inCell.grid.rowHeightChanged(inRowIndex);
  198. }    
  199. }
  200. // when user clicks the +/-
  201. detailRows = [];
  202. function toggleDetail(inIndex, inShow) {
  203. detailRows[inIndex] = inShow;
  204. grid.updateRow(inIndex);
  205. }
  206.  
  207.  
  208.  
  209. var col00 = {name:'Account #',colSpan:13,
  210.                                 headerStyles: 'background-image: none; background-color: #039;FONT-FAMILY: Arial, Verdana,  Helvetica, san-serif;FONT-SIZE: 12px;FONT-WEIGHT:bold;COLOR: #FFF;'
  211.  
  212.                                 };
  213.  
  214.  
  215.  
  216.     var col0 = {name:'Account #',field:'account',width:5,
  217.                             headerStyles: 'background-image: none; background-color: #039;FONT-FAMILY: Arial, Verdana,  Helvetica, san-serif;FONT-SIZE: 12px;FONT-WEIGHT:bold;COLOR: #FFF;',
  218.                             get: getCheck 
  219.                             };
  220.  
  221.     var col1 = {name:'Trade Ref#',field:'tradeRef',width:7,
  222.                                 headerStyles: 'background-image: none; background-color: #C6942B;FONT-FAMILY: Arial, Verdana,  Helvetica, san-serif;FONT-SIZE: 12px;FONT-WEIGHT:bold;COLOR: #FFF;'
  223.                             };
  224.  
  225.     var col2 = {name:'<a href="#" style="color: white">TD</a>',field:'td',width:3,
  226.                                 headerStyles: 'background-image: none; background-color: #039;FONT-WEIGHT:bold;'
  227.  
  228.                                 };
  229.         var col3 = {name:'<a href="#" style="color: white">SD</a>',field:'sd',width:5,
  230.                                 headerStyles: 'background-image: none; background-color: #006666;FONT-WEIGHT:bold;',classes:"greenColumn"
  231.                                 };
  232.         var col4 = {name:'<a href="#" style="color: white">IBD</a>',field:'ibd',width:5,
  233.                                 headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
  234.                                 };
  235.         var col5 = {name:'<a href="#" style="color: white">Exch</a>',field:'exch',width:5,
  236.                                 headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
  237.                                 };
  238.         var col6 = {name:'<a href="#" style="color: white">Side</a>',field:'side',width:5,
  239.                                 headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
  240.                                 };
  241.         var col7 = {name:'<img src="../static/images/arrowdown.gif"><a href="#" style="color: white">Symbol</a>',
  242.                                 field:'symbol',get:getData,width:5,
  243.                                 headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
  244.                                 };
  245.  
  246.         var col8 = {name:'<a href="#" style="color: white">PR</a>',field:'qty',get:getPr,width:5,
  247.                                 headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
  248.                                 };
  249.         var col9 = {name:'<a href="#" style="color: white">Price</a>',field:'price',width:5,
  250.                                 headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
  251.                                 };
  252.         var col10 = {name:'<a href="#" style="color: white">Money</a>',field:'money',width:5,
  253.                                 headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;',classes:"greenColumn"
  254.                                 };
  255.  
  256.         var col11 = {name:'<a href="#" style="color: white">SI/SO</a>',field:'siso',width:5,
  257.                                 headerStyles: 'background-image: none; background-color:#039;FONT-WEIGHT:bold;'
  258.                                 };
  259.  
  260.  
  261.         var col12 = {name:'FM',field:'fm',width:5,
  262.                                     headerStyles: 'background-image: none; background-color: #039;FONT-FAMILY: Arial, Verdana,  Helvetica, san-serif;FONT-SIZE: 12px;FONT-WEIGHT:bold;COLOR: #FFF;'
  263.                             };
  264.  
  265.  
  266.  
  267.  
  268.   var structure = [
  269.  
  270.                 { 
  271.                     onBeforeRow: function(inDataIndex, inSubRows) {
  272.                         inSubRows[1].hidden = !detailRows[inDataIndex];
  273.                     },
  274.                     cells: [[
  275.                               col0,
  276.                               col1,
  277.                               col2,
  278.                               col3,
  279.                               col4,
  280.                               col5,
  281.                               col6,
  282.                               col7,
  283.                               col8,
  284.                               col9,
  285.                               col10,
  286.                               col11,
  287.                               col12
  288.  
  289.                     ], [
  290.                         { name: '', get: getDetail, colSpan: 13, styles: 'padding: 0; margin: 0;'}
  291.                     ]]
  292.                 }
  293.         ];
  294.  
  295.  
  296.  
  297.  
  298.  
  299.  
  300. function onStyleRow(inRow) {
  301.             with (inRow) {
  302.  
  303.                 var i = index;
  304.                 var special = (i < 4);
  305.  
  306.                 if (special)    
  307.                     customClasses += ' specialRow';
  308.  
  309.  
  310.             }    
  311.         }
  312.  
  313.  
  314.  
  315. </script>
  316. <script type="dojo/method" event="sort">
  317.                 this.render();
  318.                 this.edit.apply();
  319.                 this.model.sort(this.getSortField());
  320. </script>
  321.  
  322.  
  323.  
  324. </head>
  325. <body>
  326. <form name="f1">
  327. <div dojoType="dojox.data.QueryReadStore" jsId="storeID", url="DojoGrid/jsp/testQueryDSController.jsp" requestMethod="post"></div>
  328.  
  329. <div dojoType="dojox.grid.data.DojoData" jsId="model" rowsPerPage="20" store="storeID" query="{ namespace: '*' }"></div>
  330.  
  331. <div id="grid" jsId="grid" dojoType="dojox.grid.Grid" model="model" onStyleRow="onStyleRow" structure="structure" delayScroll="true"></div>
  332.  
  333.  
  334. </form>
  335. </body>
  336. </html>
  337.  
  338.  
  339.  
  340.  


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
Jun 10 '08 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
Check the API or examples and see if the functions help.
Jun 10 '08 #2

100+
P: 184
Check the API or examples and see if the functions help.

Thank u...

Regards,
gaya3
Jun 12 '08 #3

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Once you have it working, can you post the working code. Thanks!
Jun 12 '08 #4

100+
P: 184
Acoder,
I have a doubt in subgrid. I constructed the outergrid with "queryreadstore"
and when i tried it thrown the error. so, i constructed the inner grid with dojox.grid.data.table . Is there any way to construct the innergrid with queryReadStore? comments plz..
Please correct me if i'm wrong
Feb 12 '09 #5

acoder
Expert Mod 15k+
P: 16,027
Please post your code and the error message.
Feb 13 '09 #6

Post your reply

Sign in to post your reply or Sign up for a free account.