In an ExtJS 4.1 grid that uses CheckboxModel as a selection model, when you click on an entire row, that row is selected (and the corresponding checkbox is checked). Is there a way that I can prevent that default behaviour from happening and permit row selection only when the checkbox for a corresponding row is clicked (as opposed to when clicking the entire row)?
Again I'm using ExtJS version 4.1
Thanks for any help
Note: My grid also has the CellEditing plugin attached to it. I don't want the row to be selected when the CellEditing plugin gets activated when I click on a cell.
Try the checkOnly property on your CheckBoxModel:
var sm = new Ext.selection.CheckboxModel({
checkOnly: true
});
From the documentation:
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.selection.CheckboxModel-cfg-checkOnly
checkOnly : Boolean
True if rows can only be selected by clicking on the checkbox column.
Defaults to: false
Please see my fiddle here for a working example: https://fiddle.sencha.com/#fiddle/vue
Update
To change the CheckBoxModel checkOnly mode after the grid has been rendered:
grid.getSelectionModel().checkOnly = true;
Related
I started implementing ag grid in angular. Everything is good in listing. But for inline full row editing I am facing 2 issues.
I have 2 cells having dropdown. I am using custom cell editor component for each dropdown cell. now I want that If I change the value of dropdown in first cell then it should change the dropdown data in second cell.
I have an action column. having edit button. So When I click on edit, I hide the edit button and show save and cancel button and call this function. It make all columns editable.
this.gridApi.startEditingCell()
But issue is even if I click any row below current editing row then my editable row become non editable and my action column still show save and cancel. Now I do not know how to change the cell renderer of a column when row become non editable or how to prevent this action
I will suggest you to use cellRenderer with editable: true inside cellRendererParams .
This will resolve the issue of becoming previous row non-editable while clicking on another row or outside the grid as in this state all of grid row's will be behave as editable.
And to manage your action items i think it's better to manage them by comparing the previous rowData and updated rowData.
If you will use the cellEditor with cellEditorParams then the issue of non-editable row will come in the picture as in this case you can make only single row editable at a point of time.
Please let me know if i can help you further in this .
Thank you.
I think to have an issue with W2UI's grid. I have the "cell" selection type and I see that the whole column is selected if you click on a cell with the mouse right button.
Specifically it happens when you have no cell selected or you click on a cell in another column than the selected cell's one. To test the described behaviour, you can use any of the available demos on jsFiddle, setting selectType: 'cell' in grid options.
It's a strange behaviour in my opinion and I would like to know how to change it. Is it possible?
Option 1
The easiest way to work around this, is to set the grid context menu to an empty function:
grid.contextMenu = function() {};
or in the constructor:
$('#grid').w2grid({
name: 'grid',
contextMenu: function() {}
});
This will however then show the browser's default context menu on right click.
Option 2
If you do not want the browser's context menu to show up, instead of an empty function, implement a function that executes event.preventDefault():
grid.contextMenu = function(recid, column, event) { event.preventDefault(); return false; }
Here's a fiddle based on the Spreadsheet Like Grid Demo
Option 3
If you need the w2ui default context handling, and only want to get rid of the column selection, I'm afraid you'll have to modify the source and remove the following line in the contextMenu function:
if (!selected && column != null) obj.columnClick(this.columns[column].field, event);
or copy the whole original code (sans the mentioned line) for your own implementation of your grid's contextMenu function.
I have a jgrid with multiple rows and 5 columns without check-boxes. In 5th column it has screen permissions. I had given the sample of jqgrid below.
So when i am changing screen permissions either by clicking on the close mark or clicking on plus mark i am deleting existing or adding other available permissions to the screen.
Here i am doing same operation for multiple rows in grid. When i am clicking on the SAVE button outside of the grid i need to get the edited row values and need to send back to controller.
I tried this functionality with the selarrow function of jqgrid. but i am not getting these edited row values without selecting the checkbox of the row.
Could any one help me how to get this edited row values without selecting the checkboxes of the row.
You can use the below code:
var lastSel;
jQuery("#gridid").jqGrid({
...
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery(this).restoreRow(lastSel);
lastSel=id;
}
jQuery(this).editRow(id, true);
},
...
});
onSelectRow :Raised immediately after row was clicked.
rowid: is the id of the row,
status: is the status of the selection,
e: is the event object. Can be used when multiselect is set to true. true if the row is selected, false if the row is deselected.
You Can refer this as well:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events
In kendo grid , i want to insert/add new row when TAB key is pressed from last editable column. Please help me to achieve this functionality.
Use grid.addRow() which adds an empty row.
var grid = $("#grid").data("kendoGrid");
grid.addRow();
You will have to bind the keyUp action from the last editable column to get the "Tab" key.
I have GridPanel with 2 columns :
Type : string
Details : combo
I added CheckBox selection model and I have a little problem.
When I select couple rows and want to edit Details column in some of the selected row or even not-selected, selection disappears. Only edited row remain selected.
I can't find any solution for this. Can anyone help me ?
JSFiddle : http://jsfiddle.net/papcio28/fkJT3/6/
Your problem is that the editing model and checkbox selection model and not compatible. The technical reason for this is that the checkbox model uses the rowselection model on the grid and grideditor uses cellselection model on the grid. I don't think that Extjs is compatible with your requirements here since the cell selection model is necessary for the grid to know where to put an editor and row selection model is necessary for you to visually see the selection when using checkbox selection model. In your example it sounds like it choses the row selection model, which means it selects the row when you start editing because the row has to be selected for it to know where to the put the editor.
My suggestion for you is to use checkcolumn plugin and fake the rows being selected by using a renderer on every column that changes the background to the selected color when the value for your checkcolumn is true, this way it will look like a row selection model, but not actually be one.