Excel Like Add Rows Above, Below at client side in Infragistics UltraWebGrid with the help of UltraWebMenu

Infragistics Ultrawebgrid is a popular ASP.NET RAD web grid control which supports creating hierarchical datagrid in a breeze. Its CSOM [Client side Object Model] exposes many client side events which greatly helps to meet any kind of challenging requirements and simply reduces development time. My requirement is to Add Grid Rows Just above [or] below the selected Active row and all the operations should be at client side, just like excel. Unfortunately Infragistics Ultrawebgrid doesn’t support this kind of requirement out of the box, It supports adding rows at Top [or] Bottom of the grid not above [or] below any selected active rows [This can be done at server side by attaching UltrawebNavbar control to Ultrawebgrid]

I searched their forum post and googling to achieve this in client side but no luck. I managed to achieve the desired result [XLGrid Sample 1] by manipulating their client side methods, for javascript source code please look view source of the demo page. The demo [ XLGrid Sample 1] is a flat grid [one level] but my requirement is adding rows dynamically for hierarchical grid at all levels [3 level]. I have done it for my project requirement but yet to create a sample to post it here.

How I did:
1. Infragistics supports adding rows on Top / bottom of the grid through javascript igtbl_addNew. I utilized igtbl_addNew to add a new row at the bottom of the grid and simultaneously stored the desired index location where the new row should be added in a page level javascript variable
2. Infragistics also exposes two other methods remove and insert at particular index location. So i utilized those methods i.e. I removed the just added row [bottom most row] using remove method and then reinsert that row in the desired location using insert method.

Internally Infragistics uses remove and insert methods for client side sorting.

This post is not about the features of Infragistics ultrawebgird, to learn about the usage and features please refer their web site.

Download source

10 thoughts on “Excel Like Add Rows Above, Below at client side in Infragistics UltraWebGrid with the help of UltraWebMenu

  1. Hi Senthil,

    Can you post the sample demo and code for “Excel Like Add Rows Above, Below at client side in Infragistics UltraWebGrid with the help of UltraWebMenu”



  2. can u tell me how to make a parent column width synchronised if i use mouse to drag the child column width in heirarchial webgrid

    when i drag the child columns to increase/decrease the width of it,i need the parent columns also to get reflected to make the grid look better


  3. I’ve added this to a project of mine.

    The first band of the grid seems to work fine. The issue is with my second band of my hierarchical grid…no matter which selection is made the new row is created at the bottom of that bands grid.

    Please let me know if you have any ideas of what may be causing this.



  4. Excel Like Add Rows Above, Below at client side in Infragistics UltraWebGrd

    unable to open XLGrid Sample 1.

    I want to add a new row after or before the selected row in ultrawebgrid. Can any one help me


  5. Hi Senthil,

    I was not able to open the XLGrid Sample demo site and also to download the source code. Can you please post another again?

    Thank yuou very much.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s