Develop Reference

How to get button to act as column search filter within ag-grid and search for a set list of items?

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.

Using jquery to add options to select element within cloned table row causes select options outside the cloned element to be modified

I'm trying to use a table row as a template for adding multiple rows. I need to clone the row, then update the select elements with some data. I hide the table row template before I do the clone, so the selects should not show up for the time being.
The issue I'm having is that I have other selects defined on the page that are being modified by this process, but when I do the following:
clonedTr.find('select').each(function() {
console.log($(this));
...
it confirms that I am only working with the selects within the cloned table row. See this jsfiddle: https://jsfiddle.net/fud4wej2/2/
I also tried to call rowTemplate.remove() after the clone(), thinking that the issue might have to do with duplicated ids, but to no avail. Otherwise, to see the top pulldown being displayed correctly - showing Foobar as it's option - comment in the return; statement.
As is -- with $(this).append(option); commented out -- the top pulldown shows the second entry WB-730-2 from optionsToAdd as its option. If you comment in the final $(this).append(option); statement, the top pulldown has no options.

These lines:
var option = $('option');
option.val(optionsToAdd[i]);
option.text(optionsToAdd[i]);
The $('option') function is evaluating that CSS selector in the scope of the whole document, which grabs every option tag on the page. This is causing your problem.
To fix:
var option = $('<option>');
This will parse the HTML and create a new option element.
Another alternative:
var option = $(document.createElement("option"));

Ajax Remember selected options

In my DB I have tables System(id, name) and AssignedSystems(id, system_id). I display every system from the second table like this (I can't copy my code, so I have to rewrite it, I will use pseudo PHP+HTML):
while () { // if there are many systems assigned, I will display them all in separate selects
<select><option value="'.$systemAssigned.'">'.$systemAssigned.'</option>
while () {
// display every system from table System except for the one listed above
}
</select><img src="drop.gif" onclick="deleteSystem()">
}
<img src="plus.gif" onclick="addSelect()">
JavaScript (to be specfic - AJAX) functions deleteSystem() and addSelect() do (in order) delete a row from AssignedSystems and add new select, so a new system can be selected from table System.
Now when I want to add few, let's say 3 new selects, I have to click plus.gif three times - and the page reloads three times with a new select added. Now I would like to have my previous selections remembered. So when I click plus.gif one time and select a system, then click plus.gif again and again I would like to have my first selection remembered.
I thought about using sessions variables like:
<select>
$_SESSION["selectValue"] = SELECTED_VALUE_WHEN_PLUS.GIF_IS_CLICKED;
<option>...</option>
</select>
or passing the currently selected value to javascript, but I don't really know how, because I don't have any specific number of blank selects, so I don't know how to retrieve it back.

Programmatically bring focus on first row in ng-grid

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.

add div from drop down menu selection jquery

I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked

The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.