Accessing ASPxGridView's Serverside Properties From ClientSide

Last month, I was creating a sample with the ASPxGridView when I needed to access the PageIndex property from the client side. The PageIndex property holds the current page index number. I needed to use the PageIndex for a client side function. Unfortunately, this property was only available on the server side. I used my keen insight to come up with the perfect suggestion to enhance the product: Just open up a bunch of server properties on the client side! Luckily, someone smarter than me (Andrew the ASPxGridView Architect) saw what a horrible idea that really was and came up with this enhancement that works better and does more...

A new method allows you to expose almost any server side property to the client side. Using an ingenious technique which creates temporary client properties so that the client side is not weighed down with extra HTML or JavaScript if it's not needed.

The CustomJSProperties event enables you to declare temporary client properties. Once declared, these properties can be accessed from the client side. To add a new property, use the event parameter's http://documentation.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxGridViewClientJSPropertiesEventArgstopic property (this represents a collection of property names and their values).

For example, to expose the PageIndex property, first override the CustomJSProperties event and add your custom property to expose to the client side: 

protected void ASPxGridView1_CustomJSProperties(object sender, 
   DevExpress.Web.ASPxGridView.ASPxGridViewClientJSPropertiesEventArgs e) 
{
   e.Properties["cpPageIndex"] = ASPxGridView1.PageIndex;
}

That's it, your done. Now you're free to call this property from the client side:

<input id="Button2" type="button" value="Active Page" 
   onclick="alert(grid.cpPageIndex)" />

To avoid rewriting the ASPxGridView’s base properties, prefix the client side property name with "cp" for custom property (e.g. cpPageIndex).

Here is a sample project that shows how it’s done: [CustomJSProperties.zip]

Thanks.

Free DevExpress Products - Get Your Copy Today