With the introduction and wide acceptance of asynchronous callbacks (generally referred to as Ajax now) I find myself writing a lot less JavaScript. The whole point of JavaScript was to make the Web experience rich like Windows chunk clients usually are. However, with Ajax (and Developer Express controls) it is now pretty easy to create a rich client experience without the apparent re-paint and roundtrip that the user experienced prior to Ajax. I still write JavaScript though because sometimes there is nothing quite like code on the client. And, sometimes when you need JavaScript you also need server values to be accessible on the client. This is where our CustomJSProperties event comes into play.
CustomJSProperties is an event that is called on every postback and callback. The CustomJSProperties event has a ASPxGridViewClientJSPropertiesEventArgs argument. This argument has a Properties property that is a Dictionary<string, object>. The string template parameter is the key and the object parameter is the value. Put any value in the Properties dictionary element and that item becomes a first class property as far as the owning object is concerned on the client. In the following example an ASPxGridView was added to a page. A SqlDataSource is connected to the Northwind Employees table. The ASPxGridView's ClientInstanceName is set to 'grid'. The ClientInstanceName provides you with any easy way to refer to Developer Express controls in script. Next, I add a CustomJSProperteis event for the grid and stored the grid's PageIndex in the property (see Listing 1). From ASP.NET and JavaScript's perspective cpCurrentPage can be accessed as grid.cpCurrentPage.
Listing 1: A demonstration of the CustomJSProperties event.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void ASPxGridView1_CustomJSProperties(
object sender,
DevExpress.Web.ASPxGridView.ASPxGridViewClientJSPropertiesEventArgs e)
{
e.Properties["cpCurrentPage"] = ASPxGridView1.PageIndex;
}
}
Tip: Use a lowercase cp prefix for ASPxGridView custom properties so as to avoid overwriting pre-existing properties. This is just a requirement added by us to prevent property collisions.
To use the value add a button that invokes a JavaScript function that uses the client name 'grid' and calls accesses the dynamic property. Here is an HTML tag that defines a button and the <script> block. The debugger statement breaks the code at that point and Figure 1 shows the dynamic cpCurrentPage property in the Quick Watch window.
Listing 2: A <Script> block and an <input> tag added to the ASP.NET to make use of the dynamically added (through the server side CustomJSProperties event) cpCurrentPage property.
...
<script type="text/javascript" language="javascript">
function DisplayCurrentPageIndex() {
debugger;
alert("Current page: " + grid.cpCurrentPage); }
</script>
</body>
...
<input type="button" value="Current Page Index" onclick="DisplayCurrentPageIndex()" />
</div>
</form>
</body>
</html>
Figure 1: The cpCurrentPage property added in the CustomJSProperties event looks like a first class property to the debugger and JavaScript.