[Data Grid] Full height grid

Forge Component
(38)
Published on 3 Aug (22 hours ago) by OutSystems R&D
38 votes
Published on 3 Aug (22 hours ago) by OutSystems R&D

Hi, Is there a way to set grid height to 100% or other relative value instead of pixel fixed?

Mykola (Nick) Tkachenko wrote:

Hi, Is there a way to set grid height to 100% or other relative value instead of pixel fixed?

+1 - I am new to Outsystems and was about to post this same question. I took a poke in the CSS, maybe there's something there, but I have a lot of learning to do still.


It is possible to do by changing height of the grid container after grid is loaded. 

I've done it in unload function of the grid.

Mykola (Nick) Tkachenko wrote:

It is possible to do by changing height of the grid container after grid is loaded. 

I've done it in unload function of the grid.

Thanks Mykola. Can you send a few snippets or a dummy project to explain? As mentioned I still have a lot to learn.


Hi, is anyone able to assist? I've done several failed experiments including setting trying to run javascript such as:

"document.getElementById('"+DataGrid.Id+"').GridHeight = window.innerHeight;"

or

"document.getElementById('"+DataGrid.Id+"').height = window.innerHeight;"


I have no idea if I'm headed in the right direction or not.

Thanks in advance!

  $('.wj-flexgrid').height(window.innerHeight);

Hi Nate,

try change height of the generated container.

That's the secret right there! Thanks.

I put this into a RunJavaScript action in the Web Screen Preperation:

"$('.wj-flexgrid').height(window.innerHeight-215);"


and I put this into the Web Screen Javascript property:

$( window ).resize(function() {
  $('.wj-flexgrid').height(window.innerHeight-215);
});


Works like a dream! I might figure out how to determine the fixed offset of 215 pixels automatically, but this suits my needs for now.

Nate Bergeron wrote:

That's the secret right there! Thanks.

I put this into a RunJavaScript action in the Web Screen Preperation:

"$('.wj-flexgrid').height(window.innerHeight-215);"


and I put this into the Web Screen Javascript property:

$( window ).resize(function() {
  $('.wj-flexgrid').height(window.innerHeight-215);
});


Works like a dream! I might figure out how to determine the fixed offset of 215 pixels automatically, but this suits my needs for now.

 

Hi,


I am still not able to achieve this. What I was looking for is to remove the vertical scroll bar of the grid and show the entire records in the page without any scroll bar. I don't want to set a fixed height. Can someone please help? 

Hello Linto Antony,

DataGrid is currently not prepared to do such things such as defining a dynamic height according to the number of rows and the height of them. What I can suggest to you is to go with some fixed height or with something like Nate Bergeron wrote in his previous reply:

I put this into a RunJavaScript action in the Web Screen Preperation:

"$('.wj-flexgrid').height(window.innerHeight-215);"


and I put this into the Web Screen Javascript property:

$( window ).resize(function() {
  $('.wj-flexgrid').height(window.innerHeight-215);
});

Grid Container Web Block also has a property that enables/disables the Scrollbar (HideScrollbar).

If you need to use that dynamic height, we can create a workaround type of solution that goes according to your needs. But please take into consideration that the browser will probably get overwhelmed depending on the amount of rows that your grid needs to present.

Thank you,

Tiago Pereira

Tiago Miguel Pereira wrote:

Hello Linto Antony,

DataGrid is currently not prepared to do such things such as defining a dynamic height according to the number of rows and the height of them. What I can suggest to you is to go with some fixed height or with something like Nate Bergeron wrote in his previous reply:

I put this into a RunJavaScript action in the Web Screen Preperation:

"$('.wj-flexgrid').height(window.innerHeight-215);"


and I put this into the Web Screen Javascript property:

$( window ).resize(function() {
  $('.wj-flexgrid').height(window.innerHeight-215);
});

Grid Container Web Block also has a property that enables/disables the Scrollbar (HideScrollbar).

If you need to use that dynamic height, we can create a workaround type of solution that goes according to your needs. But please take into consideration that the browser will probably get overwhelmed depending on the amount of rows that your grid needs to present.

Thank you,

Tiago Pereira

Thanks for the quick response. I understand that. I am able to get the number of rows from the grid object and I am multiplying it with fixed row height and getting the actual height and trying to set in for $('.wj-flexgrid').height() 

Could you please let me know the right place to add this script?

 like any gird rendered kind of events and where to set it up?

Hello Linto Antony,

I've been trying different approaches to solve your issue and I believe I have a good solution.
Could you please try the following attempt:

Open CSS editor inside your sample and paste the following code:

.no-wijmo-scrollbar.wj-flexgrid{
    height: auto !important;
}

Note that we need to override the value of the height (with !important) because it is using the value that is designated in GridHeight property inside Grid Container.

The image below shows how you can do it inside Service Studio.


Also, Grid Container should have the same values for the highlighted properties.

 

Hope this solution is useful if you need to have the height of the grid equal to the number of rows that you have to present.


Tiago Pereira


Tiago Miguel Pereira wrote:

Hello Linto Antony,

I've been trying different approaches to solve your issue and I believe I have a good solution.
Could you please try the following attempt:

Open CSS editor inside your sample and paste the following code:

.no-wijmo-scrollbar.wj-flexgrid{
    height: auto !important;
}

Note that we need to override the value of the height (with !important) because it is using the value that is designated in GridHeight property inside Grid Container.

The image below shows how you can do it inside Service Studio.


Also, Grid Container should have the same values for the highlighted properties.

 

Hope this solution is useful if you need to have the height of the grid equal to the number of rows that you have to present.


Tiago Pereira


Perfect !! Many Thanks .. 

my grid don't have a class named .no-wijmo-scrollbar.wj-flexgrid so I just changed it with

.wj-flexgrid{

    height: auto !important;

}

and that worked. 

Once again many thanks and really appreciate your time and effort


Regards

Linto