Date search on grid component

[Joel Santos]

Hi.

How do I perform a custom search in a grid that has a date field? Right now the grid has other fields and a date field, I can't do a:

grid.search('2020-02-01')

for instance, to try to find a date inside the grid. Is there any pattern to search for a date?

Thanks in advance.

[Balaji Sekar]

Hi Sarathkumar, 

 

Greetings from Syncfusion support 

 

Query : Date search on grid component. 

 

In our grid component, currently we don’t have support for date column searching in Grid. But we can achieve this requirement by using the following Workaround. Here we have an input element in the toolbar for searching and then using the EJ2 DataManager to form predicates based on the values entered in the input element and execute it with the current data source to return the resultant records which can then be appended to the grid’s data source. Here keyup event is bound to the input element appended to the grid’s toolbar. In this keyup event condition is checked if the entered input value is of date format(dd/MM/yyyy) using regex and if so it is converted into JavaScript Date object and then predicates are generated using the EJ2 data’s Predicates method for all the date columns.  

 

App.component.ts 

import { Component, OnInit, ViewChild } from '@angular/core'; 

    @ViewChild('grid', {static: true}) 

    public grid: GridComponent; 

    public format: object = {type: 'date', format: 'yyyy-MM-dd' }; 

    onLoad(): void { 

      this.grid.element.addEventListener('keyup', (args: KeyboardEvent) => { 

          if ((args.target as HTMLElement).getAttribute('id') === 'toolSearch' && args.key === "Enter") { 

              let gridObj: Grid = this.grid; 

              // Regex for checking date of format – “dd/MM/yyyy”  

              var regex = /^\d{4}-((0\d)|(1[012]))-(([012]\d)|3[01])$/;            // for making of regex into yyyy-MM-dd 

              // Test regex with the entered value  

              let input: HTMLInputElement = (args.target as HTMLInputElement); 

              if (regex.test(input.value)) { 

                  var count = 0; 

                  var predicates; 

                  // Value is split to form JavaScript’s Date object  

                  var dateSplit = input.value.split("-"); 

                  var dateVal = new Date(parseInt(dateSplit[0]), (parseInt(dateSplit[1]) - 1), parseInt(dateSplit[2])); 

                  while (count < gridObj.columns.length) { 

                      // Predicate is generated for all columns with type as ‘date’ 

                      let col: ColumnModel = gridObj.columns[count] as ColumnModel; 

                      if (col.type === "date") { 

                          // Predicates are generated with the column field name and date object value  

                          predicates = (predicates === undefined) ? new Predicate(col.field, "contains", dateVal) : predicates.or(col.field, "contains", dateVal); 

                      } 

                      count++; 

                  } 

                  // Data manager is executed with grid’s datasource and query generated based on the predicates  

                  new DataManager({ json: (gridObj.dataSource as object[]) }).executeQuery(new Query().where(predicates)).then((e: ReturnOption) => { 

                      // The returned result is assigned to the grid datasource  

                      gridObj.dataSource = e.result as object[]; 

                  }); 

              } else if (input.value === "") { 

                  if (gridObj.searchSettings.key === "") { 

                      var data = orderDetails; 

                      // If the input value and search key is empty the entire data source is assigned to the grid  

                      gridObj.dataSource = DataUtil.parse.parseJson(data); 

                  } else { 

                      // If the input value is empty but the grid contains a search key, then another search is performed with empty value to remove the search  

                      gridObj.search(""); 

                  } 

              } else { 

                  // Grid search method is called with the input value  

                  gridObj.search(input.value); 

              } 

} 

 

App.component.html 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' (load)='onLoad($event)' height='350'> 

      <ng-template #toolbarTemplate let-data> 

        <ejs-toolbar> 

          <e-items> 

            <e-item id='collapse' prefixIcon='e-collapse'> 

              <ng-template #template> 

                <div class="e-input-group">  

                  <input class="e-input" name='input' id="toolSearch" type="text" placeholder="Search" />       //input element is rendered 

                  <span class="e-input-group-icon e-search-icon e-icons"></span>  

                </div>  

              </ng-template> 

            </e-item> 

          </e-items> 

       </ejs-toolbar> 

      </ng-template> 

      <e-columns> 

          <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

      </e-columns> 

    </ejs-grid> 

</div> 

 

Sample : https://stackblitz.com/edit/angular-wnelll-qu8pks?file=app.component.html 

 

Please get back to us if you need further assistance 

 

Regards 

Balaji Sekar. 

[Joel Santos]

Hi Balaji,

The workaround is good but it will only work if I have the exact date on the grid, but since the timestamp is on the date object if I change just one second the search will not work, I'm trying to find a way to check just for the date ignoring the rest is that possible?

Thanks.

[Balaji Sekar]

Hi Joel, 

 

Greetings from Syncfusion support 

 

Query : Searching of date with Timestamp. 

 

No, We have validated your query and you want to search using Timestamp. But currently we don’t have support for searching of dates in Grid with Timestamp. 

 

Please get back to us if you need further assistance 

 

Regards 

Balaji Sekar.