kendo grid: frozen column template must fill cell when other grid columns have text-wrap

[Dawn]

I have a kendo grid that has a frozen column with a custom template. One of the other columns in the grid can have a large amount of text that wraps, causing the row height to grow. When this happens, I want the template in the frozen column to grow to fill the entire cell (both height and width) 

I have created a dojo to illustrate the issue: here

The entire cell in the frozen column must have a blue background. Currently the div holding the custom template is only as high as its content.

I know that height:100% on the div doesn't work, because the parent element doesn't have a fixed height, but I can't give the parent a fixed height as the row's height must be determined by the content of the cell in the row with the most data (in this case the details cell)

Another complication is that the grid is groupable, so we must be able to group by category without breaking the layout of the grid. The frozen cell's div must still fill it's cell and the row height must still be determined by the cell with the most content.

Thanks for your help.

 

[Hetali]

Hi Dawn,

Thank you for the Dojo sample.

In order to set the background color of the locked column when it is grouped or not grouped, please use the following CSS class:

.k-grid-content-locked, .k-grid-content-locked .k-alt {
  background-color:blue; 
  color:white; 
  height:100%
}

Please take a look at this updated Dojo example where the background color of the entire cell in the locked column is set.

I hope this helps. Please let me now if you have any further questions pertaining to the background color of the locked column in the Kendo UI Grid.

Regards,
Hetali
Progress Telerik

[Dawn]

Hi Hetali, Thank you for your response.

I probably wasn't clear in my explanation. I was only using the background color in my dojo example to illustrate that the custom template does not fill the cell.

I am not trying to set the background color of the cell. I have a custom template that is contained in a div. That custom template has a number of elements in it and it is the custom template (div) that must fill the cell.

In your updated dojo, the div with the class='frozen-col' is still not filling the entire height of the cell .I have attached a few screenshots of what my custom template looks like. It includes some tool bar buttons that are revealed when you click the triangle with the ellipses in the top right hand corner (See first 2 attached screenshots). I did manage to get the div to fill the cell, by changing the display of the <tr> to flex with align-items stretch, but it doesn't work when you group by a column (see third attached screenshot)

[Dawn]

I've attached the screenshots now

[Preslav]

Hello Dawn,

Thank you for elaborating on the requirements. To achieve the desired outcome, I would suggest changing the CSS positioning of the cells and the "frozen-col" templates, and then, stretching the templates. The CSS could look like:

 

    <style>
      .frozen-col {
        background-color:blue; 
        color:white;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
      .k-grid-content-locked tr > td {
        position: relative;
      }
    </style>

 

For a runnable example, check the modified Dojo - https://dojo.telerik.com/elIQEkOL

Please, give this a try, and let me know if it works for you.

 

Regards,
Preslav
Progress Telerik

[Dawn]

Hi Preslav,

Thank you for your response. That has solved my issue of filling the row height, but has now revealed a further issue, namely that the row min-height is not honored. I have controls inside my frozen-column template, and have set a min height on the row to cater for the control's height. I have updated the dojo to illustrate the problem. Each row should be at least 50px high, but rows 2 and 3 are only 36px high. See my updated dojo here

Kind regards,

Dawn

[Preslav]

Hello Dawn,

Indeed, the "min-height" property is not working for "tr" and "td" elements like it works for other HTML elements.

What I could suggest is adding an "after" element to the first cell, and adding "min-height" to this element. For example: 

 

      .k-grid-content-locked tr > td:first-child::after {
        content: "";
        display: block;
        width: 1px;
        min-height: 50px;
      }

 

The updated Dojo is available here - https://dojo.telerik.com/elIQEkOL/5

 

Regards,
Preslav
Progress Telerik

[Dawn]

Hi Preslav,

Thank you so much. That has solved my query. I really appreciate your solutions and your prompt response.

Kind regards,

Dawn