Tips&Tricks

ASP.NET AJAX Modal Popup Control with CSS Rounded Corners

Vincent Maverick Durano — Fri, 21 Jan 2011 15:55:19 GMT

I was playing around with CSS and ASP.NET AJAX Modal Popup Control and wanted to have a popup that has a rounded corner outer shadows on it without using images. After searching the web for an existing solution I found this link and tried to apply it on my modal. Luckily I was able to make it work. Here's the whole code for my experiment:

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   2:  <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

   3:  <html xmlns="http://www.w3.org/1999/xhtml">

   4:  <head runat="server">

   5:      <title></title>

   6:      <style type="text/css">

   7:       .modal-inner-wrapper

   8:       {

   9:          width:340px;

  10:          height:340px;

  11:          background-color:Gray;

  12:       }

  13:       .modal-inner-wrapper .content

  14:       {

  15:          width:320px; height:320px; background-color:#FFFFFF; border: solid 1px Gray; z-index:9999;

  16:          float:right; margin-top:10px; margin-right:10px;

  17:       }

  18:       .modal-inner-wrapper .content .close

  19:       {

  20:           float:right;

  21:       }

  22:       .modal-inner-wrapper .content .body

  23:       {

  24:           margin-top:20px;

  25:       }

  26:       .rounded-corners

  27:       {

  28:          /*FOR OTHER MAJOR BROWSERS*/

  29:          -moz-border-radius: 5px;

  30:          -webkit-border-radius: 5px;

  31:          -khtml-border-radius: 5px;

  32:          border-radius: 5px;

  33:          /*FOR IE*/

  34:          behavior: url(border-radius.htc);

  35:      }

  36:      .rel {

  37:          position: relative;

  38:          z-index: inherit;

  39:          zoom: 1; /* For IE6 */

  40:      }

  41:      .modal-bg{

  42:          background-color:Gray;

  43:          filter:alpha(opacity=50);

  44:          opacity:0.6;

  45:          z-index:999;

  46:      }

  47:      .modal{

  48:          position:absolute;

  49:      }

  50:      </style>

  51:  </head>

  52:  <body>

  53:      <form id="form1" runat="server">

  54:      <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

  55:      <asp:Button ID="Button1" runat="server" Text="Show Modal" />

  56:          <asp:Panel ID="pnlModal" runat="server" CssClass="modal">

  57:              <div class="rel">

  58:                  <div class="modal-inner-wrapper rounded-corners">

  59:                      <div class="content rounded-corners">

  60:                              <div class="close">

  61:                                  <asp:LinkButton ID="btnClose" runat="server">close</asp:LinkButton>

  62:                              </div>

  63:                              <div class="body">

  64:                                  <p>I want beer!</p>

  65:                              </div>

  66:                      </div>

  67:                  </div>

  68:              </div>

  69:          </asp:Panel>

  70:      <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modal-bg"

                                   TargetControlID="Button1"

                                   PopupControlID="pnlModal"

                                   CancelControlID="btnClose" >

  71:      </asp:ModalPopupExtender>

  72:      </form>

  73:  </body>

  74:  </html>

Note that you have to download the border-radius.htc here in order for this rounded corners to work in IE. You can find more details here: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

Notes: If you want to change the width and height of the modal-inner-wrapper then be sure also to change the width and height of the modal-inner-wrapper content. You can also adjust the margins of the rounded corner outer shadow by setting the values of the margin-top and margin-right css properties. You can also modify the whole css to conform with your needs.

Here's the sample output below:

Firefox 3.6.10

Chrome 8.0.552

IE 8

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,TipsTricks

FAQ: GridView Calculation with JavaScript - Formatting and Validation

Vincent Maverick Durano — Thu, 09 Dec 2010 09:17:12 GMT

In my previous post here we've talked about how to calculate the sub-totals and grand total in GridView using JavaScript. In this post I'm going take more step further and will demonstrate how are we going to format the totals into a currency and how to validate the input that would only allow you to enter a whole number in the quantity TextBox.

Here are the code blocks below:

ASPX Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript">
      
        function CalculateTotals() {
            var gv = document.getElementById("<%= GridView1.ClientID %>");
            var tb = gv.getElementsByTagName("input");
            var lb = gv.getElementsByTagName("span");

            var sub = 0;
            var total = 0;
            var indexQ = 1;
            var indexP = 0;
            var price = 0;

            for (var i = 0; i < tb.length; i++) {
                if (tb[i].type == "text") {
                    ValidateNumber(tb[i]);

                    price = lb[indexP].innerHTML.replace("$", "").replace(",", "");
                    sub = parseFloat(price) * parseFloat(tb[i].value);
                    if (isNaN(sub)) {
                        lb[i + indexQ].innerHTML = "0.00";
                        sub = 0;
                    }
                    else {
                        lb[i + indexQ].innerHTML = FormatToMoney(sub, "$", ",", "."); ;
                    }
                   
                    indexQ++;
                    indexP = indexP + 2;

                    total += parseFloat(sub);
                }
            }

            lb[lb.length - 1].innerHTML = FormatToMoney(total, "$", ",", ".");
        }

        function ValidateNumber(o) {
            if (o.value.length > 0) {
                o.value = o.value.replace(/[^\d]+/g, ''); //Allow only whole numbers
            }
        }
        function isThousands(position) {
            if (Math.floor(position / 3) * 3 == position) return true;
            return false;
        };

        function FormatToMoney(theNumber, theCurrency, theThousands, theDecimal) {
            var theDecimalDigits = Math.round((theNumber * 100) - (Math.floor(theNumber) * 100));
            theDecimalDigits = "" + (theDecimalDigits + "0").substring(0, 2);
            theNumber = "" + Math.floor(theNumber);
            var theOutput = theCurrency;
            for (x = 0; x < theNumber.length; x++) {
                theOutput += theNumber.substring(x, x + 1);
                if (isThousands(theNumber.length - x - 1) && (theNumber.length - x - 1 != 0)) {
                    theOutput += theThousands;
                };
            };
            theOutput += theDecimal + theDecimalDigits;
            return theOutput;
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:gridview ID="GridView1"  runat="server"  ShowFooter="true" AutoGenerateColumns="false">
        <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
        <asp:BoundField DataField="Description" HeaderText="Item Description" />
        <asp:TemplateField HeaderText="Item Price">
            <ItemTemplate>
                <asp:Label ID="LBLPrice" runat="server" Text='<%# Eval("Price","{0:C}") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>
            </ItemTemplate>
            <FooterTemplate>
                <b>Total Amount:</b>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Sub-Total">
            <ItemTemplate>
                <asp:Label ID="LBLSubTotal" runat="server" ForeColor="Green" Text="0.00"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="LBLTotal" runat="server" ForeColor="Green" Font-Bold="true" Text="0.00"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:gridview>
    </form>
</body>
</html>

Code Behind Source:

public partial class GridCalculation : System.Web.UI.Page
{
        private void BindDummyDataToGrid() {

            DataTable dt = new DataTable();
            DataRow dr = null;

            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Description", typeof(string)));
            dt.Columns.Add(new DataColumn("Price", typeof(decimal)));

            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Description"] = "Nike";
            dr["Price"] = "1000";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 2;
            dr["Description"] = "Converse";
            dr["Price"] = "800";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 3;
            dr["Description"] = "Adidas";
            dr["Price"] = "500";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 4;
            dr["Description"] = "Reebok";
            dr["Price"] = "750";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 5;
            dr["Description"] = "Vans";
            dr["Price"] = "1100";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 6;
            dr["Description"] = "Fila";
            dr["Price"] = "200";
            dt.Rows.Add(dr);


            //Bind the Gridview
            GridView1.DataSource = dt;
            GridView1.DataBind();

        }

        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                BindDummyDataToGrid();
            }
        }
 }

Running the code above will display something like this:

On initial load

After entering the quantity in the TextBox

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,C#,ADO.NET,JavaScript,GridView

Tip/Trick: Fixing GridLines Border Color in IE8

Vincent Maverick Durano — Thu, 07 Oct 2010 12:38:29 GMT

There are times that we need to set the border color of the GridView just like in my case, I was told to set the border color of GridView to a particular color instead of the default black. What I did is simply use the BorderColor property of the GridView and set it declaratively like below:

<asp:GridView ID="GridView1" runat="server" GridLines="Both" BorderColor="Red"><asp:/GridView>

Here's how it looks when we run that one in the browser.

Firefox 3.5

Safari 5

IE 8

Noticed that in IE8 it looks stranged.This is because in IE8 the declarative BorderColor attribute only adds an inline style declaration which only applies to the table itself and not on individual cells.

The Workaround

Option 1: Using CSS

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
       table.grid{
           border-collapse:collapse;
           border:solid 1px Red;
        }
        table.grid td, th{
           border:solid 1px Red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" GridLines="Both" CssClass="grid">
    </asp:GridView>
    </form>
</body>
</html>

Option 2: Adding BorderColor Attribute at the Code-Behind

protected void Page_Load(object sender, EventArgs e){

GridView1.Attributes.Add("bordercolor","Red");

}

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,TipsTricks,GridView

Master Page and JQuery: Solving Object Expected Error

Vincent Maverick Durano — Wed, 06 Oct 2010 11:44:33 GMT

I was working with a project that uses the concept of master page. Within the master page I have a bunch of UserControls for some specific purposes and one of the UserControl is for the site dynamic menu. The menu was basically built using JQuery and CSS. The menu works fine if you are using it as an anonymous user but if you logged in as authorize user the menu will no longer work for some odd reasons and produces the following script error below in the browser:

Message: Object expected
Line: 122
Char: 5
Code: 0
URI: http://domain/page/auth/home.aspx

Here's how I referenced the JQuery script within the UserControl:

Unfortunately, I cannot use tilde (~) since it doesn’t work for standard html elements, such as images, css and JavaScript. So I tried using the following code below but to no avail. It will still produces the same error when navigating through secured pages.

<script src="../../scripts/jquery_4.1.js" type="text/javascript"></script>

The Solution

Luckily, ASP.NET's Control class provides the handy ResolveUrl method that lets you easily use and parse relative URLs. ResolveUrl fixes up urls that start with ~ and puts the applications relative root path in its place. So to fix the issue you can use ResolvedURL for referencing the path like:

<script src='<%= Page.ResolveUrl("~/scripts/jquery_4.1.js")%>' type="text/javascript"></script>

That's it! I hope you'll find this post useful!

Technorati Tags: ASP.NET,JQuery,Master Page,TipsTricks

GridView BoundField Column: Accessing TextBox Control on Edit Mode

Vincent Maverick Durano — Wed, 14 Jul 2010 15:42:42 GMT

If you are working with GridView BoundField Columns and wanted to access the TextBox control on row editing for whatever reasons (which means when you click on the Edit link) then below is an example on how to do it.

Let say for example you need to change the BackColor of the TextBox on edit mode. So at PreRender event of GridView, you can do something like this:

protected void GridView1_PreRender(object sender, EventArgs e) { 
            if (this.GridView1.EditIndex != -1) { 
                TextBox tb = (TextBox)GridView1.Rows[GridView1.EditIndex].Cells[1].Controls[0]; 
                tb.BackColor = System.Drawing.Color.Blue; 
            } 
}

That's simple! I hope someone find this post useful!

Technorati Tags: ASP.NET,GridView,TipsTricks

Display animated gif before Iframe content is loaded

Vincent Maverick Durano — Tue, 13 Jul 2010 12:31:22 GMT

If you are working with iframe in which the content takes time to load, you may want to display a simple loading indicator to the end users instead of letting the users see a blank screen in the page. To do this, here's one way on how to implemet it using javascript.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript">
       function hideLoading() {
            document.getElementById('divLoading').style.display = "none";
            document.getElementById('divFrameHolder').style.display = "block";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divLoading">
        <img src="images/ajax-loader.gif" alt="" />
    </div>
    <div id="divFrameHolder" style="display:none">
        <iframe src="http://asp.net" onload="hideLoading()" frameborder="0">

        </iframe>
    </div>
    </form>
</body>
</html>

What happened in the code above is we hide the container of Iframe (divFrameHolder) by setting the style to *display:none*. This is to ensure that the Iframe will not be seen if its content is not yet loaded on load of the page and instead show the animated gif (loading indicator). We then call the javascript method *hideLoading()* at onload event of Iframe to hide the animated gif when the content of the iframe is loaded.

I hope someone find this post useful!

Technorati Tags: JavaScript,ASP.NET,TipsTricks

JQuery Tab: Retain Selected Tab Across Postbacks in ASP.NET

Vincent Maverick Durano — Fri, 09 Jul 2010 08:22:49 GMT

Few months ago I've been seeing many users in the forums asking how to retain the selected tab in JQuery Tab across postbacks, so I've decided to write this post as reference to others who might encounter this kind of scenario.

To describe the scenario, lets go a head and create the HTML mark up and construct the tabs. Here’s the markup below:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>JQuery Demo</title> 
       <link href="jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />

</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="tabContainer"> 
       <ul> 
         <li><a href="#tab0"><span>FIRST</span></a></li> 
         <li><a href="#tab1"><span>SECOND</span></a></li> 
         <li><a href="#tab2"><span>THIRD</span></a></li> 
       </ul> 

       <div id="tab0" > 
               <asp:Button ID="Button1" runat="server" 
                           Text="First Tab Button" /> 
       </div> 
       <div id="tab1"> 
               <asp:Button ID="Button2" runat="server" 
                           Text="Second Tab Button" /> 
       </div> 
       <div id="tab2"> 
               <asp:Button ID="Button3" runat="server" 
                           Text="Third Tab Button" /> 
       </div> 
    </div> 
    </form> 
</body> 
</html>

As you can see,there’s nothing fancy about the markup above. Running the code above will display 3 tabs on in the page as shown below.

The above set up is fine if you are only displaying information within each tabs, but if you are going to place a server control ( like Button,DropDownList,LinkButton, etc.) that creates a postback then that is where the issue comes in. So for example you are at the second tab and you click on the button within that tab, you will notice that after it postbacks the selected tab index will reset to default tab which in this case in the first tab.

Why?

Basically, the reason for this is that every time you do a postback to the server the page will be recreated and script you created for generating the tab at the client will be processed again and thus the tabs will revert back to its default settings.

The Workaround

As a workaround, I’m going to use a HiddenField server control for storing the selected tabIndex so that when a server control creates a postback, we can easily set the tabIndex at the server (code behind) and reference the value at the client side (Javascript) for retaining the selected tab.

Here are the code blocks below:

ASPX:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>JQuery Demo</title> 
       <link href="jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />

$("#tabContainer").tabs();

var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val();

$("#tabContainer").tabs({ selected: currTab });

});

</script>

</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:HiddenField runat="server" ID="HFCurrTabIndex" /> 

    <div id="tabContainer"> 
       <ul>
         <li><a href="#tab0"><span>FIRST</span></a></li>
         <li><a href="#tab1"><span>SECOND</span></a></li>
         <li><a href="#tab2"><span>THIRD</span></a></li>
       </ul>

       <div id="tab0" >
           <asp:Button ID="Button1" runat="server" 
                       Text="First Tab Button"
                       onclick="Button1_Click" />
       </div>

       <div id="tab1">
           <asp:Button ID="Button2" runat="server" 
                       Text="Second Tab Button"
                       onclick="Button2_Click" />
       </div>

       <div id="tab2">
           <asp:Button ID="Button3" runat="server" 
                       Text="Third Tab Button"
                       onclick="Button3_Click" />

       </div>
    </div>
    </form> 
</body> 
</html>

CODE BEHIND:

public partial class JqueryTabDemo : System.Web.UI.Page 
{ 
       private enum TabIndex{ 
           DEFAULT = 0,
           ONE = 1,
           TWO = 2,
           THREE = 3
           // you can as many as you want here
       } 
       private void SetSelectedTab(TabIndex tabIndex) { 
           HFCurrTabIndex.Value = ((int)tabIndex).ToString();
       } 

       protected void Page_Load(object sender, EventArgs e) { 

       } 

       protected void Button1_Click(object sender, EventArgs e) { 
           SetSelectedTab(TabIndex.DEFAULT);
       } 

       protected void Button2_Click(object sender, EventArgs e) { 
           SetSelectedTab(TabIndex.ONE);
       } 

       protected void Button3_Click(object sender, EventArgs e) { 
           SetSelectedTab(TabIndex.TWO);
       } 
}

As you can see, the code above is very straight forward and self explanatory. The most important part there is to call the SetSelectedTab() method in the event that causes a postback to the server.

That simple! I hope someone find this post useful!

Technorati Tags: JQuery,ASP.NET,TipsTricks

MaskEditExtender and ClearMaskOnLostFocus

Vincent Maverick Durano — Thu, 01 Jul 2010 15:04:42 GMT

I was playing around with ASPNET AJAX MaskEditExtender control and ASPNET Validation controls when I was working with a profile page and doing some input validations. Everything seems to be fine until I was told to always retain the phone mask format in the TextBox.

Here’s my code for Phone number masking:

<asp:TextBox ID="TXTPhoneNumber" runat="server"  MaxLength="13" ValidationGroup="GroupA"  />
                      
    <asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
                       TargetControlID="TXTPhoneNumber"
                       ClearMaskOnLostFocus ="false"
                       MaskType="None"
                       Mask="(999)999-9999" 
                       MessageValidatorTip="true"
                       InputDirection="LeftToRight"
                       ErrorTooltipEnabled="True">
  </asp:MaskedEditExtender>
      
  <asp:MaskedEditValidator ID="MaskedEditValidator1" runat="server"
                        ValidationGroup="GroupA"
                        ControlToValidate="TXTPhoneNumber"
                        ControlExtender="MaskedEditExtender1"
                        Display="Dynamic" IsValidEmpty="true"
                        ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
                        InvalidValueMessage="Invalid Phone Number!" Text="*"
                        ErrorMessage="Home Phone">
</asp:MaskedEditValidator>

Running the code above will keep the mask format as it is. Now the problem is that when I pre-populate the phone TextBox, the left most digit will get cut off and I find it very frustrating. I don’t know if this a *bug* or something.

The Workaround:

To fix the issue, what I did is to get rid of the ClearMaskOnLostFocus property in the markup and instead set it via JavaScript. You may also notice in the code below that I have also use a JavaScript for setting the default mask on load of the page.

Here’s the full code below:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript">
       function checkMask() {
           var TXTPhone = document.getElementById('<%= TXTPhoneNumber.ClientID %>');
           if (TXTPhone.value.length > 0) {
               TXTPhone.value = '(' + TXTPhone.value.slice(0, 3) + ')' + TXTPhone.value.slice(3, 6) + '-' + TXTPhone.value.slice(6, 10);
           }
           else {
               TXTPhone.value = '(___)___-____';
           }
       }

       function setMask() {

           var mee = $find("MEE");
           mee.set_ClearMaskOnLostFocus(false);
       }
    </script>
</head>
<body onload="checkMask();">
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
    <asp:TextBox ID="TXTPhoneNumber" runat="server"  MaxLength="13" ValidationGroup="GroupA" onblur="setMask();"  />
                      
    <asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TXTPhoneNumber" BehaviorID="MEE"
                       MaskType="None"
                       Mask="(999)999-9999" 
                       MessageValidatorTip="true"
                       InputDirection="LeftToRight"
                       ErrorTooltipEnabled="True">
  </asp:MaskedEditExtender>
      
  <asp:MaskedEditValidator ID="MaskedEditValidator1" runat="server"   ValidationGroup="GroupA"
                        ControlToValidate="TXTPhoneNumber"
                        ControlExtender="MaskedEditExtender1"
                        Display="Dynamic" IsValidEmpty="true"
                        ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
                        InvalidValueMessage="Invalid Phone Number!" Text="*"
                        ErrorMessage="Home Phone">
    </asp:MaskedEditValidator>

</form>
</body>
</html>

That’s it! I hope someone find this post useful!

Technorati Tags: ASP.NET,ASP.NET AJAX,JavaScript

Highlight Multiple Dates in Calendar and Make it Selectable

Vincent Maverick Durano — Mon, 01 Feb 2010 08:16:51 GMT

Recently, one of the members at forums.asp.net is asking how to highlight multiple dates in the ASP Calendar and make it selectable and make rest of the un-highlighted dates disabled. So I thought of sharing the solution that I have provided on that thread as a reference to others who might need it.

Here's the code block below:

public partial class _Default : System.Web.UI.Page
{
private List<DateTime> listDates;
protected void Page_Load(object sender, EventArgs e)
{
//Suppose that you have the following list of dates below
listDates = new List<DateTime>();
listDates.Add(DateTime.Now);
listDates.Add(DateTime.Now.AddDays(1));
listDates.Add(DateTime.Now.AddDays(5));
}
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
//Set Default properties
e.Day.IsSelectable = false;
e.Cell.BackColor = System.Drawing.Color.Gray;
//Now loop through the list of dates and make it
//Selectable
foreach (DateTime d in listDates) {
Calendar1.SelectedDates.Add(d);
if (e.Day.IsSelected) {
e.Cell.BackColor = System.Drawing.Color.Green;
e.Day.IsSelectable = true;
}
}
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
//Print the selected date
Response.Write("You have selected: " + Calendar1.SelectedDate.ToShortDateString());
}
}

VB.NET

Public Partial Class _Default
Inherits System.Web.UI.Page
Private listDates As List(Of DateTime)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
'Suppose that you have the following list of dates below
listDates = New List(Of DateTime)()
listDates.Add(DateTime.Now)
listDates.Add(DateTime.Now.AddDays(1))
listDates.Add(DateTime.Now.AddDays(5))
End Sub
Protected Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As DayRenderEventArgs)
'Set Default properties
e.Day.IsSelectable = False
e.Cell.BackColor = System.Drawing.Color.Gray
'Now loop through the list of dates and make it
'Selectable
For Each d As DateTime In listDates
Calendar1.SelectedDates.Add(d)
If e.Day.IsSelected Then
e.Cell.BackColor = System.Drawing.Color.Green
e.Day.IsSelectable = True
End If
Next
End Sub
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
'Print the selected date
Response.Write("You have selected: " & Calendar1.SelectedDate.ToShortDateString())
End Sub
End Class

As you can see, the code above is very straight forward and self explanatory. Hope you will find this example useful!

Technorati Tags: ASP.NET,C#,TipsTricks

Limit the Number to be Selected in the ListBox control - (Server Side way)

Vincent Maverick Durano — Tue, 24 Nov 2009 06:52:53 GMT

One of the members in the forum (forums.asp.net) is asking how to limit the number of selected items in the ListBox and so contributors (including me) gave the OP (Original Poster) different ideas on how to validate it. Some of them provided solution using pure JavaScripts and a mixture of code behind and JavaScript. However the OP doesn’t want to use JavaScript validation for some reason, so I decided to post the solution that I have provided on that thread as a reference to others.

Here it is:

ASPX:

</head>

<body>

<div>

<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" Height="109px" SelectionMode="Multiple" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged" Width="141px">

<asp:ListItem >A</asp:ListItem>

<asp:ListItem >B</asp:ListItem>

<asp:ListItem >C</asp:ListItem>

<asp:ListItem >D</asp:ListItem>

<asp:ListItem >E</asp:ListItem>

<asp:ListItem >F</asp:ListItem>

</asp:ListBox>

</div>

</form>

</body>

</html>

CODE BEHIND:

protected void Page_Load(object sender, EventArgs e) {

if (!Page.IsPostBack)

{

ListBox1.ClearSelection();

}

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)

{

int count = 0;

int limit = 0;

int lastSelectedIndex = 0;

if(ViewState["lastSelectedIndex"] != null){

lastSelectedIndex = int.Parse(ViewState["lastSelectedIndex"].ToString());

ViewState["lastSelectedIndex"] = lastSelectedIndex;

}

else{

lastSelectedIndex = ListBox1.SelectedIndex;

}

for (int i = 0; i < ListBox1.Items.Count; i++) {

if (ListBox1.Items[i].Selected) {

if (ViewState["CountLimit"] != null) {

count++;

ViewState["CountLimit"] = count;

limit = (int)ViewState["CountLimit"];

}

else {

count++;

ViewState["CountLimit"] = count;

}

if (limit > 3) // Selected Item Limit is up to 3

{

Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowBox", "alert('You are only allowed to Select 3 items!');", true);

ListBox1.Items[lastSelectedIndex].Selected = false;

}

That's it! Hope you will find this example useful!

Technorati Tags: ASP.NET,TipsTricks