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
Related
I am using free jqgrid 4.14 and I need to have a custom image (some kind of mail icon) in my grid and when the image is clicked it should open a modal window having a form and which has the data of clicked row in the message field of form and also has other couple of field like sender mail id, receiver mail id and also a subject.
So, I was able to have a custom image in my grid. Now, we have onSelectRow property by which we can get the id of the clicked row and we have getRowData which will give the data of the columns.
So, I made changed onSelectRow a bit like this
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery(this).restoreRow(lastSel);
lastSel=id;
var rowId = $(this).getRowData(lastSel);
}
jQuery(this).editRow(id, true);
}
Now, this will give the data of each row when it is clicked. But how will I get same functionality when my custom image is clicked?
EDIT: I need something like this-
http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm
But here I am not able to find the image like here it finding
There are many ways to implement the requirement. One from the easiest one I described in the answer. You can add the column with formatter: "actions"
{
name: "act", template: "actions", width: 25,
formatoptions: { editbutton: false, delbutton: false }
}
and the jqGrid option, which specify additional custom buttons
actionsNavOptions: {
mailicon: "fa-envelope-o",
custom: [
{
action: "mail",
position: "first",
onClick: function (options) {
alert("Mail for rowid=" + options.rowid);
}
}
]
}
See https://jsfiddle.net/OlegKi/3tuxg71z/
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.
I am trying to make an editable grid. I would like to provide users to be able to like more rows if needed. I tried going to their documentation yet it wasn't obvious.
Also, what does grid.newRow() do?
If you're trying to add a new row, you can always just add a new entry to the underlying grid store first.
Say you have a grid (named "grid" of users), you can have your button do this:
var button = new Button({
label: "Add User",
onClick: function() {
var user = {id: 1, name: "test"};
grid.store.add(user);
}
});
Also I don't believe the regular grids have a newRow option, only the onDemandGrid or onDemandList has a newRow option. But the above code should work for what you asked for.
I have a problem with YUI (2) Datatable and Drag and Drop combo. I have a table of items, one of them is item description which I made editable (and saveable) with YUI's TextboxCellEditor. I also made the rows draggable (so I can drop them to another container).
But I'm stuck with two items:
- I can only get DnD by clicking on the second column (the first one does not work)
- I can only get it to work on the second attempt since initialization.
Here is a snipet from my JS (simplified):
nameFormatter = function (elCell, oRecord, oColumn, oData) {
var link = '/share/page/site/' + Alfresco.constants.SITE + '/document-details?nodeRef=' + oRecord.getData('nodeRef');
elCell.innerHTML = '<span>' + oData + '</span>';
};
descFormatter = function(elCell, oRecord, oColumn, oData) {
elCell.innerHTML = '<pre class="desc">' + oData + '</pre>';
};
columnDefs = [
{key: "name", label: "Name", sortable: true, formatter: nameFormatter, resizable: true}
, {key: "description", label: "Description", sortable: true, formatter: descFormatter, editor: new YAHOO.widget.TextboxCellEditor(), resizable: true}
];
this.mediaTable = new YAHOO.widget.DataTable(this.id + "-media-table", columnDefs, this.dataSource, {
MSG_EMPTY: "No files"
});
// now we want to make cells editable (description)
var highlightEditableCell = function(oArgs) {
var elCell = oArgs.target;
if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
this.highlightCell(elCell);
}
};
this.mediaTable.subscribe("cellMouseoverEvent", highlightEditableCell);
this.mediaTable.subscribe("cellMouseoutEvent", this.mediaTable.onEventUnhighlightCell);
this.mediaTable.subscribe("cellClickEvent", this.mediaTable.onEventShowCellEditor);
this.mediaTable.subscribe("editorSaveEvent", this.saveDesc);
this.mediaTable.subscribe('cellMousedownEvent', this.onRowSelect);
The saveDesc function is simple Ajax call to save that items' description.
Here is the onRowSelect function:
onRowSelect = function(ev) {
console.log(" == method onRowSelect");
var tar = Event.getTarget(ev)
, dd
;
dd = new YAHOO.util.DDProxy(this.getTrEl(tar));
dd.on('dragDropEvent', function(e) {
YAHOO.Bubbling.fire('myCustomEvent', { target: e.info, src: tar});
dd.unreg();
});
};
If I just click on desc, I get the text editor, if I click on name, I get the link open.
Like I said, when I mouseDown on the second column (description), in first attempt I get nothing. Then I click and hold the second time, and this time it works (I get a DDProxy and I can Drag and drop it to the target, everything works there).
And the other issue is that when I click and hold on the name column, I don't get the DDProxy (I get my onRowSelect event and the correct row).
What am I doing wrong here?
UPDATE: Resolved the first issue by using Satyams answer - removing the formatter for my cell with link.
The second issue (only on the second click) was resolved because I added the missing dd.handleMouseDown(ev.event) in my onRowSelect function.
Dav Glass, who wrote DD, has this example in his page: http://new.davglass.com/files/yui/datatable4/ I used it in my example: http://www.satyam.com.ar/yui/2.6.0/invoice.html and it works just fine, though it is somewhat more involved than you have there. I'm sorry I cannot help you more precisely with your issue, D&D is not my string point but I hope the examples might help.
One reason for your problem might be that link in the cell. This is not a good idea, whether you have DD or not. In general, the recommended way to deal with this is to listen to the cellClickEvent and if the column of the cell that got clicked is the one that 'navigates', you build the URL based on the information in the record clicked and then navigate or do whatever you want with it. This allows the DataTable to render much faster, as it needs no formatter and, in the odd event that someone does click the cell, then and only then you bother to make the calculations. The size and number of DOM elements on the page also goes down.
Likewise, with the other cell with the pre-formatted tag, you can easily avoid it. The cells in each column in a DataTable gets a CSS class name made from the "yui-dt-col-" prefix and the 'key' value of the column (for example: yui-dt-col-description). Thus, you can simply add a style declaration for that CSS class name and spare yourself the formatter. Likewise, for highlighting the editable cells, how about defining some style for the .yui-dt-editable:hover selector? I've never done it myself but I imagine it should work.
Trying to get the selected row index (and set another field value of the record afterwards) on a grid with CellEditing plugin, but getSelection() method returns an empty array. I have a listener for select event on the combobox, when that is changed I need to get the index of the edited row.
...
lazyRender: true,
listClass: 'x-combo-list-small',
listeners: {
scope: this,
select: function(field, value, options) {
var selection = Ext.getCmp('lineItemsGrid').getSelectionModel().getSelection();
console.log(selection);
}
}
...
I'm using ExtJS 4.0.2a release. I'm a newbie when it comes to ExtJS, so I might be missing something.
Here is JSFiddle file in cas you want to have a look.
http://jsfiddle.net/Z6b7a/8/
Any help is greatly appreciated.
Thanks
Oz
You don't need to use the getSelection() method, you can update the record directly from the edit event.
http://jsfiddle.net/Z6b7a/7/
I've updated the fiddle, and also here is the code to update the record after edit:
edit: function(editor, e, options) {
e.record.set('light', 'Shade');
//var selections = Ext.getCmp('lineItemsGrid').getSelectionModel().getSelection();
//console.log(selections);
}