Highlighting table cells for a single row on mouse drag - javascript

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.

Related

handsontable / javascript - Disable new rows being added by dragging

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

dgrid ColumnHider: disabling the hide columns menu?

I have a dgrid with a permanently hidden column that needs to be there, because I need to filter the table on its values. I am using ColumnHider in order to hide it and it works fine.
However, using ColumnHider also shows the small "+" button in the table corner that is used to hide/show columns, and I really don't want that button to show (hiding/showing columns is not a functionality we need to offer). I know I can use the unhideable property on the column, but this simply removes them from the menu. Even if I set all columns as unhideable, the button is still there with an empty menu.
Apart from hiding it with CSS, which I did, is there a way to tell ColumnHider not to show that menu at all?
Thanks, regards.
There's no programmatic way to completely hide the ColumnHider menu. The simplest way is with CSS, e.g.:
.dgrid .dgrid-column-hider-toggle {
display: none;
}
It's also possible to just suppress a column from ColumnHider's list by adding unhidable: true to the column's definition.
However, it's not fully clear to me whether you even need the ColumnHider extension. Regardless of what's in your actual data, if you don't want a particular field to be displayed in the grid, just don't define a column for it in columns (or whichever property you're using, e.g. subRows or columnSets). You'll still have the full data item available to you e.g. for renderCell functions and if you extend renderRow.

Programmatically bring focus on first row in ng-grid

In my project, I have a requirement to bring focus on first row of ng-grid as soon as the grid loads and it should move to next row when I press the down key. I added the following event:
$scope.$on('ngGridEventData', function (e,s) {
$scope.gridOptions.selectRow(0, true);
});
But this event just selects the first row, it doesn't take the focus on first row. The row needs to be clicked to get the focus there. What is that additional statement we need to write to get the focus there?
I reported it on github repo of ng-grid and got the solution. You can check the conversation here: https://github.com/angular-ui/ng-grid/issues/539
We need to add the following statement to bring focus to the selected element:
$(".ngViewport").focus();
I was able to focus on a specific cell doing this:
$($($(".ngCellText.col1.colt1")[0]).parent()).parent().focus();
.col1.colt1 refers to the 2nd column (.col0.colt0 -> 1st column)
In this case I'm selecting the 1st row, the 2nd row will be selected using:
$($($(".ngCellText.col1.colt1")[1]).parent()).parent().focus();
It's a bit hacky, but it works.
A slight variation on the JQuery answer:
$('div[ng-row]').eq(2).find('.ageCell').focus()
This finds the row you want first, the third in this case, and then the column using the column name, 'age' in this case. It's just a bit more resilient if the columns change or are re-ordered.

add div from drop down menu selection jquery

I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.

How do I get column name from rowselection in an ExtJS grid?

I have a extjs gridpanel setup, and I want to be able to do things based on a user clicking on text or icons in the grid. For example, filter the grid if the user clicks (or double clicks) a word in a column, or show a popup if the user clicks on an icon. I can easily get the row they clicked on, and values by column name from that row, but I don't know which column was clicked.
Alternatively, I could add an onClick to the entire grid, which I could then get the individual text from the row/column, but I don't know what row index or column that value belongs to. I could add a CSS class that would tell me a column name, but that seems like a hack.
Is there anything built-in that can do this?
The "cellclick" event on the grid is the way to go. A function listening on this event gets passed:
( Grid this, Number rowIndex, Number columnIndex, Ext.EventObject e )
If you want to get the text of the gridCell, calling yourGrid.getView().getCell(rowIndex, colIndex) will return the DOM element.
If you want to get the column header, call: yourGrid.getColumnModel().getColumnHeader(colIndex)
If you want to find anything else out about a particular column, call yourGrid.getColumnModel().getColumnAt(colIndex)
I think if you are interested in column wise events rowselection is the wrong event to look into. As Joshua suggested the cellclick event will the event you have to look into.
This event can give the dataIndex of the column as given
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
Please look at edit-grid.html example for checkbox rendering and event handling.

Categories

Resources