I am trying to add columnSummary to my table using Handsontable. But it seems that the function does not fire. The stretchH value gets set and is set properly. But it does not react to the columnSummary option:
this.$refs.hot.hotInstance.updateSettings({stretchH: 'all',columnSummary: [
{
destinationRow: 0,
destinationColumn: 2,
reversedRowCoords: true,
type: 'custom',
customFunction: function(endpoint) {
console.log("TEST");
}
}]
}, false);
I have also tried with type:'sum' without any luck.
Thanks for all help and guidance!
columnSummary cannot be changed with updateSettings: GH #3597
You can set columnSummary settings at the initialization of Handsontable.
One workaround would be to somehow manage your own column summary, since Handsontable one could give you some headeache. So you may try to add one additional row to put your arithmetic in, but it is messy (it needs fixed rows number and does not work with filtering and sorting operations. Still, it could work well under some circumstances.
In my humble opinion though, a summary column has to be fully functionnal. We then need to set our summary row out of the table data. What comes to mind is to take the above mentioned additional row and take it away from the table data "area" but it would force us to make that out of the table row always looks like it still was in the table.
So I thought that instead of having a new line we could just have to add our column summary within column header:
Here is a working JSFiddle example.
Once the Handsontable table is rendered, we need to iterate through the columns and set our column summary right in the table cell HTML content:
for(var i=0;i<tableConfig.columns.length;i++) {
var columnHeader = document.querySelectorAll('.ht_clone_top th')[i];
if(columnHeader) { // Just to be sure column header exists
var summaryColumnHeader = document.createElement('div');
summaryColumnHeader.className = 'custom-column-summary';
columnHeader.appendChild( summaryColumnHeader );
}
}
Now that our placeholders are set, we have to update them with some arithmetic results:
var printedData = hotInstance.getData();
for(var i=0;i<tableConfig.columns.length;i++) {
var summaryColumnHeader = document.querySelectorAll('.ht_clone_top th')[i].querySelector('.custom-column-summary'); // Get back our column summary for each column
if(summaryColumnHeader) {
var res = 0;
printedData.forEach(function(row) { res += row[i] }); // Count all data that are stored under that column
summaryColumnHeader.innerText = '= '+ res;
}
}
This piece of code function may be called anytime it should be:
var hotInstance = new Handsontable(/* ... */);
setMySummaryHeaderCalc(); // When Handsontable table is printed
Handsontable.hooks.add('afterFilter', function(conditionsStack) { // When Handsontable table is filtered
setMySummaryHeaderCalc();
}, hotInstance);
Feel free to comment, I could improve my answer.
Related
When you reorder columns then table columns reorder but columns array showing old sequence, so here you didn't get udpated columns list siquence, but in answer section you can get the updated columns list.
columnReorder: function(options) {
let afterReorderColumns = options.columns; // that is showing old sequence
}
here is the answer
columnReorder: function(options) {
let afterReorderColumns = options.target._columns; // current table sequence
},
I need to add more default empty rows in the list view.
Right now, it only gives 4 empty rows on a new record. However, I need to add, say, 10 more default empty rows.
This is because I increased the height of the table using css.
.o_list_view .o_list_table {
height: 800px;
}
The result is that it still has 4 rows on default but every row has their height as 25% of the table height. Therefore, I need to add some rows into it so that their height will be fit to the new table height again.
Or another solution, if possible, remove the auto height adjustment for the rows in the table so that it won't be scaled according to the table height.
Either solution is acceptable.
As long as the length of the lines is less than 4, Odoo will try to add an empty row.
To add more default empty rows, you can alter ListRenderer _renderBody:
_renderBody: function () {
var self = this;
var $rows = this._renderRows();
while ($rows.length < 14) {
$rows.push(self._renderEmptyRow());
}
return $('<tbody>').append($rows);
},
You can also set a empty_rows attribute in the tree tag to define the number of empty rows:
XML:
<tree string="" editable="bottom" empty_rows="4">
JavaScript:
var ListRenderer = require('web.ListRenderer');
ListRenderer.include({
_renderBody: function () {
var self = this;
var empty_rows = 4;
if (self.arch && self.arch.attrs.empty_rows) {
empty_rows = self.arch.attrs.empty_rows;
}
var $rows = this._renderRows();
while ($rows.length < empty_rows) {
$rows.push(this._renderEmptyRow());
}
return $('<tbody>').append($rows);
},
});
Check Assets Management on how to add the above code to web.assets_backend bundle and Javascript Module System to create a JavaScript module
When searching through a table or navigating to the last page of the table there may be fewer results that the pageLength setting, so table shinks in height. I would like to prevent that by filling missing rows with empty rows. How can I do that?
You can use the bScrollCollapse property along with sScrollY.
As documentation say:
When vertical (y) scrolling is enabled, DataTables will force the
height of the table's viewport to the given height at all times
(useful for layout). However, this can look odd when filtering data
down to a small data set, and the footer is left "floating" further
down. This parameter (when enabled) will cause DataTables to collapse
the table's viewport down when the result set will fit within the
given Y height.
You can use it like this:
var table = $('#example').dataTable({
"sScrollY": "400",
"bScrollCollapse": false
});
An example of this is here http://live.datatables.net/ukiyek/115/edit#javascript,html
UPDATE:
You can also set the table height to 100% so that the whole area to be filled:
var table = $('#example').dataTable({
"sScrollY": "400",
"bScrollCollapse": false,
"fnDrawCallback": function() {
$(this).attr("height","100%");
}
});
Example here
UPDATE 2:
Found exactly what you are looking for in this thread http://www.datatables.net/forums/discussion/4112/possible-to-keep-datatable-height-static-even-when-filtering
Have a look at this example which adds empty rows at the end.
Adding rows seems like an easier and more generic solution than styling fixed scrolling area (as in MavRoSCy solution n.1).
So, here's what works for me.
$(document).ready(function () {
var table = $('#example').dataTable({});
table.api().on('draw', function () {
var info = table.api().page.info(),
rowsOnPage = info.end - info.start,
missingRowsOnPage = info.length - rowsOnPage;
if (missingRowsOnPage > 0) {
for (var i = 0; i < missingRowsOnPage; i++) {
table.find('tbody').append(buildEmptyRow(6));
}
}
});
});
function buildEmptyRow(columnsCount) {
return '<tr class="empty">' + Array(columnsCount + 1).join('<td><div> </div></td>') + '</tr>';
}
Fiddle: http://live.datatables.net/ruviwabu/1/edit
I'm using node js 0.10.12 to perform querys to postgreSQL 9.1.
I get the error error invalid input synatx for integer: "{39}" (39 is an example number) when I try to perform an update query
I cannot see what is going wrong. Any advise?
Here is my code (snippets) in the front-end
//this is global
var gid=0;
//set websockets to search - works fine
var sd = new WebSocket("ws://localhost:0000");
sd.onmessage = function (evt)
{
//get data, parse it, because there is more than one vars, pass id to gid
var received_msg = evt.data;
var packet = JSON.parse(received_msg);
var tid = packet['tid'];
gid=tid;
}
//when user clicks button, set websockets to send id and other data, to perform update query
var sa = new WebSocket("ws://localhost:0000");
sa.onopen = function(){
sa.send(JSON.stringify({
command:'typesave',
indi:gid,
name:document.getElementById("typename").value,
}));
sa.onmessage = function (evt) {
alert("Saved");
sa.close;
gid=0;//make gid 0 again, for re-use
}
And the back -end (query)
var query=client.query("UPDATE type SET t_name=$1,t_color=$2 WHERE t_id = $3 ",[name, color, indi])
query.on("row", function (row, result) {
result.addRow(row);
});
query.on("end", function (result) {
connection.send("o");
client.end();
});
Why this not work and the number does not get recognized?
Thanks in advance
As one would expect from the initial problem, your database driver is sending in an integer array of one member into a field for an integer. PostgreSQL rightly rejects the data and return an error. '{39}' in PostgreSQL terms is exactly equivalent to ARRAY[39] using an array constructor and [39] in JSON.
Now, obviously you can just change your query call to pull the first item out of the JSON array. and send that instead of the whole array, but I would be worried about what happens if things change and you get multiple values. You may want to look at separating that logic out for this data structure.
So I want to allow the user to conditionally turn columns on/off in a Cardboard app I built. I have two problems.
I tried using the 'columns' attribute in the config but I can't seem to find a default value for it that would allow ALL columns to display(All check boxes checked) based on the attribute, ie. the default behavior if I don't include 'columns' in the config object at all (tried null, [] but that displays NO columns).
So that gets to my second problem, if there is no default value is there a simple way to only change that value in the config object or do I have to encapsulate the entire variable in 'if-else' statements?
Finally if I have to manually build the string I need to parse the values of an existing custom attribute (a drop list) we have on the portfolio object. I can't seem to get the rally.forEach loop syntax right. Does someone have a simple example?
Thanks
Dax - Autodesk
I found a example in the online SDK from Rally that I could modify to answer the second part (This assumes a custom attribute on Portfolio item called "ADSK Kanban State" and will output values to console) :
var showAttributeValues = function(results) {
for (var property in results) {
for (var i=0 ; i < results[property].length ; i++) {
console.log("Attribute Value : " + results[property][i]);
}
}
};
var queryConfig = [];
queryConfig[0] = {
type: 'Portfolio Item',
key : 'eKanbanState',
attribute: 'ADSK Kanban State'
};
rallyDataSource.findAll(queryConfig, showAttributeValues);
rally.forEach loops over each key in the first argument and will execute the function passed as the second argument each time.
It will work with either objects or arrays.
For an array:
var array = [1];
rally.forEach(array, function(value, i) {
//value = 1
//i = 0
});
For an object:
var obj = {
foo: 'bar'
};
rally.forEach(obj, function(value, key) {
//value = 'bar'
//key = 'foo'
});
I think that the code to dynamically build a config using the "results" collection created by your query above and passed to your sample showAttributeValues callback, is going to look a lot like the example of dynamically building a set of Table columns as shown in:
Rally App SDK: Is there a way to have variable columns for table?
I'm envisioning something like the following:
// Dynamically build column config array for cardboard config
var columnsArray = new Array();
for (var property in results) {
for (var i=0 ; i < results[property].length ; i++) {
columnsArray.push("'" + results[property][i] + "'");
}
}
var cardboardConfig = {
{
attribute: 'eKanbanState',
columns: columnsArray,
// .. rest of config here
}
// .. (re)-construct cardboard...
Sounds like you're building a neat board. You'll have to provide the board with the list of columns to show each time (destroying the old board and creating a new one).
Example config:
{
attribute: 'ScheduleState'
columns: [
'In-Progress',
'Completed'
]
}