Make cacadingdropdown in atlastoolkit support multiple selections

Currently, cacadingdropdown in atlastoolkit is used in a company project. You need to select multiple boxes (ListBox, HTML in the ASP. NET Server Control ).CodeIn <select multiple = "true"> </SELECT>), but cascadingdropdown does not support multiple choices, all of which are single choice. after a review of the research and try, I finally added the multi-choice function to it.Article.

Controls in atlastoolkit are composed of several parts

• Bihavior: This is a client JS file that defines the behavior of controls on the client. It should be the core part of the atlastookit control.
• Extender: This is supported by the control server. It is used to support the control server operations.
• Properties: This is the server configuration class.
• Designer: supported during design

Before you start, first check the effect (pay attention to the next line, which is the result of multiple selections ),

To transform cascadingdropdown, you need to take the several parts and start them separately. Now, step by step.

Step 1: Make it support ListBox on the server

Although multiple select boxes and single select drop-down boxes are selected on the client, there are two different controls on the server. cascadingdropdown only supports dropdownlist

Public class cascadingdropdown: extendercontrolbase <cascadingdropdownproperties, dropdownlist>

The above is the cascadingdropdown declaration in the extender file, which inherits from extendercontrolbase. Pay attention to the red part because the declaration here only supports dropdownlist. Now we need to change it to listcontrol, in this way, both ListBox and dropdownlist are supported, because both are inherited from listcontrol.

In addition, the general declarations in properties and designer must be changed to listcontrol.

The above is to support ListBox on the interface, and now we want to make it support ListBox in behavior. This only needs to change extender to a file.

 

Protected override void onload (eventargs E)
{
Base. onload (E );
Foreach (cascadingdropdownproperties in targetproperties)
{
Listcontrol CTRL = (listcontrol) findcontrolhelper (cascadingdropdownproperties. targetcontrolid );
If (CTRL is dropdownlist)
{
Dropdownlist = CTRL as dropdownlist;
Dropdownlist. Items. Clear ();
Dropdownlist. Items. Add (cascadingdropdownproperties. clientstate );
}
Else if (CTRL is ListBox)
{
ListBox = CTRL as ListBox;
ListBox. Items. Clear ();
If (cascadingdropdownproperties. clientstate = NULL)
Return;
Foreach (string item in cascadingdropdownproperties. clientstate. Split (','))
{
ListBox. Items. Add (item );
}
}
}
}

Protected override void onprerender (eventargs E)
{

Foreach (cascadingdropdownproperties in targetproperties)
{
Listcontrol CTRL = (listcontrol) findcontrolhelper (cascadingdropdownproperties. targetcontrolid );
If (CTRL is dropdownlist)
{
Dropdownlist = CTRL as dropdownlist;
Dropdownlist. Items. Clear ();
}
Else if (CTRL is ListBox)
{
ListBox = CTRL as ListBox;
ListBox. Items. Clear ();
}
}

Base. onprerender (E );
}

Well, the above is to change the server to support ListBox, so that the server can be modified here.

Step 2: modify behavior, The set_selectedvalue in the following modified behavior file, you only need to modify this place.

 

This. set_selectedvalue = function (value ){

If (this. Control! = NULL & this. Control. element! = NULL & this. Control. element. Multiple)
{
VaR E = This. Control. element;
// Multiple selection box, that is, ListBox
_ Selectedvalue = new array ();
For (VAR I = 0; I <E. Options. length; ++ I)
{
If (E. Options [I]. Selected)
_ Selectedvalue [_ selectedvalue. Length] = E. Options [I]. value;
}
Atlascontroltoolkit. cascadingdropdownbehavior. callbasemethod (this, 'set _ clientstate', [_ selectedvalue. tostring ()]);
}
Else
{
_ Selectedvalue = value;
Atlascontroltoolkit. cascadingdropdownbehavior. callbasemethod (this, 'set _ clientstate', [_ selectedvalue]);
}
}

Now, compile and release the control.

Step 1: Change the dropdownlist in the aspx file to ListBox, and add selectmode = "multiple"

Step 2: Use code similar to the following

 

Foreach (listitem item in dropdownlist3.items)
{
// If (item. Selected)
Color + = removevaluetext (item. Value) + ","
}

Note: I do not need this line for the red part, because all the items passed back are selected and the items not selected are not passed back.