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

bootstrap fix header, footer and "contect with grid"

2 Answers 356 Views

Grid

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

2 Answers, 1 is accepted

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.

07. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"/>

08.

09. <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

10. <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.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: {

64. read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"

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>