We Keep Coding

Select and deselect row after another selection - ReactJS Hooks

Have a list of licenses plates that start with a disabled button and no line selected.
Here is what should to do:
When select a row, button "Go foward" enable;
When select a row already selected, deselect it and disabled button again.
When list have a row selected and user click in another row, deselect old row and select the new one.
The snippet code i did:
https://codesandbox.io/s/busy-galileo-mw3p3?fontsize=14&hidenavigation=1&theme=dark
Facing this problems:
Need 2 clicks to set css style 'custom-col-row-active' to row selected. Button is enable already first click.
When a line is already selected, when you click on the other lines, they are selected as well. With 1 click on a selected line, all are deselected.
I know need use data table to deselect line already select, but i don't know how to get the full data table, since i only get the data when i click in a specif row.
Any tips here?

#Rafael, I don't know much about tabler-react, but this is just my suggestion for you. Your handleSetActivedRow seems to have problem. I don't understand why you have written onClick={(e) => handleSetActivedRow(e)}. You are calling a function inline when onClick itself and again you are taking it to an other function handleSetActivedRow. This is bad coding; instead you can do like this onClick={handleSetActiveRow}. secondly, you need to check again your handleSetActiveRow function. I don't understand why you want to return? when it is not necessary. What you need to check on is that you want to set the className to -active when you click on an element.

When tableDnD is disabled it leaves residual css and I can't clear the css

tableDnD (table Drag and Drop) is a jQuery plugin I'm using to be able to re-order rows in my html table. It's a pretty cool library, but the fact that you can click, drag, and drop rows -- disables the ability to select that row by clicking -- it thinks you might be starting a drag and drop, or doing a 0-distance drag.
So you can view my example here, and see what I'm talking about -- http://jsfiddle.net/du31ufts/5/
It starts off as disabled, so enable the row re-ordering and see the library. Then, try to select just one row in the middle. The only way the blue highlighting indicating selection shows up is if you click outside the bounds of the table, and thus you would only be able to select starting from the bottom or top, and not be able to select one row at a time. I need to select these rows to be able to copy-paste these rows into excel.
I've tried looking into the library itself and detaching $('__dragtable_disable_text_selection__'), I've tried jquerys removeAttr for unselectable, I've tried
$('.dragtable-sortable').attr('-moz-user-select', 'none');
Nothing is re-enabling my ability to be able to click and select single rows. I'd like to do this without modifying tableDnD functions.
Which CSS properties could be affecting my ability to select table rows?

Create a textarea somewhere with ID #spot.
Use this code to extract data on click from a row and select it. Its delimited by tab so it should be pastable into excel easily.
$('tr').click(function(){
var copyContent = "";
$(this).children('td').each(function(){
copyContent = copyContent+$(this).text()+"\t";
});
$('#spot').val(copyContent);
$('#spot').select();
});

I asked about this on github and got an answer: It did require modification of the library. Specifically, replacing the if block starting at line 207 of the fiddle in this question with this
if (!$(this).hasClass("nodrag")) {
if (e.target.tagName == "TD") {
$.tableDnD.initialiseDrag(this, table, this, e, config);
return false;
}
}
modified fiddle. Thank you tschqr

How to make a light off effect in an entire Table Row

Can anyone help me how to make a lights off effect in an entire table row if i click a specific textbox and remove the lights off effect if i click again the specific textbox and goes the same with other textboxes with there specific table rows.
My problem is when i click a specific textbox the textbox is the only one who is highlighted. I want it to be the entire table row on that specific textbox.
current code: http://jsfiddle.net/AP6kr/4/

If you target $(this).parent() instead of $(this), you'll get the whole row. See JSfiddle: http://jsfiddle.net/AP6kr/6/
My example is actually targeting the <td> tag, which is the parent of the input. Since it's the only td in the row, it looks the same as if you go up one more parent to the <tr> tag. you can see that effect here: http://jsfiddle.net/AP6kr/8/
It's pretty much indistinguishable now, but if you had more cells per row it would matter.

You could use pointer-events:none; on #overlay : http://jsfiddle.net/AP6kr/5/

Adding Excel like functionality to jqgrid of already editable cells

I have a jqGrid with only certain columns that are editable and I would like to be able to implement functionality similar to excel when you press tab and enter. These columns are editable from the start, because I call editRow on every row in loadComplete, so that the user may click in any one of the cells in these columns and change the information. I would like it to be such that when you press tab the cursor goes to the next editable cell in the current row until it gets to the end and upon pressing tab again, goes to the first editable cell of the next row; and upon pressing enter goes to the first editable cell of the next row no matter what cell you happen to be in of the previous row. Every time cell focus is changed, data is saved to the server.
I've been doing quite a bit of research, but none of it has worked. I have the functionality for each keypress in the colModel under editoptions and dataEvents as a keydown event that checks to see which button has been pressed and then executes the appropriate code. The first thing I tried used the editCell method of jqGrid where I passed it the row and column of the next cell I would like to move the cursor to, but that didn't work and I think it is because I've already called editRow on every row. I've also tried changing the focus to the cell I'm trying to go to by using $.click() or $.focus() but that has not worked either.
Something extra to note is that when these columns are blurred, I recompute the column totals on the client side. I have tried putting the different things I've tried to change focus inside setTimeout but that hasn't worked either.
I basically would like to keep it where all of the cells in the columns that I want to be editable are editable at any time and the user may either click on that specific cell or tab/enter over to it to edit it. This is how it looks for clarification:
http://cl.ly/2W3E1U3i1k3K0W2Y0r0n
Thanks for the help!

I was able to figure it out and I'm not sure why it took me so long to figure out. Nothing that jqgrid provided worked and I had tried many different things from jQuery and I finally found something that works:
{
type: 'keydown',
fn: function(e) {
var key = e.charCode || e.keyCode;
//TAB
if(key == jq.ui.keyCode.TAB) {
setTimeout(function() {
jq('#' + currentRowId + '_nextColName').focus();
jq('#' + currentRowId + '_nextColName').select();
}, 500);
}
//ENTER
else if (key == jq.ui.keyCode.ENTER) {
var nextRow = parseInt(currentRowId) + 1;
jq('#' + currentRowId + '_thisColName').blur();
jq('#' + nextRow + '_firstColName').select();
}
}
}
This makes it so that tab takes you to the next column and enter always takes you to the first column of the next row while maintaining that all of the cells are always editable and you can click on any editable cell at any time.

How to select <table> like <div> in the MS Html editor?

If a tag like DIV, MARQUEE or IMG is inserted, it can be selected when clicking anywhere in the tag area. However, if a TABLE is inserted, it can only be selected when clicking on the border of tag area. I have searched for the possible event (onclick, keydown) defined for DIV, but unfortunately no relevant Javascript code was found. DesignMode is used for the editor. Anyone knows how to make TABLE easier to be selected just like a DIV?

You can do it using a ControlRange and selecting it. Assuming the table element is stored in a variable called "table":
table.onclick = function() {
if (document.selection.type != "Control") {
var range = document.body.createControlRange();
range.add(this);
range.select();
}
};
jsFiddle: http://jsfiddle.net/DTK8j/

It probably means that table was created so that an event was defined for each cell and possibly each row has an event also. When you click on any area in the row (if there was not padding given for the cell) the cell event was fired up and detect the cell event first not the row event. Likewise the click on the row will trigger the row event rather than the table event.
So it's difficult, but if you didn't define any event like onclick or any event on each row or cell then you only get the table event; otherwise the defined event on any row or cell will be activated in preference to the table event.