Tuesday, December 13, 2011

Enhancing Telerik's RadListBox

As a follow-up to the previous post, I wanted to share the work I've done to add server-side functionality via client-side calls.  Though this example focuses heavily on Telerik controls, what I've developed is completely generic ASP.net code that can be used in any situation where one needs to cause a server-side event but one is not natively available from the control.
 
The basic challenge I was facing was to allow both single & double clicking in Telerik's RadListBox.  Natively, single-clicks are handled on the server via: OnSelectedIndexChanged.  But there is no server-side equivalent for double-clicks.

Here's what happens when the RadListBox is single-clicked. Eventually a lot more will occur, including a flowchart appearing, unique to each selected item.



























When the RadListBox is double-clicked, a popup dialog appears.  In this case it's a RadWindow:























Here's the ASP.Net layout code:
    
      
        
          
            
              
                

                
                
              
            
          
          
            
              
            
            
              
              
            
          
        
      
    

Here's the client-side Javascript, which initially makes heavy use of jQuery to obtain the ListBox object. The key points to note are:
  1. The use of the clickTimer variable to help distinguish between single & double clicks.
  2. The differentiation of click type via the initial parameter of either "1" or "2".
  3. Forcing a server-side postback via ASP.Net's __doPostBack Javascript function.
  4. The first parameter used with __doPostBack is the ID of the AJAX UpdatePanel.  Doing so ensures that a partial, rather than full, postback occurs, which is much more aesthetically pleasing. 
    

Finally, here's the server-side code that handles the postback forcibly caused by the client. The key points to note are:
  1. The initial checking of the  __EVENTTARGET system variable is very rudimentary.  If multiple such client postbacks existed from different controls then more sophisticated checking could be accomplished..
  2. What parameters are passed is entirely up to the developer.  In this example, passing just the "1/2" and the ListBox index was sufficient. 
    protected void Page_Load(object sender, EventArgs e)
    {
      if (!Page.IsPostBack)
      {
        // The code in this construct strictly handles the single & double clicking of the RadListBox
        if (this.Request["__EVENTTARGET"].EndsWith("UpdatePanel1"))
        {
          string parameters = this.Request["__EVENTARGUMENT"];

          if (parameters != "")
          {
            // This event may have been fired by either a single-click or a double-click.  We need to 
            // find out which one.  The first parameter will be either "1" or "2", indicating which.
            string[] sParamArray = parameters.Split(new char[] { ',' });

            int idx = Convert.ToInt32(sParamArray[1]);
            if (sParamArray[0] == "1") // Single-click
              SelectListBoxItem(idx);
            else
              AddNode(idx);
          }
        }
      }
    }

No comments:

Post a Comment