I’ll show you how you can quickly enable ViewState compression and show you the effects it has on overall ViewState size and server performance.

How do I enable Viewstate compression?

Enabling ViewState compression with the RadCompression module really couldn’t be easier. It requires no changes to your code, no changes to your markup, and not even a change to your web.config (assuming you’ve already added the required HttpModule references). The only thing you need to do is add a new Browser file to your web project (or modify your Browser file if you’re already using one). To add a new Browser file, follow these simple steps:

• Right-click on your web project, select "Add…" > "Add ASP.NET Folder…" > "App_Browsers"
• Right-click in your new App_Browsers folder, select "Add…” > "Add New Item…" > "Browser File"
• The new browser file will have some default values, feel free to delete everything and then add this code:

   1: <browsers>

   2:  <browser refID="Default">

   3:  <controlAdapters>

   4:  <adapter controlType="System.Web.UI.Page" adapterType="Telerik.Web.UI.RadHiddenFieldPageStateCompression" />

   5:  <!--Uncomment the following line to use SessionStateCompression and remove ViewState from the page-->

   6:  <!--<adapter controlType="System.Web.UI.Page" adapterType="Telerik.Web.UI.RadSessionPageStateCompression" />-->

   7:  </controlAdapters>

   8:  </browser>

   9: </browsers>

And that’s it!. Run your project at this point and you’ll discover that the RadCompression module is now automatically compressing your ViewState.

How much does the compression help?

ViewState, as you probably know, is just a serialized string of data. By default, it’s not compressed, it’s not encrypted, and it’s often a bloated piece of string data that gets passed back and forth with every request to the server.

Compressing this data is an easy way to reduce your page size and reduce the number of bytes you must send and receive from the server.

To demonstrate RadCompression’s effectiveness, I created a simple page with a RadGrid that loads data from the AdventureWorks Employees table. I bound my grid declaratively to an EntityDataSource and I slowly started increasing my Grid’s page size- from 10 records to 240 per page. As the page size grew, obviously the ViewState grew.

RadCompression Efficiency

The blue bars represent the ViewState size (in KB) with RadCompression. The green bars represent the difference in the original ViewState size (i.e. total size with no compression). And the red numbers indicate the compression “efficiency” at each step (for instance, “53%” means the compressed ViewState was 53% smaller than the original).

• As the original ViewState grew, the compression became even more “efficient” (ranging from 47% to 75% compression ratios)
• In the first two tests, there was no difference between the original and the “compressed” output – more on this in a moment
• On average, RadCompression reduced ViewState size by 61%! (omitting the “0” tests)

So why are the first two tests “0%”? RadCompression actually has a “threshold” that must be passed before compression will kick-in. For smaller ViewState sizes, it doesn’t make sense to apply compression- the overhead of the processing and compression header/footer offset the small gains in overall state size. Currently, this threshold is 8KB. If your original ViewState is smaller than 8KB, RadCompression will automatically skip over it. Bigger than that, and RadCompression will automatically work.

What is the effect on server performance?

Many people will often say, “Sure you can compress ViewState, but doesn’t that add significant processing overhead on the web server?” It is true that adding compression represents extra CPU cycles and it does have an effect on server performance. With RadCompression, though, that impact is relatively small. Internally, RadCompression uses Deflate compression to compress and decompress state, which is much faster than Gzip compression. And thanks to the optimizations of the compression APIs in .NET, the overall effect on server processing time is low.

This may be one of the easiest ways to help reduce your page size, and in turn, help improve your page performance. By simply registering the RadCompression HttpModule and adding a .browser file to your project, you can see reductions of over 70% in your ViewState size with little impact on your server performance. Clearly, as developers we should all be taking active steps to reduce our ViewState size, but if you’ve already done everything you can (or at least everything you have time for) and you want to squeeze a few more KB out of your page, RadCompression is ready and waiting for you in your Telerik toolbox.

A lot of times in development scenarios you come to a situation where you want to do a postback on a webpage when a user hits the enter button.

If you are using RadAjaxManager on that page, then to submit the page for postback or invoke a button click event handler, use the following code:

   1: function PerformPostBack(e)

   2: {

   3:     evt = e || window.event;

   4:     var Key = evt.which || evt.keyCode;

   5:     if ( Key == 13 ) 

   6:     {

   7:         AjaxNS.ARWO(new WebForm_PostBackOptions("<%=btnButton.UniqueID%>", "", true, "", "", false, true), "<%=UpdateControl.ClientID%>", event);

   8:         return false;

   9:     }

  10: }

In the web page where the textbox is set onKeyPress=”return PerformPostBack(event)”

The current article is taken from http://blog.telerik.com

In some scenarios it is useful to encode and decode the URI. For example:

To avoid unexpected requests to the server, you should call encodeURIComponent on any user-entered parameters that will be passed as part of a URI. For example, a user could type "Thyme &time=again" for a variable comment. Not using encodeURIComponent on this variable will give comment=Thyme%20&time=again. Note that the ampersand and the equal sign mark a new key and value pair. So instead of having a POST comment key equal to "Thyme &time=again", you have two POST keys, one equal to "Thyme " and another (time) equal to again.

encodeURIComponent

Core Function:
Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, or three escape sequences representing the UTF-8 encoding of the character.

//Syntax

var encoded = encodeURlComponent(str);

encodeURIComponent escapes all characters except the following: alphabetic, decimal digits, - _ . ! ~ * ' ( )

decodeURIComponent

Replaces each escape sequence in the encoded URI component with the character that it represents.

Decodes a Uniform Resource Identifier (URI) component previously created by encodeURIComponent or by a similar routine.

The following code library example demonstrates how to make a RadAjaxLoadingPanel expand to occupy the full page width and height.

Some important notes:

• The RadAjaxLoadingPanel has to be Sticky (IsSticky="true") and absolutely positioned with width and height set to 100%.
• The <body> tag needs its margin reset to zero, otherwise the loading panel will not start from the browser viewport edge.
• The html, body and form tags need a min-height:100% style, in casе the page content is less than the browser viewport height.
• If the page content is more than the browser viewport height, you need to set the loading panel's height client-side with Javascript.
• The RadAjaxLoadingPanel must be placed inside the <form> element. Otherwise it must not have relatively positioned parent elements, because they will prevent it from expanding properly.
• If the RadAjaxLoadingPanel does not cover some relatively positioned elements on the page, then move the loading panel after those elements in the page markup and/or set some large enough z-index style to the RadAjaxLoadingPanel's CSS class.

You can scroll randomly up or down before making the AJAX request to see that the modal background covers the whole page and the background image is always centered in the current visible portion of the loading panel. This is achieved by the RequestStart() javascript function.

This example is useful when you need to add new row in the gridview. Here  to can add the link URL runtime.

Add a placeholder in the HTML page.

   1: <asp:PlaceHolder ID="phGrid" runat="server"></asp:PlaceHolder>

Now create the gridview run time

   1: private void BindGrid()

   2:   {

   3:     // Create new instance of gridview

   4:       GridView gvNew = new GridView();

   5:       gvNew.ID = "ItemGrid";

   6:       gvNew.SkinID = "ListView";

   7:       gvNew.Width = 300;

   8:  

   9:       DataTable dt = Datasource();

  10:       if (dt.Columns.Count > 1)

  11:       {

  12:             // Assign RowDataBound handler. This will add link URL dynamically.

  13:           gvNew.RowDataBound += new GridViewRowEventHandler(gvNew_RowDataBound);

  14:           gvNew.DataSource = dt;

  15:           gvNew.DataBind();

  16:       }

  17:       else

  18:       {

  19:             // Some Comments

  20:       }

  21:      

  22:       phGrid.Controls.Add(gvNew);

  23:  

  24:   }

   1: protected void gvNew_RowDataBound(object sender, GridViewRowEventArgs e)

   2:  {

   3:      int random = 1;

   4:      int count = e.Row.Cells.Count;

   5:  

   6:      if (e.Row.RowType == DataControlRowType.DataRow)

   7:      {

   8:          string str = e.Row.Cells[0].Text;

   9:      }

  10:      else if (e.Row.RowType == DataControlRowType.Footer)

  11:      {

  12:  

  13:          Label lblEdit = new Label();

  14:          lblEdit.Text = " ";

  15:          Table tbl = new Table();

  16:          tbl = (Table)e.Row.Parent;

  17:          GridViewRow myRow = new GridViewRow(0, 0, DataControlRowType.DataRow, DataControlRowState.Normal);

  18:          DataTable dt = new DataTable();

  19:          dt = (DataTable)this.dtOCCRateList;

  20:  

  21:          for (int i = 0; i < count; i++)

  22:          {

  23:              TableCell myCell = new TableCell();

  24:              // need to create the edit hyperlink in the the footer 

  25:  

  26:              if (i == 0)

  27:              {

  28:                  // leave blank

  29:                  myCell.Controls.Add(new LiteralControl(""));

  30:              }

  31:              else

  32:              {

  33:                  // create the image and hyperlink 

  34:                  HyperLink editLink = new HyperLink();

  35:                  editLink.ID = "editLink" + random;

  36:                  

  37:                  // set the image url 

  38:                  editLink.ImageUrl = "~/library/images/ico-edit.gif";

  39:  

  40:                  // set the navigate url 

  41:                  editLink.NavigateUrl = "~/Default.aspx?Id=" + dt.Rows[0][i].ToString()

  42:                      + "&PId=" + AssetId.ToString();

  43:  

  44:                  // now add this hyperlink in the table cell

  45:                  myCell.Controls.Add(editLink);

  46:                  

  47:                  // add delete 

  48:                  HyperLink delLink = new HyperLink();

  49:                  delLink.ID = "delLink" + random;

  50:                  random++;

  51:  

  52:  

  53:                  delLink.ImageUrl = "~/Library/images/delete.gif";

  54:  

  55:                  // set the navigate url

  56:                  delLink.NavigateUrl = "~/Default.aspx?Id=" + dt.Rows[0][i].ToString()

  57:                      + "&PId=" + AssetId.ToString();

  58:  

  59:                  myCell.Controls.Add(new LiteralControl(" "));

  60:                  myCell.Controls.Add(delLink);

  61:              }

  62:  

  63:              myRow.Cells.Add(myCell);

  64:              tbl.Rows.Add(myRow);

  65:          }

  66:      }

  67:  

  68:  }