i need to make selectable table rows in smart-table
st-select-row="row" st-select-mode="single"
But how can I modify that so one time selectable row stays selected until the next row will be clicked ? I have some links (target will be open in new window) and when they are clicked I get row selected and next time unselected...
Any hints ?
I found solution for my problem. I've modified "select" function from smart-table by adding additional condition (marked bellow as "new condition").
Maybe it will be useful for someone :)
if (mode === 'single') {
if (lastSelected !== row) { // new condition
row.isSelected = row.isSelected !== true;
if (lastSelected) {
lastSelected.isSelected = false;
}
lastSelected = row.isSelected === true ? row : undefined;
}
} else {
rows[index].isSelected = !rows[index].isSelected;
}
Related
I have a question about dynamicly filter array.. I making a table and I have different filtering options. For example ; Only selected column filter, MultiSelect dropdown menu filter and ı want filter multiple columns . my table
For Example ;
Write a filter word in Brand filter. This code line is filtered my data. (veri = data. (in Turkish) ).
public filter(str, i) {
const collName = this.bizimKolon[i].Baslik; // Column Name
this.veri = this.yedekVeri.filter(x => x[collName].toString().toLowerCase().includes(str.toLowerCase())); }
I want to filter the filtered data by year but is not working. And I have a more problem. We were suppose filtered Brand and Year. if the filter word we wrote is in the array, update my array and display into table. OK. No problem. We select colors in dropdown menu. After we want filter by colors ( White and Green ). How we make do this? I don't know how many data will come to filter. in this point we need to dynamic filter. Please help me. thank you..
x[colName] should work.
#Pipe({name: 'dataListFilterPipe'})
export class DataListFilterPipe implements PipeTransform {
transform(data: any, col: string, value: string): any {
if (data !== undefined) {
return data.filter(x => x[col] == value);
}
}
}
I created a pipe in which list is filtered and it works. This is in angular 6
here is my example for filtering by many inputs:
applyFilter() {
let custs = this.ch.customers.filter((cust: Customer) => {
return (
((cust.name.toLowerCase().trim().indexOf(this.filters[0]) !== -1) || (!this.filters[0])) &&
((!this.filters[5]) || (cust.user.username.toLowerCase().trim().indexOf(this.filters[5]) !== -1)) &&
((!this.filters[2]) || (cust.state.name.toLowerCase().trim().indexOf(this.filters[2]) !== -1)) &&
((!this.filters[1]) || (cust.description.toLowerCase().trim().indexOf(this.filters[1]) !== -1)) &&
((!this.filters[3]) || (cust.last_mess.toLowerCase().trim().indexOf(this.filters[3]) !== -1))
);
});
this.dataSource.data = custs;
this.ch.customers_filter = this.dataSource.data;
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
Variable Filter is array of string.
I am trying to find a working code that will automatically hide a row if the checkbox in column F of that row is checked.
I have tried every script I have found and nothing seems to work. Unfortunately I am not code savvy and I am unable to find the issue.
This is what I currently have:
function onOpen() {
var s = SpreadsheetApp.getActive().getSheetByName("Checklists");
s.showRows(1, s.getMaxRows());
s.getRange('F2:F200')
.getValues()
.forEach( function (r, i) {
if (r[0] == "TRUE")
s.hideRows(i + 1);
});
}
The sheet I am working on is "Checklists" and the column that contains the checkbox is F. The value of the checkbox is either TRUE or FALSE. If the value is TRUE, I want that row to be hidden.
Can someone please help!!!
The quick test I was able to run was to set up a column of checkboxes in column F, then to create a function that catches each edit event on the sheet. This will immediately catch when the user checks a box and will then hide that row.
The trick with using the onEdit event is with determining which cell was actually changed. In your case, you only want to fully follow your logic if the change happens to a checkbox in column F. In my code, I've been using a function to make sure the change is in the desired range. The function looks like this:
function isInRange(checkRange, targetCell) {
//--- check the target cell's row and column against the given
// checkrange area and return True if the target cell is
// inside that range
var targetRow = targetCell.getRow();
if (targetRow < checkRange.getRow() || targetRow > checkRange.getLastRow()) return false;
var targetColumn = targetCell.getColumn();
if (targetColumn < checkRange.getColumn() || targetColumn > checkRange.getLastColumn()) return false;
//--- the target cell is in the range!
return true;
}
So then all your onEdit function has to do is to make a quick call when the edit event is fired to see if the change falls within the range you're looking for. In this case, I set up a variable with my range to check:
var thisSheet = SpreadsheetApp.getActiveSheet();
var checkRange = thisSheet.getRange("F2:F200");
if (isInRange(checkRange, eventObj.range)) {
After that, it's just a matter of picking the row number and hiding or showing. Here's the full example solution:
function isInRange(checkRange, targetCell) {
//--- check the target cell's row and column against the given
// checkrange area and return True if the target cell is
// inside that range
var targetRow = targetCell.getRow();
if (targetRow < checkRange.getRow() || targetRow > checkRange.getLastRow()) return false;
var targetColumn = targetCell.getColumn();
if (targetColumn < checkRange.getColumn() || targetColumn > checkRange.getLastColumn()) return false;
//--- the target cell is in the range!
return true;
}
function onEdit(eventObj) {
//--- you could set up a dynamic named range for this area to make it easier
var thisSheet = SpreadsheetApp.getActiveSheet();
var checkRange = thisSheet.getRange("F2:F200");
if (isInRange(checkRange, eventObj.range)) {
//--- so one of the checkboxes has changed its value, so hide or show
// that row
var checkbox = eventObj.range;
var rowIndex = checkbox.getRow();
Logger.log('detected change in checkbox at ' + checkbox.getA1Notation() + ', value is now ' + checkbox.getValue());
if (checkbox.getValue() == true) {
Logger.log('hiding the row');
thisSheet.hideRows(rowIndex, 1);
} else {
Logger.log('showing the row');
thisSheet.showRows(rowIndex, 1);
}
}
}
I create a grid and a toolbar with Two Menu of menuCheckItem. When i check the menuCheckItem the grid filters even with multiple values and multiple columns.
This working fine, as I have created grid 1st and then the toolbar
this.up('') // Used Instead of Ext.getCmp()
Working FIDDLE - https://fiddle.sencha.com/#view/editor&fiddle/2lop
Now I am trying to create same toolbar along with Menu separately on top 1st and then create grid at below. But while doing this, nly Multiple values is working.
I am trying to filter grid with multiple values as well as multiple columns.
Few things i tried -
// Only Filters One Value at a time with each Columns
store.queryBy(function(record,id){
return (record.get('name') == someValue && record.get('phone') == otherValue);
});
and
// Filters Many Columns with Single Value
filter.add(
property : name, phone
value : "somevalue"
operator : "OR"
);
Is there any way to implement Toolbar 1st and then grid ? And Filter grid with many values and columns simultaneously ?
In this FIDDLE i remade a function(checkchange), which is universal , can be put separately and you'll be able to attach it to every menucheckitem you create. The only thing is that if you add new menucheckitem filter you should name the menucheckitem id with the name of the columnDataIndex-Menu and add this columnDataIndex in menuFilters and thats all.
checkchange: function (checkbox, checked, eOpts) {
var menuFilters = ['name', 'phone'];
var getChecked = function (m) {
var checkedItems = [];
m.items.items.forEach(function (c) {
if (c.checked) {
checkedItems.push(c.text);
}
});
return checkedItems;
};
//
var menus = new Map();
menuFilters.forEach(function (e) {
menus.set(e, Ext.getCmp(e + '-Menu'));
});
//
var fieldValues = [];
menuFilters.forEach(function (e) {
fieldValues.push([e, getChecked(menus.get(e))]);
});
//
var store = checkbox.up('grid').store;
store.clearFilter();
//
if (fieldValues.length > 0) {
store.filterBy(function (record) {
var fV = this.fieldValues;
for (var i = 0; i < fV.length; i++) {
if (fV[i][1].length > 0) {
if (fV[i][1].indexOf(record.get(fV[i][0])) === -1) {
return false;
}
}
}
return true;
}, {
fieldValues: fieldValues
});
}
}
I'm stuck on this ExtJS grid date filtering and will really appreciate some help.
My goal is to remove the "Before" and "After" submenu items and to show only the "On" item (even better is to remove the entire submenu and just show the datepicker).
So my question is if it's possible to remove those items and how can I do it?
I tried with the menuItems config menuItems: ['eq'] and this works visually, but when I select some date from the datepicker I receive this error Uncaught TypeError: Cannot read property 'up' of undefined.
Sencha Fiddle
Thanks!
There is a problem in the Date filter component on the "onMenuSelect", it tries to unselect both "before" and "after" menu itens if you choose the "on" option, but you had those removed in the config.
I did a little override to fix this:
Ext.override(Ext.grid.filters.filter.Date, {
onMenuSelect: function(picker, date) {
var me = this,
fields = me.fields,
filters = me.filter,
field = fields[picker.itemId],
gt = fields.gt,
lt = fields.lt,
eq = fields.eq,
v = {};
field.up('menuitem').setChecked(true, /*suppressEvents*/
true);
//The problem ocurrs here, i modified this line
//if (field === eq) {
//**********************************************
if ((field === eq)&&(lt!=null)&&(gt!=null)) {
lt.up('menuitem').setChecked(false, true);
gt.up('menuitem').setChecked(false, true);
} else {
eq.up('menuitem').setChecked(false, true);
if (field === gt && (+lt.value < +date)) {
lt.up('menuitem').setChecked(false, true);
if (filters.lt.getValue() != null) {
v.lt = null;
}
} else if (field === lt && (+gt.value > +date)) {
gt.up('menuitem').setChecked(false, true);
if (filters.gt.getValue() != null) {
v.gt = null;
}
}
}
v[field.filterKey] = date;
me.setValue(v);
picker.up('menu').hide();
}
});
Is there a way to limit the number of selected items in ng-grid?
I did not find a setting to do that, so I am trying to prevent it using a watchCollection in gridOptions.selectedItems.
When the length of selectItems is greater than 5, I try to deselect the last selection but is not working as expected because the item row index seems to be different as rendered:
This is the watcher code:
$scope.$watchCollection('gridOptions.selectedItems', function (newVal, oldVal) {
if ($scope.gridOptions.selectedItems.length > 5) {
for (var i = 0; i < $scope.importableFilesData.length; i++) {
if ($scope.importableFilesData[i] === newVal[0]) {
$scope.gridOptions.selectRow(i, false);
}
}
}
Check your condition in this way. So, you don't have to search last selected row and you can deselect it directly. i've tested it and is working in this way.
$scope.yourGridApi.selection.on.rowSelectionChanged($scope,function(row){
if($scope.yourGrid.gridOptions.selectedItems.length>=5){
row.isSelected = false;
}
});
I have found a solution using beforeSelectionChange property. This property let you set callback that is triggered every time a row is selected. If your return false, the selection will be canceled.
$scope.gridOptions = {
// your grid options ...
beforeSelectionChange: function (row) {
if ($scope.gridOptions.selectedItems.length > 5) {
return false;
}
return true;
}
}