I am looking for a way to filter out empty cell data from my grid, I have implemented sorting, I am able to get all the blank cell at one place, but it would be great if any kind of filtering is possible on blank cells.
What I was thinking (theoretical), that if we could map the empty cell with some kind of expression e.g. {blank}{`}, anything of that sort then maybe the filtration is possible. But have no idea how to implement that.
function filter(item) {
for (var columnId in columnFilters) {
if (columnId !== undefined && columnFilters[columnId] !== "") {
var c = grid.getColumns()[grid.getColumnIndex(columnId)];
if (item[c.field] !== undefined)
{
if (item[c.field].toString().toLowerCase().search(columnFilters[columnId].toLowerCase()) === -1) {
return false;
}
} else if(columnFilters[columnId] === "#blank")
{
return true;
} else
return false;
}
}
return true;
}
adding this line "else if(columnFilters[columnId] === "#"){return c;}"
got me all the blank cells (that do not have any data), cell property = "undefined". By typing '#' in the search box all the blank cells get filtered.
Related
Firstly please excuse my phrasing here, quite new to JS.
I have the below JS code running and it works perfectly with the parameters set to colour the 'Assigned Mins' column in my table.
What I am looking to do is add a 2nd parameter where the same colouring and parmeters but adding a column called 'Pending'
for(var i=0; i<columns.length; ++i) {
if(columns[i].text == 'Assigned Mins') {
columns[i].renderer = function (value, meta, rec) {
if(value > '0:19') {
meta.style = "background-color:red;font-weight:bold;color:white;";
}
else if(value > '0:09') {
meta.style = "background-color:orange;font-weight:bold;color:white;";
}
else {
meta.style = "background-color:green;font-weight:bold;color:white;";
}
return value;
I've tried:
if(columns[i].text == 'Assigned Mins','Pending') {
and
if(columns[i].text == 'Assigned Mins'||'Pending') {
and a few other variations using the || and && operators but either nothing happens or it colours all columns in the table.
As suggested I have also just tried the duplicate post (Check variable equality against a list of values) using:
if (['Assigned Mins','Pending'].indexOf(columns[i]) > -1)
and
if (~['Assigned Mins','Pending'].indexOf(columns[i]))
However in both cases the result is that none of the colouring works at all
Please can someone advise?
Thank you
this should work. It's the solution you provided but you just forgot the .text
if (['Assigned Mins','Pending'].indexOf(columns[i].text) > -1)
let emptyErr = []
if (!(req.files || req.files.image)) {
emptyErr[0] = ('An image banner is required for a post!')
}
else if (!req.body.title) {
emptyErr[1] = ('A title is required for a post.')
}
else if (!req.body.body) {
emptyErr[2] = ('Content is required for a post.')
}
else if (emptyErr.length > 0) {
req.flash('validationErrors', emptyErr)
res.redirect('/post/new')
}
let image = req.files.image
If I leave the form completely blank, it should check each of these if statements and add a string to the array at the top. Then it would check if there are any elements in the array and redirect to a different page, killing the script. But instead it just skips over the if statements and then complains that the req.files.image is null. Which if it was null, it would trigger the first if statement, add an element to the array and hit the last if statement. I'm not too sure why this is happening and what I'm doing wrong.
You want if not else if
by doing what you do, javascript doesn't go inside else if or else if the parent if or if one else if match the condition.
let emptyErr = []
if (!(req.files || req.files.image)) {
emptyErr.push('An image banner is required for a post!')
}
if (!req.body.title) {
emptyErr.push('A title is required for a post.')
}
if (!req.body.body) {
emptyErr.push('Content is required for a post.')
}
if (emptyErr.length > 0) {
req.flash('validationErrors', emptyErr)
res.redirect('/post/new')
}
let image = req.files.image
Also use .push() to add something in the array, else if one if is not correct you will have an incorrect array since index will be empty.
I currently have a table with a function that checks certain columns that have checkboxes, whenever they are "clicked off", to see if they're all completely empty.
The function does a loop from the first of the checked columns up until the last one that has to be checked. They go from 1 to 8, and their ids go from "f01_check" up until "f08_check". If all are empty, it adds a css class to its description column that changes background color.
The function looks like this:
function unChecked(rowNumber) {
alert(rowNumber);
var i = 1;
var check = false;
// Column loop
while (i < 9 && check == false) {
if (rowNumber.getElementById("f0" + i + "_check").checked == false) {
i++;
} else {
check = true;
}
// If all checkboxes are empty, add class
if (i == 9 && check == false) {
$s(description.addClass(emptyRecords));
}
}
}
The Dynamic Action leading to this function and its parameter is this:
var row = this.triggeringElement.closest('tr');
unChecked(row);
I realize that the rowNumber.getElementById doesn't work, but I can't figure out how to link or connect them. The way I'm looping through the columns might be a rough attempt, but it works. I've tested it on a set column and it it does stop whenever the loop reaches a checked checkbox. The problem is I just can't dynamically set the row to match the one that I've clicked.
I've tried getting the property .rowIndex as well, but I can't figure out where to use it, even if I do get the correct value.
I found a different solution, that also somewhat solves a different problem in the future.
Rather than use rownum to set a dynamic id for the columns, I changed it to it's primary key:
apex_item.checkbox (1, '1_' || pk, decode(data1,null,null,'CHECKED'), null, null, 'f01_' || pk) as lpb1
This basically helped me on knowing which row was being clicked, because the id also held it's primary key. This allowed me to use it's primary key value to improve the function. The item_pkis an item that gets its value from the corresponding table column:
function unChecked(row) { // var row = this.triggeringElement.closest('tr').rowIndex;
// unChecked(row);
var i = 1;
var check = false;
while (i < 9 && check == false) {
if (document.getElementById("f0" + i + "_" + item_pk.value).checked == false) {
i++;
} else {
check = true;
}
if (i == 9 && check == false) {
//addClass Segment
}
}
}
So if the report were to be filtered, the row number wouldn't match what the filter actually showed on the report table.
The previous solution was also fixed by removing the case clause from the select, as follows:
apex_item.checkbox (1, '1_' || a.pk, case when max(decode(data1,1,1,null)) is null then '' else 'CHECKED' end, null, null, 'f01_chk') as lpb1,
But again, the first solution showed actually foresees and handles a filtered report, so I believe it's a superior and more accurate solution.
Now I just need to complete the addClass segment. For some reason Apex is setting the field "static id" as the column header, which is slightly problematic since I meant to use the document.getElementById. But at least the main problem has been fixed. Thanks for the responses.
I create a search bar. When the user presses the letter 'A' I want to display the users whose first name starts with the letter 'A'.
This works, but my problem is when the search bar is empty.
When it is empty, my program displays all the users, and I want it to show none.
Here is my program to obtain the value entered by the user :
searchUser(): void {
let str;
let element = document.getElementById('chat-window-input');
if(element !== null) {
str = (element as HTMLInputElement).value;
}
else {
str = null;
}
}
Do you know how to detect an empty field ?
I tested this but it does not change anything :
if(str == null) {
this.searchArrayThreads = [];
}
Hi you can try like this,
if(str == null || (!str) || str=='') {
this.searchArrayThreads = [];
}
In your question it seems you have one array of data.
so keep a tempDataSet
this.tempDataSet = [];
then while filtering you can directly assign values.
this.str = '';
searchUser(): void {
let element = document.querySelector('#chat-window-input');
if(element && element.value) {
return this.str = element.value;
}
}
I think this will help you
I'm trying to apply a constraint on combobox. It's half-working at the moment.
On the combobox, I have this listener:
[...]
listeners: {
'focus': function (combo, value) {
var orgComboVal = Ext.getCmp('Org1')
var getOrgValue = orgComboVal.getValue();
if (typeof getOrgValue !== undefined) {
reseaulist.clearFilter(true);
for (var q = 0, l = getOrgValue.length; q < l; q++) {
reseaulist.filter([
{property:'code_organisme', value: getOrgValue[q]}
]);
}
}
}
}
Ext.getCmp('Org1') defines another combobox.
When orgComboVal.getValue() is a single value, the filter is well applying.
but when it's an array of value, eg ["5", "9"], it's not working and the combobox supposed to be filtered shows no value (so I guess a filter is still applied but in an incorrect way).
I guess it's because the reseaulist.filter is called multiple time.
How can I achieve this ?
I saw the filterBy method but I don't know how to make it work.
Also, this post is interesting : How to filter a store with multiple values at once? but same, can't make it work since
getOrgValue.split(',')
is showing an error
(Object Array has no method split)
Any tips ? I'm using ExtJS 4.2.
EDIT
Thanks to #rixo, I've made it.
Also, I had to change some of the code he provided me, because the value of the Org1 combobox was always an array, even if empty, so the store filter was never cleared.
Here it is :
'focus': function (combo, value) {
var orgComboVal = Ext.getCmp('Org1')
var values = orgComboVal.getValue();
console.log(values)
if (values != null) {
reseaulist.clearFilter(false);
if (Ext.isArray(values)) {
if (0 < values.length) {
reseaulist.filterBy(function(record, id) {
return Ext.Array.contains(values, record.get('code_organisme'));
});
} else {
reseaulist.clearFilter(true);
}
}
}
}
Each filter is applied one after the other on the previously filtered data set, so your code implements a logical AND. That's why all values are filtered out...
Here's an example using filterBy to accept any value that is in your array:
function (combo, value) {
var orgComboVal = Ext.getCmp('Org1')
var values = orgComboVal.getValue();
if (values != null) {
store.clearFilter(false);
if (Ext.isArray(values)) {
store.filterBy(function(record, id) {
return Ext.Array.contains(values, record.get('code_organisme'));
});
} else {
record.get('code_organisme') === values;
}
} else {
store.clearFilter(true);
}
}
Or you could also use a regex with the filter method:
function (combo, value) {
var orgComboVal = Ext.getCmp('Org1')
var values = orgComboVal.getValue();
if (values != null) {
var filterValue = Ext.isArray(values)
? new RegExp('^(?:' + Ext.Array.map(values, function(value){return Ext.escapeRe(value)}).join('|') + ')$')
: values;
store.clearFilter(false);
store.filter('code_organisme', filterValue);
} else {
store.clearFilter(true);
}
}
Concerning your error, arrays indeed don't have a split method. Strings can be split into an array. Arrays, on their side, can be joined into a string...
Try This....
var getOrgValue = "5,9,4"; // array of value
reseaulist.filterBy(function(rec, id) {
return getOrgValue.indexOf(rec.get('code_organisme')) !== -1;
});