We Keep Coding

Inline edit focus is not un-focusing after saving

I am using jqgrid in my application. We have functionality to do inline editing and saving.Now editing is working fine but the problem is with focus. When i click on edit button all cells are focused as expected and later i perform modifications and save, now focus from that row won't go off.
Code what I have tried is:
col name and col model code:
colNames: ['Id','Category Name','Category Label','Sort Order','Default','Active','Action'],
colModel: [
{name:'id', hidden : true, key : true},
{name:'CategoryName',index:'1',sortable:false, width: 343, editable: true,
editoptions:{size:"40",maxlength:"40"}
},
{name:'CatLable', index:'2',width:250, editable: true,edittype:"select",
editoptions:{value:"#{contexts.sessionContext.get('categoryLabel')}"}
},
{name:'DispOrder',index:'3',sortable:false, width: 100, align:"center", editable: true, editrules:{number:true},
editoptions:{size:"3",maxlength:"3"}
},
{name:'IsDefault',index:'4',sortable:false,width:60,search:false, resizable: false},
{name:'IsActive',index:'5',sortable:false,width:60,search:false, resizable: false},
{name: 'Action', index: '6', width: 85, sortable: false, formatter: 'actions',
}
}
],
format options code:
{name: 'Action', index: '6', width: 85, sortable: false, formatter: 'actions', formatoptions: {
// we want use [Enter] key to save the row and [Esc] to cancel editing.
url: "#myurl",
keys: true,
"delbutton":false,
onEdit:function(rowid) {
lastsel2 = rowid;
}
}
}
Reload grid code:
gridComplete: function(){
unblockB2BUI();
var recs = parseInt(jQuery("#categoryResults").getGridParam("records"),10);
if (recs == 0) {
jQuery("#logGridWrapper").hide();
jQuery(".noResMsg").show();
}
else {
jQuery(".noResMsg").hide();
jQuery('#logGridWrapper').show();
}
}
Grid for editing:
Grid when try to save the edited values:
Update:
Grid after saving and going to edit one more row:
Someone please suggest me how can I come out of the focus when i click on save icon.
Thanks in advance.

AngularJS kendo grid with custom command which includes template doesn't handle events

I have an angularjs - kendo UI grid-based solution. In the controller for the grid I have placed the following code:
$scope.customClick = function(e) {
$scope.$apply(
function() {
e.preventDefault();
alert('customClick');
});
};
$scope.gridOptions = {
dataSource: $scope.gridData,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
scrollable: true,
sortable: true,
filterable: true,
selectable: true,
editable: "inline",
columns: [
{
command :[ {text: "", template: '<input type="checkbox" id="check-all" />', click: $scope.customClick} ]
},
{field: "DocumentKey", title: "Document Key"},
{field: "Sender", title: "Sender"},
{field: "Recipient", title: "Recipient"},
{field: "ChangeDate", title: "ReceivedBy Time"},
{field: "FlowComment", title: "Comment"},
{field: "Location", title: "Location"}
]
};
});
Added checkbox is displayed fine, but I don't know how to handle the click event. $scope.customClick is not triggered after clicking on check box.

A fairly old question, the user had probably found a solution long ago, but in case google search gets someone to this question, it's good to have an answer. JavaScript combined with libraries like KendoUI and AngularJS usually allow us to solve problems by using several different approaches, but here is one of them:
Say you have a grid defined like this:
<div kendo-grid="kendo.myGrid" k-options="gridOptions"></div>
Your JavaScript code to define this grid might look like this:
$scope.gridOptions = {
dataSource: new kendo.data.DataSource({
data: dataFromSomeLocalVariableMaybe,
pageSize: 10
}),
sortable: true,
pageable: {
pageSizes: [10, 20, 50]
},
columns: [{
field: "column1",
title: "Column 1",
width: "100px"
}, {
field: "column2",
title: "Column 2",
width: "120px"
}, {
command: [{
template: "<span class='k-button' ng-click='doSomething($event)'> Do something</span>"
}, {
template: "<span class='k-button' ng-click='doSomethingElse($event)'> Do something else</span>"
}],
title: " ",
width: "100px"
}]
};
Notice the $event that is passed to ng-click call to a function. That $event contains the actual click event data.
If it would be like this, then you would need to have these two functions defined:
$scope.doSomething = function($event) {
// Get the element which was clicked
var sender = $event.currentTarget;
// Get the Kendo grid row which contains the clicked element
var row = angular.element(sender).closest("tr");
// Get the data bound item for that row
var dataItem = $scope.kendo.myGrid.dataItem(row);
console.log(dataItem);
};
$scope.doSomethingElse = function($event) {
// Do something else
};
And that's it.

Omit $scope.
It should as follows:
{ command : {text: "", click:customClick}, template: '<input type="checkbox" id="check-all"/>}

Your command template should include ng directive, in your case ng-change for the checkbox input, which would point to your target function:
{
command :[{
text: "",
template: '<input type="checkbox" id="check-all" ng-change="customClick"/>'
}]
}

onUnselect event of jquery easyui datagrid

I am using JQuery EasyUI 1.3.4, I am having some trouble catching onUnselect event, following code illustrates my problem:
function NavigateProcess() {
$(function () {
var data = list;
$('#dg').datagrid({
view: detailview,
cache: true,
data: data,
loadMsg: 'Processing, please wait …',
singleSelect: true,
columns: [[
{
title: 'Name', field: 'Name', width: 180, editor: 'text'
//,formatter: formatProgress
},
{ field: 'ID', title: 'ID', width: 60, align: 'right', editor: 'text' },
{ field: 'RatePlan', title: 'RatePlan', width: 80, editor: 'text' },
{ field: 'ActivationDate', title: 'ActivationDate', width: 80, editor: 'text' },
{ field: 'DataType', title: 'DataType', hidden: 'true' }
]],
onUnselect: function (rowIndex, rowData) {
alert('unselect');
if (lastselectedrow) {
$('#dg').datagrid('endEdit', lastselectedrow);
}
},
onSelect: function (rowIndex, rowData) {
alert('select');
lastselectedrow = rowIndex;
$('#dg').datagrid('beginEdit', rowIndex);
},
detailFormatter: function (index, row) {
return '<div style="padding:1px"><table id="ddv-' + index + '"></table></div>';
}
});
});
function doSearch() {
$('#tt').datagrid('load', {
itemid: $('#itemid').val(),
productid: $('#productid').val()
});
}
}
I put two alert statements in onSelect and onUnselect events, onSelect is triggered when I click on a row. Since singleSelect property is true, selecting another row will result in an onUnselect and onSelect events, at least that's my understanding. When I click on rows only onSelect alert pops up, alert of onUnselect never pops up, can somebody point me how to capture onUnselect event? Any help will be appreciated.

there is an inherent bug that prevents invoking onUnselect event

extjs grid editor advance to next column

I'm trying to make a grid editor that will automatically advance to the next column after 5 characters are typed in the first column. I've put together what I think is the right code for this, but the selected column keeps jumping back to the first one and clears the data that was entered.
Here is the grid that I'm using:
Ext.create('Ext.grid.Panel', {
title: 'idNumbers',
store: Ext.data.StoreManager.lookup('priceStore'),
plugins: [Ext.create('Ext.grid.plugin.RowEditing',
{
clicksToEdit: 1,
pluginId: 'idNumberGridEditor'
})],
columns: [
{
header: 'Name',
dataIndex: 'idNumber',
editor: {
allowBlank: false,
xtype: 'combobox',
store: Ext.data.StoreManager.lookup('idNumberStore'),
displayField: 'idNumber',
valueField: 'idNumber',
typeAhead: true,
allowBlank: false,
forceSelection: true,
enableKeyEvents: true,
listeners: {
keyup: function(combo, e, eOpts) {
if(combo.getValue().length==5)
{
//move to next control
if(!this.nowFive)
{
editPlugin = this.up().editingPlugin;
curRow = editPlugin.context.rowIdx;
curCol = editPlugin.context.colIdx;
editPlugin.startEdit(curRow, curCol + 1);
this.nowFive = true;
}
}
else
{
this.nowFive = false;
}
}
}
}
},
{
header: 'Phone',
dataIndex: 'price',
editor: {
allowBlank: false,
xtype: 'numberfield'
}
}
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
console.log(this);
//this.editor.startEdit(1,1);
}
}
});
Here is the full example: http://jsfiddle.net/cFD9W/5/

startEdit will reset the edit state (it is intended to be used in conjunction with completeEdit or cancelEdit. What you want here is just to focus the next field, this way the edit state will be handled correctly by the plugin.
Here's a rewrite of your listener in that spirit (updated fiddle):
keyup: function(combo, e, eOpts) {
if(combo.getValue().length==5) {
//move to next control
if(!this.nowFive) {
var editPlugin = this.up().editingPlugin,
editor = editPlugin.getEditor(), // Ext.grid.RowEditor
curCol = editPlugin.context.colIdx,
currentField = editor.getEditor(curCol),
nextField = editor.getEditor(curCol + 1);
if (currentField) {
// ensure the combo is collapsed when the field is blurred
currentField.triggerBlur();
}
if (nextField) {
// startEdit will reset the edit state... What we need
// is simply to focus the field, the value will be
// updated when the user clicks the "update" button.
nextField.focus();
}
this.nowFive = true;
}
} else {
this.nowFive = false;
}
}
Finally, as already said by Akori, if you set forceSelection to true, the combo value will be forced to one that already exists in the store, which is probably not what you want.

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);
}
}
}