fix(grid): no records template

telerik · Jun 14, 2019 · 74c9a7d · 74c9a7d
1 parent b8a741a
commit 74c9a7d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 5 deletions.
diff --git a/packages/default/scss/grid/_layout.scss b/packages/default/scss/grid/_layout.scss
@@ -963,11 +963,13 @@
         }
     }
 
-
     .k-grid-norecords {
+        text-align: center;
+    }
+
+    div.k-grid-norecords {
         width: 100%;
         height: 100%;
-        text-align: center;
         display: flex;
         align-items: center;
     }
@@ -979,7 +981,6 @@
         margin: 0 auto;
         border: 1px solid;
     }
-
 }
 
 @include exports( "grid/pdf-export" ) {

diff --git a/tests/visual/grid-no-records.html b/tests/visual/grid-no-records.html
@@ -10,7 +10,7 @@
 </head>
 <body>
     <div id="test-area">
-        <div id="grid" data-role="grid" class="k-grid k-widget k-display-block k-grid-no-scrollbar" style="height: 550px;">
+        <div id="grid" data-role="grid" class="k-grid k-widget k-display-block k-grid-no-scrollbar" style="height: 350px;">
             <div class="k-grid-header">
                 <div class="k-grid-header-wrap k-auto-scrollable">
                     <table role="grid">
@@ -30,7 +30,7 @@
                     </table>
                 </div>
             </div>
-            <div class="k-grid-content k-auto-scrollable" style="height: 480px;">
+            <div class="k-grid-content k-auto-scrollable" style="height: 280px;">
                 <table role="grid" style="height: auto;">
                     <colgroup>
                         <col style="width:225px">
@@ -46,6 +46,52 @@
                 <div class="k-grid-content-expander" style="width: 982px;"></div>
             </div>
         </div>
+        <h4>Angular Grid</h4>
+        <kendo-grid ng-reflect-data="" dir="ltr" class="k-widget k-grid">
+            <div class="k-grid-aria-root" role="grid" aria-rowcount="1" aria-colcount="4">
+                <div class="k-grid-header" role="presentation" style="padding: 0px 16px 0px 0px;">
+                    <colgroup kendogridcolgroup="" role="presentation">
+                        <col style="width: 140px;">
+                        <col style="width: 120px;">
+                        <col style="width: 100px;">
+                        <col style="width: 130px;">
+                    </colgroup>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th class="k-header" rowspan="1" colspan="1">CompanyName</th>
+                                <th class="k-header" rowspan="1" colspan="1">ContactName</th>
+                                <th class="k-header" rowspan="1" colspan="1">City</th>
+                                <th class="k-header" rowspan="1" colspan="1">ContactTitle</th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
+
+            <kendo-grid-list class="k-grid-container">
+            <div class="k-grid-content k-virtual-content">
+                <div class="k-grid-table-wrap">
+                        <table class="k-grid-table">
+                            <colgroup>
+                                <col style="width: 140px;">
+                                <col style="width: 120px;">
+                                <col style="width: 100px;">
+                                <col style="width: 130px;">
+                            </colgroup>
+                            <tbody>
+                                <tr class="k-grid-norecords">
+                                    <td colspan="4">No records available. </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="k-height-container">
+                        <div style="height: 0px;"></div>
+                    </div>
+                </div>
+            </kendo-grid-list>
+        </kendo-grid>
     </div>
 </body>
 </html>