Thomas’ Developer Blog

April 18, 2008

Dropdownlist Optgroups

Filed under: Asp.Net Framework 2.0, HTML, javascript, vb.net — Tags: , , , , , — sanzon @ 11:39 pm

Before continuing I suggest you read my previous post in order to understand querystrings in javascript, since it will be used in the later portion of this post.

http://sanzon.wordpress.com/?p=31

Now, if you have used the dropdownlist in .Net you noticed Asp.Net does not support optgroups, which is a real shame that they didn’t fix this in 3.5.  Sadly there is almost no way of fixing this without doing altering the code with overrides or creating your own control… my question is… WHY?!

You don’t need to do all of that work!  The solution is really simple, takes almost no time at all, and works just fine!

Who says you have to run the dropdownlist on the server side to begin with?!  You know you can emulate serverside code just fine in some situations with javascript, and just pass the values you need to a serverside control.

To do this all we do is create a simple HTML select DOM.

   <select id=”sltError” onchange=”Page_SetInputs(this)”>
   <optgroup label=”Content”>
    <option value=”Content”>Spelling &amp; Grammar</option>
    <option value=”Content”>Incorrect Information</option>
    <option value=”Content”>Layout</option>
    <option value=”Content”>Javascript</option>
    <option value=”Content”>Page Error</option>
    <option value=”Content”>Other</option>
   </optgroup>
   <optgroup label=”Title Infomation”>
    <option value=”Title Infomation”>Title Name</option>
    <option value=”Title Infomation”>Title Format</option>
    <option value=”Title Infomation”>Content Rating</option>
    <option value=”Title Infomation”>Synopsis</option>
    <option value=”Title Infomation”>Genre</option>
    <option value=”Title Infomation”>Audience</option>
   </optgroup>
   <optgroup label=”Inappropriate Content or Abuse”>
    <option value=”Inappropriate Content or Abuse”>Spam</option>
    <option value=”Inappropriate Content or Abuse”>Inappropriate Content</option>
    <option value=”Inappropriate Content or Abuse”>Malicious Attack</option>
    <option value=”Inappropriate Content or Abuse”>Phishing</option>
    <option value=”Inappropriate Content or Abuse”>Illegal Activity</option>
    <option value=”Inappropriate Content or Abuse”>Copyright Infringement</option>
   </optgroup>
  </select>

You’ll need to put this in a form tag of course.  Now this is really simple!  This is what we want to produce, but we have a problem.. how do we pass the values to the server?  Well we just create two small inputs, or one depending on the situation.

  <input type=”text” id=”hdnError_text” runat=”server” />
  <input type=”text” id=”hdnError_value” runat=”server” />

These inputs are server controls, and because they are HTML controls it makes it really easy.  We simply need to use javascript to transfer the value/text from the select input to the server inputs.

The javascript code is as follows:

   function Page_SetInputs(srcObj) {
    document.getElementById(“hdnError_text”).value = srcObj.options[srcObj.selectedIndex].text
    document.getElementById(“hdnError_value”).value = srcObj.options[srcObj.selectedIndex].value
   }

As shown above, when you use an onchange event, it calls this script, which will set the two inputs which can pass values to the server, to the correct code!  Very simple!  At that point you just send the code to an onclick event and process the values and you’re good to go.

The next problem you may have is how to set the default code from the sever?  Sadly you can’t just find the value and select the listitem object.  The only thing we can do is pass the value we want to select (text in this case) in the querystring.

So if you read the previous post, all we have to do is use the code from before:

querystring(“e”) to return the value of the e querystring.  Then we have to use some javascript to cycle through the options and select our desired option value.

Solution is simple:

   var SelectObj = document.getElementById(“sltError”);

   for(var i = 0; i < SelectObj.options.length; i++) {
    if( SelectObj.options[i].text == decodeURI(querystring(“e”))) {
     SelectObj.selectedIndex = i;
     break;
    }
   }

All we do is use a for statement to cycle through all options in the select group and test their text against the querystring value.

Now we have to use decodeURI in this case because we have some text values with spaces that come out as %20, the hex value for space, in the URL.  So to fix this the decodeURI just turns it back into a normal space.  This was explain in the previous post.

So now that we got that, we just take the index of that option value and set it to the selectedindex and we are done!  Again it’s a very simple solution using client side code.  Hopefully the .net team will finally fix this in the coming versions… along with the many other big issues.  I only hope they bother creating a URL rewriter class.

Well hope that helps!  Happy coding.

About these ads

2 Comments »

  1. A server control that extends the functionality of DropDownList and enhances it with the OptGroup support can be found at http://codeplex.com/sharppieces

    Comment by raul — June 9, 2008 @ 12:31 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Silver is the New Black Theme Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: