This is a usercontrol, just drag and drop. But make sure to
include the ScriptManager.
The project includes:
·
Default.aspx – this page do not use master page and user control.
·
MS_With_UserControl.aspx – this page use multiple instances of
the user control and no master page.
·
MS_With_UserControl_and_Masterpage.aspx – this page use multiple
instances of the user control and a master page.
·
CheckBoxListExCtrl - How to get the CheckBoxlist Value using
Javascript?
·
The rest of the files are fairly self explanatory.
The code is pretty much the same except I had made a few
changes to return the text of the selected checkbox. Please see comments.
Listing 1 -- CheckBoxListExCtrl
string clientID = UniqueID + this.ClientIDSeparator
+ repeatIndex.ToString(NumberFormatInfo.InvariantInfo); //09042009 BT - var
writer.WriteBeginTag("input");
writer.WriteAttribute("type", "checkbox");
writer.WriteAttribute("name", UniqueID + this.IdSeparator
+ repeatIndex.ToString(NumberFormatInfo.InvariantInfo));
writer.WriteAttribute("id", clientID);
writer.WriteAttribute("value", Items[repeatIndex].Value);
if (Items[repeatIndex].Selected)
writer.WriteAttribute("checked", "checked");
System.Web.UI.AttributeCollection attrs = Items[repeatIndex].Attributes;
foreach (string key in attrs.Keys)
{
writer.WriteAttribute(key, attrs[key]);
}
writer.Write("/>"); //09042009 BT - close the input tag
writer.Write("<label for='" + clientID + "'>");
//09042009 BT - added label to hold the checkbox text
writer.Write(Items[repeatIndex].Text); //text
writer.Write("</label>"); //close label tagHere is the content of the JavaScript, please read the
comments.
Listing 2 -- MultipleSelectionDDLJS.js
/*detect the browser version and name*/
var Browser = {
Version: function() {
var version = 999; // we assume a sane browser
if (navigator.appVersion.indexOf("MSIE") != -1)
// bah, IE again, lets downgrade version number
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
return version;
}
}
function showIE6Tooltip(e){
//we only want this to execute if ie6
if (navigator.appName=='Microsoft Internet Explorer'
&& Browser.Version() == 6) {
if(!e){var e = window.event;}
var obj = e.srcElement;
tempX = event.clientX + (document.documentElement.scrollLeft
|| document.body.scrollLeft);
tempY = event.clientY + (document.documentElement.scrollTop
|| document.body.scrollTop);
var tooltip = document.getElementById('ie6SelectTooltip');
tooltip.innerHTML = obj.options.title; //set the title to the div
//display the tooltip based on the mouse location
tooltip.style.left = tempX;
tooltip.style.top = tempY+10;
tooltip.style.width = '100%';
tooltip.style.display = 'block';
}
}
function hideIE6Tooltip(e){
//we only want this to execute if ie6
if (navigator.appName=='Microsoft Internet Explorer'
&& Browser.Version() == 6) {
var tooltip = document.getElementById('ie6SelectTooltip');
tooltip.innerHTML = '';
tooltip.style.display = 'none';
}
}
/* get and set the selected checkbox value and
text and selected index to a hidden field */
function getCheckBoxListItemsChecked(elementId) {
//var
var elementRef = document.getElementById(elementId);
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
var checkedText = '';
var checkedSelIndex = '';
var myCheckBox = new Array();
for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];
if (checkBoxRef.checked == true) {
//selected index
if (checkedSelIndex.length > 0)
checkedSelIndex += ', ';
checkedSelIndex +=i;
//value
if (checkedValues.length > 0)
checkedValues += ', ';
checkedValues += checkBoxRef.value;
//text
var labelArray = checkBoxRef.parentNode.
getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedText.length > 0)
checkedText += ', ';
checkedText += labelArray[0].innerHTML;
}
}
}
myCheckBox[0] = checkedText;
myCheckBox[1] = checkedValues;
myCheckBox[2] = checkedSelIndex;
return myCheckBox;
}
function readCheckBoxList(chkBox, ddlList, hiddenFieldText, hiddenFieldValue,
hiddenFieldSelIndex) {
var checkedItems = getCheckBoxListItemsChecked(chkBox);
$get(ddlList).options[0].innerHTML = checkedItems[1]; //set dropdownlist value
$get(ddlList).title = checkedItems[0]; //set the title for the dropdownlist
//set hiddenfield value
$get(hiddenFieldValue).value = checkedItems[1];
$get(hiddenFieldText).value = checkedItems[0];
$get(hiddenFieldSelIndex).value = checkedItems[2];
}MultipleSelection.ascx –
In this page, I have HoverMenuExtender, DropDownList,
CheckBoxListExCtrl, a few hidden fields and a div to display tooltip
information for IE 6.0. And I have added some dummy data to my checkboxlist so
it wouldn't look empty when I drag it into the page.
Listing 3 – user control page
<div>
<cc2:HoverMenuExtender ID="HoverMenuExtender1"
runat="server" TargetControlID="MultiSelectDDL"
PopupControlID="PanelPopUp" PopupPosition="bottom"
OffsetX="6" PopDelay="25" HoverCssClass="popupHover">
</cc2:HoverMenuExtender>
<asp:DropDownList ID="MultiSelectDDL" CssClass="ddlMenu regularText"
runat="server">
<asp:ListItem Value="all">Select</asp:ListItem>
</asp:DropDownList>
<asp:Panel ID="PanelPopUp" CssClass="popupMenu" runat="server">
<cc1:CheckBoxListExCtrl ID="CheckBoxListExCtrl1"
CssClass="regularText" runat="server">
<asp:ListItem Value="d1">Dummy 1</asp:ListItem>
<asp:ListItem Value="d2">Dummy 2</asp:ListItem>
</cc1:CheckBoxListExCtrl>
</asp:Panel>
<asp:HiddenField ID="hf_checkBoxValue" runat="server" />
<asp:HiddenField ID="hf_checkBoxText" runat="server" />
<asp:HiddenField ID="hf_checkBoxSelIndex" runat="server" />
</div>
<div id="ie6SelectTooltip" style="display:none;position:absolute;padding:1px;
border:1px solid #333333;;background-color:#fffedf;font-size:smaller;
z-index: 99;"></div>
MultipleSelection.ascx.cs
Here is some of the code on Page_Load event, please read
comments
Listing 4 – user control code behind
LoadJScript();
LoadCss();
//add onclick attributes, call the readCheckBoxList function with parameters
CheckBoxListExCtrl1.Attributes.Add("onclick", "readCheckBoxList('" +
CheckBoxListExCtrl1.ClientID + "','" +
MultiSelectDDL.ClientID + "','" +
hf_checkBoxText.ClientID + "','" +
hf_checkBoxValue.ClientID + "','" +
hf_checkBoxSelIndex.ClientID + "');");
//for IE 6.0
MultiSelectDDL.Attributes.Add("onmousemove", "showIE6Tooltip();");
MultiSelectDDL.Attributes.Add("onmouseout", "hideIE6Tooltip();");I have a method to load the Style Sheet and JavaScript
separately with no duplicates, if you drag and drop multiple instances of the
control onto the page, it will only register the StyleSheet and JavaScript one
time only. Notice that I also included ResolveUrl method so that the
usercontrol will never have problem locating the StyleSheet and JavaScript.
Listing 5 – load style sheet and JavaScript
//load style css
internal void LoadCss()
{
//prevent loading multiple css style sheet
HtmlControl css = null;
if (Session["MultipleSelectionDDLCSSID"] != null)
{
css = Page.Header.FindControl(
Session["MultipleSelectionDDLCSSID"] as string) as HtmlControl;
}
if (css == null)
{
//load the style sheet
HtmlLink cssLink = new HtmlLink();
cssLink.ID = "MultipleSelectionDDLCSSID";
cssLink.Href = ResolveUrl(
"~/MS_Control/MultipleSelectionDDLCSS.css");
cssLink.Attributes.Add("rel", "stylesheet");
cssLink.Attributes.Add("type", "text/css");
// Add the HtmlLink to the Head section of the page.
Page.Header.Controls.Add(cssLink);
Session["MultipleSelectionDDLCSSID"] = cssLink.ID;
}
}
//load the javascript
internal void LoadJScript()
{
ClientScriptManager script = Page.ClientScript;
//prevent duplicate script
if (!script.IsStartupScriptRegistered(this.GetType(),
"MultipleSelectionDDLJS"))
{
script.RegisterStartupScript(this.GetType(),
"MultipleSelectionDDLJS",
"<script type='text/javascript' src='"+ResolveUrl(
"~/MS_Control/MultipleSelectionDDLJS.js") +"'></script>");
}
} Listing 6 --
MS_With_UserControl_and_Masterpage.aspx
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="Label1" CssClass="regularText" runat="server" Text="Month:" />
<uc1:MultipleSelection ID="MultipleSelection1" runat="server" />
Listing 7 --
MS_With_UserControl_and_Masterpage.aspx.cs - How to bind the data
DataTable dt = new DataTable();
DataColumn dcValue = new DataColumn("Value", typeof(string));
DataColumn dcText = new DataColumn("Text", typeof(string));
dt.Columns.Add(dcText);
dt.Columns.Add(dcValue);
DataRow dr;
dr = dt.NewRow();
dr["Text"] = "January";
dr["Value"] = "m1";
dt.Rows.Add(dr);
…
//datasource, dataTextField, dataValueField
MultipleSelection1.CreateCheckBox(dt, "Text", "Value");Listing 8 -- How to set selected value
MultipleSelection1.selectedIndex = "1,5,7";
Listing 9 -- How to get the SelectedInde,
SelectedValue, SelectedText
MultipleSelection1.sText
MultipleSelection1.sValue
MultipleSelection1.selectedIndex
