Merging cells in a footer aggregate

[Iulian Ilies]

Hi there,

I would like to merge some of the cells in a footer aggregate

You should make an idea by looking at the following table

Item	Quantity	Price	Value
Item A	2	10	20
Item B	3	12	36
	Total Value (long footer label):		56

The [Value] column has the actual aggregate footer, while the label for it will span accross Quatity & Price footer.

Is it possible out of the box? Can you suggest any solution?

Thanks in advance
Iulian

[Maya]

Hi Iulian Ilies,

In order to achieve the desired state of the cell of the footer, you need to predefine its style, as for the time being there is no other out-of-the-box solution. You should adjust the values of the "Margin" and "Border" Properties of the Footer Cell in order to fit appropriately in the Grid. Afterwards, you need to set the Property of the Column "FooterCellStyle" to the Style you have predefined. I am attaching you a sample project where you can see and test the proposed solution.

 

Regards,
Maya
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Iulian Ilies]

Hi Maya,

Thanks for your replay. I was away from this issue for a few days and I could not try your solution.

Unfortunetely it's not what I wanted; I am not sure if I was clear enough.
In your very same sample you posted it, I just increase the length of the caption of the aggregate function ("Position" column) and the column size increased too. (please see the attached pic)

What I understand from your idea is you just play around with the style of those to columns footer ("Number" & "Position") so they won't have a separator but this is not what I want.
What I would like is a real merge functionality, so the caption will spread across of something like a common footer for the 2 columns mentioned above.

Any other thought?

Thanks
Iulian

[Maya]

Hello Iulian Ilies,

The proposed solution implements a custom behavior closest to the functionality you want for your project. Unfortunately, for the time being there is no straightforward way to achieve merging of cells of the aggregate results in the footer.

Sincerely yours,
Maya
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Carlos]

it's possible now?

[Maya]

Hi Carlos,

We have received very few requests about such functionality and currently it has not yet been implemented as we are working on features with higher priority. For the time being, the suggested solution here is the way to go. 

Regards,
Maya
Telerik

[Saif Akhtar]

Hi Maya,

Is it available now?

[Sia]

Hello,

We do not provide out-of-the-box support for this feature currently. You can follow the public item about merged footer cells and like it to increase its priority in our future plannings. Also adding any information about the exact scenario will also be of great value for our team.

Regards,
Sia
Progress Telerik

[R. J.]

Iulian -

Old, I know, but I just had the same issue.  The difference is, I wanted to merge all cells up to a single, aggregate row.  From what I've done, you or others may extrapolate the below to get the footer to do what you wish it to.  Hope this helps some:

 

01.var numColumnsBeforeDesiredColumn = 0,
02.    $grid = $("#grid");
03.
04.$grid.thead.find("th").each(function (index) {
05.    if ($(this).attr("data-field") === "QuantityToReceive") {
06.        numColumnsBeforeDesiredColumn = index;
07.        return false;
08.    }
09.});
10.
11.if (numColumnsBeforeDesiredColumn > 0) {
12.    $grid.footer.find("td:first").html("<em>Total magazines to send out:</em>").css({ textAlign: "right", paddingRight: "1rem" });
13.
14.    var numVisibleBeforeDesiredColumn = 0;
15.
16.    $grid.footer.find("td").each(function (index) {
17.        var $el = $(this);
18.
19.        if ($el.is(":visible")) {
20.            numVisibleBeforeDesiredColumn++;
21.
22.            if (index > 0 && index < numColumnsBeforeDesiredColumn) {
23.                $(this).css("display", "none");
24.            }
25.        }
26.    });
27.
28.    $grid.footer.find("td:first").attr("colspan", numVisibleBeforeDesiredColumn - 1);
29.}