add DIV around every asp:DropDownList control code behind

Question

I try to simply add a div wrapper around every control of type <asp:DropDownList> at a global level (if possible). At this point I have solved it with a asp skin adding "default-select" class to all <asp:DropDownList> and then jquery just adding a div for each of them.

$j(".default-select").wrap("<div class='myClass'></div>");

Now, my question. Is it possible to add this div wrapper from the code-behind instead of relying on a javascript.

Control Adapter: I know this should be possible by writing a control adapter that override <asp:DropDownList> render method (as described here: Dropdownlist control with <optgroup>s for asp.net (webforms)?). However, I just want to add a wrapping div, not rewrite the entire rendering of the <asp:DropDownList> control (which I have to do if i override the method?). Any suggestions? Maybe there is a way to just add something to the existing adapter??

Custom User Control: Another solution would be to build a custom <mycustom:DropDownList> with the wrapping, but, this would force me to replace every instance of <asp:DropDownList> trough the whole project (large project). I rather just change the original control some how so that my styling applies everywhere.

So summary: Is there an easy way to just make all <asp:DropDownList> render as:

<div class="myClass">
      <select><option...></select>
</div>

instead of just:

<select><option...></select>

My first attempt (on Page load): I tried to add this code in the Page_load method but I don't find any way to render that div out?

    var j = 0;
    foreach (DropDownList control in Page.Controls.OfType<DropDownList>())
    {

       HtmlGenericControl div = new HtmlGenericControl();
        div.ID = "div" +j;
        div.TagName = "div";
        div.Attributes["class"] = "myClass";
        div.Controls.Add(control); // or control.Controls.Add(div); but this wouldn't wrap it.
        j++;
    }

score 2 · Accepted Answer · answered Nov 22 '13 at 14:14

Your solution just about works. Server control can only exist within the scope of a server form, you will need to perform a recursive search on the page or look directly in the form controls collection. Once you have the DropDownList and wrapped it around a div container it will need to be added to the controls collection.

Also, I think it better to perform this in OnPreInit.

protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);

var j = 0;
foreach (DropDownList control in form1.Controls.OfType<DropDownList>().ToList())
{
    var div = new HtmlGenericControl();
    div.ID = "div" + j;
    div.TagName = "div";
    div.Attributes["class"] = "myClass";
    div.Controls.Add(control); // or control.Controls.Add(div); but this wouldn't wrap it.
    j++;

    form1.Controls.Add(div);
}

}

I hope this is helpful. Let me know how you get on.

I bet this would have worked, but in my project - I can't reference the form1, because it's in another master page. Since this is an addon on an already existing backend setup I can't really change this. — Joakim Poromaa Helger, Nov 25 '13 at 13:09

score 0 · Answer 2 · answered Nov 22 '13 at 14:01

Either way what you're wanting is custom and you have to code for it. So IMO, the best and simplest option is the custom control. You may have to spend some time refactoring references to replace your <asp:DropDownList>, but in all the time you've spent trying another way, you could've been done by now. :)

I've learned the hard way that keeping it simple is usually the best way to go.

add DIV around every asp:DropDownList control code behind

2 Answers2

Linked