When the grid is rendered, there is an outline rectangle in gray, and the grid's rows "spill over" it. Please see attached screen shots. I would like the outline either not to be visible or to be at the same location as the top of the grid footer rectangle.
What CSS settings do I need to change to fix that issue? How to set the grid's height so it occupies 100% of the panelBar's content pane?
4 Answers, 1 is accepted
I am not quite sure what causes the illustrated outcome. For your convenience I prepared a simple HTML page with a similar scenario - could you please edit it and show me your current implementation? This way I would be able to advice you further and provide concrete recommendations. Thank you in advance for your cooperation.
Iliana Nikolova
Telerik

It is possible I am not aggregating correctly. I find the documentation much too LACONIC on this subject. The examples I have been shown are confusing. Specifically, it is not clear to me what is occurring when aggregate and aggregates arrays are defined in the dataSource configuration and in the column configuration too.
I'd like see an ultra-simple example on how to accomplish this (and only this) with the kendo grid:
select name, category, sum(quantity)
from foo
group by category
when the original query that populates the grid is:
select name, category, quantity from foo
also, with the grid not initially grouped but is groupable by [category]. When the user drags [category] column to group panel, the groupFooter displays the sum of quantity for each category. When the grid is not grouped, the footer displays sum of quantity for all items .
Thank you for the help.
Thank you for the modified example. Actually the issue is CSS related and is caused by the Grid's height is equal to the panelBar item's content height. Hence in order to keep the height you could set overflow: auto; to the .k-panelbar .k-content element (keep in mind this will enable vertical scrollbar when needed). I.e.:
<style>
.k-panelbar .k-content {
overflow
:
auto
;
}
</style>
Regarding the aggregates, in order to use:
- columns.footerTemplate you should define the aggregates in the dataSource. I.e.:
$(
"#grid"
).kendoGrid({
//....
dataSource: {
//....
aggregate: [
{ field:
"UnitPrice"
, aggregate:
"sum"
},
]
},
columns: [
{ field:
"UnitPrice"
, title:
"Unit Price"
, footerTemplate:
"Sum #= sum # "
}
//....
]
});
- columns.groupFooterTemplate - you should define columns.aggregates. For example:
$(
"#grid"
).kendoGrid({
//....
columns: [
{ field:
"UnitPrice"
, title:
"Unit Price"
, groupFooterTemplate:
"Sum #= sum # "
, aggregates: [
"sum"
]}
//....
]
});
For your convenience I updated the example and attached it back.
Iliana Nikolova
Telerik
