|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Announcements
Chapters
Services
Feature Zones
|
Note: This is an unedited contribution. If this article is inappropriate,
needs attention or copies someone else's work without reference then please
Report This Article
IntroductionThe developer community has come across many scenarios where the customer would like to make multiple choices and the developer wishes to make intelligent usage of screen space. The objective of "multi select drop down list" (MSDD) control is to allow the user select multiple options as in a check box list that behaves like a dropdown list. The multi select dropdown list (MSDD) will consume the space as of a dropdown list and deliver the functionality of a Check Box list. Motivation FactorBy default, the .Net web programmers go by using the ListBox control with multi select option or the checkbox list. No doubt many of us would have felt the need to integrate the dropdown list and the checklist box. We have done just that in this article. FeaturesThis user control is built using C# as server side and JavaScript for client side scripting. The following lists the unique features:
1. Ability to select multiple items. About the controlImportant properties:1. Client scripts can be added using attributes to the control2. The selected items can be read as either comma separated values or as array list. The seleceted items will also be displayed by the tooltip. 3. The text "All" and "Please select" will be displayed when all the options are selected or none selected respectively. 5. Hooking the event handlers. Usage Flow
Initialising the ControlThe control has to be initialized on page load, if the properties size, colors etc are set at runtime rather than at the design time.private void InitialiseDropDownControls() { // To set the background colors // multiselect_foodItems.TextBoxBackColor = System.Drawing.Color.FromName("#FFFFE6"); // multiselect_foodItems.DropDownBackColor = System.Drawing.Color.Aqua; // Set the height and width of dropdown controls.The defualt size is set in pixels. multiselect_foodItems.Width = 160; multiselect_foodItems.Height = 15; multiselect_Juices.Width = 160; multiselect_Juices.Height= 15; //Any attributes to be added to the checkboxlist.These events will be performed ahead of the default events that come with the control multiselect_foodItems.AddAttribute("onclick", "alert('test');"); } Setting the DatasourceThe multiselect drop-down supports the dataset and the list items as the data source. It is not yet tested with other data sources such as object, xml etc. private void LoadData() { //Biniding the Dataset as the datasource multiselect_foodItems.DataSource = GetFoodItems().Tables[0]; multiselect_foodItems.DataTextField = "FoodItems"; multiselect_foodItems.DataBind(); // Using the list item to add items multiselect_Juices.Items.Add("Apple"); multiselect_Juices.Items.Add(new ListItem("Orange")); ListItem item = new ListItem("Grapes"); multiselect_Juices.Items.Add(item); } Attaching ScriptsThe javascript functions can be attached to the check/uncheck event as follows: multiselect_foodItems.AddAttribute("onclick", "alert('test');"); Any events that are added to the default events (those that come along with the control such as the "onclick" event) will be performed after the default event. This will help the user to perform actions apart from the defaults. For eg: Enable another control based on the value selected. Collapse dropdownThe dropdown opens up when user clicks anywhere on the control and is hidden when the user clicks anywhere outside the control.EventsThe server side event handler for checkbox selected item change has been provided. The event has to be hooked on the containing class as follows: multiselect_Juices.OnMSDDSelectedIndexChanged += new Controls.MultiselectDropDownListBox.OnList_SelectedIndexChangedEventHandler(multiselect_Juices_OnMSDDSelectedIndexChanged);
multiselect_Juices_OnMSDDSelectedIndexChanged is the method that will be invoked on the event.
Changing the Highlight color:If the user is interested in changing the highlight color, he can do so in the style sheet class Challenges FacedWhy CheckBoxList rather than adding the html checkbox at runtime?Initiallly, we thought of constructing a dynamic checkbox within a div on the server side and display/hide the div on click events. However, we realised that we will have problems in retaining state, for server side operations and will need to loop through the items when bound to the dataobjects.Hence, the checkbox list was chosen which will make things easier. Attributes of ListItemOn .NET Frameworks 1.0 and 1.1, the attributes added to the listitem are not rendered. This is a bug with all the controls using the listitem. This had to be circumvented while the page is rendered. On .Netframework 2.0, this has been rectified and the attributes of the listitem are rendered. However, when the dataset or any other datasource is bound to the checkbox list, item highlight "onmouseover" and to check/uncheck items when clicked anywhere on the item (not specifically on the label/checkbox) will need to be handled while the control is rendered. Positioning of the CheckBoxListThe positioning of the checkbox list to be in alignment with the text box has been calculated based on the offsetLeft of all its parents, but cannot be guranteed for accuracy in all cases. For proper positioning, if the control is placed inside html tables, remember to set the cellpadding and cellspacing attributes. When these attributes are set to values other than zero and you feel that the checkbox list does not align with the text box, try modifying the if(obj.parentElement.tagName.toUpperCase() == "TABLE") { curleft -= Number(obj.parentElement.getAttribute('cellspacing')); curleft -= Number(obj.parentElement.getAttribute('cellpadding')); } Higher Z-index for the Checkboxlist ControlWhen the div is positioned dynamically, the checkboxlist inside the div is overridden by controls such as the listbox which are actually placed beneath the div and the containing checkboxlist. To overcome this issue, an iframe was positioned as the div, so that the div gets a higher z-index value. The iframe overrides the listbox control and hence the div and the checkboxlist are shown. Here the src of the iframe is not set. EnhancementsA MultiselectEventArgs derived from EventArgs can be used. This can hold the list of selected items and its corresponding indexes. HistoryVersion - v1.1. - fixed the scrolling issue
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||