Adding rows dynamically to a table using jQuery - Part 2

In this post we shall cover how to add a new row to a table. This post would be a continuation of Part I.

To dynamically add a row to a table, I would be using the append functionality of jQuery. We can use either the

CLONE method (http://api.jquery.com/clone/)
Create a copy of the set of matched elements.

or APPEND method (http://api.jquery.com/append/)
Insert content, specified by the parameter, to the end of each element in the set of matched elements.

I prefer the append method because we got more control on the generation of the element ids/names. In the clone method, the element ids are also copied & by default the events associated are not copied (Using withDataAndEvents parameter we can change this default behaviour).

The HTML which will be appended to the table body -



All the new rows added to the table would contain unique ids/names. The dynamically added controls have an index appended to them.

In the next post I shall explain the fucntionality of AddClicked() and RemoveRow() funtions. Also I shall explain how the jsonsyntax tag would help us in retrieving multiple control/element data for pre-processing; before its sent to the server.

Adding rows dynamically to a table using jQuery - Part 1

This is gonna be a multi part series on how to use jQuery to -
• Adding rows dynamically to a table
• Assigning events to those new rows
• Processing/read the data

In this part, I would cover the html grid which would be used in this series.




This grid contain 4 headers (see thead tag). The new rows would be added in the tbody section of the grid. I have removed the tfoot section from the grid to make the example simpler, but if you do wish to add the tfoot tag, you need to add it BEFORE the tbody section.

Secret Hero - hilarious!!!

If you have worked with AXA/Iqura, you would find this video "quite" interesting...

ps:
Try keeping a straight face

Ajax response size limitation

In a recent project i worked on, we had an interesting experience with a limitation on the data returned by a ajax response, while using jQuery. We found that around 350 rows of data was returned by our web method, out of the 500+ rows. We initially thought the limitation was with jQuery but later found out it was with ASP.Net

Thankfully the solution to this issue was quite simple - in the web.config, the max JSON length had to be specified