Develop Reference

onclick on the add the new row in the table

I am just started with angular.I have a table and a button. on-click on the button a new row like previous one should be added in the table.i have added stackblitz link below. i am struggling to figure that out.thanks in advance.
stackblitz link

Here is an example https://stackblitz.com/edit/angular-rs6bkq. You need to create an arbitrary array and use its length to define how many rows to display. Notice the *ngFor directive placed on the tr tag. This is effectively a for loop in your HTML for the number of items in your array. So if you change the length of your array using a function call the number of table rows will update to reflect this.
You can read more about structural directives (like ngFor) here - https://angular.io/guide/structural-directives

Check this if it helps : https://stackblitz.com/edit/angular-add-new-row
I have added some modifications to let inputs have different values.

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.

Storing post display order in database

I am developing a web application which will have images displayed in a slider. It is important that I am able to modify the order that they are displayed in.
Currently, I have a column in the table of images called 'order', which must be set to ensure the ordering works correctly, but changing it requires changing every other, too, which becomes tricky when dealing with hundreds of records.
This table, as well as queries for modifying it, are in development, so it's completely fine to change the way I do this.
My questions are:
When I'm inserting a new row, how can I make sure it appears at the end of the list? Auto-Increment in SQL tends to leave gaps if you delete entries from the table. How do I make sure that the row is assigned an order 1 greater than the highest order in the table?
How do I reorder the table? Imagine that I use a drag and drop interface (or similar) to reorder one image, bringing it to the top, or a different part of the list. If I do that, I need to reset the numbering of every item, which is, again, inefficient when dealing with hundreds of rows.
How do I prevent two rows from having the same order at any given time? The UNIQUE flag on the column? Presumably if I set that flag, changing the order from, say, 8 in one row opens up another to use that number. Right?
Thank you for your time, and I hope this isn't too vague a question to be easily answered!

Query the table you are about to insert into to find the MAX id in the table. Then on your insert just do this +1.
When re-ordering, say you want to set image order 6 to order 3. You will want to update all rows from order 3 and onwards to order+1 then set the image to order 3.
UPDATE table SET id = id+1 WHERE id IN (SELECT * FROM table where id >= 3)
If you are using unique on the order column to re-order you will have to update the current value to a temp value such as 99999, then use method in 2. However method 2 should keep this table from receiving any duplicated values.
sidenote
You could on delete of a picture re-evaluate the ids to keep no gaps
UPDATE table SET id = id-1 WHERE id IN (SELECT * from TABLE WHERE id > 3)
Where 3 is the deleted id

It will be in the end of the list. Just use auto increment feature and do not set ID manually (like lastID + 1) and you'll never have described problem.
You can allow user to change order of the list and then just update all order cells (for each member of the list). Or you can use Ajax and exchange order value for two members every time user drag-and-drops.
Use one of approaches described in 2 and you'll never have this problem.

How to do multiple levels of nested tables in JQuery/HTML

I'm trying to create tables with multiple levels of nesting which can be expanded/collapsed. So the main table has rows which can be expanded to show the child rows in the middle of the table, who themselves can be expanded.
Each table needs to have their own headers and preferably the columns would all line up but have the start of the child tables be slightly indented as I try to show below.
For example:
ColHeader1 ColHeader2 // main table headers only shown at the top
record1 ...
ChildHeader1 ChildHeader2 // child headers shown for each table
childrec1 ...
SubChildHeader1 SubChildHeader2 // child headers shown for each table
subchildrec1 ...
childrec2 ...
record2 ...
ChildHeader1 ChildHeader2 // child headers shown for each table
childrec5 ...
record3 ...
I've tried to create the code by expanding a sample I found, but it doesn't work for expanding the inner most table. The code can be found here: http://jsfiddle.net/afsz5brg/
The end product will be in a ASP.Net MVC app, but for now I'm just trying to get it working in javascript/JQuery so that hopefully I can just change the data being sent to it.
I'm happy to consider alternative ways for doing it or be told if any of the code is doing something bad/deprecated.

There are a couple of bugs I have discovered in your code. I would list them one by one.
1) Your assumption of registering a callback on $('#detailsTable tbody td').on('click', ...); and that being called on every new instance of that table that gets created is wrong.
If jQuery Data Table was internally cloning the #detailsTable element, then your code would work. But that isn't the case as you are retrieving the HTML markup of #detailsTable and returning it to fnOpen like so: oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details'); so the callback never gets called.
You need to register a callback to the newly created details table. Check out this JsFiddle to see how.
2) I think I also spotted another bug while reading your code. I haven't fixed it as I was not sure if I was right or not. In the callback for your #detailsTable, you call fnFormatDetails() instead of fnFormatSubDetails() like so oInnerTable.fnOpen(nTr, fnFormatDetails(iSubTableCounter, subDetailsTableHtml), 'subdetails'); No one is calling fnFormatSubDetails() at the moment. Please check if this is a bug or not.

Is there any CallBack function which is called before/after data is loaded in Angular Js ng-Grid?

Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.

Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.

I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.