I use a tabulator from https://tabulator.info/
There is an editing option in this tabulator. I know about enable and editor. But I point out that this is not what I mean.
My goal is to set the edit mode on all cells of the table BUT in the form that occurs in the cell only when you click on a specific cell. Now it works in such a way that when edit mode is enabled to edit a cell you have to click on it - only then the style changes to edit style. I would like this editing style to be shown immediately on all cells at once and not just on one when clicked. I tried calling this with the cell.edit() function which mimics this, and using dispatchEvent.
cells?.forEach((cell) => {
console.log("cell edit", cell);
let cellEl = cell.getElement();
cellEl.dispatchEvent(new Event("click"));
// // cell.edit();
});
enter code here
However, I was surprised to see that the end result is to enable this mode only for the last cell in the loop. Is there any option at all to enable such editing or any other way to get the same styles after the click and before (both in edit mode)?
The problem with using cell.edit() is also that when you click anywhere the styles disappear anyway.
I'm also trying to use a formatter to solve the problem but I don't quite know how to finish it either.
column.formatter = function (cell) {
cell.getElement().classList.add("tabulator-editing");
return cell.getValue();
};
Related
I'm trying to make the function that runs when I click a DataTable row to also run when I change the values in an HTML select menu. I'm using the onchange event in the selector to run the function reclickRow():
function reclickRow() {
$("#mydataTable").DataTable.$('tr.active').trigger("click");
}
However this is not having the desired effect. Some other variables should update with the new value from the selector but they stay the same right now. They only update if I manually reclick the row but I don't want the user having to do that.
After #Rex Hendersons's tip, I figured out that I should be referencing the selected row and not the active row:
function reclickRow() {
mydataTable.$('tr.selected').trigger("click");
}
Its working now!
Let's say we have a simple Gantt chart, implemented in JavaScript, using AnyChart library:
If the user clicks on Tuesday row, it's automatically highlighted:
Is it possible to do it programatically? I mean, I don't want the user to click on a row, I want to do it with code.
AnyChart provides a wonderful playground to test the library. I created one to have a starting point: Select a row programatically. In the JavaScript code, search for the selectRow function, and do your magic.
function selectRow() {
const idToSelect = "3";
const selected = treeData.search("id", idToSelect);
// highlight selected item
}
To achieve that you should apply true to the selected field of the item meta. For details, check the sample.
I have a handsontable table which is dynamic, meaning data can be added after initiation. The problem is, however, that new rows can be added to the table when dragging down while clicking the corner of a cell. How would I prevent users from expanding the table while making sure I can still add new rows if one would interact with a button for example.
I tried using
afterCreateRow: function(index, amount){
data.splice(index, amount)
},
but that prevents me from adding new rows using the alter function.
If this question was rather vague: See the link below for a default jsfiddle with handsontable. Click the corner of a cell and drag down, you'll see.
http://jsfiddle.net/warpech/hU6Kz/
TL;DR: Disable row creation when dragging cells, allow row creation using (in code) handsontable.alter('insert_row');
Thanks in advance.
You can add this code to prevent row creation when you are dragging cells :
fillHandle: {
autoInsertRow: false,
},
EDIT: Check out this fiddle.
So I added this
fillHandle: {
autoInsertRow: false
}
and removed minSpareRows: 1.
This gives you the drag functionality without the automatic creation of rows.
To test:
If you right-click and manually insert a row (Insert row below), and then click and drag some value into the new row using the fill handle, it should paste the value in without creating a new row underneath.
Note: If you need the same functionality horizontally (aka, being able to drag values horizontally without auto-creating new columns) remove minSparecols: 1
Hope this is what you're looking for!
Add the fillHandle: false option to your current options.
This removes the ability to drag and create new rows, but still leaves you with the ability to add new rows via the context menu (contextMenu: true) and the minimum spare rows option (minSpareRows: 1).
I understand your problem, I was in same situation.
I have solved with this:
maxRows: getFixedNumberOfRows(),
minRows: getFixedNumberOfRows(),
With this solution you can keep drag and drop for easy fill cells, and avoid add rows at the end
If anyone knows a better solution is welcome
Google sheets allows you to write scripts in javascript, the same way excel lets you write VBA to automate tasks.
I'd like to make a cell in my google spreadsheet clickable, so that when it is clicked, my function will run.
I've found that it's possible to create custom buttons by inserting a drawing, but I'd really like this to be any time a particular cell is clicked, rather than a button which can move around and looks awkward in the sheet.
Is it possible?
Thanks for any advice.
There is not an onClick event for cells but what you can do is instruct the user to enter your formula/custom function into the cell as described at https://developers.google.com/apps-script/execution_custom_functions?hl=es#using.
Similarly, you could have the cell pre-populated with the formula and simply ask the user to edit it and then press enter to run the function.
What you are searching for, is onSelectionChange(), it runs automatically when a user changes the selection in a spreadsheet.
Try the following code and read the developers link.
/**
* The event handler triggered when the selection changes in the spreadsheet.
* #param {Event} e The onSelectionChange event.
*/
function onSelectionChange(e) {
// Set background to red if a single empty cell is selected.
var range = e.range;
if(range.getNumRows() === 1
&& range.getNumColumns() === 1
&& range.getCell(1, 1).getValue() === "") {
range.setBackground("red");
}
}
You can draw you own button and attach a sript to it. Edit it all transparent, and write no text.
Then place it on the cell you wish, resizing to fit inside the cell's area.
Add A Google Sheets Button To Run Scripts
Is there any direct way to sort the data on jqGrid at client side with inline editing?
It does not sort data when the row is editable even if the row header is clicked.
Grid can't be sort if some line is editing. I think that the reason of your question is a misunderstanding about how inline editing works and how sorting works.
At the beginning of editing the original data from the editing row will be saved in internal parameter savedRow array. In any time the user can revert the current modifications back to original state or save the current values in the grid. If keys: true option of inline editing is enabled then the user can use Esc or Enter keys to revert/save the changes of the current row. It is permitted that multiple rows could be in the same time in editing mode and the user could save some rows and some other revert.
The sorting of grid means rebuilding of full grid content applying of the current filter from internal postData parameter. jqGrid supports multiple pages. Sorting of grid means always the sorting of optionally filtered over all data of the grid. After sorting if should be displayed only the current page based on the value of page parameter.
To sort the grid which is in editing mode one would need to decide what should be done with currently editing rows. Neither discarding of current changes nor saving could be good solution in common case. Even if one would try first to save the current editing data (old state and current state) then sort the data and later start editing one more time it could not work in common case. It could be many problems of implementation such scenario
the current editing row could be on another page, which is not visible now
the data could be changed now. So filling savedRow array with old data could be wrong and the current editing data could be also wrong.
the current editing row could be deleted from another user. So it could not exist in new grid content.
if we decide to save data before sorting if could be some validation errors or concurrency errors during saving. So one need to ask user first to solve all the conflicts before saving could take place.
...
So to sort grid which is in editing mode is not easy. The implementation way could depend on the project requirements. Because of described above problems (and many other which I didn't mention) jqGrid just test whether internal savedRow array (used to save old state of row before editing started) is empty or not. If the savedRow array is not empty then there are some row or cell (in case of sell editing mode) which is editing now. In the case any click on the corresponding column header will be ignored and no sorting is done.
I had this same problem --not being able to sort if any row is in edit mode. In my case it didn't matter what the state of the user edits were. My grid is clientSide and there is a save button on the page the user's clicks to submit the changes.
I did some digging around and found a solution that works for me. I hope it helps others. Basically what I did was reorder the click events on the column headings so that mine was first. Then in my click event I call saveRows.
Here is a piece of code I got from another thread here about reordering events:
$.fn.bindUp = function(name, fn) {
// bind as you normally would
// don't want to miss out on any jQuery magic
this.on(name, fn);
// Thanks to a comment by #Martin, adding support for
// namespaced events too.
this.each(function() {
var handlers = $._data(this, 'events')[name.split('.')[0]];
// take out the handler we just inserted from the end
var handler = handlers.pop();
// move it at the beginning
handlers.splice(0, 0, handler);
});
};
Then in my code I add a handler to save the rows:
$("th.ui-th-column", $("#pacPaymenReviewGridNEW")[0].grid.hDiv).bindUp('click', function(e) {
var $th = $(e.currentTarget).closest("th");
if ($th.length > 0) {
pacTransferFundMaint.saveRowsById('#pacPaymenReviewGridNEW');
}
});
After research, I found the following algorithm:
Catch the header click event. e.g. ('th').click(function(){})
Save the the row data which is in edit mode using saveRow when this event occurs
Identify the header which is clicked.
Sort grid data with that header in ascending or descending order.
like $('#dataGrid').jqGrid('setGridParam', ({ data: list, sortname: columnHeader, sortorder: 'asc',rowNum: list.length })).trigger('reloadGrid');
Make the selected row editable again. editRow can be used for this.
Note: Steps 2 to 5 should be executed in event at steps 1 (header click event)