feat(core): add "Empty Data" warning message when grid is empty

examples/webpack-demo-vanilla-bundle/src/examples/example11.ts

@@ -572,7 +572,7 @@ export class Example11 {
 
   pushNewFilterToSelectPreFilter(predefinedFilters: FilterPreset | FilterPreset[], isOptionSelected = false) {
     if (isOptionSelected) {
-      this.resetPredefinedFilterSelection(this.predefinedPresets);
+      this.predefinedPresets.forEach(preFilter => preFilter.isSelected = false); // reset selection
     }
     const presetFilters: FilterPreset[] = Array.isArray(predefinedFilters) ? predefinedFilters : [predefinedFilters];
     const filterSelect = document.querySelector('.selected-filter');
@@ -611,6 +611,7 @@ export class Example11 {
       event.stopPropagation();
       return;
     }
+    this.predefinedPresets.forEach(preFilter => preFilter.isSelected = false); // reset selection
     const currentFilters = this.sgb.filterService.getCurrentLocalFilters();
 
     const filterName = await prompt('Please provide a name for the new Filter.');
@@ -665,7 +666,7 @@ export class Example11 {
   }
 
   usePredefinedFilter(filterValue: string) {
-    this.resetPredefinedFilterSelection(this.predefinedPresets);
+    this.predefinedPresets.forEach(preFilter => preFilter.isSelected = false); // reset selection
     const selectedFilter = this.predefinedPresets.find(preset => preset.value === filterValue);
     if (selectedFilter) {
       selectedFilter.isSelected = true;
@@ -681,10 +682,6 @@ export class Example11 {
     this.currentSelectedFilterPreset = selectedFilter;
   }
 
-  resetPredefinedFilterSelection(predefinedFilters: FilterPreset[]) {
-    predefinedFilters.forEach(preFilter => preFilter.isSelected = false);
-  }
-
   mockProducts() {
     return [
       {

packages/common/src/editors/dateEditor.ts

@@ -168,7 +168,6 @@ export class DateEditor implements Editor {
       if (this.flatInstance.element) {
         setTimeout(() => destroyObjectDomElementProps(this.flatInstance));
       }
-      this.flatInstance = null;
     }
     if (this._$editorInputElm?.remove) {
       this._$editorInputElm.remove();
@@ -178,6 +177,7 @@ export class DateEditor implements Editor {
       this._$inputWithData.remove();
       this._$inputWithData = null;
     }
+    this._$input.remove();
   }
 
   disable(isDisabled = true) {

packages/common/src/filters/compoundDateFilter.ts

@@ -133,7 +133,7 @@ export class CompoundDateFilter implements Filter {
       this.$filterElm = null;
     }
     if (this.$selectOperatorElm) {
-      this.$selectOperatorElm.off('change').remove()
+      this.$selectOperatorElm.off('change').remove();
     }
   }
 

packages/common/src/global-grid-options.ts

@@ -96,6 +96,13 @@ export const GlobalGridOptions: GridOption = {
   defaultSlickgridEventPrefix: '',
   editable: false,
   editorTypingDebounce: 450,
+  enableEmptyDataWarningMessage: true,
+  emptyDataWarning: {
+    class: 'slick-empty-data-warning',
+    message: 'No data to display.',
+    marginTop: 100,
+    marginLeft: 10
+  },
   enableAutoResize: true,
   enableAutoSizeColumns: true,
   enableCellNavigation: false,

packages/common/src/interfaces/emptyWarning.interface.ts

@@ -0,0 +1,13 @@
+export interface EmptyWarning {
+  /** Empty data warning message, defaults to "No Records Found." */
+  message?: string;
+
+  /** DOM Element class name, defaults to "empty-data-warning" */
+  class?: string;
+
+  /** Top margin position, number in pixel, of where the warning message will be displayed, default calculation is (header title row + filter row + 5px) */
+  marginTop?: number;
+
+  /** Left margin position, number in pixel, of where the warning message will be displayed, defaults to 10px */
+  marginLeft?: number;
+}

packages/common/src/interfaces/gridOption.interface.ts

@@ -11,6 +11,7 @@ import {
   DataViewOption,
   DraggableGrouping,
   EditCommand,
+  EmptyWarning,
   ExcelCopyBufferOption,
   ExcelExportOption,
   ExportOption,
@@ -170,6 +171,15 @@ export interface GridOption {
   /** Default to 450ms and only applies to Composite Editor, how long to wait until we start validating the editor changes on Editor that support it (integer, float, text, longText). */
   editorTypingDebounce?: number;
 
+  emptyDataWarning?: EmptyWarning;
+
+  /**
+   * Defaults to true, will display a warning message positioned inside the grid when there's no data returned.
+   * When using local (in-memory) dataset, it will show the message when there's no filtered data returned.
+   * When using backend Pagination it will display the message as soon as the total row count is 0.
+   */
+  enableEmptyDataWarningMessage?: boolean;
+
   /** Do we want to emulate paging when we are scrolling? */
   emulatePagingWhenScrolling?: boolean;
 

packages/common/src/interfaces/index.ts

@@ -43,6 +43,7 @@ export * from './editorValidationResult.interface';
 export * from './editorValidator.interface';
 export * from './editUndoRedoBuffer.interface';
 export * from './elementPosition.interface';
+export * from './emptyWarning.interface';
 export * from './excelCellFormat.interface';
 export * from './excelCopyBufferOption.interface';
 export * from './excelExportOption.interface';

packages/common/src/styles/_variables.scss

@@ -861,3 +861,11 @@ $footer-right-float:                                  right !default;
 $footer-right-text-align:                             right !default;
 $footer-right-text-color:                             $footer-text-color !default;
 $footer-right-width:                                  50% !default;
+
+/** Empty Data Warning element */
+$empty-data-warning-color:                            $cell-text-color !default;
+$empty-data-warning-font-family:                      $font-family !default;
+$empty-data-warning-font-size:                        calc(#{$font-size-base} + 2px) !default;
+$empty-data-warning-font-style:                       italic !default;
+$empty-data-warning-line-height:                      18px !default;
+$empty-data-warning-z-index:                           9999 !default;

packages/common/src/styles/slick-pagination.scss → packages/common/src/styles/slick-component.scss

@@ -1,7 +1,64 @@
 /* pagination/pagination variables */
 @import './variables';
 
-/* Pagination styling */
+// ----------------------------------------------
+// Slick Footer Component
+// ----------------------------------------------
+
+.slick-custom-footer {
+  color: $footer-text-color;
+  padding: $footer-padding;
+  background-color: $footer-bg-color;
+  font-size: $footer-font-size;
+  font-style: $footer-font-style;
+  font-weight: $footer-font-weight;
+  height: $footer-height;
+
+  .left-footer {
+    color: $footer-left-text-color;
+    font-style: $footer-left-font-style;
+    font-weight: $footer-left-font-weight;
+    text-align: $footer-left-text-align;
+    padding: $footer-left-padding;
+    width: $footer-left-width;
+    float: $footer-left-float;
+  }
+
+  .right-footer.metrics {
+    color: $footer-right-text-color;
+    text-align: $footer-right-text-align;
+    font-style: $footer-right-font-style;
+    font-weight: $footer-right-font-weight;
+    text-align: $footer-right-text-align;
+    padding: $footer-right-padding;
+    width: $footer-right-width;
+    float: $footer-right-float;
+    .separator {
+      margin: $footer-right-separator-margin;
+    }
+  }
+}
+
+
+// ----------------------------------------------
+// Slick Empty Data Warning Component
+// ----------------------------------------------
+
+.slick-empty-data-warning {
+  position: absolute;
+  color: $empty-data-warning-color;
+  font-family: $empty-data-warning-font-family;
+  font-size: $empty-data-warning-font-size;
+  font-style: $empty-data-warning-font-style;
+  line-height: $empty-data-warning-line-height;
+  z-index: $empty-data-warning-z-index;
+}
+
+
+// ----------------------------------------------
+// Slick Pagination Component
+// ----------------------------------------------
+
 .slick-pagination {
   border-top: $pagination-border-top;
   border-right: $pagination-border-right;

packages/common/src/styles/slickgrid-theme-bootstrap.scss

@@ -10,8 +10,7 @@
 @import './slick-controls';
 @import './slick-editors';
 @import './slick-plugins';
-@import './slick-pagination';
-@import './slick-footer';
+@import './slick-component';
 @import './slickgrid-examples';
 @import './slick-bootstrap';
 @import './ui-autocomplete';

packages/common/src/styles/slickgrid-theme-material.bare.scss

@@ -16,8 +16,7 @@
 @import './slick-controls';
 @import './slick-editors';
 @import './slick-plugins';
-@import './slick-pagination';
-@import './slick-footer';
+@import './slick-component';
 @import './slickgrid-examples';
 @import './slick-bootstrap';
 @import './ui-autocomplete';

packages/common/src/styles/slickgrid-theme-material.lite.scss

@@ -18,8 +18,7 @@
 @import './slick-controls';
 @import './slick-editors';
 @import './slick-plugins';
-@import './slick-pagination';
-@import './slick-footer';
+@import './slick-component';
 @import './slickgrid-examples';
 @import './slick-bootstrap';
 @import './ui-autocomplete';

packages/common/src/styles/slickgrid-theme-material.scss

@@ -20,8 +20,7 @@
  @import './slick-controls';
  @import './slick-editors';
  @import './slick-plugins';
- @import './slick-pagination';
- @import './slick-footer';
+ @import './slick-component';
  @import './slickgrid-examples';
  @import './slick-bootstrap';
  @import './ui-autocomplete';

packages/common/src/styles/slickgrid-theme-salesforce.bare.scss

@@ -16,8 +16,7 @@
 @import './slick-controls';
 @import './slick-editors';
 @import './slick-plugins';
-@import './slick-pagination';
-@import './slick-footer';
+@import './slick-component';
 @import './slickgrid-examples';
 @import './slick-bootstrap';
 @import './ui-autocomplete';

packages/common/src/styles/slickgrid-theme-salesforce.lite.scss

@@ -17,8 +17,7 @@
 @import './slick-controls';
 @import './slick-editors';
 @import './slick-plugins';
-@import './slick-pagination';
-@import './slick-footer';
+@import './slick-component';
 @import './slickgrid-examples';
 @import './slick-bootstrap';
 @import './ui-autocomplete';

packages/common/src/styles/slickgrid-theme-salesforce.scss

@@ -21,8 +21,7 @@
 @import './slick-controls';
 @import './slick-editors';
 @import './slick-plugins';
-@import './slick-pagination';
-@import './slick-footer';
+@import './slick-component';
 @import './slickgrid-examples';
 @import './slick-bootstrap';
 @import './ui-autocomplete';

packages/vanilla-bundle/src/components/slick-empty-warning.component.ts

@@ -0,0 +1,62 @@
+import { EmptyWarning, GridOption, sanitizeTextByAvailableSanitizer, SlickGrid } from '@slickgrid-universal/common';
+
+export class SlickEmptyWarningComponent {
+  private _warningElement: HTMLDivElement | null;
+
+  /** Getter for the Grid Options pulled through the Grid Object */
+  get gridOptions(): GridOption {
+    return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
+  }
+
+  constructor(private grid: SlickGrid) { }
+
+  dispose() {
+    this._warningElement?.remove();
+  }
+
+  /**
+    this.angularGrid.destroy();	   * Display a warning of empty data when the filtered dataset is empty
+   * NOTE: to make this code reusable, you could (should) move this code into a utility service
+   * @param gridSelector - HTML Selector of the grid <div>
+   * @param emptyMessage - empty data message to display in the <span>
+   * @param isShowing - are we showing the message?
+   * @param options - any styling options you'd like to pass like the text color
+   */
+  showEmptyDataMessage(gridSelector: string, isShowing = true, emptyMessage?: string, options?: EmptyWarning) {
+    const gridUid = this.grid.getUID();
+    const mergedOptions = { ...this.gridOptions.emptyDataWarning, options };
+    const emptyDataClassName = mergedOptions.class || 'slick-empty-data-warning';
+    const finalClassNames = [gridUid, emptyDataClassName];
+    this._warningElement = document.querySelector<HTMLDivElement>(`.${finalClassNames.join('.')}`);
+    const gridElm = document.querySelector<HTMLDivElement>(gridSelector);
+
+    // calculate margins
+    const gridHeaderFilterRowHeight = this.gridOptions?.headerRowHeight ?? 30; // filter row height
+    const headerRowCount = 2; // header title row is calculated by SASS and defined as (17px * headerRowCount + paddingTopBottom)
+    const headerRowPaddingTopBottom = 10; // 5px (2x for both top/bottom), this is different in each SASS Theme
+    const headerRowHeight = 17 * headerRowCount + headerRowPaddingTopBottom;
+    const warningMessage = emptyMessage ?? mergedOptions.message ?? 'No data to display.';
+    const preHeaderRowHeight = this.gridOptions.showPreHeaderPanel && this.gridOptions.preHeaderPanelHeight || 0;
+    const marginTop = (mergedOptions.marginTop ?? (headerRowHeight + gridHeaderFilterRowHeight + 5)) + preHeaderRowHeight;
+    const marginLeft = mergedOptions.marginLeft ?? 10;
+
+    if (!this._warningElement) {
+      const sanitizedOptions = this.gridOptions && this.gridOptions.sanitizeHtmlOptions || {};
+      const sanitizedText = sanitizeTextByAvailableSanitizer(this.gridOptions, warningMessage, sanitizedOptions);
+
+      this._warningElement = document.createElement('div');
+      this._warningElement.className = finalClassNames.join(' ');
+      this._warningElement.innerHTML = sanitizedText;
+      document.body.appendChild(this._warningElement);
+    }
+
+    if (gridElm && this._warningElement) {
+      if (isShowing) {
+        const gridPosition = gridElm.getBoundingClientRect();
+        this._warningElement.style.top = `${gridPosition.top + marginTop}px`;
+        this._warningElement.style.left = `${gridPosition.left + marginLeft}px`;
+      }
+      this._warningElement.style.display = isShowing ? 'inline' : 'none';
+    }
+  }
+}