I need to search a column with custom logic.
My requirements:
- I want to be able to search records with search value "S1234567D" in column called "Column A", with value *****567D.
- 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.
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);
count++;
}
// 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
gridObj.search("");
}
} else {
// Grid search method is called with the input value
gridObj.search(input.value);
}
}
});
}
