473,324 Members | 2,456 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Expand and Collapse (subgrids)in dojo.grid

184 100+
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
5 9910
acoder
16,027 Expert Mod 8TB
Check the API or examples and see if the functions help.
Jun 10 '08 #2
gaya3
184 100+
Check the API or examples and see if the functions help.

Thank u...

Regards,
gaya3
Jun 12 '08 #3
acoder
16,027 Expert Mod 8TB
You're welcome. Once you have it working, can you post the working code. Thanks!
Jun 12 '08 #4
gaya3
184 100+
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
16,027 Expert Mod 8TB
Please post your code and the error message.
Feb 13 '09 #6

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

Similar topics

1
by: Bill | last post by:
How do you prevent the "expand"/"collapse" characters in a resulting XML output file?
1
by: Randy Starkey | last post by:
Hi, Is there a way to expand and collapse all if I have multiple implementations of this script on a single page? The script works well individually. Thanks! --Randy Starkey ---
0
by: Shadow Lynx | last post by:
When using ASP.NET 2.0's built-in TreeView on a page with <BASE target = "AnythingBut_Self"></BASE> in the HEAD, the expand/collapse buttons fail to function. The reason for this is that the...
7
by: sirfunusa | last post by:
Does anyone have sample code for an expanding parent/child datagrid. Like a treeview control with the "+/-" signs. ASP.NET 1.1 thanks Jeff
2
by: sam | last post by:
Hi all, I have a series of divs in 2 blocks say BLOCK1 and BLOCK2 and I want to use one click to expand/collapse all those in each block. But the code I came up with exapands all the divs in the...
0
by: jim | last post by:
Hi, I have a TreeView control that sits on the MasterPage. All of my other webpages inherit from that Master Page. The Treeview receives it's data using an XMLDataSource that has it's DataFile...
0
by: antonyliu2002 | last post by:
I am interested in implementing expandable/collapsable rows like what's shown in the following snapshot, which is from american express ...
0
by: Homer J. Simpson | last post by:
A few weeks ago I asked for suggestions on how to persist a tree's node state to cookies, without causing postbacks on each click in the tree. I had a single .aspx file, with a row of buttons on...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.