In Jqgrid, I want to restrict user to select only one check box at any time. When user selects multiple check box only last selected to be in 'selected' state, remaining should be automatically un-selected.
I have set multi select attribute to true. But I am not able to do un-select previously selected item. Is it possible to do if so how?
Thanks
You can use the event beforeSelectRow and reset the selection:
beforeSelectRow: function(rowid, e)
{
jQuery("#list47").jqGrid('resetSelection');
return(true);
}
I've got a fiddle for you so you can check how it works.
You have to do some more stuff:
1. Set multiboxonly to true and multiselect to true
2. Define the events onSelectRow and beforeSelectRow:
3. Define global variable: var lastSel;
The OnSelectRow and beforeSelectRow implementation:
onSelectRow: function (rowId, status, e) {
if (rowId == lastSel) {
$(this).jqGrid("resetSelection");
lastSel = undefined;
status = false;
} else {
lastSel = rowId;
}
},
beforeSelectRow: function (rowId, e) {
$(this).jqGrid("resetSelection");
return true;
}
Having a checkbox in each column implies that you can click more than one at a time. What you are asking for is basically the multiselect: false behavior but with the checkbox column - are you sure you really want the checkboxes in this case?
I know this question is old, but I found a better solution in this Stack Post.
All you have to do is set the following two properties of the jqGrid:
multiselect:true // multi-select checkboxes appear
multiboxonly:true // checkboxes act like radio buttons where only one is selected at a time
I have updated the fiddle made by LeftyX to simply use the multiboxonly setting at this JsFiddle
This was what I needed. It may help someone else.
Related
I want to control row focus process. I need to show confirm dialog on row focus change in my table.
I tried to do this with rowClassRules property, but as I understood that functionality apply classes when table rendering, after that row classes stop changing
rowClassRules = {
'custom-row-focus': (params) => {
return params.data.id === this.currentSelectedItem.id
}
}
currentSelectedItem set's when I click on the row
Found an answer in docs
https://www.ag-grid.com/javascript-grid-row-styles/#refresh-of-styles
If you refresh a row, or a cell is updated due to editing, the rowStyle, rowClass and rowClassRules are all applied again.
So, when I'm clicking to the row I should make something like that:
onClicked($event: RowClickedEvent) {
$event.node.setData({...$event.data});
}
I need to reset all the values of field elements of my page. The elements are: inputs, selects (combobox), checkbox and radio group.
Searching found the following code:
$("*").attr('value', '');
$("input[type='checkbox']").attr("checked",false);
$('select').each(function() {
if($(this).children().length > 0) {
$($(this).children()[0]).attr('selected', 'selected');
$(this).change();
}
});
Inputs and checkbox are ok with this code, but the other components present problems with the codes tested. The radio group needed or take any kind of selection or at least select the first. The combobox resets with this code but when trying to select a new value it is not storing your value.
Thanks!
The non textual inputs need to be refreshed. Here's an example of doing so:
//reset text input values, then refresh slider widgets
$(".ui-input-text").val('').filter('.ui-slider-input').slider('refresh');
//reset checkboxes and radio inputs, then refresh them
$(".ui-checkbox input[type='checkbox'], .ui-radio input[type='radio']").prop("checked", false).checkboxradio("refresh");
//reset all select menus and then refresh them
$('.ui-select select').val('').selectmenu('refresh');
return false;
Here is a demo: http://jsfiddle.net/MLewd/1/
I have a GWT 2.4 DataGrid associated with a SingleSelectionModel. One of the columns in the grid is a CheckboxCell, but it is not used for selection, but to set a boolean field value for the underlying item type of the row. My problem is that when I click on the checkbox, the row is selected first, then I have to click a second time to set/unset the checkbox. I would prefer that clicking outside of the checkbox does row selection, while clicking inside of the checkbox only sets/unsets the checkbox. Can anyone point me in the right direction on how to do this. I keep coming back to onBrowserEvent, but I'm not sure what to try.
There's a couple of approaches you can do, depending on what exactly you want to do it. Here are the two ideas that come to mind:
Use a DefaultSelectionEventManager.CheckboxEventTranslator to blacklist the column
Intercept it on a cell by cell basis with CellPreviewEvent.Handler and handle it on the DOM level by checking the EventTarget ("click".equals(event.getType())) and then use event.stopPropogation() when the EventTarget is of an input type "checkbox"
This code solved in my case a problemn very similar to yours.
Column<SomeBean, Boolean> checkboxColumn= new Column<SomeBean, Boolean>(new CheckboxCell(true,false))
{
#Override
public Boolean getValue(SomeBean object)
{
if(object == null || object.getId() == null)
return null;
return selectionModel.isSelected(object);
}
};
This is strange and any alternative method to what I want to accomplish is welcome. My app uses the jqgrid 3.5.3 and I need to disable a select list on my edit form. When I do so using the code displayed below it breaks the edit form - meaning I can not cancel or submit it. Thanks. This code is in the edit options array of the navGrid method. The the dropdown is the 'serv_descr' field. The others are text boxes and don't pose a problem. The form does come up and the field is disabled - its just broken.
beforeShowForm: function(eparams) {
document.getElementById('equip_id').disabled = true;
document.getElementById('service_dt').disabled = true;
document.getElementById('serv_descr').disabled = true;
document.getElementById('calc_next_svc').checked = 'true';
}
afterShowForm: function(eparams) {
$('#equip_id').attr('disabled', 'disabled');
$('#service_dt').attr('disabled', 'disabled');
$('#serv_descr').attr('disabled', 'disabled');
$('#calc_next_svc').attr('checked', true);
}
Note:
replace event trigger afterShowForm
id name must be form controll
I am using a TableViewer with a content provider, label provider, a ICellModifier and TextCellEditors for each column.
How can I add arrow key navigation and cell editing when the user selects the cell? I would like this to be as natural a behavior as possible.
After looking at some of the online examples, there seems to be an old way (with a TableCursor) and a new way (TableCursor does not mix with CellEditors??).
Currently, my TableViewer without a cursor will scroll in the first column only. The underlying SWT table is showing cursor as null.
Is there a good example of TableViewer using CellEditors and cell navigation via keyboard?
Thanks!
I don't know if there is a good example. I use a cluster of custom code to get what I would consider to be basic table behaviors for my application working on top of TableViewer. (Note that we are still targetting 3.2.2 at this point, so maybe things have gotten better or have otherwise changed.) Some highlights:
I do setCellEditors() on my TableViewer.
On each CellEditor's control, I establish what I consider to be an appropriate TraverseListener. For example, for text cells:
cellEditor = new TextCellEditor(table, SWT.SINGLE | getAlignment());
cellEditor.getControl().addTraverseListener(new TraverseListener() {
public void keyTraversed(TraverseEvent e) {
switch (e.detail) {
case SWT.TRAVERSE_TAB_NEXT:
// edit next column
e.doit = true;
e.detail = SWT.TRAVERSE_NONE;
break;
case SWT.TRAVERSE_TAB_PREVIOUS:
// edit previous column
e.doit = true;
e.detail = SWT.TRAVERSE_NONE;
break;
case SWT.TRAVERSE_ARROW_NEXT:
// Differentiate arrow right from down (they both produce the same traversal #*$&#%^)
if (e.keyCode == SWT.ARROW_DOWN) {
// edit same column next row
e.doit = true;
e.detail = SWT.TRAVERSE_NONE;
}
break;
case SWT.TRAVERSE_ARROW_PREVIOUS:
// Differentiate arrow left from up (they both produce the same traversal #*$&#%^)
if (e.keyCode == SWT.ARROW_UP) {
// edit same column previous row
e.doit = true;
e.detail = SWT.TRAVERSE_NONE;
}
break;
}
}
});
(For drop-down table cells, I catch left and right arrow instead of up and down.)
I also add a TraverseListener to the TableViewer's control whose job it is to begin cell editing if someone hits "return" while an entire row is selected.
// This really just gets the traverse events for the TABLE itself. If there is an active cell editor, this doesn't see anything.
tableViewer.getControl().addTraverseListener(new TraverseListener() {
public void keyTraversed(TraverseEvent e) {
if (e.detail == SWT.TRAVERSE_RETURN) {
// edit first column of selected row
}
}
});
Now, how exactly I control the editing is another story. In my case, my whole TableViewer (and a representation of each column therein) is loosely wrapped up in a custom object with methods to do what the comments above say. The implementations of those methods ultimately end up calling tableViewer.editElement() and then checking tableViewer.isCellEditorActive() to see if the cell was actually editable (so we can skip to the next editable one if not).
I also found it useful to be able to programmatically "relinquish editing" (e.g. when tabbing out of the last cell in a row). Unfortunately the only way I could come up with to do that is a terrible hack determined to work with my particular version by spelunking through the source for things that would produce the desired "side effects":
private void relinquishEditing() {
// OMG this is the only way I could find to relinquish editing without aborting.
tableViewer.refresh("some element you don't have", false);
}
Sorry I can't give a more complete chunk of code, but really, I'd have to release a whole mini-project of stuff, and I'm not prepared to do that now. Hopefully this is enough of a "jumpstart" to get you going.
Here is what has worked for me:
TableViewerFocusCellManager focusCellManager = new TableViewerFocusCellManager(tableViewer,new FocusCellOwnerDrawHighlighter(tableViewer));
ColumnViewerEditorActivationStrategy actSupport = new ColumnViewerEditorActivationStrategy(tableViewer) {
protected boolean isEditorActivationEvent(ColumnViewerEditorActivationEvent event) {
return event.eventType == ColumnViewerEditorActivationEvent.TRAVERSAL
|| event.eventType == ColumnViewerEditorActivationEvent.MOUSE_DOUBLE_CLICK_SELECTION
|| (event.eventType == ColumnViewerEditorActivationEvent.KEY_PRESSED && event.keyCode == SWT.CR)
|| event.eventType == ColumnViewerEditorActivationEvent.PROGRAMMATIC;
}
};
I can navigate in all directions with tab while editing, and arrow around when not in edit mode.
I got it working based on this JFace Snippet, but I had to copy a couple of related classes also:
org.eclipse.jface.snippets.viewers.TableCursor
org.eclipse.jface.snippets.viewers.CursorCellHighlighter
org.eclipse.jface.snippets.viewers.AbstractCellCursor
and I don't remember exactly where I found them. The is also a org.eclipse.swt.custom.TableCursor, but I couldn't get that to work.
Have a look at
Example of enabling Editor Activation on a Double Click.
The stuff between lines [ 110 - 128 ] add a ColumnViewerEditorActivationStrategy and TableViewerEditor. In my case the I wanted a single click to begin editing so i changed line 115 from:
ColumnViewerEditorActivationEvent.MOUSE_DOUBLE_CLICK_SELECTION
to ColumnViewerEditorActivationEvent.MOUSE_CLICK_SELECTION. After adding this to my TableViewer, the tab key would go from field to field with the editor enabled.