i have a grid and a form, i need to show different items on the form each time we select a row on that grid
i ve been looking on how to do this, and found
Ext.getCmp('myform').hide() // or .show()
and
listeners: { selectionchange: function () {...}
now i dont know which row is selected so i can specify which item to show
thanks
You get the selected rows as second parameter in the selectionchange event handler:
listeners: {
selectionchange: function (view, selections, options) {
console.log(view, selections, options);
}
}
So the first selected row is the first element in the selections array:
record = selections[0]
This is described in the Ext JS 4 API documentation for the selectionchange event.
Try to following code in your grid.
listeners:{
itemclick:function(view, record, item, index, e ) {
var v = record.get('firstName');
....
....
}
}
firstName will be your dataindex of colums in your grid.
You can get value of any field like this.
Related
I have a grid I created in Gridx which lists a bunch of users. Upon clicking a ROW in the grid (any part of that row), a dialog pops up and shows additional information about that user and actions that can be done for that user (disable user, ignore user, etc.) - when one of these options is selected from the pop up, I want to DISABLE that row. The logic for getting the row, etc. I can take care of, but I can't figure out how to make a grid row actually "appear" disabled and how to make that row no longer clickable.
Is there a simple way to do this? If you aren't familiar with gridx, solutions that apply to EnhancedGrids or other Dojo grids are also appreciated.
Alright now that I have a little more information here is a solution:
Keep a list of all the rows you have disabled so far either inside the Grid widget or in its parent code. Then on the onRowClick listener I would write code like this:
on(grid, "onRowClick", function(e) {
if(disabledRows[rowIndex]) {
return;
}
// Do whatever pop up stuff you want and after
// a user selects the value, you can "disable"
// your row afterwards by adding it to the disabled
// list so that it can no longer be clicked on.
var rowIndex = e.rowIndex;
disabledRows[rowIndex] = true;
// This is just some random class I made up but
// you can use css to stylize the row however you want
var rowNode = e.rowNode;
domClass.add(rowNode, "disabled");
});
Note that domClass is what I named "dojo/dom-class". Hope this helps!
This is perhaps not exactly what you are seaching for:
If you want to hide one or more rows by your own filterfunction you could just add to these rows in the DOM your own class for nodisplay. Here I show you a function for display only those rows which have in a choiceable field/column a value inside your filterlist.
function hideRowFilter(gridId, fieldName, filterList)
{
var store = gridId.store;
var rowId;
store.query(function(object){
rowId = gridId.row(object.id,true).node();
if (filterList.indexOf(object[fieldName]) == -1)
domClass.add(rowId, "noDisplay"); // anzeigen
else
domClass.remove(rowId, "noDisplay"); // verstecken
});
}
CSS:
.noDisplay { display: none; }
So I can for example display only the entries with a myState of 3 or 4 with this call:
hideRowFilter(gridId, 'myState', [3, 4]);
Note that domClass is what I named "dojo/dom-class"
I am working in extjs4. I have grid panel view as=
i want to show image in floating window whenever user clicks on grid row.So i have written function namely showImage() and calling it as=
me.mon(me, {'itemclick' : me.showImageViewer
}, me);
But i dont want to call this function when user clicks on FileName column of grid. So how to restrict calling showImage function when user clicks on grid column 'FileName'
You can listen to the column click function. Define common listener for columns you need. In arguments you should recieve grid, cell element, row index, column index, event data and record(in such order). So if you'll move, rename headers or do whatever you want with column with such listener it wouldn't change click listener.
i want to show image in floating window whenever user clicks on grid row.
Do you mean you'll show a popup containing the bigger image if image on row is clicked? if yes, on your showImageViewer function, you have to check the attributes of the cell if it's an image or you can check its dataIndex.
You can also listen to cellClick instead of itemClick. With that, you can check the cellIndex of the cell being clicked. In your case, if cellIndex is equal to 2 (index of your FileName column, don't call showImageViewer.
cellClick : function(view, cell, cellIndex, record, row, rowIndex, e) {
}
You can use a css selector to differentiate between elements inside the row, using a code like the following
listeners: {
itemclick: {
fn: function (view, record, item, index, e, eOpts) {
var photo = e.getTarget('.photo');
if(photo) {
alert(record.get('photo'));
}
}
}
You can try a working sample here. Hope it helps to solve your problem
I have a Grid Panel. In the Controller of this Grid I have my init function:
init: function() {
var selected_vorgang={};
this.control({
'provisionscheckgrid':{
itemcontextmenu: this.itemListCtxMenu,
select: function(s,record,row) {
console.log(record.data.id);
selected_vorgang[record.data.id]=record.data.free;
console.log(selected_vorgang);
}
}
});
}
Now I want to check, which row or which rows are currently selected. Then I want to put the id of the selected row in an object or remove it, if its no more selected. Does anyone know, how to get all the selected rows to make my function?
THANKS!!
I have it. Had to make it over getSelectionModel().
var list = Ext.getCmp("myGrid").getView().getSelectionModel();
var store = Ext.getCmp('myGrid').getStore();
for(key in list.selected.items)
{
var rowIndex = store.indexOf(list.selected.items[key]);
//Here are the selected numbers
}
Is there a way to disable selection on the first column of a grid only. I have 2nd and 3rd column as 'checkcolumn', which fires selection for that row. That's why I cannot entirely use
disableSelection: true
on the grid, because this would disable the selection fire event on checkboxes. The first column is just a text, and I don't want selection of that row when the first column's row is clicked.
Any help?
The beforeitemmousedown event will probably work for you, add it as a listener where you declare your grid and return false when the event's target is the first cell in the row:
listeners: {
beforeitemmousedown: function(view, record, item, index, e, eOpts)
{
if(item.cells[0] == e.target.parentElement)
return false;
}
}
I am using the jqGrid for ASP.NET MVC, and have a grid with a subgrid. In that subgrid, I have added a button to the toolbar like so:
ToolBarSettings = new ToolBarSettings()
{
ShowRefreshButton = true,
CustomButtons = new List<JQGridToolBarButton>()
{
new JQGridToolBarButton()
{
Text = "Custom",
Position = ToolBarButtonPosition.Last,
OnClick="CustomClick" }
}
},
etc...
}
The CustomClick is a javascript callback, and it fires without any problems, but I am having trouble getting the parent grid row id in the CustomClick callback.
How can I get the parent row id in the CustomClick function?
Thanks, Dennis
The child Grid id itself contains the parentKey. when ever a child grid is created the id of the child grid is ParentGridName_ParentKey_ChildGridName. So you can get the Parent key
Below is the code for custom button :
<CustomButtons>
<Trirand:JQGridToolBarButton ToolTip="Custom button" OnClick="GetParentKey" />
</CustomButtons>
Then inside GetParentKey function you can get the parentKeyID as follows :
function GetParentKey()
{
var GridId = this.id.toString().split('_');
var parentKey = GridId[1];
}
Inside of CustomClick function you has as this the DOM element of the table from which navigator the custom button are clicked. There are no "parent row", but you can get the id of the currently selected row (if any exist) per
var rowid = $(this).jqGrid('getGridParam', 'selrow');
see example from the following answer oder search for another examples to the navButtonAdd method.