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.

headerclick event not working on gridpanel using extjs

I'm trying to invoke headerclick event using ext js listener but unable to invoke.
here is my code:
var myGrid = Ext.Create('Ext.grid.Panel', {
renderTo: 'shrGrid',
renderTo: myGrid,
store: myStore, //JSON object
columns: myGrid.columns, //JSON object
viewConfig: {
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
alert("cell clicked");
},
headerclick function (shrGrid, columns , e, t, eOpts) {
alert("header clicked");
}
}
}
});
Here the cellclick is being invoked without any issue.
but headerclick is neither being invoked neither nor giving any error.
I just used headerclick here only. pls help me I missed anything or give me some example link.

Your myGrid.columns probably looks something like this:
columns : [{
header : 'Name',
dataIndex : 'name',
sortable : false,
field : {
allowBlank : false
}
}, {
id: 'headerid', //Set your id here
header : 'Description',
dataIndex : 'description',
sortable : false,
field : {}
}, {
header : 'Order',
width : 40,
dataIndex : 'sortOrder',
hidden : true
}, {
header : '',
dataIndex : 'id',
width : 30,
fixed : true,
sortable : false,
hideable : false,
align : 'center',
renderer : function (v, p, r) {
return "<img alt='Delete this record' src='images/icons/delete.gif'>";
}
}],
If you do that you can access the id and add a listener like this
var myGrid = Ext.Create('Ext.grid.Panel', {
renderTo: 'shrGrid',
renderTo: myGrid,
store: myStore, //JSON object
columns: myGrid.columns, //JSON object
viewConfig: {
listeners: {
render: function(component) {
Ext.get('headerid').on('click',function() { //reference the id you defined for the column header
alert('header clicked');
});
}
}
}
});

ExtJS grid panel with many columns

Need help with grid Panel which has lots of columns.
Panel looks like:
I would like to make grid panel holder height always "100%" of grid. That it would never had "y/height" scrollbar.
My view:
function createGridPanel(grid_panel_json) {
function createDataStore(data_store_json) {
return Ext.create('Ext.data.Store', {
fields:data_store_json.fields,
data:data_store_json.data
});
}
function getColumnsCount(columns) {
return columns.length;
}
function calculateTableWidth(columns) {
var tableWidth = 0;
for (var index in columns)
{
var columnWidth = columns[index].width;
if (columnWidth === -1)
{
tableWidth += 350;
}
else
{
tableWidth += columnWidth;
}
}
return tableWidth;
}
var grid = Ext.create('Ext.grid.Panel',
{
autoRender: true,
autoShow: true,
syncRowHeight: true,
overflowY: 'auto',
overflowX: 'auto',
autoHeight: true,
store: createDataStore(grid_panel_json.data_store),
hideHeaders: grid_panel_json.hideHeaders,
columns: grid_panel_json.columns,
allowDeselect: true,
layout:
{
type:'fit',
align:'stretch',
pack:'start'
}
});
var gridPanelHolder = new Ext.Panel(
{
title: grid_panel_json.title,
titleCollapse: true,
collapseDirection: 'top',
collapsible: grid_panel_json.collapsible,
style:
{
marginBottom: '5px'
},
items:[
grid
],
autoHeight: true,
autoWidth:true,
overflowY: 'auto'
});
if (getColumnsCount(grid_panel_json.columns) > 4)
{
grid.setWidth(calculateTableWidth(grid_panel_json.columns));
gridPanelHolder.setAutoScroll(true);
gridPanelHolder.doComponentLayout();
}
return gridPanelHolder;
}
any ideas how can i achieve it?
Tried lots of things with layout with overflow with autoHeight and none of them worked.
So any help would be very appreciated!
ExtJS 4.2.1

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.