1. Home
  2. Forum
  3. jQuery
  4. Set the height of rows

Set the height of rows

Hi,

I have two question about settings the height of the rows in an ejGrid control.
Here is the playground you can refer to: http://jsplayground.syncfusion.com/oaqlbifx

1. Set a different height for the first n rows only
I'm trying to find a way to set the height of the first n rows, which are frozen rows, to look smaller than the other.
If I apply a CSS rule like the following (n=2):

#grids-container .ra-typ tbody tr:nth-child(-n+2) td{height: 32px !important;}
#grids-container .ra-bad tbody tr:nth-child(-n+2) td{height: 32px !important;}

Everything is broken and the grids don't load anymore.
So, how can I set a different height to the first two, or three, or four rows without broken the grid controls?



2. Setting the height of the rows programmatically, after the control has already loaded.
As you can see from the playground I have two grids side by side, the rows in them are strictly related to each other, so they must be of the same height to keep the alignment.
But if a cell in the right grid has a lot of content, the row get higher than its counterpart on the left grid, losing the alignment.
(you can see this behaviour in the last two rows of the grids in the playground, for the event named "Preferred transfer modality")

My idea was to make a loop for each td.e-rowcell element inside the .e-movablecontent to retrieve the height value of the highest cell.
Then looping on the grids, excluding the frozen rows that will have their own height, I set the same height to all cells. Here is the code:

var maxHeight=0;
//Loop through the left grid...
$.each($('#grids-container .ra-typ .e-movablecontentdiv tbody tr.e-row td.e-rowcell'),function(i,val){
    if(maxHeight<$(this).height()){
       maxHeight=$(this).height();
    }
});
//Loop through the right grid...
$.each($('#grids-container .ra-bad .e-movablecontentdiv tbody tr.e-row td.e-rowcell'),function(i,val){
    if(maxHeight<$(this).height()){
       maxHeight=$(this).height();
    }
});

//set the height to all the cells...
$.each($('#grids-container .ra-typ tbody tr.e-row td.e-rowcell'),function(i,val){
    $(this).css('line-height', maxHeight + 'px !important'); //nothing happens!
    $(this).css('height',maxHeight + 'px !important'); //nothing happens!
    $(this).height(maxHeight); //nothing happens!
});

But with the above code nothing happens.
So, how can I set the height of the td.e-rowcell elements using javascript?


Many thanks for the support,
Best Regards,
Marco



7 Replies
RS Renjith Singh Rajendran Syncfusion Team February 14, 2018 02:42 PM UTC

Hi Marco, 

Thanks for contacting Syncfusion support. 

We have analyzed your sample from the JSPlayground link. We suspect that you would like to make both the Grids to scroll at a time and display both the Grid contents similar, when any one of the Grid is scrolled. We could see that you are using template for the row in the second Grid, so the particular row height is high(140px) compared to the other rows(96px) in both the Grid. This will make the scroller height to increase and make the scrollers in both the Grids to obtain different heights, thereby making difference in the Grids while scrolling. So we suggest you to make the row template with larger height(140px) same as the other rows (96px) to achieve your requirement. As you are using template for row. It should be done by modifying your template to achieve your requirement. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



MG Marco Giorgi February 14, 2018 09:51 PM UTC

Actually, I'm not using a template.
I don't know the height of the rows until the content is placed in the cell and the grid is rendered
The content is dynamic, it's a real-world application taking data from a database, so it's impossible to define a specific height in advance.

So, there is no way to set the height of the grid cells programmatically?

RS Renjith Singh Rajendran Syncfusion Team February 15, 2018 05:20 PM UTC

Hi Marco, 

We have prepared a video demonstration by modifying the sample you have provided to achieve your requirement. Here we are modifying the row height by removing the data you have provided in your sample as template, to modify the row height in Grid. Please download the video from the link below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


MG Marco Giorgi February 15, 2018 05:50 PM UTC

Thanks for the reply

Removing the data inside the cell to make them smaller it's not a solution.

The solution is to increase the height of the cell in order to have them all with the same height, independently by their contents. (the given height will be equal to the height of the highest cell in the grid)

So my question is: is there a way I can increase the height of the cells of the ejGrid using javascript after the ejGrid has been data-bounded and rendered?

RS Renjith Singh Rajendran Syncfusion Team February 16, 2018 01:25 PM UTC

Hi Marco, 

We have modified the sample based on your requirement. Please refer the JSPlayground link below, 

In the above sample, we have made all the rows in both the Grids to display of same size. We have set the same row height for all the rows by using the dataBound event of Grid in the grid8 of your sample and calling the rowHeightRefresh method of Grid. Please refer the documentation link below, 

Please refer the code example below, 

$("#grid8").ejGrid({ 
          dataSource: rationale.badYear.data, 
          ... 
         dataBound: function (args) { 
            ... 
           scroll.model.scroll = function (e) { 
              ... 
           } 
            var max=0; 
            for(var i=0;i<this.getContent().find(".e-row").length;i++){ 
              if(max<$(this.getContent().find(".e-row")[i]).height()) 
              { 
                max = $(this.getContent().find(".e-row")[i]).height(); 
              } 
            } 
            for(var i=0;i<this.getContent().find(".e-row").length;i++){ 
              $(this.getContent().find(".e-row")[i]).css("height",max); 
            } 
            var obj = $("#grid7").ejGrid("instance") 
            for(var i=0;i<obj.getContent().find(".e-row").length;i++){ 
              $(obj.getContent().find(".e-row")[i]).css("height",max); 
            } 
            this.rowHeightRefresh(); 
            obj.rowHeightRefresh(); 
          }, 
          ... 
     } 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


MG Marco Giorgi February 22, 2018 01:15 PM UTC

Many thanks Renjit.
Your solution has partially solved the problem.

Partially because if I set an initial height through the CSS to the table cells, that is lower than the max height of the cells the ejScroller obj raise an error:

Uncaught TypeError: this._eleHeight.indexOf is not a function
    at Object._ensureScrollers (http://localhost:50931/Scripts/Syncfusion/common/ej.scroller.min.js:10:15494)
    at Object._init (http://localhost:50931/Scripts/Syncfusion/common/ej.scroller.min.js:10:11655)
    at new <anonymous> (http://localhost:50931/Scripts/Syncfusion/common/ej.core.min.js:10:21417)
    at n.fn.init.n.fn.(anonymous function) [as ejScroller] (http://localhost:50931/Scripts/Syncfusion/common/ej.core.min.js:10:22674)
    at Object._renderScroller (http://localhost:50931/Scripts/Syncfusion/web/ej.grid.min.js:10:79063)
    at Object._initialEndRendering (http://localhost:50931/Scripts/Syncfusion/web/ej.grid.min.js:10:568058)
    at Object.render (http://localhost:50931/Scripts/Syncfusion/web/ej.grid.min.js:10:512901)
    at Object._initGridRender (http://localhost:50931/Scripts/Syncfusion/web/ej.grid.min.js:10:499443)
    at Object._checkDataBinding (http://localhost:50931/Scripts/Syncfusion/web/ej.grid.min.js:10:462616)
    at Object._init (http://localhost:50931/Scripts/Syncfusion/web/ej.grid.min.js:10:457472)


here the playground to replicate the issue:
http://jsplayground.syncfusion.com/n14fhfza

How can I set the minimum height of the cells to 44pixels and then increase the all the other cells that are greater than this?

Basically what I'm trying to achieve is to have the first two rows with a smaller height because I know by design that they will contain always a very short text with no carriage return or break. 
The other rows instead will contain an indefinite amount of text, that I will not know in advance, therefore to keep the two grids aligned I need to set the same height based on the highest row in line.







RS Renjith Singh Rajendran Syncfusion Team February 23, 2018 01:15 PM UTC

Hi Marco, 
  
We have analyzed the sample and your query. The issue is because of providing different heights for your frozen rows and movable rows. It is not feasible to set different heights for particular rows in Frozen Grid. It is necessary to provide same heights for all the rows in the Grid. So we suggest you to set the same heights for all the rows in Grid. 
  
It is not feasible to set different heights for rows in Grid. All Grid rows should have same heights. 
  
Please get back to us if you need further assistance. 
  
Regards, 
Renjith Singh Rajendran 


Loader.
Up arrow icon