We Keep Coding

How do I change floatingFilter option after Init of AGGrid?

I'm using AgGrid with JavaScript module. I'm trying to change the value of floatingFilter after init of Grid by calling api.refreshHeader method but it's not working.
function getServices() {
var columnDefs = [
{ field: 'name', headerName: 'Name' },
{ field: 'Category', headerName: 'Category' },
];
var gridOptions = {
animateRows: true,
columnDefs: columnDefs,
defaultColDef: {
resizable: true,
filter: true,
sortable: true,
flex: 1,
},
floatingFilter: true, // I want to change this after init
};
var gridDiv = document.querySelector('#serviceGrid');
var gridInstance = new agGrid.Grid(gridDiv, gridOptions);
$.ajax({
type: 'GET',
dataType:"JSON",
url: 'FROM_URL',
success:function(data){
gridOptions.api.setRowData(data)
}
});
// For testing purpose I'm using timeout
setTimeout(function() {
gridInstance.gridOptions.floatingFilter = false;
gridInstance.gridOptions.api.refreshHeader();
}, 5000)
}
Correct me if I'm wrong anywhere.

I am not sure which version you are using, but in the latest version, floatingFilters go inside columnDefinitions and not inside gridOptions.
Move floatingFilters inside defaultColDef in your gridOptions.
var gridOptions = {
animateRows: true,
columnDefs: columnDefs,
defaultColDef: {
resizable: true,
filter: true,
sortable: true,
flex: 1,
floatingFilter: true, // I want to change this after init
},
};
and then change your setTimeout function to this.
// For testing purpose I'm using timeout
setTimeout(function() {
gridInstance.gridOptions.defaultColDef.floatingFilter = false;
gridInstance.gridOptions.api.refreshHeader();
}, 5000)
Here is a plnkr I forked from one of their examples that works.
Hope I was able to help.

editurl:'client array' data to be shown in jqgrid but should not save that data to database

var specificatonsData = [];
function initGridForTransactions(gridID, gridPagerID) {
var grid_selector = gridID;
var pager_selector = gridPagerID;
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid('setGridWidth', $("#page-wrapper").width());
})
var parent_column = $(grid_selector).closest('[class*="col-"]');
$(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
setTimeout(function () {
$(grid_selector).jqGrid('setGridWidth', parent_column.width());
}, 0);
}
})
$(grid_selector).jqGrid({
data: specificatonsData,
datatype: "local",
colNames: ['Id','Specification', 'Abbreviation'],
colModel: [
{ name: 'Id', width: 80,key:true },
{ name: 'specification', index: 'Id', key: true, width: 300 },
{ name: 'abbreviation', width: 300 },
],
cmTemplate: { editable: true },
cellsubmit: 'clientArray',
editurl: 'clientArray',
viewrecords: true,
rowNum: 4000,
gridview: true,
rowList: [4000],
pager: pager_selector,
altRows: true,
loadonce: true,
multiselect: false,
multiboxonly: false,
sortname: 'Specification',
sortorder: "asc",
cellEdit: false,
iconSet: "fontAwesome",
onSelectRow: function (rowId, status, e) {
var dealerFeatures = $("#editor").text();
var selectedFeature = rowId;
selectedFeature = selectedFeature.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("(" + selectedFeature + ")", "gi");
dealerFeatures = dealerFeatures.replace(pattern, "<mark>$1</mark>");
//dealerFeatures = dealerFeatures.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1<mark>$2</mark>$4");
dealerFeatures = dealerFeatures.replace(/(<mark>[<>]*)((<[>]+>)+)([<>]*<\/mark>)/, "$1<mark>$2</mark>$4");
dealerFeatures = dealerFeatures.replace(/\n/g, '<br>\n');
$("#editor").html(dealerFeatures);
},
gridComplete: function () {
$(grid_selector).setColProp('Approve', { editoptions: { value: '' } });
},
loadComplete: function () {
var table = this;
setTimeout(function () {
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
}).navGrid(pager_selector, { edit: true, add: true, del: false },
{
url: '/Activity/SaveSpecification',
closeAfterAdd: true,
closeAfterEdit: true,
afterSubmit: function () {
getAbbrData();
return [true, '', ''];
}
});
jQuery(grid_selector).sortableRows();
function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
})
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({ container: 'body' });
$(table).find('.ui-pg-div').tooltip({ container: 'body' });
}
$(document).one('ajaxloadstart.page', function (e) {
$(grid_selector).jqGrid('GridUnload');
$('.ui-jqdialog').remove();
});
}
I will save data to database only when I click on external Submit button.
When I click on edit button the data is showing in a popup and when I click on the save button the data is getting to the database and showing in the jqgrid.
But I have a new requirement where I have to show the data in the jqgrid when click on save button but should not save to the database.
Thanks in advance.

If you use Guriddo jqGrid JS then you can set url in edit options in your navigator to be clientArray - i.e
...navGrid(pager_selector, { edit: true, add: true, del: false },
{
url: 'clientArray',
closeAfterAdd: true,
closeAfterEdit: true,
afterSubmit: function () {
getAbbrData();
return [true, '', ''];
}
});
This will save the data locally.

The code, which you posted contains many small bugs. For example,
you use url: '/Activity/SaveSpecification' as form Edit options (not for Add form) - see navGrid call. You should remove the option to make editurl: 'clientArray' working
you use key:true in more as one column. It's not allowed. One can use it only in one column, which contains unique values.
the usage of index: 'Id' property in colModel for the column name: 'specification' is probably one more bug, which can make wrong sorting and filtering in the column.
your current code contains call of .setColProp('Approve', { ... });, which is wrong, because your colModel don't contains the column 'Approve'
the option sortname: 'Specification' is wrong too, because the value of sortname should be the value of name property from colModel (like sortname: 'specification' for example, if you'll remove index: 'Id' property from the column).
Additionally the usage of rowNum: 4000 can essentially reduce the performance of the grid in case of large grid. If real number of rows is about 4000, then it's much more effective to use local paging of data. The monitor allows to display only about 20-25 rows. Thus it's recommended to use pager with such small rowNum. Users can use paging buttons to go to the next page.

onSelectRow in a JQGrid

I have gone through the solutions given for not working onSelectRow but they could not worked for me.
I have following code :
$("#myActions_gridTable").jqGrid({
datatype:'local',
data: myActionsData,
cellsubmit: 'clientArray',
cellEdit: true,
rowNum: noOfLinesToDisplay,
pager: $("#myActions_pager"),
sortname: 'contract_Name',
viewrecords: true,
sortorder: 'asc',
autoWidth:true,
loadonce: true,
cmTemplate: { title: false },
height:'auto',
scrollrows: true,
colNames:["id","Status"],
colModel:[
{
name:'id',index:'id', jsonmap:'id', width:1,hidden:true,key:true, editable:true
},
{name:'status',index:'status', align:'center', sortable: false,
editable: true,
edittype: "select",
width: 150,
editoptions: {
value: "1:Done;2:Running"
}
}
],
onSelectRow : function(id){
console.log('inside onSelectRow');
if (id && id !== lastsel) {
$('#myActions_gridTable').restoreRow(lastsel);
$('#myActions_gridTable').editRow(id, true);
lastsel = id;
}
}
});
Here OnSelectRow does not get fired, no console.log is printed.
Please help.

You need to define the variable lastsel as
var lastsel;
In the above code you need to do :
var lastsel;
$("#myActions_gridTable").jqGrid({
..............
..............
..............,
onSelectRow : function(id){
console.log('inside onSelectRow');
if (id && id !== lastsel) {
$('#myActions_gridTable').restoreRow(lastsel);
$('#myActions_gridTable').editRow(id, true);
lastsel = id;
}
}
Here is the working JsFiddle Demo
And could get further info here http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events.

One possible problem could be the usage of edittype: "select" without usage of formatter: "select". In any way the property editoptions: { value: "1:Done;2:Running" } seems me very suspected if you don't use formatter: "select".
How looks the input data for the column "status"? Do you use 1 and 2 or "Done" and "Running"? If you want to hold 1 and 2 values in the data, but you want to display the values as "Done" and "Running" then you should use
formatter: "select", edittype: "select", editoptions: {value: "1:Done;2:Running"}
The demo demonstrates it. It uses
var myActionsData = [
{ id: 10, status: 1 },
{ id: 20, status: 2 }
];
as the input.
Alternatively one can use
var myActionsData = [
{ id: 10, status: "Done" },
{ id: 20, status: "Running" }
];
but one should use
edittype: "select", editoptions: {value: "Done:Done;Running:Running"}
in the case. No formatter: "select" are required in the last case: see another demo.

OnSelectrow is not working when cellEdit is true.
You can use onCellSelect instead of OnSelectrow.

jQuery jqGrid Inline Editing - Cancel row edit deletes the row?

I actual got a problem with my jqGrid and I couldn't find any similar problem on the net. Maybe I don't took the write tags for it, sorry tho.
Okay lets start talking about the real problem. I'm using inline editing, and I customized the buttons a bit. I wanna use "ENTER" and "ESC"-Keys as shortcuts. This works fine. I'm manipulating the data in my grid local and only if the user is pressing a specialised button I'll save the data in a file. This files are used to fill the grid too. So if the user now is editing any row in the grid which isn't in my file yet, and he is canceling the editing by pressing ESC, the complete row of data is getting deleted.
Anyone who can help me out? My grid:
// Table
jQuery("#tbl").tableDnD({scrollAmount:0});
jQuery("#tbl").jqGrid({
url:'../path/to/my/script.pl',
datatype: "json",
postData:{'art':'empfang'},
jsonReader: {
repeatitems: false
},
colNames:['1','2','3','4','5'],
colModel:
[
{name:'1',index:'1', width:200, align:"left", sortable:true,editable:true, edittype:"text"},
{name:'2',index:'2', width:200, align:"left", sortable:true,editable:true, edittype:"select",editoptions:{value:b}},
{name:'3',index:'3', width:200, align:"left", sortable:true,editable:true, edittype:"text"},
{name:'4',index:'4', width:220, align:"left", sortable:true,editable:true, edittype:"select",editoptions:{value:""}},
{name:'5',index:'5', width:200, align:"left",sortable:true,editable:true, edittype:"select",editoptions:{value:""}}
],
rowNum:2000,
rowTotal: 2000,
loadtext: 'Reading data...',
height: '100%',
width: '100%',
hidegrid: false,
sortable: true,
toppager: true,
gridview: true,
viewrecords: true,
rownumbers: true,
loadonce: true,
editurl: 'dummy.php',
pager: '#tbl_toppager',
loadComplete: function(data){
$("#tbl").setColProp('4', { editoptions: { value: data.userdata.4} });
$("#tbl").setColProp('5', { editoptions: { value: data.userdata.directory_listing} });
},
gridComplete: function() {
$("#_empty","#tbl").addClass("nodrag nodrop");
jQuery("#tbl").tableDnDUpdate();
},
caption: "Testgrid",
ondblClickRow: function(id){
jQuery('#tbl').editRow(id, true);
}
});
jQuery("#tbl").jqGrid('filterToolbar');
jQuery("#tbl").jqGrid(
'navGrid',
'#tbl_toppager',
{
del: true,
add: false,
edit: false,
refresh: false,
search: true
},
{
}, // edit options
{
}, // add options
{
reloadAfterSubmit: false,
jqModal: true,
closeOnEscape: true
}, // del options
{
jqModal: true,
closeOnEscape: true
} // search options
);
jQuery("#tbl").jqGrid(
'inlineNav',
'#tbl_toppager',
{
editParams: { keys: true },
addParams: { addRowParams: { keys: true } }
}
); // Inline Editing
jQuery("#tbl_toppager_right").hide();
jQuery("#tbl_toppager_center").hide();
jQuery("#tbl").navSeparatorAdd(
"#tbl_toppager_left",
{
sepclass : "ui-separator",
sepcontent:""
}
).jqGrid(
'navButtonAdd',
'#tbl_toppager_left',
{
caption: "",
buttonicon: "ui-icon-document",
title: "Save data in file",
position: "last",
onClickButton: function () {
$("#write_file").dialog('open');
}
}
);
Thanks in advice. Regards.

In the official demo of JQGrid they provide an example which do nearly the same of what you request
...
onSelectRow: function(id){
if(id && id!==lastsel){
jQuery('#rowed3').jqGrid('restoreRow',lastsel);
jQuery('#rowed3').jqGrid('editRow',id,true);
lastsel=id;
}
}
...
where lastsel is a global variable
So you can use jQuery('#rowed3').jqGrid('restoreRow',idOfLineToRestore);
in your escape event

jqGrid - aftersavefunc being called before saveRow

I have a jqGrid that allows inline editing/adding of data. When a user double clicks on the row, inline edit starts. When the user presses enter or clicks on another row, I want the changes to be saved. For some reason, however, the row is being restored before the saveRow function is being called and my edits are not saved (the AJAX call never happens).
My code is shown below. When I press the enter key, my changes are saved and sent to the server. When I click on another row, my changes are not sent to the server (no AJAX call) and I see in the console that afterrestorefunc is called before the saveEdit.
var editParams = {
afterSubmit: processResponse,
successfunc: function(response) {
var processed = processResponse(response);
if(processed[0] !== true) {
$.jgrid.info_dialog($.jgrid.errors.errcap, processed[1], $.jgrid.edit.bClose);
}
return processed[0];
},
afterrestorefunc: function(id) {
console.log('afterrestorefunc - ' + id);
},
bottominfo: 'Fields marked with an (*) are required',
keys: true
},
zipEditParams = $.extend(true, {}, editParams, {url: 'editdata.php'});
/* Set global default options */
$.extend($.jgrid.defaults, {
grouping: true,
shrinkToFit: false,
rowList: [10, 20, 30, 40, 50, 100],
rowNum: 20,
repeatitems: false,
ondblClickRow: inlineEdit,
onSelectRow: saveEdit
});
$('#zipcodes')
.jqGrid({
datatype: 'json',
colNames: ['Zip', 'City', 'State', 'Country'],
colModel: [
{name: 'zip_zip', jsonmap: 'zip_zip', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}},
{name: 'zip_city', jsonmap: 'zip_city', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}},
{name: 'zip_state', jsonmap: 'zip_state', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}},
{name: 'zip_country', jsonmap: 'zip_country', width: 75, editable: true, editrules: {required: true}, formoptions: {elmprefix: '(*) '}}
],
height: 200,
ignoreCase: true,
jsonReader: { repeatitems: false, id: 'zip_zip' },
pager: '#zipcodes_pager',
url: 'data.php',
editurl: 'editdata.php'
})
.jqGrid('navGrid', '#zipcodes_pager', {add: false, edit: false, del: false, refresh: false, search: false})
.jqGrid('inlineNav', '#zipcodes_pager', {edit: true, save: true, cancel: false, editParams: zipEditParams});
var lastSel;
/* Start editing the row */
function inlineEdit(id, iRow, iCol) {
var editParams = this.id == 'zipcodes' ? zipEditParams : (this.id == 'labels' ? labelEditParams : (this.id == 'users' ? userEditParams : {}));
$(this).jqGrid('editRow', id, editParams);
focusRow(id, iCol, this);
}
function focusRow(id, iCol, table) {
var ele = document.getElementById(id + '_' + table.p.colModel[iCol].name),
length = ele.value.length;
ele.focus();
if(ele.setSelectionRange) { //IE
ele.setSelectionRange(length, length);
}
else if(ele.createTextRange) {
var range = ele.createTextRange();
range.collapse(true);
range.moveEnd('character', length);
range.moveStart('character', start);
range.select();
}
}
function saveEdit(id) {
if(id && id != lastSel) {
console.log('saveRow: ' + this.id + ' - ' + lastSel);
/* Save the last selected row before changing it */
var saveParams = zipEditParams;
$(this).jqGrid('saveRow', lastSel, saveParams);
lastSel = id;
}
}
function processResponse(response) {
console.log('processResponse');
var obj = $.parseJSON(response.responseText),
retVal = true,
message = '',
new_id = '';
if(obj.message) {
if(obj.message == 'not logged in') {
location.href = 'logout.php';
}
else if(obj.message != 'true') {
message = obj.message;
retVal = false;
}
}
return [retVal, message, new_id];
}
Any help with this problem is greatly appreciated.
UPDATE It seems that if I comment out .jqGrid('inlineNav', '#zipcodes_pager', {edit: true, save: true, cancel: false, editParams: zipEditParams});, then everything works as expected. I also tried just using .jqGrid('inlineNav', '#zipcodes_pager');, but saw the same results. This is nice and could work in the short term, but I still would like the functionality of inline adding if possible.

i think you need to add more functionality to your onSelectRow function
onSelectRow: function (id) {
if (id && id !== lastsel) {
// cancel editing of the previous selected row if it was in editing state.
// jqGrid hold intern savedRow array inside of jqGrid object,
// so it is safe to call restoreRow method with any id parameter
// if jqGrid not in editing state
if (typeof lastsel !== "undefined") {
jQuery("#grid").jqGrid('restoreRow', lastsel);
}
lastSel = id;
}
},
in this code i'm not doing editing on selecting the row, but you can see that you need to restore the previous selected row, if that row was in edit mode and you click on some other row.
Try this.