ListGrid Summary Cell Formatting Question

[Sin]

Hi,

We are using SmartClient 10.0.12.27.14 and we trying to figure out how to:

1. Create a multiline grid summary such that each cell can be styled differently (see below).

Is this possible?

Thanks,

-Sin

[Isomorphic]

There's a huge amount of questions you'd need to answer before we could recommend an approach, basically, which of the dozens of basic grid features are expected to work in this mode? editing, selection, grouping, resizing of columns, reordering of columns, horizontal scrolling, inline filtering, etc etc

To throw out one approach, with some careful styling, you can achieve this using the recordComponents subsystem by having the second and third lines shown above be part of a recordComponent.

[Sin]

Hi,

To answer some of your questions, we would need to support editing, resizing and reordering of columns. We would have no need for horizontal scrolling, inline filtering and selection (I believe, at this time).

We are actually using a record component. The screen shot you see above is not a Photoshop mockup but the real SmartClient ListGrid in action (we are doing a proof of concept). Currently, we are returning an array with two elements from the getGridSummary function which contains both the data you see (like the 75.82, 64.20) and HTML with it so we can later target that data and style it.

The code looks like this:

getGridSummary: function (records, summaryField) {
return [
"<div class='at_SummaryRow_Row1Cell1'>75.82</div>",
"<div class='at_SummaryRow_Row1Cell2'>64.20</div>"
];
}

Is there a better or an alternate approach you would recommend?

Thanks,

-Sin

[senordhuff]

Just to clarify, his original question here was only about the grid summary formatting and not about the embedded record components.

[Isomorphic]

We're no longer clear on the question then. You're showing a result you've already achieved with SmartClient, and asking whether it can be done...?

[Sin]

We were wondering if what we did is best practice or if you have alternate/better ways of doing things.

Thanks,

-Sin

[Isomorphic]

Well it's a mild hack, with a small performance hit. You are turning on summary calculations, which causes a bunch of computation to take place, but then totally ignoring the results in favor of returning something else. Another approach would be to simply place another component underneath the grid with the data you want to display. It's true that getting the alignment right would be harder in this case, as you'd have to watch for resizing and reordering of fields in order to place your summary information under the correct columns.

[Sin]

As you mentioned, the advantage of us using the grid summary feature is as we move the columns around, our summary follows along (so that is nice). While the numbers are hard-coded now, they will eventually be calculated in real-time in the future. Is there an alternative to what we did, as far as we mixed data and HTML in each array element we returned from the getGridSummary function? Is that truly the only way to accomplish what we are trying to achieve?

Thanks,

-Sin

[Isomorphic]

That seems like the least important part of the hack, but, if you want to separate styling from data, the "summaryRow" is an AutoChild of type ListGrid and offers the usual ListGrid styling and formatting APIs.

[Sin]

Thanks for your response. It was exactly what I was looking for! After you mentioned that a summaryRow is just another ListGrid, I am able to apply formatting to each cell by overriding the summary row's getBaseStyle() function and inspecting each row/column for the formatting I need to apply. The result looks exactly the same as the previously posted picture, but now we are not mixing data and HTML code.

Thanks again!

-Sin