Clickable checkbox in Qooxdoo table - qooxdoo

I'm trying to adapt the Qooxdoo Playground table example's checkbox, to become a checkbox that can be clicked on and off.
I did see some code in a mailing list which seemed like it should do the job, but it's not working for me.
// Display a checkbox in column 3
tcm.setDataCellRenderer(3, new qx.ui.table.cellrenderer.Boolean());
table.addListener("cellClick",
function(cellEvent) {
var col = cellEvent.getColumn();
if (col == 3) {
oldValue = table.getTableModel().getValue(col, row);
table.getTableModel().setValue(col, cellEvent.getRow(), !value);
}
}
);
I've put that into the Playground at https://preview.tinyurl.com/y8qubmll
My intention is to have a few different checkboxes in the columns, so the code above uses the variable "col" rather than hardcoded values.
Any help would be greatly appreciated.

The event is called cellTap. See the fixed example below.
table.addListener("cellTap",
function(cellEvent) {
var col = cellEvent.getColumn();
var row = cellEvent.getRow();
if (col == 3) {
oldValue = tableModel.getValue(col,row);
tableModel.setValue(col,row, !oldValue);
}
}
);
here is a link to the working example

Related

Add columns to an existing source of data

I would like to add several columns to an existing source of data displayed in a sheet. But as a data source, the number of rows can increase. I don't want to update the sheet once it is set up, it should be automatic. In those new columns, I would like formulas.
Please find below the result expected.
in blue, columns from data source
in red, my new columns with a formula
How can I do ?
Thank for you help 🙏
use in E1:
={"new col 1"; ARRAYFORMULA(IF(C2:C="";;IF((ISNUMBER(C2:C))*(C2:C>=2); 1; 0)))}
use in F1:
={"new col 2"; ARRAYFORMULA(IF(D2:D="";;IF((ISNUMBER(D2:D))*(D2:D>=2); 10; 0)))}
I tried with a custom function and to personalize it with another project, it doesn't work...
In this simple case, it works. If not empty, it returns G cells in uppercase :
={"Feature"; ARRAYFORMULA(SI(G2:G="";;IF((NOT(ISEMPTY(G2:G))); UPPERCASE(G2:G); "-")))}
In other case with a custom function, not. It is named "getFeature"
={"Feature"; ARRAYFORMULA(SI(G2:G="";;IF((NOT(ISEMPTY(G2:G))); getFeature(G2:G); "-")))}
When I use it in a classic way, my function works : =getFeature(G7)
Here my custom function :
function getFeature(searchString) {
if (searchString === "") {
return ""
}
var sFeature = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("raw feature")
var rFeatureCol = sFeature.getRange(2, 1, sFeature.getLastRow(), 1)
array = searchString.split(";")
for (let i = 0; i < array.length; i++) {
try {
var textFinder = rFeatureCol.createTextFinder(array[i])
var search_row = textFinder.findNext().getValue()
return array[i]
}
catch {
// erreur détectée
}
}
return ""
}

Using onEdit(e) to update cells when new value is added

A piece of code I am working on consists of two functions - generateID and onEdit(e).
generateID - generates a number using pattern and it works fine.
onEdit(e) is the one I am having issue with.
In column A of a spreadsheet, a user selects a value from a dropdown (initially column A is empty, range is from row 2 to getLastRow(), row 1 for heading).
Once the value is selected, I need the result of the generateID to be inserted into the next column B of the same row.
If a value in coumn A is then changed (selected from dropdown), I need generateID to update its value.
Here is what I tried so far:
function onEdit(e) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var activeSheet = ss.getSheetByName("TEMP");
var range = activeSheet.getRange(2, 1, activeSheet.getLastRow(), 1).getValues();
for (var i =0; i < range.length; i ++) {
if (e.range [i][0] !== "") {
activeSheet.getRange(i + 2, 2, 1, 1).setValue(generateID());
};
};
};
onEdit seems to be the right choice to watch changes in the range. With (e) the code seems not to work at all. Trying it as onEdit() works but incorrectly.
Apprecaite any help on this.
Thank you.
e.range returns a range object and not a array1. Try this instead of your code:
e.value !=='' ? e.range.offset(0,1).setValue(generateID()) : null

angularjs correct row is not being deleted from table

I have been struggling with a couple of issue so I thought I would reach out for help after doing much searching. I'm using AngularJS.
My first problem is that checkbox is not working properly when I use ng-repeat, it will only check the first box in the table code snippet below. I'm using a custom checkbox which I coded with css is the reason for the label.
My second issue is when I click on the check box it should delete any row I want but it deletes the row before it if I start from the bottom of the table up, but if I start from the top of the table down it works as expected except for the box being checked code snippet. I tried many ways to set the index but it still does not work.
$scope.removeRow = function(type) {
var index = -1;
var myArr = eval( $scope.contacts );
for( var i = 0; i < myArr.length; i++ ) {
if( myArr[i].type === type ) {
index = i;
break;
}
{
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.contacts.splice(index, 1);
};
First off, don't use eval($scope.contacts). If that variable is a string and contains javascript it will run that javascript. if myArr isn't defined using myArr = $scope.contacts you can use myArr = JSON.parse(JSON.stringify($scope.contacts) or use angular.copy method.
I don't see your html, so I can't tell you why your checkbox doesn't work. But regarding your second problem, if it's deleting a row above when you hit splice, why not change that code to :
$scope.contacts.splice(index + 1, 1)

Programmatically change grid column order

I want to sort the columns in my grid, just like the rows. I have made a simple sort function that is called from an actioncolumn handler:
sortColumns:function(record) { // The record after which's values the columns are ordered
var columns = this.columns;
Ext.Array.sort(columns,function(col1,col2) {
if(record.get(col1.dataIndex) > record.get(col2.dataIndex)) return 1;
if(record.get(col1.dataIndex) < record.get(col2.dataIndex)) return -1;
if(col1.dataIndex > col2.dataIndex) return 1;
if(col1.dataIndex < col2.dataIndex) return 1;
throw new Error("Comparing column with itself shouldn't happen.");
});
this.setColumns(columns);
});
The setColumns line now throws the error
Cannot add destroyed item 'gridcolumn-1595' to Container 'headercontainer-1598'
which is because the "old" columns are destroyed first, and then the "new" columns, which are the same and thus destroyed, are applied.
I only want to change the order, but I didn't find any function to do it. Do you know how to do it?
Drag-drop ordering of the columns works, so it is doable; but I don't find the source code where sencha did implement that drag-drop thingy. Do you know where to look for that code?
Reconfigure method needs two arguments
grid.reconfigure(store, columns)
Here is the fiddle that changes the columns programatically https://fiddle.sencha.com/#fiddle/17bk
I have found that columns are items of the grid's headerCt, so the following works well, and unlike the other answers, it does not create new column components, keeping the column state and everything:
var headerCt = normalGrid.headerCt,
columns = headerCt.items.getRange();
Ext.Array.sort(columns,function(col1,col2) {
if(record.get(col1.dataIndex) < record.get(col2.dataIndex)) return -1;
if(record.get(col1.dataIndex) > record.get(col2.dataIndex)) return 1;
if(col1.dataIndex < col2.dataIndex) return -1;
if(col1.dataIndex > col2.dataIndex) return 1;
return 0;
});
headerCt.suspendLayouts();
for(var i=0;i<columns.length;i++)
{
headerCt.moveAfter(columns[i],(columns[i-1] || null));
}
headerCt.resumeLayouts(true);
There is a reconfigure method which can be used to achieve reordering, e.g:
grid.reconfigure(columns);
Check the this.
I couldn't manage to do it without storing columns in a custom field and using reconfigure, maybe someone can suggest something better (reconfigure doesn't work well with just regular columns field it seems):
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
//just renamed "columns"
myColumnConfigs: [
//all your column configs
]
});
//to rearrange inside controller, also need to call it on grid render
var grid = this.getView();
var columns = grid.myColumnConfigs;
//...do your sorting on columns array
grid.reconfigure(columns);

Dynamic operationes on field click

recently stakantin ( https://stackoverflow.com/users/1875610/stakantin ) helped me with a question that I have made about change the text of a label with this code:
$label=$this->add('View_HtmlElement')->setElement('h4')->set('Test');
$f=$this->add('Form');
$f->addField('Checkbox','click')->js('click',$label->js()->text('hallo world'));
I'm trying to do this (I cannot figure out how to do it):
I have a label "$label=$this->add('View_HtmlElement')->setElement('h4')->set('100');"
and I have some fields of a form with check boxes. Each check box has a number.
Is it possible when the checkbox is clicked to do operations on that label ?
example:
Label: 100
field1 100 checkbox
field2 200 checkbox
If I click checkbox of field1, then label value is 200 (its original value plus 100 of field1), and so on...
I don't know if I'm very clear buy thanks for any help.
Alejandro
Example:
$f = $this->add('Form');
$l1 = $f->addField('Line','l1')->set(100);
$cb1 = $f->addField('Checkbox','cb1','100');
$l2 = $f->addField('Line','l2')->set(300);
$cb2 = $f->addField('Checkbox','cb2','300');
$cb1->js('change','
if (this.checked) {
$(this).parent().find("label")
.text(parseInt(100) + parseInt('.$l1->js()->val().'));
} else {
$(this).parent().find("label").text(100);
}
');
$cb2->js('change','
if (this.checked) {
$(this).parent().find("label")
.text(parseInt(300) + parseInt('.$l2->js()->val().'));
} else {
$(this).parent().find("label").text("300");
}
');
But but this is not very good way to add javascript. Creating of js function based on my example in .js file is much clearer way.

Resources