We Keep Coding

How to show jqgrid columns editable on page load

I am working on JQgrid in which 2 columns need to be editable, I've achieved it using below options in colModel.
{
name: 'Action',
index: 'Action',
editable: true,
edittype: "select",
formatter: 'select',
editoptions: {
value: {
1: 'Approve',
2: 'Reject'
}
},
editrules: {
required: true,
custom: true,
custom_func: actionCheck
}
},
and below two options in jqgrid
cellEdit: true,
cellsubmit: 'clientArray',
But with this, I have to click on the column to be able to edit it.
I also have a column named comments with edittype:"textarea".
What I want is, when users open the page they see dropdowns and textareas in both columns of all rows and when they click the submit button after entering the data, I grab all of it in an array, which I will then use to update my SharePoint list.
Is this possible? if so please let me know how.
here's what I currently have,

With celEdit you can't do what you want. You can use both methods editRow and saveRow. Please, check the docs for this purpose.
The idea is to call editRow after the data is loaded. This can be done with setTimeout function after the jqGrid code. Make these two fields editable and do.
...
jqGrid({
...
});
setTimeout(function() {
var grid = $("#jqGrid");
var ids = grid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
grid.jqGrid('editRow',ids[i]);
}
}, 800);
After that you can save the data on button click. The button should be defined somewhere in the DOM.
function saveRows() {
var grid = $("#jqGrid");
var ids = grid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
grid.jqGrid('saveRow', ids[i]);
}
}
Please check the similar example here

Custom pasting into empty datatable

When I'm trying to paste into the empty area within the webix datatable, nothing happens and onPaste event doesn't occur.
Basically, I want to add a new item through onPaste even when existing data items aren't selected. But whether it's possible?
Something like the 'insert' operation in a list, but in my use-case the datatable can be empty after init (in the following sample I've added an item to make clipboard work). Here it is:
http://webix.com/snippet/9ae6635b
webix.ui({
id:'grid',
view:'datatable',
select:true,
clipboard:'custom',
editable:true,
columns:[
{ id:'id' },
{ id:'name', fillspace:true, editor:"text" },
{ id:'details' }
],
data: [
{ }
],
on:{
onPaste: function(text){
this.add({ id:webix.uid(), name:text })
}
}
});
Any suggestions are appreciated.

I found that 'clipbuffer' has focus only when datatable has the selection. Most probably it is required for data editing, detecting position or whatever. Anyway, the 'clipbuffer' can be focused manually:
var clipEvent = webix.event($$("grid").getNode(), "click", function(){
webix.clipbuffer.focus();
});
Sample: http://webix.com/snippet/aa441e70

Binding an event to an add dialog select input in jqgrid

I have a jqgrid with the add dialog enabled for adding new rows. The way I would like it to work is that the user will select from a list of drop down items and the item chosen will cause a second drop-down to be populated with data based on the first item.
For example, if my grid had two columns, one for country and one for state, when the user clicked the add button, the country input would be a drop-down, dynamically populated with countries by an ajax call. Then, when the user selects a country, the state drop-down is populated based on the country selected.
Currently I am doing something like the following:
beforeProcessing: function () {
var allcountries = ajaxcall();
$('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
},
loadComplete: function () {
$('#Countries').change(function () {
// States will be populated here
alert("changed");
});
}
The first part in beforeProcessing works fine and the countries drop-down is populated as expected. However, the event in loadComplete does not get attached to the select input with id the 'Countries' and the alert never occurs. It seems that the select object has not yet been created with loadComplete fires, but if that is the case I'm not sure where to place the logic where the states will be populated.
Any ideas?

jqGrid has no direct support of depended selects, but in the answer you will find the implementation of the scenario. The most problem is that the code is not small, but it's quickly to analyse a working code as to write your own one.

I ended up doing something like the following, its a bit redundant but it works and isn't too code heavy:
First, in the beforeProcessing callback, I populate both the countries and states drop-downs with their initial values:
beforeProcessing: function () {
var allcountries = ajaxCallToFetchCounties();
$('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
var states = ajaxCallToFetchStates();
$('#clientReportsGrid').setColProp('States', { editoptions: { value: states , class: 'edit-select' }, editrules: { required: true, edithidden: true} });
}
Then in the pager's add option, I used the beforeShowForm callback to attach a method to the change event of the countries select input, and within that method I fetch the states based on the current country and repopulate the select control:
beforeShowForm: function (form) {
$("#Countries").unbind("change").bind("change", function () {
var states = ajaxCallToFetchStates();
//Manually clear and re-populate the states select box here with the new list of states.
});
$('#tr_AccountCode', form).show();
}

EXtJS grid CheckColumn, How to execute function, after column is clicked/its state is checked?

I have ExtJS GRID with checkcolumn, which is declared this way:
// the check column is created using a custom plugin
sel_column = new Ext.grid.CheckColumn({
sortable: false,
header: 'STE<br />SEL',
dataIndex: 'sel',
width: field_w,
listeners:
{
"mousedown":
{
fn : function(e)
{
$.log( "Sel cellclick" , e );
}
}
}
});
I want add some listener on changfe of it stae, or on mouse click.
Finaly - want id's of rows, where i click this column - to be stored in text field
For now i can understood how to catch click event, i use onMouseDown, this way:
// the check column is created using a custom plugin
sel_column = new Ext.grid.CheckColumn({
sortable: false,
header: 'STE<br />SEL',
dataIndex: 'sel',
width: field_w,
onMouseDown: function( e )
{
$.log( e,"MouseDown" );
}
});
But it fires, when i click ANY cell, not only checkboxed ...
Pls help me

checkbox plugin need modification, after which it can fire click event.

/*
**************************************************************
Sample to add event 'checkchange' in checkbox on checkcolumn,
works with ExtJS 4 or above
*/
//Add you checkcolumn id:'op_check'. No need separate plugin.
//Put this code in You Grid
listeners:{
afterrender:function(){
g = this; //This grid
Ext.getCmp('op_check').on('checkchange', function(c, i){
//Get id from row/record (if in store exist field 'id')
//"i" - in this function is index row, where clicked checkbox
rec = g.store.getAt(i);
id = rec.get('id');
console.log(id); //:)
});
}
}

Finalizing editing in jqgrid

I using jqgrid with great succes in the following way:
The data is loaded from the server as JSON
The user do inline editing
When a save-button is clicked all the data is serialized using:
var data = $("#mygrid").getRowData();
var datajson = JSON.stringify(data);
The problem with this aproach is that I will get the input elements in my json-data if the user has not pressed return or moved away from the edited cell. Is there any way to end edit mode i jqgrid?

You can use saveRow to save the data.
To use saveRow you have to know the row id of the current editable row. You can for example save the rowid of the current editing in a variable (before you call editRow) and use the value for calling of the saveRow method.
UPDATED: see the demo. First select some row, modify the values and then click on the "Save current editing row" button. You will see that the changes will be saves.

I have solved it by triggering "keydown" ENTER event on element:
editoptions: {
dataInit: function(elem) {
$(elem).datetimepicker({
dateFormat: "yy-mm-dd",
onClose: function(datetimeText, datepickerInstance) {
$(elem).trigger($.Event( "keydown", { keyCode: $.ui.keyCode.ENTER } ))
}
});
}
}

I use remote submit for each cell, and as I used "contenteditable" div for cell editor (for multiline text), i wanted to finish cell editing with ctrl-enter.
( Based on Oleg's answer and How to close cell-editor? and http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing )
$(document).ready(function() {
var grid,currentCell;
$(".jqGrid_wrapper").on("keydown","div[contenteditable]",function (e) {
if (e.ctrlKey && e.keyCode == 13)
{
grid.jqGrid("saveCell",currentCell.iRow,currentCell.iCol);
return false;
}
return true;
});
grid=$("#table_list_2");
grid.jqGrid({
url: ...
cellEdit: true,
cellsubmit: 'remote',
cellurl: '..',
beforeEditCell: function(rowid, cellname, value, iRow, iCol) {
currentCell={
rowid:rowid, cellname:cellname, value:value, iRow:iRow, iCol:iCol
}
}
});
});