Telerik Forums / UI for ASP.NET Core
This is a migrated thread and some comments may be shown as answers.

bootstrap fix header, footer and "contect with grid"

2 Answers 284 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dario
Top achievements
Rank 1
Veteran
Dario asked on 07 May 2020, 10:44 AM

Hi to all,

I would obtain a page that has header and footer fixed respectly top and bottom ancor.

In content insert a Grid, this one have to use all remaining height and use its scrollbar to keep rows.

How can I do this?

2 Answers, 1 is accepted

Sort by
0
Dario
Top achievements
Rank 1
Veteran
answered on 07 May 2020, 12:08 PM
miss-scrollbar-grid-and-footer.png

News,

I'm trying to use Dojo, but I can't to this.....help!

01.<!DOCTYPE html>
02.<html>
03.<head>
04.    <meta charset="utf-8"/>
05.    <title>Kendo UI Snippet</title>
06. 
08. 
09.    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
11.  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
12.</head>
13.<body>
14.   
15.    <style>
16.      html,
17.      body,
18.      #parent,
19.      .container
20.      #grid
21.      {
22.        margin: 0;
23.        padding: 0;
24.        border-width: 0;
25.        height: 100%; /* DO NOT USE !important for setting the Grid height! */
26.      }
27. 
28.      html
29.      {
30.        overflow: hidden;
31.        font: 13px sans-serif;
32.      }
33.    </style>
34.  <header style="height: 100px" class="bg-primary">
35.    <div class="container">
36.    intestazione
37.    </div>
38.  </header>
39.    <div id="parent">
40.      <div class="container">
41.     <div id="grid"></div>
42.      </div>
43.    </div>
44.  <footer style="height: 50px" class="bg-secondary">
45.    <div class="container">
46.    piede
47.    </div>
48.  </footer>
49.    <script>
50.      var gridElement = $("#grid");
51. 
52.      function resizeGrid() {
53.        gridElement.data("kendoGrid").resize();
54.      }
55. 
56.      $(window).resize(function(){
57.        resizeGrid();
58.      });
59. 
60.      $("#grid").kendoGrid({
61.        dataSource: {
62.          type: "odata",
63.          transport: {
65.          },
66.          schema: {
67.            model: {
68.              fields: {
69.                OrderID: { type: "number" },
70.                ShipName: { type: "string" },
71.                ShipCity: { type: "string" }
72.              }
73.            }
74.          },
75.          pageSize: 25,
76.          serverPaging: true,
77.          serverFiltering: true,
78.          serverSorting: true
79.        },
80.        filterable: true,
81.        sortable: true,
82.        resizable: true,
83.        pageable: true,
84.        columns: [{
85.              field:"OrderID",
86.              filterable: false,
87.              width: 200
88.            },
89.            "ShipName",
90.            "ShipCity"
91.        ]
92.      });
93.    </script>
94.</body>
95.</html>
0
Viktor Tachev
Telerik team
answered on 12 May 2020, 11:05 AM

Hello Dario,

 

Check out the following article that describes how the Grid can take the entire height of its container. The article uses the jQuery widget, however, the approach with the Core wrapper will be the same:

https://docs.telerik.com/kendo-ui/knowledge-base/resize-grid-when-the-window-is-resized

 

Regards,
Viktor Tachev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Dario
Top achievements
Rank 1
Veteran
Answers by
Dario
Top achievements
Rank 1
Veteran
Viktor Tachev
Telerik team
Share this question
or