I'm trying to disable the cell selection in my Ext.grid.Panel.
I found out there are few selectionTypes and selectionModes, but neither worked for me. Would be great if I could achieve this by using the framework.
Thanks in advance.
Update to my question: I want to select a row, but not a single column. Is it possible to disable the cell selection, but allow the user to select the row?
Update
I found a better solution than the suggested ones:
Just use the theme-variable of the component.
By setting the value to 0px, the selection disappears completely.
Using a list or a tree i usually use row selected event to do what i've to and on cell click i set change selected cell css to nothing.
possibilities:
change css of selected cell to null
not use cell selected event but rowselected (cell/row selected Always match same)--> if the problem is the cell css when clicked change it
Only workarounds, you can't disable cell click, because without this the rowclick event can't be fired
Have you searched the docs? For "disable", "cell" and "selection", maybe?
Because disableSelection:true works for me.
Override following css classes:
.x-grid-item-focused .x-grid-cell-inner:before {
border: none;
}
After this, when you select grid cell, the cell selection border won't be displayed.
Related
I have a table with multiple-select checkbox where I want to retain random selection, method setSelectedRow(index) overrides the previous selection.
Another method setSelectedInterval(I,j) but it's not random select.
Please help.
If you are referring to retaining the old selection and adding additional selection in a sap.ui.table.table, try using:
table.addSelectionInterval(1,1);
table.addSelectionInterval(4,4);
This code will select row #1 and #4
I want to edit treecolumn cell values using basic celleditor with combobox, but values contains html tags. I tried to use this solution, but it doesn't work correctly (doesn't complete edit on blur, doesn't expand if clicksToEdit: 1).
Link to example.
How to fix that?
I added <input> element into fieldSubTpl with opacity:0 and another div element for show value. Here a fiddle link.
In this fiddle
There are two rows and each row have 2 bootstrap icons edit and delete.When edit icon is clicked then a bootstrap dialog box appears showing the existing column values,User can change the values and after clicking the save button the old values are replaced by the new one.I tried using
$Updaterow.remove();
$Updaterow.append('<td>'+ $('#editName').val()+'/<td>'+'<td>'+ $('#editEmail').val()+'/<td>'+'<td>'+ $('#editmobile').val()+'/<td>');
but this is not working.I have also tried with this
$Updaterow.replaceWith('<td>'+ $('#editName').val()+'/<td>'+'<td>'+ $('#editEmail').val()+'/<td>'+'<td>'+ $('#editmobile').val()+'/<td>');
In this way also the new row is not getting replaced.Can any body please tell me how to do this?
You are trying to replace TR with a TD. Try this
$Updaterow.replaceWith('<tr><td>'+ $('#editName').val()+'</td>'
+'<td>'+ $('#editEmail').val()+'</td>'
+'<td>'+ $('#editmobile').val()+'</td></tr>');
And the first one wont work since you are appending TD to a TR which is not in DOM any more.
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.
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.