jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

This topic is locked

No permission to create posts

sp_Feed

sp_TopicIcon

table row display none style width

01/04/2010
15:40

unknown

Member

Members

Forum Posts: 9

Member Since:
01/04/2010

sp_UserOfflineSmall

Offline

Go to Top

1

sp_EditHistory

sp_Permalink

sp_Print

Hi all,

I have the problem, that if I set some of the table rows to display = none the width of all columns are calculated wrong. This comes only up if the first row goes display none. I think that in JQgrid internal the first table line is used to calculate width, height and so on.

A shrinktofit or forcefit brings nothing

I do the following to hide the lines:

                var theTable = document.getElementById('grid_articles');
                for( var z = 0; z < theTable.tBodies.length; z++ ) {
                  for( var x = 0; x < theTable.tBodies[z].rows.length; x++ ) {
                    if (theTable.tBodies[z].rows[x].cells[2].innerHTML != rowid && x != 0) {
                      if (theTable.tBodies[z].rows[x].style.display == 'none') {
                        theTable.tBodies[z].rows[x].style.display = 'table-row';
                      }
                      else {
                        theTable.tBodies[z].rows[x].style.display = 'none';
                      }
                    }
                  }
                }

Have try it with jquery hide() .. set the cells to display none .. nothings helps so I think the calculation is the key. If I let the first row displayed as you can see on the x != 0 I havn't problems. Is there some solution or can't you handle the calculation on a other way?

Do you need some screens? Just say it to me and I will bring it up to web

Greetings from Germany

03/04/2010
11:41

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

sp_UserOfflineSmall

Offline

sp_UserWebsite

Go to Top

2

sp_Permalink

sp_Print

Hello,

Thanks. No need to put screeenshot or post the code. This is true.

So little explanation: jqGrid defines a table with table layout fixed, and set the width only for the first row,

this combination make the rendering in the browsers much much faster.

One possible fix is to define first row with height = 0 and with the appropriate widths.

This way we will not worry about which row is hidden, but we need to make this with care, since it will brake other things.

If you have any other idea it will be great.

Any way we will try to fix this.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

12/04/2010
14:23

unknown

Member

Members

Forum Posts: 9

Member Since:
01/04/2010

sp_UserOfflineSmall

Offline

Go to Top

3

sp_EditHistory

sp_Permalink

sp_Print

Ahoy Tony,

thanks for your explanation. That gave me more comprehension into the internal structure. I think there is no other solution because you need a fix point to calculate the styles. But this is only a guess – I don't take a look into your JavaScript framework.

In my case I didn't have performance problems because I only accept a max value of 90 rows. So my solution is the following:

subGridBeforeExpand:

                var theTable = document.getElementById('grid_articles');
                for( var z = 0; z < theTable.tBodies.length; z++ ) {
                  var width0 = '';
                  var width1 = '';
                  var width2 = '';
                  var width3 = '';
                  var width4 = '';
                  var width5 = '';
                  var width6 = '';
                  var width7 = '';
                  var width8 = '';
                  var width9 = '';
                  var width10 = '';
                  var width11 = '';
                  var width12 = '';
                  var width13 = '';
                  var width14 = '';

                  for( var x = 0; x < theTable.tBodies[z].rows.length; x++ ) {
                    if (theTable.tBodies[z].rows[x].cells[2].innerHTML != rowid && x != 0) {
                      if (theTable.tBodies[z].rows[x].style.display == 'none') {
                        theTable.tBodies[z].rows[x].style.display = 'table-row';
                      }
                      else {
                        theTable.tBodies[z].rows[x].style.display = 'none';
                      }
                    }
                    else if (theTable.tBodies[z].rows[x].cells[2].innerHTML != rowid && x == 0) {
                        width0 = theTable.tBodies[z].rows[x].cells[0].style.width;
                        width1 = theTable.tBodies[z].rows[x].cells[1].style.width;
                        width2 = theTable.tBodies[z].rows[x].cells[2].style.width;
                        width3 = theTable.tBodies[z].rows[x].cells[3].style.width;
                        width4 = theTable.tBodies[z].rows[x].cells[4].style.width;
                        width5 = theTable.tBodies[z].rows[x].cells[5].style.width;
                        width6 = theTable.tBodies[z].rows[x].cells[6].style.width;
                        width7 = theTable.tBodies[z].rows[x].cells[7].style.width;
                        width8 = theTable.tBodies[z].rows[x].cells[8].style.width;
                        width9 = theTable.tBodies[z].rows[x].cells[9].style.width;
                        width10 = theTable.tBodies[z].rows[x].cells[10].style.width;
                        width11 = theTable.tBodies[z].rows[x].cells[11].style.width;
                        width12 = theTable.tBodies[z].rows[x].cells[12].style.width;
                        width13 = theTable.tBodies[z].rows[x].cells[13].style.width;
                        width14 = theTable.tBodies[z].rows[x].cells[14].style.width;

                        theTable.tBodies[z].rows[x].style.display = 'none';
                    }
                    else {
                        theTable.tBodies[z].rows[x].cells[0].style.width = width0;
                        theTable.tBodies[z].rows[x].cells[1].style.width = width1;
                        theTable.tBodies[z].rows[x].cells[2].style.width = width2;
                        theTable.tBodies[z].rows[x].cells[3].style.width = width3;
                        theTable.tBodies[z].rows[x].cells[4].style.width = width4;
                        theTable.tBodies[z].rows[x].cells[5].style.width = width5;
                        theTable.tBodies[z].rows[x].cells[6].style.width = width6;
                        theTable.tBodies[z].rows[x].cells[7].style.width = width7;
                        theTable.tBodies[z].rows[x].cells[8].style.width = width8;
                        theTable.tBodies[z].rows[x].cells[9].style.width = width9;
                        theTable.tBodies[z].rows[x].cells[10].style.width = width10;
                        theTable.tBodies[z].rows[x].cells[11].style.width = width11;
                        theTable.tBodies[z].rows[x].cells[12].style.width = width12;
                        theTable.tBodies[z].rows[x].cells[13].style.width = width13;
                        theTable.tBodies[z].rows[x].cells[14].style.width = width14;

                    }
                  }
                }

subGridRowColapsed:

                var theTable = document.getElementById('grid_articles');
                for( var z = 0; z < theTable.tBodies.length; z++ ) {
                  for( var x = 0; x < theTable.tBodies[z].rows.length; x++ ) {
                    if (theTable.tBodies[z].rows[x].cells[2].innerHTML != rowid) {
                      if (theTable.tBodies[z].rows[x].style.display == 'none') {
                        theTable.tBodies[z].rows[x].style.display = 'table-row';
                      }
                      else {
                        theTable.tBodies[z].rows[x].style.display = 'none';
                      }
                    }
                  }
                }

Big thanks to you and your team. It is the first time where I need your help. On monthes before I only use the forum and the wiki to research my problems. What I want to say is, that thees pages are excellent to search for solutions, problems and challenges

Greetings from Germany

Henning

- For all who wonder about the innerHTML – I used this because in my enviroment it is the fasted method to render text …

This topic is locked

No permission to create posts

sp_Feed

Go to top

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
39 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

© Simple:Press

sp_Information

Comments are closed.

Privacy Policy Terms and Conditions Contact Information