I have a extjs gridpanel setup, and I want to be able to do things based on a user clicking on text or icons in the grid. For example, filter the grid if the user clicks (or double clicks) a word in a column, or show a popup if the user clicks on an icon. I can easily get the row they clicked on, and values by column name from that row, but I don't know which column was clicked.
Alternatively, I could add an onClick to the entire grid, which I could then get the individual text from the row/column, but I don't know what row index or column that value belongs to. I could add a CSS class that would tell me a column name, but that seems like a hack.
Is there anything built-in that can do this?
The "cellclick" event on the grid is the way to go. A function listening on this event gets passed:
( Grid this, Number rowIndex, Number columnIndex, Ext.EventObject e )
If you want to get the text of the gridCell, calling yourGrid.getView().getCell(rowIndex, colIndex) will return the DOM element.
If you want to get the column header, call: yourGrid.getColumnModel().getColumnHeader(colIndex)
If you want to find anything else out about a particular column, call yourGrid.getColumnModel().getColumnAt(colIndex)
I think if you are interested in column wise events rowselection is the wrong event to look into. As Joshua suggested the cellclick event will the event you have to look into.
This event can give the dataIndex of the column as given
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
Please look at edit-grid.html example for checkbox rendering and event handling.
Related
SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.
I need to update a cell in a infragistics web data grid which has a drop down provider as soon as exiting that cell.
The problem is the value is not getting binded to the drop down provider unless the user clicks on the next row.
I've tried the Exiting edit mode event for this,but it's of no use.
Can anyone help me on this please?
The main point of having drop down editor provider is to bind it to cell key value and based on the key value to show a corresponding text value. If on cell exit you set a value (e.g. "Some custom value text") which is not present in the listed drop down item values, then 0 (zero) will be shown and nothing is going to be set.
You can handle CellEditing ExitedEditMode event, and from there to change the cell text or value with the helper methods (set_text and set_value).
<script type="text/javascript" id="igClientScript1">
function exitingEditMode(sender, e) {
e.getCell().set_text("My Value");
}
</script>
It is important to remember that the cell value should be related to the dropdown's list of values in order to display the correct text representation of the item, unless you are using UnboundDataField, then there wont be any problems to set cell value/text on ExitEditMode client event.
I have an html table in which all the cells within a column have the same css class 'className'.
I want to apply hammer.js on 'hold' event to these cells. I call hammer.js like so:
Hammer('td.className').on('hold', doModal);
I need to find out exactly what cell was 'hold'. In my modal window I have a select element that will set the new value of the cell.
I can not set an ID for each cell on that column, because the table is dynamically generated. My doModal callback gets called several times, because I select all cells with class 'className'. I can get the doModal to be called only once, but I can not determine which cell (row + column) triggered the 'hold' event.
How can I achieve that ?
You can find out the held table cell using the target property in the event object.
for example,
var tab = document.getElementById("tab"); // reference to your table
Hammer(tab).on('hold',function(ev){
console.log(ev)
ev.target.style.background='red'; //will give red background for the held cell
});
i tried to put together a fiddle but can't find a working link to hammer.
update: fiddle
What I am trying to do is allow the user to highlight cells in a table when they drag the mouse over them, very much as outlined in the question and answer Select Cells On A Table By Dragging
What I need to do though is restrict the drag / highlight effect from spanning more than one column. e.g. which ever column the user start the drag event in they cant highlight out side that column.
Anyone have any ideas on how to achieve this?
Taking the example that is in the other question, you should give the "td" element an attribute, like data-row and data-col, then when somebody is selecting store the current data-col and prevent that the user can select other columns with diferent data-col value.
I put a working code in the following link, you can change it to only works with the rows.
Working example
You need to use the getAttribute method:
element.getAttribute("data-col")
When you highlight the first one, set a boolean, like isHighlighted = true; Then in your actual highlighting just do
if(isHighlighted == false){
///do highlighting
}
WHen you deselect the first box simply set the boolean to false.
In my project, I have a requirement to bring focus on first row of ng-grid as soon as the grid loads and it should move to next row when I press the down key. I added the following event:
$scope.$on('ngGridEventData', function (e,s) {
$scope.gridOptions.selectRow(0, true);
});
But this event just selects the first row, it doesn't take the focus on first row. The row needs to be clicked to get the focus there. What is that additional statement we need to write to get the focus there?
I reported it on github repo of ng-grid and got the solution. You can check the conversation here: https://github.com/angular-ui/ng-grid/issues/539
We need to add the following statement to bring focus to the selected element:
$(".ngViewport").focus();
I was able to focus on a specific cell doing this:
$($($(".ngCellText.col1.colt1")[0]).parent()).parent().focus();
.col1.colt1 refers to the 2nd column (.col0.colt0 -> 1st column)
In this case I'm selecting the 1st row, the 2nd row will be selected using:
$($($(".ngCellText.col1.colt1")[1]).parent()).parent().focus();
It's a bit hacky, but it works.
A slight variation on the JQuery answer:
$('div[ng-row]').eq(2).find('.ageCell').focus()
This finds the row you want first, the third in this case, and then the column using the column name, 'age' in this case. It's just a bit more resilient if the columns change or are re-ordered.