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.