Solved

Hiding columns load performance

Posted on 2006-06-16
6
341 Views
Last Modified: 2010-08-05
We have a hide column function that takes a long time to load the data. TECHNIQUE 1 below is slightly faster than TECHNIQUE 2 but they are both too slow. Any suggestions on how to increase the load performance for hiding columns?



function hideColumn(count,str) {
  var layoutName = getLayoutName(count);
  if (layoutName == false) return false;
  var tableLayout = document.getElementById(layoutName + "-table");
  if (!tableLayout) return;

  var col = -1;
  //Find the column with str as its header
  for (var c=0; c<tableLayout.rows[0].cells.length; c++) {
    var str1 = tableLayout.rows[0].cells[c].innerText;
    //strip trailing blanks
    while (str1.substring(str1.length-1,str1.length) == ' ') str1 = str1.substring(0,str1.length-1);
    if (str1 == str) {
      col = c + 1;
      break;
    }
  }
  if (col < 0) return;

  var maxRow;
  if (footRow > -1 ) {
    maxRow = footRow - 1;
  } else if (aggrRow > -1 ) {
     maxRow = aggrRow;
  } else {
    maxRow = tableLayout.rows.length;
  }


  for (var row = 1; row<=maxRow; row++) {
//        tableLayout.rows[row-1].deleteCell(col-1);       //TECHNIQUE 1
        tableLayout.rows[row-1].cells(col-1).style.display='none';   //TECHNIQUE 2
  }


}



0
Comment
Question by:C_J_L
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16921535

//Find the column with str as its header

this i 0(n2) why is it needed? what are you tring to do here?
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16921558

I see find the column and hide all it's cells...
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16921577


Instead of finding the str can you just set the colum's id to that string and use getElementByid instead?
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 10

Accepted Solution

by:
0h4crying0utloud earned 500 total points
ID: 16921705

Another suggestion:  switch the class name of a colgroup column:

<style>
.notShown {
 color:red;
 display:none;
}
</style>

<body>

<table>
<colgroup>
  <col id='c0' >
  <col id='c1' >
  <col id='c2' >
</colgroup>
<tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
</tr>
<tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
</tr>
<tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
</tr>
</table>

</body>

<script>
document.getElementById('c2').className = "notShown";
</script>
</html>
0
 

Author Comment

by:C_J_L
ID: 16928241
>Instead of finding the str can you just set the colum's id to that string and use getElementByid instead?

That part runs very fast. The slow part is the hiding or deleting of the cells.

The table has no cols or col groups defined. The table must be formatted via javascript as it is already generated and I manipulate it after the fact. I wish I had access to the html but I don't.

How would I create columns and group for this table using javascript?:

<table id="Layout1-table" class=SAPBEXCellspacing cellSpacing=1 cellPadding=0 border=0 >
     <tr id="Layout1-1-row">
     <td id="Layout1-1-1-cell" colspan="1" nowrap class="SAPBEXchaText">
           <span id="Layout1-1-1" ct="TextView" class="urTxtStd urVt1" style="white-space:nowrap;">Budget Group Code</span></td>

There are 38 more td's following this one for a total of 39 columns. They would be hidden one at a time, if any.
Also, if I use a col group and set atomicselection to true, it will run slow (according to MSDN Library). But I don't know what slow is compared to what it is doing right now.
0
 

Author Comment

by:C_J_L
ID: 16935760
Thanks! I was able to get the getElementById which made it run faster.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question