I have a web form where the user chooses a date range and it binds the data to a grid view. When I run the web form, the title of each grid as well as its option to export as an excel file is shown. Is there a way in HTML to hide those elements until the user selects the data range and the DataGrids appear? EXAMPLE
The "Report Text" is the title of each datagrid. Is there a way to hide the export buttons and titles until the user submits the date? The date fields is a javascript datepicker I am trying to see if the issue lies within the javascript or the HTML itself.
EDIT: I'll add my HTML Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 382px;
height: 96px;
}
</style>
</head>
<body>
<form id="form1" runat="server"
<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript" lang="javascript">
$(function () {
$("#<%=TextDateFrom.ClientID %>").datepicker({
changeMonth: true,
changeYear: true,
changeDate: true,
});
});
$(function(){
$("#<%=TextDateTo.ClientID %>").datepicker({
changeMonth: true,
changeYear: true,
changeDate: true,
});
});
</script>
<asp:Label ID="Header" runat="server"><b>Tax Report App</b> </asp:Label>
<br />
<br />
<br />
<asp:Label ID="StartDate" runat="server">Begin Date: </asp:Label>
<asp:TextBox ID="TextDateFrom" runat="server"></asp:TextBox><br />
<asp:Label ID="EndDate" runat="server"> End Date: </asp:Label>
<asp:TextBox ID="TextDateTo" runat="server"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
<br />
<br />
<br />
<asp:Label ID="Label1" runat="server">Report Text </asp:Label>
<asp:GridView ID ="GridViewCS" runat="server" AutoGenerateColumns ="false">
<HeaderStyle BackColor="#3090C7" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="State" HeaderText="State" ItemStyle- Width="200px" />
<asp:BoundField DataField="Total" HeaderText="Total Tax" ItemStyle-Width="200px" />
<asp:BoundField DataField="Total Sales" HeaderText="Total Sales" ItemStyle-Width="200px" />
<asp:BoundField DataField="Complete Total" HeaderText="Total with Tax" ItemStyle-Width="200px" />
</Columns>
</asp:GridView>
<br />
<asp:Button class="initial-hide" ID="btnExport" runat="server" Text="Export To Excel" OnClick = "ExportToExcel" />
<br />
<br />
<br />
<br />
<asp:Label ID="Label3" runat="server">Report Text </asp:Label>
<asp:GridView ID ="GridView2" runat="server" AutoGenerateColumns ="false">
<HeaderStyle BackColor="#3090C7" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="FL" HeaderText="State FL" ItemStyle-Width="200px" />
<asp:BoundField DataField="Total FL" HeaderText="Sales Tax Amount FL" ItemStyle-Width="200px" />
<asp:BoundField DataField="Total Sales" HeaderText="Tax Exemption FL" ItemStyle-Width="200px" />
<asp:BoundField DataField="Complete Total" HeaderText="Total Sales FL" ItemStyle-Width="200px" />
</Columns>
</asp:GridView>
<br />
<asp:Button ID="Button2" runat="server" Text="Export To Excel" OnClick = "ExportToExcelFL" />
<div>
</div>
</form>
</body>
</html>
You can use Hide() and Show() effect of jQuery to hide and show elements
Related
I have a hyper link which will open a grid view popup, which have name and other details, and the name is a hyperlink in it.When I click on that hyperlink i need to display the details of that user in another popup. How can i do it?
My Code:
<asp:GridView ID="grdNomiantionCountDetails" runat="server" AutoGenerateColumns="false"
PagerStyle-CssClass="dvPageNation1" PagerSettings-Position="Bottom" GridLines="None"
PagerStyle-HorizontalAlign="Left" Visible="true" Width="600px" HorizontalAlign="center">
<Columns>
<asp:TemplateField HeaderText="Nominated By" HeaderStyle-HorizontalAlign="Left">
<ItemStyle CssClass="bdrstyle" />
<ItemTemplate>
<br />
<asp:HyperLink Width="180px" CssClass="txtcolor" runat="server" ID="HyperLink1" Text='<%#Bind("NominatorName")%>' onclick='<%# String.Format("return viewDescription(""{0}"");",Eval("Description")) %>'></asp:HyperLink>
</ItemTemplate>
<HeaderStyle CssClass="hdrstyle" HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Institution" HeaderStyle-HorizontalAlign="Left" HeaderStyle-CssClass="hdrstyle">
<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="400px" CssClass="txtcolor bdrstyle " />
<ItemTemplate>
<br />
<asp:Label Width="180px" CssClass="txtcolor" runat="server" ID="lblInstitution" Text='<%#Bind("Institution")%>' />
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="dvPageNation1" HorizontalAlign="Left" />
</asp:GridView>
</div>
And i need to open a dialog with the description, on click of the NominatorName hyperlink
Replace
<asp:HyperLink Width="180px" CssClass="txtcolor" runat="server" ID="HyperLink1" Text='<%#Bind("NominatorName")%>' onclick='<%# String.Format("return viewDescription(""{0}"");",Eval("Description")) %>'></asp:HyperLink>
with something like
<div onclick="openPopupDialog('<%# Eval("Description") %>')">ClickMe</div>
In my application I first need to have a button on clicking the button user should see a pop up with labels and text boxes and on clicking the add button which is in modal pop up the data should be added to grid view every thing is done, but if for the first time i enter the details of a person and i click on add button then they are added to gridview, again if i enter details of another person then the details that are in gridview for first person are disappered and in gridview the second person details are displayed.But it should display both the records.Also if i again run the application after some time then the added records are not displayed in gridview that means when i run the application after some time if i have added the records previously thay should be displayed in gridview along with button but only the button is displayed but not gridview how can i display the added records even i run the application any no of times.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Background
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.Popup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 400px;
height: 350px;
}
.lbl
{
font-size:16px;
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Fill Form in Popup" />
<div style="margin-left:10px;margin-top:10px">
<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" CellPadding="2"
ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField HeaderStyle-Width="120px" HeaderText="FirstName" DataField="FirstName" />
<asp:BoundField HeaderStyle-Width="120px" HeaderText=" MiddleName" DataField="MiddleName" />
<asp:BoundField HeaderStyle-Width="120px" HeaderText=" LastName" DataField="LastName" />
<asp:BoundField HeaderStyle-Width="120px" HeaderText="Gender" DataField="Gender" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</div>
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">
<div id="irm1" style=" width: 300px; height: 250px;" runat="server" >
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" CssClass="lbl" Text="First Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" CssClass="lbl" Text="Middle Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" CssClass="lbl" Text="Last Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" CssClass="lbl" Text="Gender"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
<td>
<asp:Button ID="Button3" runat="server" Text="Add" OnClick="Button3_Click" />
</td>
</tr>
</table>
</div>
<br />
<asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>
<!-- ModalPopupExtender -->
</form>
</body>
In my code behind-
protected void Page_Load(object sender, EventArgs e)
{
dt = new DataTable();
DataColumn dc1 = new DataColumn("FirstName");
DataColumn dc2 = new DataColumn("MiddleName");
DataColumn dc3 = new DataColumn("LastName");
DataColumn dc4 = new DataColumn("Gender");
dt.Columns.Add(dc1);
dt.Columns.Add(dc2);
dt.Columns.Add(dc3);
dt.Columns.Add(dc4);
DataRow dr1 = dt.NewRow();
GridView1.DataSource = dt;
GridView1.DataBind();
}
DataTable dt;
protected void Button3_Click(object sender, EventArgs e)
{
DataRow dr1 = dt.NewRow();
dr1[0] = TextBox1.Text;
dr1[1] = TextBox2.Text;
dr1[2] = TextBox3.Text;
dr1[3] = TextBox4.Text;
dt.Rows.Add(dr1);
GridView1.DataSource = dt;
GridView1.DataBind();
ClearFields();
}
protected void ClearFields()
{
TextBox1.Text = "";
TextBox2.Text = "";
TextBox3.Text = "";
TextBox4.Text = "";
}
carry your gridview inside Panl1 and all your code behind to webform1.cs, delete webform2, you dont need it.
I am trying hard to change the color of a text when it is clicked but not getting success.
There is one label for question, four labels for four options, one label for correct answer and one label for explanation.
What I am trying is when user click on any option then it should match with the correct answer and change the color of the text of that option i.e. when the answer is correct the text color should turn to green otherwise the color should turn to red .
But when I click on any option it is turning to red color only . Correct option should turn to green but it is turning to red . I can't figure out why ?.
Have a look at my code. Show me where I am making mistake and what is the solution.
.aspx :-
<%# Page Title="" Language="C#" MasterPageFile="~/Student/StudentPage.master" AutoEventWireup="true" CodeFile="studpractice.aspx.cs" Inherits="Student_studpractice" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(function () {
$(".optionclass").click(function () {
var $thisoption = $(this);
var $corrans = $(".correctans");
if ($thisoption.text() == $corrans.text()) {
$thisoption.css("color", "green");
} else {
$thisoption.css("color", "red");
}
});
});
</script>
<div>
<div id="tabs">
<ul>
<li>Reasoning</li>
<li>Quantitative Aptitude</li>
<li>English</li>
<li>Mathematics</li>
<li>Computer Concepts</li>
</ul>
<div id="tabs-1">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" width="100%">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
<br />
<br />
<br />
<span>A-</span> <asp:Label class="optionclass" ID="Label2" runat="server" Text='<%#Eval("Option1")%>' ></asp:Label>
<br />
<br />
<span>B-</span> <asp:Label class="optionclass" ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
<br />
<br />
<span>C-</span> <asp:Label class="optionclass" ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
<br />
<br />
<span>D-</span> <asp:Label class="optionclass" ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
<br />
<br />
<asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" />
<br />
<asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static">
<span>Correct Answer is :-</span><asp:Label class="correctans" ID="Label6" runat="server" Text='<%#Eval("CorrectAns")%>'></asp:Label>
<br />
<br />
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Explanation")%>'></asp:Label>
</asp:Panel>
</asp:Panel>
<br />
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="tabs-2">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
<br />
<br />
<br />
<span>A-</span> <asp:Label class="optionclass" ID="Label2" runat="server" Text='<%#Eval("Option1")%>'></asp:Label>
<br />
<br />
<span>B-</span> <asp:Label class="optionclass" ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
<br />
<br />
<span>C-</span> <asp:Label class="optionclass" ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
<br />
<br />
<span>D-</span> <asp:Label class="optionclass" ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
<br />
<br />
<asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" />
<br />
<asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static">
<span>Correct Answer is :-</span><asp:Label class="correctans" ID="Label6" runat="server" Text='<%#Eval("CorrectAns")%>'></asp:Label>
<br />
<br />
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Explanation")%>'></asp:Label>
</asp:Panel>
</asp:Panel>
<br />
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="tabs-3">
Tab 3 Content
</div>
<div id="tabs-4">
Tab 4 Content
</div>
<div id="tabs-5">
Tab 5 Content
</div>
</div>
<input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
<input type="button" id="btnNext" value="Next" />
</div>
</asp:Content>
So what wrong you are doing is you are selecting all .correctans and what you should do is select the .correctans specific to that question only.
Change $(".correctans") to $(".correctans")[0] or $(".correctans").first() to get the single correctans element instead of a collection.
EDIT:
Since you have multiple questions and answers on the page, use this to get the correctans for the question they're answering:
var $corrans = $(this).parent().find('.correctans:first');
I am trying to add values from my textboxes and combos as "history" to by GridPanel. The script looks ok, and my website should return my filled grid, but it doesn't happen.
<script>
var addRecord = function (form, grid) {
if (!form.getForm().isValid()) {
Ext.net.Notification.show({
iconCls: "icon-exclamation",
html: "Form is invalid",
title: "Error"
});
return false;
}
grid.store.insert(0, new MyModel(form.getForm().getFieldValues()));
form.getForm().reset();
};
</script>
<ext:Store
ID="Store1"
runat="server"
AutoSync="true"
ShowWarningOnFailure="false">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id" Name="MyModel">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="A" />
<ext:ModelField Name="Operator1" />
<ext:ModelField Name="B" />
<ext:ModelField Name="Operator2" />
<ext:ModelField Name="C" />
<ext:ModelField Name="Wynik" />
<ext:ModelField Name="Data" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Panel ID="UserForm" runat="server" Layout="HBoxLayout" Title="Kalkulator">
<Items>
<ext:Panel ID="Panel6" Layout="VBoxLayout" runat="server">
<Items>
<ext:Label ID="Label4" Margin="10" Text="A" runat="server">
</ext:Label>
<ext:TextField Name="A" Margin="10" MaskRe="[1-9]" ID="txtA" runat="server">
</ext:TextField>
</Items>
</ext:Panel>
<ext:Panel ID="Panel7" Layout="VBoxLayout" runat="server">
<Items>
<ext:Label ID="Label1" Margin="10" Text="Operator" runat="server">
</ext:Label>
<ext:ComboBox Name="Operator1" Margin="10" ID="cbox1" runat="server"></ext:ComboBox>
</Items>
</ext:Panel>
<ext:Panel ID="Panel8" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label5" Margin="10" Text="B" runat="server">
</ext:Label>
<ext:TextField Name="B" Margin="10" MaskRe="[1-9]" ID="txtB" runat="server">
</ext:TextField>
</Items>
</ext:Panel>
<ext:Panel ID="Panel9" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label2" Margin="10" Text="Operator" runat="server">
</ext:Label>
<ext:ComboBox Name="Operator2" Margin="10" ID="cbox2" runat="server"></ext:ComboBox>
</Items>
</ext:Panel>
<ext:Panel ID="Panel10" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label6" Margin="10" Text="C" runat="server">
</ext:Label>
<ext:TextField Name="C" Margin="10" MaskRe="[1-9]" ID="txtC" runat="server">
</ext:TextField>
</Items>
</ext:Panel>
<ext:Panel ID="Panel11" runat="server" Layout="VBoxLayout">
<Items>
<ext:Button ID="btnhelp" Margin="6" OnDirectClick="helpclick" runat="server" Width="70" Text="=?">
</ext:Button>
<ext:Button ID="btneq" Margin="6" OnDirectClick="equalclick" runat="server" Width="70" Text="Oblicz">
<Listeners>
<Click Handler="addRecord(#{UserForm}, #{GridPanel1});" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel ID="Panel12" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label3" Margin="14" Text="Wynik" runat="server">
</ext:Label>
<ext:Label Name="Wynik" Margin="14" ID="lblsc" Text="Wynik" runat="server">
</ext:Label>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<br />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Historia"
Width="1100"
Height="350">
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Lp" DataIndex="Lp" />
<ext:Column ID="Column2" runat="server" Text="A" DataIndex="A" />
<ext:Column ID="Column3" runat="server" Text="Operator" DataIndex="Operator1" />
<ext:Column ID="Column4" runat="server" Text="B" DataIndex="B" />
<ext:Column ID="Column5" runat="server" Text="Operator" DataIndex="Operator2" />
<ext:Column ID="Column6" runat="server" Text="C" DataIndex="C" />
<ext:Column ID="Column7" runat="server" Text="Wynik" DataIndex="Wynik" />
<ext:Column ID="Column8" runat="server" Text="Data" DataIndex="Data" />
</Columns>
</ColumnModel>
</ext:GridPanel>
When I click on button it doesn't work. What is an issue?
I am using the jquery ui datepicker in my asp.net website.The datepicker works fine when I run it from Visual Studio on my machine.However,when I host it on IIS on the Test server,the datepicker does not display.My aspx page looks like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$(".txtDatepicker").datepicker({
minDate:0,
showOn: 'button',
buttonImageOnly: true,
buttonText: "Calendar",
buttonImage: 'calendar.gif'
});
});
I am trying to display the datepicker inside a gridview:
<asp:GridView ID="grdUnitsData" runat="server" AutoGenerateColumns="false" DataKeyNames="Id" OnRowDataBound="grdUnitsData_RowDataBound" AllowPaging="false" RowStyle-BackColor="White" AlternatingRowStyle-BackColor="LightBlue" BorderStyle="Solid">
<RowStyle Height="5px" />
<AlternatingRowStyle Height="5px" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="Identity" Visible="false"/>
<asp:BoundField DataField="Code" HeaderText="Unit Code" />
<asp:BoundField DataField="Name" HeaderText="Unit Name" />
<asp:TemplateField>
<HeaderTemplate>Start Date</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtStartDate" runat="server" ClientIDMode="AutoID" style="min-width: 25px;" class="txtDatepicker" Text='<%#Eval("StartDate")%>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>End Date</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtEndDate" runat="server" ClientIDMode="AutoID" style="min-width: 25px;" class="txtDatepicker" Text='<%#Eval("EndDate")%>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Things I have tried:
Using showOn:'both' instead of showOn:'button'