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

what CSS settings would remove this outline rectangle from grid which has been put on a panelBar

4 Answers 102 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tim R
Top achievements
Rank 1
Tim R asked on 03 Jul 2013, 04:16 PM
The grid is on a panelBar. In configuration of the grid, grid height is set to 444px.  PanelBar height is also set to 444px in its configuration:

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

Sort by
0
Iliana Dyankova
Telerik team
answered on 05 Jul 2013, 09:01 AM
Hi Tim,

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. 

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tim R
Top achievements
Rank 1
answered on 05 Jul 2013, 02:45 PM
I believe the display artefact  has to do with with   footerTemplate or groupFooterTemplate.  See code file attached. Please note that I have removed the paging capability since it is not desired.

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.
0
Iliana Dyankova
Telerik team
answered on 09 Jul 2013, 01:15 PM
Hi Tim,

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:

$("#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. 

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tim R
Top achievements
Rank 1
answered on 10 Jul 2013, 05:22 PM
perfect. thanks for the grouping help too.
Tags
Grid
Asked by
Tim R
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Tim R
Top achievements
Rank 1
Share this question
or