Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 31 Oct 2024 07:06 by ADMIN
Elliot
Created on: 24 Oct 2024 14:07
Category: Grid
Type: Feature Request
0
Relocate FooterTemplate to the Top of the grid

Hi,

I have spent a while looking for the feature to move the Footer Template to the first line of the Telerik grid. Is this currently possible with a parameter I'm unaware of? How possible would this be to do if not. 

Kind Regards,

Elliot

5 comments
ADMIN
Hristian Stefanov
Posted on: 31 Oct 2024 07:06

Hi Elliot,

Thank you for your feedback.

I'm glad the result satisfied your needs.

Regards,
Hristian Stefanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Elliot
Posted on: 30 Oct 2024 15:50

Hi Hristian,

Thanks for the work you have put into this. Cheers for the effort and I'm happy with the result. 

Kind regards,

Elliot

ADMIN
Hristian Stefanov
Posted on: 30 Oct 2024 14:52

Hi Elliot,

To prevent the footer from overlapping the header, you can enhance the approach by adding sufficient "padding-top" to ensure the headers display below the footer.

Here’s an updated version of the sample:

<style>
    .k-grid .k-grid-footer {
        position: absolute;
        border-bottom: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgba(0, 0, 0, 0.08);
        width: 100%;
    }

    .k-grid .k-grid-header {
        padding-top: 60px;
    }
</style>

<TelerikGrid Data=@GridData Pageable="true" Height="300px">
    <GridAggregates>
        <GridAggregate Field=@nameof(Employee.Salary) Aggregate="@GridAggregateType.Max" />
        <GridAggregate Field=@nameof(Employee.Salary) Aggregate="@GridAggregateType.Sum" />
        <GridAggregate Field=@nameof(Employee.EmployeeId) Aggregate="@GridAggregateType.Count" />
    </GridAggregates>
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Salary) Title="Salary">
            <FooterTemplate>
                Total salaries: @context.Sum?.ToString("C0")
                <br />
                Highest salary: @context.Max?.ToString("C0")
            </FooterTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Employee.Name)>
            <FooterTemplate>
                @{
                    int? headCount = (int?)context?.AggregateResults
                    .FirstOrDefault(r => r.AggregateMethodName == "Count" && r.Member == nameof(Employee.EmployeeId))?.Value;
                }
                Total employees: @headCount
            </FooterTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 15; i++)
        {
            Random rnd = new Random();
            GridData.Add(new Employee()
                {
                    EmployeeId = i,
                    Name = "Employee " + i.ToString(),
                    Salary = rnd.Next(1000, 5000),
                });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public decimal Salary { get; set; }
    }
}

Let me know if this now covers your needs.

Regards,
Hristian Stefanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Elliot
Posted on: 29 Oct 2024 15:37

Thanks for the response Hristian,

Tried your solution and found your footer is covering the header. Not sure if there is a way without covering the header?

Kind Regards,

Elliot

 
ADMIN
Hristian Stefanov
Posted on: 25 Oct 2024 20:20

Hi Elliot,

You can achieve the desired result easily by using the following CSS:

<style>
    .k-grid .k-grid-footer {
        position: absolute;
        border-bottom: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgba(0, 0, 0, 0.08);
        width: 100%;
    }
</style>

<TelerikGrid Data=@GridData Pageable="true" Height="300px">
    <GridAggregates>
        <GridAggregate Field=@nameof(Employee.Salary) Aggregate="@GridAggregateType.Max" />
        <GridAggregate Field=@nameof(Employee.Salary) Aggregate="@GridAggregateType.Sum" />
        <GridAggregate Field=@nameof(Employee.EmployeeId) Aggregate="@GridAggregateType.Count" />
    </GridAggregates>
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Salary) Title="Salary">
            <FooterTemplate>
                Total salaries: @context.Sum?.ToString("C0")
                <br />
                Highest salary: @context.Max?.ToString("C0")
            </FooterTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Employee.Name)>
            <FooterTemplate>
                @{
                    int? headCount = (int?)context?.AggregateResults
                    .FirstOrDefault(r => r.AggregateMethodName == "Count" && r.Member == nameof(Employee.EmployeeId))?.Value;
                }
                Total employees: @headCount
            </FooterTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 15; i++)
        {
            Random rnd = new Random();
            GridData.Add(new Employee()
                {
                    EmployeeId = i,
                    Name = "Employee " + i.ToString(),
                    Salary = rnd.Next(1000, 5000),
                });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public decimal Salary { get; set; }
    }
}

Thus, I'm marking this item as "Declined".

Regards,
Hristian Stefanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category