We Keep Coding

Extjs4: How to add head title from CheckboxModel in grid?

I want to add header title from CheckboxModel column in grid.
Truth be told, I wanted to add multiple checkbox column in grid like that.(attached image file)
My mission is one checkbox have to select only one. But extjs does not have supported RadioModel.
So I had an idea. I could use CheckboxModel of selModel in grid.
BUT it also had a problem. I could not add title in CheckboxModel column.
1. Ankus.js
{
margin: '10 0 0 0',
xtype: 'grid',
minHeight: 100,
layout: 'fit',
frame: true,
resizable: true,
itemId: 'previewGrid',
selModel: Ext.create('Ext.selection.CheckboxModel', {
ignoreRightMouseSelection: true,
headerWidth: 66,
dataIndex: "classIndex",
injectCheckbox:"last",
}), ......
See the image : http://goo.gl/znbTwU
ext-them-gray-all.css
I removed 'x-column-header-inner-empty' elements. BUT it did't work.
How do I do?
Please help me.

jQgrid : Disable inline Save and Esc Handler while editing grid Row?

I am developing a asp.net MVC 4 project which uses jQgrid for generating table data.In my generated grid i am providing an inline edit option for particular columns in a row.
My problem is like while editing a particular row if i press Enter or Esc key my selected row is going out of edit mode.
I want to disable those events Enter and Esc .
I googled about this problem and i get some interesting posts How to disable Save Handler on Jqgrid while doing editing
Here in the above reference post i can see that some of the lines are commented out from Jqgrid.src.js file which i dont think as a best solution.
Is there any other method so that i can disable both Enter and Esc Event in Jqgrid while doing inline editing.
Javascript COde
jQuery("#Grid").jqGrid({
url: baseUrl + '/api/Controller/method',
datatype: "json",
mtype: "POST",
colNames: ['Col1', 'Col2', 'Col3', 'Col4', 'Col5'],
colModel: [
{ name: 'col1', index: 'col1', align: 'center', editable: true, key:true },
{ name: 'col2', index: 'col2', align: 'center' },
{ name: 'col3', index: 'col3', align: 'center', editable: true, key:true },
{ name: 'col4', index: 'col4', align: 'center' },
{ name: 'col5', index: 'col5', align: 'center', editable: true, key:true }
],
jsonReader: {
root: 'data',
id: 'col2',
repeatitems: false
},
pager: $('#Pager'),
rowNum: 10,
rowList: [10, 25, 50, 100],
autowidth: true,
shrinkToFit: false,
viewrecords: true,
loadonce: true,
autoencode: true,
multiselect: true,
height: '100%',
width: '100%',
caption: "Record"
});
Sample Grid Structure
Note: Grid Image shown is not the actual grid generated with the above code.
Here in the above grid there are some columns are left editable.My scenario is like i want to put data in all editable column in each row , so that i can update the grid data to server by a button click placed below the grid(Button not shown in the above image).Here i am not using editUrl property of grid.
Currently if i edit first row and accidently if i press enter or Esc key the selected row will become non editable.I want to keep all editable cells in a row as editable untill i press the Submit button placed below the Grid.
My jQgrid Version is 4.5.4
Any help is appreciated.

It's difficult to answer on the question which don't contains neither JavaScript code nor exact references on jqGrid version which you use. You don't describe in which form you use inline editing in the grid.
The usage of Esc and Enter during inline editing can be managed by keys: true option. The exact syntax of the usage of keys option depend on how you use inline editing. For example you can call editRow directly or use some other methods mile inlineNav or the formatter: "actions" which calls editRow for you. The default value of keys option is already false, so you change the value somewhere in your code to true.

How to make only the clicked cell editable instead of all the editable cells in the row clicked - using jqgrid?

At present I'm getting all the cells (with editable:true) in the row editable in which i clicked and not only the clicked the cell. The table is similar to the table in this link: http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm. I've gone through the link: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing, but didn't help (may be due to my fault in the way i tried) and also tried the answers given in stackoverflow related questions (used the attributes: cellEdit: true, cellsubmit: "clientArray").
Please help me using the above link as reference http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm (I think mainly the "onSelectRow", "ondblClickRow" functions need to be updated. i tried onSelectCell etc. but failed! ).
Thanks in advance.

If you need to use cell editing you have to include cellEdit: true in jqGrid definition. If you use local datatype then you should use cellsubmit: "clientArray" additionally. If you want to save data on the remote source you have to implement editing in your server code and specify cellurl option of jqGrid. The documentation describes what jqGrid send to the server on saving of cell.

I'm currently working on an Angular 2 app with Typescript, and I had a different need where I wanted to be able to click a row in the grid, but only have one cell editable. I didn't like the user experience where the user had to click the actual cell to edit it. Instead, clicking the row highlights the row and then makes the one cell editable. Here's a screenshot:
The trick was that I needed to set cellEdit to false on the grid and then set the individual column editable to true when declaring my column model array, and write a change event for the editoptions of the column. I also had to write code for the the onSelectRow event of the grid, to keep track of the current row selected and to restore the previous row selected. A snippet of the Typescript code is below:
private generateGrid() {
let colNames = ['id', 'Name', 'Total', 'Assigned', 'Distributed', 'Remaining', 'Total', 'Assigned', 'Remaining', 'Expiration'];
let self = this;
// declare variable to hold Id of last row selected in the grid
let lastRowId;
let colModel = [
{ name: 'id', key: true, hidden: true },
{ name: 'name' },
{ name: 'purchasedTotalCount', width: 35, align: 'center' },
{ name: 'purchasedAssignedCount', width: 35, align: 'center' },
{ name: 'purchasedDistributedCount', width: 35, align: 'center' },
{ name: 'purchasedRemainingCount', width: 35, align: 'center' },
// receivedTotalCount is the only editable cell;
// the custom change event works in conjunction with the onSelectRow event
// to get row editing to work, but only for this one cell as being editable;
// also note that cellEdit is set to false on the entire grid, otherwise it would
// require that the individual cell is selected in order to edit it, and not just
// anywhere on the row, which is the better user experience
{ name: 'receivedTotalCount',
width: 35,
align: 'center',
editable: true,
edittype: 'text',
editoptions: {
dataEvents: [
{
type: 'change', fn: function(e) {
//TODO: don't allow decimal numbers, or just round down
let count = parseInt(this.value);
if (isNaN(count) || count < 0 || count > 1000) {
alert('Value must be a whole number between 0 and 1000.');
} else {
self.updateLicenses(parseInt(lastRowId), count);
}
}
},
]
}
},
{ name: 'receivedAssignedCount', width: 35, align: 'center' },
{ name: 'receivedRemainingCount', width: 35, align: 'center' },
{ name: 'expirationDate', width: 45, align: 'center', formatter: 'date' }
];
jQuery('#licenseManagerGrid').jqGrid({
data: this.childTenants,
datatype: 'local',
colNames: colNames,
colModel: colModel,
altRows: true,
rowNum: 25,
rowList: [25, 50, 100],
width: 1200,
height: '100%',
viewrecords: true,
emptyrecords: '',
ignoreCase: true,
cellEdit: false, // must be false in order for row select with cell edit to work properly
cellsubmit: 'clientArray',
cellurl: 'clientArray',
editurl: 'clientArray',
pager: '#licenseManagerGridPager',
jsonReader: {
id: 'id',
repeatitems: false
},
// make the selected row editable and restore the previously-selected row back to what it was
onSelectRow: function(rowid, status) {
if (lastRowId === undefined) {
lastRowId = rowid;
}
else {
jQuery('#licenseManagerGrid').restoreRow(lastRowId);
lastRowId = rowid;
}
jQuery('#licenseManagerGrid').editRow(rowid, false);
},
});
}
Additionally, I wanted the escape key to allow the user to abort changes to the cell and then restore the cell to its previous state. This was accomplished with the following Angular 2 code in Typescript:
#Component({
selector: 'license-manager',
template: template,
styles: [style],
host: {
'(document:keydown)': 'handleKeyboardEvents($event)'
}
})
// handle keypress so a row can be restored if user presses Escape
private handleKeyboardEvents(event: KeyboardEvent) {
if (event.keyCode === 27) {
let selRow = jQuery('#licenseManagerGrid').jqGrid('getGridParam', 'selrow');
if (selRow) {
jQuery('#licenseManagerGrid').restoreRow(selRow);
}
}
}

Disable grid panel with checkboxes

My requirement is that to disable a grid panel inside field set or grid rows on certain condition. The grid has more than 20 items and there should be a scroll bar to view all the elements of the grid. If I use disabled property of grid panel, then the scroll bar also gets disabled. But i need the scroll bar to be enabled, so that user can see all items of grid.
For above i coded with feildset autoscroll: true and layout:fit. But on disabling the grid panel, the scrollbar of fieldset also gets disabled because of layout:fit property of fieldset. Is there any way to achieve the requirement?
Code:
Ext.applyIf(this, {
border : false,
frame : false,
bodyStyle : 'padding:12px 15px 0px',
labelAlign : 'top',
columnWidth : 0.5,
heigth : 350,
layout : 'form',
items: [{
xtype: 'fields',
id: 'fields',
layout: 'fit',
height: 321,
autoScroll: true,
title: 'Element list',
items: mygridPanel
}]
})

I've made up a small demo on jsFiddle for you to look at:
http://jsfiddle.net/CGtqp/
does this help you solve your issue?

Extjs checkbox column: make difference between click on checkbox and the rest of the field

i have a grid with a checkboxcolumn, all works fine but i would like to take different action between clicking on the checkbox itself and clicking besides it in the same field.
Is this feasable in ExtJs ? I work with version 3.3.1 but i guesss that an example from another version would get me started.
var checkColumn = new Ext.grid.CheckColumn({
header: 'Checklist OK ?',
dataIndex: 'checklist_ok',
width: 20,
align: 'center'
});
cmDiverse = new Ext.grid.ColumnModel({
defaults: {
"sortable": true,
"menuDisabled": false,
"align": "right"
},
store: storeDiverse,
columns: [{
"id": "id",
"header": "id",
"hidden": true,
"dataIndex": "id",
"width": 20
},
checkColumn, ...
gridDiverse = new Ext.ux.grid.livegrid.EditorGridPanel({
id: "gridDiverse",
enableDragDrop: false,
loadMask: true,
clicksToEdit: 1,
layout: 'anchor',
cm: cmDiverse,
....

Unfortunately you cannot differentiate between click inside and outside the checkbox, because all the listeners are on the column, and the checkbox is just a formatting of the text inside the column, not a real element.