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.

ASP.NET AJAX AND ASP.NET 2.0 ERROR: “Invalid postback or callback argument.”

In my current ASP.NET 2.0 [AJAX] project, I came across this error

" Invalid postback or callback argument. Event validation is enabled using <pages enableeventvalidation="true" /> in configuration or <%@ page enableeventvalidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation."

After looking at the error message I immediately set enableeventvalidation="false" at page level and do away with the error but I faced other problem i.e. I was not able to retrieve values of my controls [only specific control] during post back. The scenario goes like this:

My asp.net page has got the following server controls
1. Textbox,
2. Drop down list
3. Button
4. Grid inside an Updatepanel

In the client side onchange event of the textbox control, AJAX web service call is made and based on the result the drop down list gets populated dynamically. Upon button click, my gridview control which is inside the updatepanel should populate [expected result]. I was not able to get the selected value of the drop down list during partial post back and I couldn't find the root cause immediately and at last after googling I got a good pointer about this issue is well explained by Scott Allen

http://odetocode.com/Blogs/scott/archive/2006/03/20/3145.aspx [Part 1]
http://odetocode.com/Blogs/scott/archive/2006/03/21/3153.aspx [Part 2]

At last I managed to get my expected results by introducing an hidden control where I set the dropdown list's selected value through client side javascript code and then able to get the hidden controls value during partial post back [Kind of laborious and dirty way]. Time being the problem was solved. If i come across better approach I'll update this post. If any of you have better solution please suggest.


Friday, December 14, 2007

How To Inject Javascript during partial postback in ASP.Net

Injecting Javascript Codes using ClientScriptManager class i.e. RegisterClientScriptBlock  in asp.net codebehind will not work for partial postback [ASP.NET AJAX Calls].
To make it work we need to use ScriptManager class's ScriptManager.RegisterStartupScript, ScriptManager.RegisterClientScriptBlock methods

Example:

string msg = string.Format("alert('Test Javascript from partial postback');");
ScriptManager.RegisterStartupScript(TestButton, typeof(Button),"Test_my_script",msg, true);

TestButton => The control which triggered the partial postback [It may be other controls which are inside the updatepanel]
typeof(Button) => System.Type object for a type
Test_my_script => any unique string as key
msg => Javascript code to be injected
true /false => Adds javascript script tags i.e. <script></script>