We Keep Coding

Ext JS Grid Filters in Header checkbox not working

I am trying to implement filtering in my grid.Panel component. The filtering works fine (date, string and numbers) but I can not uncheck the "Filters" checkbox by clicking on it. As far as I have seen in the Ext js documentation there is nothing that I should add extra to be able to uncheck the Filters checkbox (see image below)
When I click on the Filters checkbox, nothing happens, no error also. The only way to disable this particular "Wholesaler" filter is if I go to the text box and remove the entry. This of course would be just fine, but at the date filters, I also can not click the checkbox and thus can not remove the filter once applied (see image below) The only way to remove it is to refresh the page.
I am using Ext JS version 5.1.2, and here is the sample code:
{
dataIndex: 'Wholesaler',
text: 'Wholesaler',
filter: {
type: 'string'
},
}
And the Panel componenet itself:
Ext.apply(this, {
region: 'center',
api: new Dextop.api('sample'),
border: false,
plugins: 'gridfilters',
columns: sample.getController().getGridColumns(),
storeOptions: {
autoLoad: false
}
});
Any help is appreciated!

How to use jqGrid Custom Formatter and 'showlink' at the same time? Links in column do not appear link-like

I am trying to link the variables in the first column of my jqgrid to another page. Right now, the variables do not appear link-like OR exclusive (meaning no matter where I click on the row, I am taken to the destination page).
I need to use the custom formatter because the URL in my search bar should not change (I am running this on my local server). But with the custom formatter, I cannot seem to also use 'showlink' (which ultimately seems to make my data appear link-like when I'm not using the custom formatter). I want the finger cursor when hovering over the data in my first column, all I'm getting right now is the "I".
Is there someway I can use both
formatter:'showlink' from the predefined formatter AND formatter: returnHyperLink(name) from the custom formatter? I want to be able to ONLY click the first column's data to be taken to the page, and I want this data to appear link-like ( should not be able to click anywhere on the row).
My relevant jqgrid code is:
colNames:['Name','Status', 'Created On', 'Update By', 'Updated On', 'RetentionDays','ValidityTime','Edit'],
colModel:[
{
name: 'name', width:100,editable: true, edittype:'select',
formatter: returnHyperLink(name),
xmlmap: function (obj) {
return $(obj).attr('name');
}
},
And my function, returnHyperLink appears as:
function returnHyperLink(name){
$(this).click(function() {
$( "#contents" ).load("jsp/consumers.jsp");
console.log(this, "Hello world");
});
};
...okay obviously something is wrong if all of this code isn't even showing up in the code box. I was thinking I could call the javascript function from inside of an href, but I also do not know how to do this.

It seems to me that you misunderstand how the custom formatter works. jqGrid creates the whole body of the grid (<tbody>) as the string. Thus the custom formatter should return the string and no $(this).click inside of the formatter do not what you expect. The <td> element not yet exist during the custom formatter is working.
You don't wrote, which version of jqGrid and from which fork of jqGrid you use. If you would use free jqGrid, then you can use onClick callback option of formatter: "showlink":
formatter: "showlink", formatoptions: {
onClick: function (options) {
// this is DOM of the grid
// options.iCol is the column index
// options.iRow is the row index
// options.rowid is the rowid
// options.cm is the element from colModel
// options.cmName is the column name
// options.cellValue is the text from the <a>
// options.a - DOM element of the clicked <a>
// options.event - Event object of the click event
alert("it's clicked!");
}
}
If you have to use an old version of jqGrid and can't migrate to free jqGrid then you can download jQuery.jqGrid.dynamicLink.js from here and to use formatter: "dynamicLink", which I described in the old answer. See the answer too.
If you would do prefer to use your custom formatter, then you can use beforeSelectRow callback to implement onClick action. See the answer and this one for more details.

How to get rowIndex in extjs widget column

I need a button in a widget column to know its rowIndex in an ExtJS 6 panel.grid, so that on button click it can use that functionality. I know I can pull that information from the renderer function, but that seems to execute before the button has been created. Any ideas on how I can get the index?

Use indexOf on the gridview. You need to pass it the node as argument, which is the HTML element representing the row. In Ext JS 6, grid rows are HTML tables, so the button's row element can be found from the button element b as b.el.up('table'). The gridview can also be found as b.up('gridview'). So you get:
var rowIndex = b.up('gridview').indexOf(b.el.up('table'));
See in action: https://fiddle.sencha.com/#fiddle/snq

Building on Drake's answer, I'm using the event.record property instead. Unfortunately, it looks like you have to make the click event have a slight buffer, so it gets the proper record added to it. This works, but I'm not entirely sure if it's a proper way. Example:
{
width: 150,
xtype: 'widgetcolumn',
widget: {
text: 'Button',
xtype: 'button',
text: 'Get row index',
listeners: {
buffer: 1,
click: function(button, event, eOpts) {
var record = event.record;
alert(store.find('postid', record.get('postid'), 0, false, true, true))
}
}
}
}

Use the onWidgetAttach
A function that will be called when a widget is attached to a record. This may be useful for doing any post-processing.
http://docs.sencha.com/extjs/5.1.2/api/Ext.grid.column.Widget.html#cfg-onWidgetAttach
The function has both widget and record parameter.
You can do widget.record = record, and then the button will have the record member which you can access in the click listener

jqGrid with navbar/pager having a custom function bound to the edit button

I'm using the jQuery plugin that generates interactive tables called jqGrid.
I want to use this "editfunc" (2/3rds or 3/4ths down the page) but I can't find a clear example of how to implement it anywhere. I've attempted several differnt things and all of them leave me with total failure.
To be clear, the table generated looks something like this:
That lower bar is called the "navpbar" or "pager", you implement it as a separate DIV, the API and documentation is fairly unclear (to myself anyway) on how exactly I put a custom function onto those buttons such as "add", "edit", "delete", etc... I can get default functionality working, but I can't find anything through websearches, this site, or the API docs on what the actual implementation looks like.

jqGrid has opened source. It helps to clear all questions directly in the code. Look at the lines for example. You will see what navGrid do on click on the 'Edit' button of the navigator:
var sr = $t.p.selrow;
if (sr) {
if($.isFunction( o.editfunc ) ) {
o.editfunc(sr);
} else {
$($t).jqGrid("editGridRow",sr,pEdit);
}
} else {
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$t.p.id,jqm:true});
$("#jqg_alrt").focus();
}
So if you define editfunc callback function the function will be called with id of selected row as the parameter instead of creating editing dialog by editGridRow.
The method editGridRow have many customization functionality. The prmEdit parameter of the navGrid allow to specify any option used by editGridRow.
If you don't want do display editing form and display any other GUI instead you can use editfunc callback function. For example:
$("#list").jqGrid('navGrid', '#pager', {
editfunc: function (rowid) {
alert('The "Edit" button was clicked with rowid=' + rowid);
}
});
See the demo. Select a row and click on the "Edit" button and you will see the alert instead of the standard editing form.

How to add a grid of image buttons in ExtJS

I am new to ExtJS and I want to add something like a favorite button to each row of a data grid. I have gone through almost all sources after a lot of googling but I have not found anything. If anyone has a clear cut idea about how this can be done, please let me know.

First of all adding ExtJS Component inside grids is not supported by default, and the tutorials I've seen out there are kinda hacky. So this is what I would do.
I assume your grid is bound to a store, and each record in the store is a row in your grid.
I assume you have a field in each record that represents the "fav" status of that record, maybe a boolean value.
if the above assumptions are true, I've done something like this before:
add a column in your grid with id "fav-col" that has the dataIndex pointing to the fav field of your store.
{
id : 'fav-column',
dataIndex : 'fav',
sortable : true,
hideable : false,
menuDisabled : true,
fixed : true,
width : 20,
renderer : renderFav
}
add a renderer to that column that render different HTML depending if the row is fav'ed.
function renderFav(favAdded, metaData, record){
if (favAdded === true){
return 'fav added'; //something to represent already added to favourite ;
}else{
return 'fav not added'; //something to represent non-fav'ed row;
}
}
add a listener to 'cellclick' event on the grid, check if the cell being clicked on is a fav cell and toggle the fav value of the record, the grid will re-render automatically once the data in the store is changed
cellclick : function(grid, cellEl, cellIdx, record, rowEl, rowIdx, evtObj){
if (this.columns[cellIdx].getId() === 'fav-col'){
record.set('fav', !record.get('fav')); //toggle the fav state
grid.getStore().sync(); //if the store is a REST store, update backend
record.commit(); //commit the record so the red triangle doesn't show
this.doLayout(); //might not need this.
}
}