bootstrap fix header, footer and "contect with grid"

3 posts, 0 answers
  1. Dario
    Dario avatar
    40 posts
    Member since:
    Jun 2018

    Posted 07 May 2020 Link to this post

    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. Dario
    Dario avatar
    40 posts
    Member since:
    Jun 2018

    Posted 07 May 2020 in reply to Dario Link to this post

    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>
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 12 May 2020 Link to this post

    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.
Back to Top