Earlier when we didn’t Ajax we were using JavScript to make Mutually exclusive Check boxes. Otherwise you have to use radio buttons. So make it easier for the .NET developers Microsoft introduced MutuallyExclusiveCheckBoxExtender in AJAX.
It required hardly few lines of codes and it is very easy and simple to understand. In this article I am taking you through this interesting control which you can use in your application whenever you require Mutually Exclusive CheckBox.
First we will design a sample webpage by adding few check boxes. Your sample page design may look like below,
Once you add the chekboxes we will add MutuallyExclusiveCheckBoxExtender for each checkboxes and configure the required property.
You can find MutuallyExclusiveCheckBoxExtender in your AjaxControl ToolKit.
We need to have only couple configurations in this regard. First one is TargetControlID and second one is the Key to group the check boxes.
TargetControlID of each filtered extender must be unique and have to provide each CheckBox Name. Key will be the group name. In our case I have give first four check boxes which I wanted to group as “Shirt” and the second group name as “Shoe”
So your final code may look like below.
That’s all we require here. Just press F5 and see the result.
Just a simple drag and drop and then configure two simple property… your mutually exclusive chek boxes are ready….how simple!!!
It required hardly few lines of codes and it is very easy and simple to understand. In this article I am taking you through this interesting control which you can use in your application whenever you require Mutually Exclusive CheckBox.
First we will design a sample webpage by adding few check boxes. Your sample page design may look like below,
Once you add the chekboxes we will add MutuallyExclusiveCheckBoxExtender for each checkboxes and configure the required property.
You can find MutuallyExclusiveCheckBoxExtender in your AjaxControl ToolKit.
We need to have only couple configurations in this regard. First one is TargetControlID and second one is the Key to group the check boxes.
TargetControlID of each filtered extender must be unique and have to provide each CheckBox Name. Key will be the group name. In our case I have give first four check boxes which I wanted to group as “Shirt” and the second group name as “Shoe”
So your final code may look like below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MutuallyExclusiveTextBox.aspx.cs" Inherits="DotnetGalaxy.MutuallyExclusiveTextBox" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 100%;
}
.auto-style2 {
width: 162px;
}
.auto-style4 {
width: 83px;
}
.auto-style5 {
width: 60px;
}
.auto-style6 {
width: 63px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<br />
<table class="auto-style1">
<tr>
<td class="auto-style2">
<asp:Label ID="Label1" runat="server" Text="Select Your Shirt Size:"></asp:Label>
</td>
<td class="auto-style6">
<asp:CheckBox ID="CheckBox1" runat="server" Text="Small" />
</td>
<td class="auto-style4">
<asp:CheckBox ID="CheckBox2" runat="server" Text="Medium" />
</td>
<td class="auto-style5">
<asp:CheckBox ID="CheckBox3" runat="server" Text="Large" />
</td>
<td>
<asp:CheckBox ID="CheckBox4" runat="server" Text="Extra Large" />
</td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="Label2" runat="server" Text="Select Your Shoe Size:"></asp:Label>
</td>
<td class="auto-style6">
<asp:CheckBox ID="CheckBox5" runat="server" Text="Six" />
</td>
<td class="auto-style4">
<asp:CheckBox ID="CheckBox6" runat="server" Text="Seven" />
</td>
<td class="auto-style5">
<asp:CheckBox ID="CheckBox7" runat="server" Text="Eight" />
</td>
<td>
<asp:CheckBox ID="CheckBox8" runat="server" Text="Nine" />
</td>
</tr>
</table>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender1" runat="server" Key="Shirt" TargetControlID="CheckBox1"></ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender2" runat="server" Key="Shirt" TargetControlID="CheckBox2"></ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender3" runat="server" Key="Shirt" TargetControlID="CheckBox3"></ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender4" runat="server" Key="Shirt" TargetControlID="CheckBox4"></ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender5" runat="server" Key="Shoe" TargetControlID="CheckBox5"></ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender6" runat="server" Key="Shoe" TargetControlID="CheckBox6"></ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender7" runat="server" Key="Shoe" TargetControlID="CheckBox7"></ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender8" runat="server" Key="Shoe" TargetControlID="CheckBox8"></ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
<br />
</div>
</form>
</body>
</html>
Just a simple drag and drop and then configure two simple property… your mutually exclusive chek boxes are ready….how simple!!!
No comments:
Post a Comment