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
Related
I've implemented a slick grid with a custom selection model as well as a custom checkbox selection plugin.
I've also added group level checkboxes to allow toggling selection at the top level.
One of my requirements is that collapsed groupings are still selectable via any parent level grouping checkboxes.
My stumbling block seems to be that I can't figure out how to select rows that aren't currently visible on the group. The slick grid maintains the set of visually selected items while the grids data view maintains the full set of selected items, visible or not. However, I can't figure out how to pipe into data when clicking the group checkbox of a collapsed row.
I am configuring my grid like so:
let checkboxSelectionModel = new Slick.CheckboxSelectionModel();
this.grid.setSelectionModel(checkboxSelectionModel);
this.grid.registerPlugin(new Slick.Data.GroupItemMetadataProvider());
let onSelectedRowIdsChanged = this.dataProvider.syncGridSelection(this.grid, true, true);
onSelectedRowIdsChanged.subscribe(
function(e: any, args: any)
{
//business logic stuff
}
);
let groupedCheckboxSelector = new Slick.GroupedCheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel",
onSelectedRowIdsChangedHandler: onSelectedRowIdsChanged
});
let columns = this.grid.getColumns();
columns.unshift(groupedCheckboxSelector.getColumnDefinition());
this.grid.setColumns(columns);
this.grid.registerPlugin(groupedCheckboxSelector);
gist to custom plugins, too long to include here
Specifically, if you look at line 57 of slick.checkboxselectionmodel:
$.each(dataItem.rows, function(index, groupRow) {
var groupRowIndex = _self._grid.getData().getRowById(groupRow.id);
if (groupRowIndex) {
selection.push(groupRowIndex);
}
});
groupRowIndex is never resolved for hidden rows, and so never get selected. I attempted to expand the group when clicked, then resolve the rows, which works but when the group is collapsed afterward, the wrong rows are selected in the grid.
any help would be greatly appreciated!
some notes:
if I select a row and collapse its group, the item retains its selection
there is a different branch of the slick grid which has an equally non-functional implementation of group selection
gist to updated plugins
A functional solution that I'm confident could put anyone seeking similar behavior on the right path, however, I'm not sure how well either of these plugins would work independently. one of my requirements was to only allow row selection via the row checkbox.
one gotcha (that I'm sure is easily improved) is that the group level checkbox still needs to be defined in your group format operator
the main solution to my issue was to expand all collapsed groups when making group-level selects/unselects, perform any select/unselect routines, then collapse any previously expanded groups
EDIT:
This fails when the grid has large amounts of data (10k rows).
Re-opening with a bounty.
It looks like the performance hit of having to expand and collapse so many groups cause issues.
I am currently using an open-source javascript table sorter: http://mottie.github.io/tablesorter/docs/
The problem I have is that I dynamically add tables to my page in reaction to the user pressing a button. Only the most recently added table becomes sortable and the previous tables are not sortable anymore after I add the new table. Currently, I have this code at the end of my table creation:
//Make table sortable
$(document).ready(function () {
$("#" + thisTable.ID).tablesorter();
});
I don't understand why the old tables lose their sortability if they're not being reloaded. I am only appending a new table with a different ID under the previously added table.
You can change your selector to $('table'), and this will add the sorter to all tables. Your current code will only run on page load though, so you'll have to execute the $('table').tablesorter(); line every time you dynamically add a new table (in your button's click handler).
It would be better though if you added a class, such as sortedTable to every table, and made your selector $('.sortedTable'), rather than simply $('table'), because you may at some time want a table that isn't sorted and the first version will always sort all tables. The second version will only sort those tables that you explicitly mark as sortable.
What I am trying to do is allow the user to highlight cells in a table when they drag the mouse over them, very much as outlined in the question and answer Select Cells On A Table By Dragging
What I need to do though is restrict the drag / highlight effect from spanning more than one column. e.g. which ever column the user start the drag event in they cant highlight out side that column.
Anyone have any ideas on how to achieve this?
Taking the example that is in the other question, you should give the "td" element an attribute, like data-row and data-col, then when somebody is selecting store the current data-col and prevent that the user can select other columns with diferent data-col value.
I put a working code in the following link, you can change it to only works with the rows.
Working example
You need to use the getAttribute method:
element.getAttribute("data-col")
When you highlight the first one, set a boolean, like isHighlighted = true; Then in your actual highlighting just do
if(isHighlighted == false){
///do highlighting
}
WHen you deselect the first box simply set the boolean to false.
I wanted to do draggable table rows, I found TableDnD jQuery plugin and it works fine
$(function() {
$("table").tableDnD();
});
As you can see there:
http://jsfiddle.net/drBfS/1/.
But I wanted to make only one column draggable. I mean, whole row (tr) is moved like now, but you can move row only by dragging left column (td.drag), when trying to drag right column it should be no effect. Have you got any idea how it can be done?
It appears that this is an older plugin, where it might have been possible to do this at one point, according to this document: http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
However, after looking through the source now, it is no longer possible. Instead, perhaps consider simply using jQuery UI sortable. If you wrap your rows in a tbody, this code will get you what you want:
jQuery(function () {
jQuery('table tbody').sortable({ handle:'.drag' });
});
Unfortunately, it's not possible with the TableDnD plugin. That plugin was designed to enable row dragging, not column dragging.
From the documentation:
This TableDnD plugin allows the user to reorder rows within a table
I'm working on the following webpage and have reached a problem. Here's what happens on the site: On, the "mouseup" event after dragging a row, the following events occurs.
server updates the "order number" in the database
server returns the updated database back to the browser.
browser displays the update info.
The problem is that when the browser is updated, the rows are not draggable any more.
When modifying a table dynamically through Javascript, do I need to reload the Javascript "include files" again or something? If you need source code, I can provide.
here is the site
(link now removed, the problem solved)
Currently, I have it simply adding a new row with "made up" information every time you drag something only for testing purposes. What I would like to know, is how to make those new added rows draggable like the rest.
You're using jQuery, which I notice has a Drag and Drop plugin, whose comment section had the following that may be helpful:
#Ian Q: I had a similar problem, when DnD didn’t worked for rows added after initialization.
var params = {
onDragClass: “onDragRow”,
onDrop: function(table, row) { },
onDragStart: function(table, row) {}
};
// Initialization
$(“table”).tableDnD(params);
Then call $(“table”).tableDnD(params); everytime you add rows to that table.
Those new rows are being added to the table but never attached by the javascript library that is allowing you to drag and drop. Also, there seems to be some issue where I'm getting a repeat row? A lot of "Earthquake in Haiti"'s.
Check out the site for the plugin you're using to see how to add new rows into its control.
From the tableDnD website:
Added $(‘…’).tableDnDUpdate() to cause the table to update its rows so the drag and drop functionality works if, for example, you’ve added a row.
So call that function when the rows are inserted/updated.