This is a migrated thread and some comments may be shown as answers.

Text alignment in grid client footer template

4 Answers 54 Views
Grid
This is a migrated thread and some comments may be shown as answers.
sandy
Top achievements
Rank 1
Iron
Veteran
sandy asked on 20 Jan 2021, 10:20 AM

Hi ,

i want to merge cells in grid client footer template to display text.

below css am used but still no use.

    .k-footer-template td:nth-child(1) {
        overflow: visible;
        white-space: nowrap;
    }

    .k-footer-template td:nth-child(1),
    .k-footer-template td:nth-child(2),
    .k-footer-template td:nth-child(3),
    .k-footer-template td:nth-child(4),
    .k-footer-template td:nth-child(5),
    .k-footer-template td:nth-child(6) {
        border-width: 0;
    }

4 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 22 Jan 2021, 08:17 AM

Hello Sandy,

Here is the approach I can suggest for Grid with 6 columns and a footer template in the last one:

  <style>
    .k-footer-template td:nth-child(6) {
        overflow: visible;
        white-space: nowrap;
        position: absolute;
        right: 0px;
    }

    .k-footer-template td:nth-child(2),
    .k-footer-template td:nth-child(3),
    .k-footer-template td:nth-child(4),
    .k-footer-template td:nth-child(5),
    .k-footer-template td:nth-child(6){
        border-width: 0;
    }
  </style>

For a different number of columns, the above will need to be adjusted. Below I am posting a Dojo demo demonstrating this:

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
sandy
Top achievements
Rank 1
Iron
Veteran
answered on 25 Jan 2021, 07:08 AM

Hi Nikolay,

Thanks for your reply. i have modified dojo demo to my requirement. please find it now. 

i want to display client footer template in  123 columns only.

pls find updated dojo demo here

Untitled | Kendo UI Dojo (telerik.com)

0
sandy
Top achievements
Rank 1
Iron
Veteran
answered on 25 Jan 2021, 07:09 AM
https://dojo.telerik.com/EJatUBig/3
0
Accepted
Nikolay
Telerik team
answered on 26 Jan 2021, 03:17 PM

Hi Sandy,

Here is the CSS you can use for the provided Grid implementation:

  <style>
    .k-footer-template td:nth-child(2) {
        overflow: visible;
        white-space: nowrap;
        position: absolute;
        right: 0px; /* can use left for left alignment */
    }

    .k-footer-template td:nth-child(2),
    .k-footer-template td:nth-child(3),
    .k-footer-template td:nth-child(4),
    .k-footer-template td:nth-child(5),
    .k-footer-template td:nth-child(6){
        border-width: 0;
    }
  </style>

Let me know if you have further questions.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
sandy
Top achievements
Rank 1
Iron
Veteran
Answers by
Nikolay
Telerik team
sandy
Top achievements
Rank 1
Iron
Veteran
Share this question
or