Saturday, December 15, 2007

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.

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

1 comment:

Unknown said...

I am given the project to add rows to the client side using infragistics ultrawebgrid. i followed your steps but it does not work. but page sends some postbacks and then it adds that row at the bottom.