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.
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 have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance
Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.
I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});
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.
Some quick searching only turns up adding a new row to a jQGrid via a modal popup with the editable fields.
Can anyone point me to a sample or show me some code that allows you to add a new empty row into the grid itself, at the top?
I have an action column at the rightmost end of the grid in which onRowSelect() I have a save button appear and I can make that button do the save and refresh the grid I think..
I can't figure out how to click on a 'Add Row' button and add an empty row inside the grid at the top.
One option that I can see is to style the current add row modal to look like a horizontal row and place it to appear like its a row at the top of the grid.
jQGrid Documentation: http://www.trirand.com/jqgridwiki/
If you use datatype:'local' then you can use addRowData method to insert the row with position parameter set to 'first'. See some examples under http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data.
This answer is courtesy of Oleg in my previous question here:
use $("#grid").addRowData(rowid,data, position, srcrowid);
Inserts a new row with id = rowid
containing the data in data (an
object) at the position specified
(first in the table, last in the table
or before or after the row specified
in srcrowid). The syntax of the data
object is: {name1:value1,name2:
value2…} where name is the name of the
column as described in the colModel
and the value is the value. This
method can insert multiple rows at
once. In this case the data parameter
should be array defined as
[{name1:value1,name2: value2…},
{name1:value1,name2: value2…} ] and
the first option rowid should contain
the name from data object which should
act as id of the row. It is not
necessary that the name of the rowid
in this case should be a part from
colModel.
P.S. Have a look at my profile for a number of jqgrid questions and answers.
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.