I really appreciate your help. I really tried hard to modify my SP to boxlist or checkboxlist but I didnt get it right. Please if you have time tomorrow to help I would greatly appreciate it. Here is the complete SP File:
<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeBehind="Default.aspx.cs" Inherits="PledgeReport.Default" %>
<!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>OSCC-Campaign Director | Reports | Amount Stats</title>
<!--
<script type="text/javascript" src="Scripts/jquery-2.1.1.js" />
<script type="text/javascript" src="Scripts/jquery-2.1.1-vsdoc.js" />
<script type="text/javascript" src="Scripts/jquery-ui-1.10.4.js" />
<link rel="stylesheet" href="Content/themes/base/jquery-ui.css" />
-->
<!-- DatePicker -->
<!--
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
-->
<link rel="Stylesheet" href="Content/themes/smoothness/jquery-ui-1.10.4.custom.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Spinner: Time -->
<script type="text/javascript" src="Content/external/jquery.mousewheel.js"></script>
<script type="text/javascript" src="Content/external/globalize.js"></script>
<script type="text/javascript" src="Content/external/globalize.culture.de-DE.js"></script>
<script type="text/javascript" src="Content/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="Content/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="Content/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="Content/ui/jquery.ui.spinner.js"></script>
<script type="text/javascript">
var h_Error = '<%= m_Error %>';
var h_Culture = '<%= m_Culture %>';
var h_FormatDate = '<%= m_FormatDate_jQ %>';
var h_StartDate = '<%= m_StartDate %>';
var h_StartTime = '<%= m_StartTime %>';
var h_EndDate = '<%= m_EndDate %>';
var h_EndTime = '<%= m_EndTime %>';
var h_Data = '<%= m_Data %>';
$(function ()
{
$("#datePickerStart").datepicker({
dateFormat: h_FormatDate,
defaultDate: "+0"
});
});
$(function ()
{
$("#datePickerEnd").datepicker({
dateFormat: h_FormatDate,
defaultDate: "+0"
});
});
$.widget("ui.timespinner", $.ui.spinner, {
options: {
// seconds
step: 60 * 1000,
// hours
page: 60
},
_parse: function (value)
{
if (typeof value === "string")
{
// already a timestamp
if (Number(value) == value)
{
return Number(value);
}
return +Globalize.parseDate(value);
}
return value;
},
_format: function (value)
{
return Globalize.format(new Date(value), "t");
}
});
$(function ()
{
$("#spinnerStart").timespinner({ culture: h_Culture });
});
$(function ()
{
$("#spinnerEnd").timespinner({ culture: h_Culture });
});
function SetDefaults()
{
if (h_StartDate != null && h_StartDate != "")
{
$("#datePickerStart").datepicker("setDate", h_StartDate);
}
if (h_EndDate != null && h_EndDate != "")
{
$("#datePickerEnd").datepicker("setDate", h_EndDate);
}
if (h_StartTime != null && h_StartTime != "")
{
document.getElementById("spinnerStart").value = h_StartTime
}
else
{
document.getElementById("spinnerStart").value = "12:00 AM";
}
if (h_EndTime != null && h_EndTime != "")
{
document.getElementById("spinnerEnd").value = h_EndTime
}
else
{
document.getElementById("spinnerEnd").value = "12:00 AM";
}
$("#spinnerStart").timespinner("option", "culture", h_Culture);
$("#spinnerEnd").timespinner("option", "culture", h_Culture);
}
function preSubmit()
{
var dtStart = document.getElementById("datePickerStart").value;
var dtEnd = document.getElementById("datePickerEnd").value;
var timeStart = document.getElementById("spinnerStart").value;
var timeEnd = document.getElementById("spinnerEnd").value;
var dStart = new Date(dtStart + " " + timeStart);
var dEnd = new Date(dtEnd + " " + timeEnd);
//alert("time start: " + timeStart );
var l_Status = document.getElementById("lblStatus");
if (dStart > dEnd)
{
if (l_Status != null)
{
l_Status.innerHTML = "'Start Time' cannot be greater then 'End Time'";
}
return false;
}
else
{
if (l_Status != null)
{
l_Status.innerHTML = "";
}
ShowLoading(true);
return true;
}
}
function doExport()
{
var l_Status = '';
if (h_Data == "0")
{
l_Status = document.getElementById("lblStatus");
if (l_Status != null)
{
l_Status.innerHTML = "Nothing to export.";
}
return false;
}
else
{
l_Status = document.getElementById("lblStatus");
if (l_Status != null)
{
l_Status.innerHTML = "";
}
return true;
}
}
function showCulture()
{
//show default value
var culture = $("#spinnerStart").timespinner("option", "culture");
alert("Culture: " + culture);
//set new value and show
$("#spinnerStart").timespinner("option", "culture", "de-DE");
culture = $("#spinnerStart").timespinner("option", "culture");
alert("Culture: " + culture);
}
function ShowLoading(cValue)
{
if (cValue)
{
document.getElementById("spanLoading").style.visibility = "visible";
document.getElementById("spanLoading").style.display = "inline";
}
else
{
document.getElementById("spanLoading").style.visibility = "hidden";
document.getElementById("spanLoading").style.display = "none";
}
}
</script>
<style type="text/css">
.auto-style1 {
width: 159px;
}
.auto-style2 {
width: 78%;
}
</style>
</head>
<body onload="SetDefaults();">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Enabled="False" ontick="Timer1_Tick">
</asp:Timer>
<div id="divEntirePage" runat="server">
<table id="tblButtons" border="0" width="90%" cellpadding="3">
<tr>
<td style=" width: 100px;">
<asp:Button ID="btnCalculate" runat="server" Text="Caclulate" OnClick="btnCalculate_Click"
OnClientClick="return preSubmit(); " />
</td>
<td style=" width: 100px;">
<asp:Button ID="btnExport" runat="server" Text="Export" OnClick="btnExport_Click"
OnClientClick="return doExport();" />
</td>
<td>
<!-- working image -->
<!--
<span id="spanLoading" style="visibility: hidden; display: none;">
<span id="spanLoading" >
-->
<span id="spanLoading" style="visibility: hidden; display: none;">
<img id="imgLoading" alt="Loading..." src="Images/ajax-loader.gif" />
</span>
</td>
<td>
<asp:Label ID="lblStatus" runat="server" Font-Size="Medium" ForeColor="Red" />
</td>
</tr>
</table>
<table id="tblDateTime" border="0" width="90%" cellpadding="3" style="font-size:small">
<tr>
<td style="background-color: #5D7B9D; font-size: medium; font-weight: bold; color: white; width: 100px ">
Start Date:
</td>
<td style=" width: 100px;">
<input type="text" id="datePickerStart" name="datePickerStart" size="10" tabindex="1" runat="server"/>
</td>
<td style="font-size: x-small; text-align: left; width: 100px; ">
<input id="spinnerStart" name="spinnerStart" value="12:00 AM" size="10" tabindex="2" />
</td>
<td style="background-color: #5D7B9D; font-size: medium; font-weight: bold; color: white; width: 100px;">
End Date:
</td>
<td style=" width: 100px;">
<input type="text" id="datePickerEnd" name="datePickerEnd" size="10" tabindex="3" runat="server" />
</td>
<td style="font-size: x-small">
<input id="spinnerEnd" name="spinnerEnd" value="12:00 AM" size="10" tabindex="4" />
</td>
</tr>
</table>
<table id="tblCampaignList" border="0" cellpadding="3" class="auto-style2">
<tr>
<td style="background-color: #5D7B9D; font-size: medium; font-weight: bold; color: white; width: 100px">
Campaigns:
</td>
<td>
<asp:DropDownList ID="ddlCampaigns" runat="server" TabIndex="6"
AutoPostBack="True" onselectedindexchanged="ddlCampaigns_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td style="background-color: #5D7B9D; font-size: medium; font-weight: bold; color: white; width: 100px">Segment:
</td>
<td>
<asp:DropDownList ID="ddlSegments" runat="server" TabIndex="7">
</asp:DropDownList>
</td>
</tr>
</table>
<br />
<asp:GridView ID="gvSummary" runat="server" CellPadding="4" Font-Size="Medium" ForeColor="#333333"
GridLines="None" Width="95%" >
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<br />
<br />
<asp:GridView ID="GridView1" runat="server" CellPadding="4" Font-Size="Medium" ForeColor="#333333"
GridLines="None" Width="95%" ondatabound="GridView1_DataBound" >
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<br />
<br />
<asp:GridView ID="gvColumnNames" runat="server" Visible="False">
</asp:GridView>
<asp:GridView ID="gvColumnNamesSummary" runat="server" Visible="False">
</asp:GridView>
<br />
</div>
</div>
</form>
</body>
</html>
Thank you very much