We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Custom search logic

I need to search a column with custom logic.

My requirements:

  1. I want to be able to search records with search value "S1234567D" in column called "Column A", with value *****567D.
  2. The search value is input with an external barcode reader, there will be a CR at the end of the input. After the search, I need the search box to be emptied and focused.

For 1, I have tried to follow https://www.syncfusion.com/forums/167966/search-date and modified the onLoad() method, but it's not working. Below is the code snippet:

function onLoad() {

// Keyup event bound to the input element
var grid = document.getElementById("Grid").ej2_instances[0];
var gridInitialData = grid.dataSource.slice(0);
grid.element.addEventListener('keyup', (args) => {
if ((args.target).getAttribute('id') === 'toolSearch') {
let gridObj = grid;
var regex = /^[STFG]\d{7}[A-Z]$/;
// Test regex with the entered value
let input = (args.target);
if (regex.test(input.value)) {
var count = 0;
var predicates;
// Value is split to form JavaScript’s Date object
var lastFourChar = input.value.substring(input.value.length - 4);
var dateVal = new Date(parseInt(dateSplit[2]), (parseInt(dateSplit[1]) - 1), parseInt(dateSplit[0]));
while (count < gridObj.columns.length) {
// Predicate is generated for all columns with type as ‘date’
let col = gridObj.columns[count];
// Predicates are generated with the column field name and date object value
predicates = (predicates === undefined) ? new ej.data.Predicate(col.field, "contains", lastFourChar) : predicates.or(col.field, "contains", lastFourChar);
// Data manager is executed with grid’s datasource and query generated based on the predicates
new ej.data.DataManager({ json: (gridObj.dataSource) }).executeQuery(new ej.data.Query().where(predicates)).then((e) => {
// The returned result is assigned to the grid datasource
gridObj.dataSource = e.result;
} else if (input.value === "") {
if (gridObj.searchSettings.key === "") {
var data = gridInitialData;
// If the input value and search key is empty the entire data source is assigned to the grid
gridObj.dataSource = ej.data.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
} else {
// Grid search method is called with the input value

1 Reply

RR Rajapandi Ravi Syncfusion Team October 10, 2022 08:23 AM

Hi Yi Xu,

Greetings from Syncfusion support

From your query we could suspect that you like to search the Date values in the Grid. In EJ2 Grid, we don’t have the support to search the DateObject values. Please refer the below kb and achieved using the customized solution,

Kb: https://www.syncfusion.com/kb/11251/how-to-perform-searching-in-date-type-column

If we misunderstood anything wrongly, please share the below details that will be helpful for us to provide better solution.

1)        Share us your exact requirement scenario step by step with detailed description.

2)        Explain your requirement and problem scenario with pictorial representation or video demonstration.


Rajapandi R

Live Chat Icon For mobile
Up arrow icon