When searching the data in the filter I want to show "No data to display" when search results with empty dataset in Angular SlickGrid

When searching the data in the filter I want to show "No data to display" when search results with empty dataset

Context

When searching the data in the filter I want to show "No data to display" when search results with empty dataset

Expected Behavior

show "No data to display" Message instead of empty one

Current Behavior

It shows empty

Environment

Angular - 8.2.14, Angular-Slickgrid - 2.22.4 ,TypeScript - 3.7

UPDATE 2020-11-18

This is now part of Angular-Slickgrid (since version 2.23.1) and is enabled by default, you can also disable it with the flag enableEmptyDataWarningMessage. There are also few options you can provide with the new property emptyDataWarning Grid Options (see EmptyWarning interface for more info)

I also did not use the code shown with the absolute positioning since that was causing issues, instead the approach is to search for the DOM element with class of .grid-canvas and append a <div> to that container, so that it's always at the correct position.

Original Answer

It's not possible in SlickGrid, it will only displays data that must fit in the cells.

However you have other alternatives, I think the best you can do is to display your text in a span in the middle (or top) of the grid. You can take a look at the SlickGrid Example - Yahoo Search it shows the "Buffering..." in the middle of the screen. The final piece is to know when to display it, you can use the DataView onRowCountChanged event, which will provide you the item count.

<span class="empty-data" [hidden]="hasFilteredData">
   No data to display
</span>

<angular-slickgrid gridId="grid4" 
    [columnDefinitions]="columnDefinitions" 
    [gridOptions]="gridOptions"
    [dataset]="dataset" 
    (sgOnRowCountChanged)="handleOnRowCountChanged($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>

export class MyDemo {
  hasFilteredData = true;

  handleOnRowCountChanged(e, args) {
    this.hasFilteredData = args.current > 0;
  }
}

To position the empty data <span> message, you can take a look at the Yahoo Example I provided earlier, they use something like this (you can use relevant code)

loader.onDataLoading.subscribe(function () {
      if (!loadingIndicator) {
        loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body);
        var $g = $("#myGrid");

        loadingIndicator
            .css("position", "absolute")
            .css("top", $g.position().top + $g.height() / 2 - loadingIndicator.height() / 2)
            .css("left", $g.position().left + $g.width() / 2 - loadingIndicator.width() / 2);
      }

      loadingIndicator.show();
    });

Taking pieces of it, I can achieve what is shown below

@Component({
  styles: ['.empty-data { color: orange; z-index: 9999; position: absolute; }'],
  templateUrl: './my-demo.component.html'
})
export class MyDemo {
  hasFilteredData = true;

  handleOnRowCountChanged(e, args) {
    this.hasFilteredData = args.current > 0;

    const $grid = $('#grid4');

    $('.empty-data')
      .css("top", $grid.position().top + 90)
      .css("left", $grid.position().left + 10);
  }

   // or with pure JS
   /*
   const emptyDataElm = document.querySelector<HTMLSpanElement>('.empty-data');
   const grid = document.querySelector<HTMLDivElement>('#grid4');
   const gridPosition = grid.getBoundingClientRect();
   emptyDataElm.style.top = `${gridPosition.top + 90}px`;
   emptyDataElm.style.left = `${gridPosition.left + 10}px`;
   */
}

New LIVE DEMO

You could also make it fully reusable by moving the entire code into a utility service so that you won't have to copy the same code over and over in all in your grids. We can also use only the DOM to create/show/hide the message to be fully dynamic and code it once.

<span class="empty-data">
   No data to display
</span>

<angular-slickgrid>...</angular-slickgrid>

@Component({
  templateUrl: './my-demo.component.html'
})
export class MyDemo {
  handleOnRowCountChanged(e, args) {
    // display warning when there's no filtered data
    utility.showEmptyDataMessage('#grid4', 'No data to display', args.current === 0 /*, { color: 'red' } */);
  }
}

  // utility.ts

  /**
   * 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
   */
  export function showEmptyDataMessage(gridSelector: string, emptyMessage: string, isShowing = true, options?: { color: string; class: 'empty-data' }) {
    const emptyDataClassName = options && options.class || 'empty-data';
    let emptyDataElm = document.querySelector<HTMLSpanElement>(`.${emptyDataClassName}`);
    const grid = document.querySelector<HTMLDivElement>(gridSelector);

    if (!emptyDataElm) {
      emptyDataElm = document.createElement('span');
      emptyDataElm.className = emptyDataClassName;
      emptyDataElm.textContent = emptyMessage;
      document.body.appendChild(emptyDataElm);
    }

    if (isShowing) {
      const gridPosition = grid.getBoundingClientRect();
      emptyDataElm.style.top = `${gridPosition.top + 90}px`;
      emptyDataElm.style.left = `${gridPosition.left + 10}px`;
      emptyDataElm.style.color = options && options.color || 'orange';
      emptyDataElm.style.zIndex = '9999';
      emptyDataElm.style.position = 'absolute';
      emptyDataElm.style.display = 'inline';
    } else {
      emptyDataElm.style.display = 'none';
    }
}