ASPxGridView Client-Side API

When it comes to managing tabular data within an ASP.NET application I have found that the ASPxGridView control from DevExpress delivers a nice upgrade from the standard ASP.NET GridView control. In addition to the UI, the ASPxGridView control provides you with a seemingly endless number of customization options and provides great support for CRUD operations, exporting data, and filtering data with as little of ceremony (ok so maybe the ceremony is still there, it's just hidden inside of all of the design time configurations) that is possible with respect to an ASP.NET application.

Overall, I'm 85% satisified with how DevExpress implemented this control. The 15% of dissatisfaction that remains is distributed across missing features, method semantics, and the lack of documentation for the Client-Side API. Since my first two complaints are based on my opinion and I have no influence on how DevExpress conducts its business - I will use this post to cover the absolute basics for exercising the JavaScript API provided by the ASPxGridView control.

Accessing the Client-Side events is done by clicking on the smart dag on a ASPxGridView control while in design mode. With the "Tasks" panel open:

1. Click the link for "Client-Side Events..."
2. Select the event that you wish to customize.
3. You'll see an empty function:

function(s, e) {

}


4. The two parameters passed into the function are the sender object (that's the 's' parameter which is the ASPxGridView in our example) and the event object.
5. For this tutorial let's detect a selection change within the ASPxGridView and perform a simple validation on selection to enable or disable a button that's on the same form. After selecting the SelectionChanged event I provide the following JavaScript:
   

   
   function(s, e) {
   s.GetSelectedFieldValues("ID",
   function onGetValues(result){
      var button = document.getElementById("btnCreateID");
      if (s.GetSelectedRowCount() != 1) {
         button.disabled = true;
     } else {
        if (result[0] = null)
               button.disabled = false;
            else
           button.disabled = true; 
       }});
    }
   

   
   The above code invokes the GetSelectedFieldValues method from the Client-Side API and supplies the column value we wish to retrieve (a column named "ID" in this case) and a callback function that's used to process the result of getting the selected field values. In our example if we've selected one column and if that column doesn't already have an ID assigned to it, the create ID button is enabled.
   

That's all there is to it. The example is basic and somewhat contrived but hopefully it fills the void for your typical 'Getting Started' documentation that I'd like to see DevExpress provide.

The window.open Saga

A while back I encountered a strange problem with window.open() Javascript function. The offending Javascript looked like this:

  window.open('someurl.aspx', 'My Window');

The code seemed to work fine in Firefox but I got an error when trying to evaluate the expression in Internet Explorer 7. I went crazy trying to figure out what was wrong with my code and soon found the space ' ' in the second parameter ('My Window') was causing the problem. If replaced the space with an underscore (i.e., 'My Window' -> 'My_Window') the error disappeared. I noticed that if I would've read the Mozilla JS documentation (https://developer.mozilla.org/En/DOM/Window.open) I would've seen the warning about not putting a space in the window name but I didn't. However the issue was related to IE7 I turned to Microsoft's documentation (http://msdn.microsoft.com/en-us/library/ms536651%28VS.85%29.aspx) and it should be no surprise that the no-space-in-the-window-name isn't mentioned anywhere.