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'
Related
I have a gridview and I am trying to make it so whenever someone clicks on the header text it will call a javascript function.
Here is my gridview code
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="Grid"
DataKeyNames="ID" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="X" runat="server" OnClick="deleteRow" CommandArgument='<%#Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="ID" />
<asp:BoundField ItemStyle-Width="150px" DataField="Site" HeaderText="Site" />
<asp:BoundField ItemStyle-Width="150px" DataField="Type" HeaderText="Type" />
<asp:BoundField ItemStyle-Width="150px" DataField="User" HeaderText="User" />
<asp:BoundField ItemStyle-Width="150px" DataField="Notes" HeaderText="Notes" />
</Columns>
<RowStyle />
<FooterStyle/>
<SelectedRowStyle />
<HeaderStyle />
</asp:GridView>
Can someone point me in the right direction?
Okay, If you want to bind a jquery or javascript event to your GridView Header, Simply add a class to your GridView HeaderStyles and bind it with a click event. Do as follows:
<HeaderStyle CssClass="GridViewHeaderRow" />
Then in your jquery or javascript, get the reference of this element using the class you added and bind a whatever event you want, See:
<script>
$(document).ready(function () {
$('.GridViewRow').on('click', function () {
alert('clicked');
// Do whatever you want to do.
});
});
</script>
A full example merged in your code would be like this:
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="Grid" DataKeyNames="ID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="X" runat="server" OnClick="deleteRow" CommandArgument='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="ID" />
<asp:BoundField ItemStyle-Width="150px" DataField="Site" HeaderText="Site" />
<asp:BoundField ItemStyle-Width="150px" DataField="Type" HeaderText="Type" />
<asp:BoundField ItemStyle-Width="150px" DataField="User" HeaderText="User" />
<asp:BoundField ItemStyle-Width="150px" DataField="Notes" HeaderText="Notes" />
</Columns>
<RowStyle />
<FooterStyle />
<SelectedRowStyle />
<!-- Add the class here in your HeaderStyles -->
<HeaderStyle CssClass="GridViewHeaderRow" />
</asp:GridView>
<script>
$(document).ready(function () {
$('.GridViewRow').on('click', function () {
alert('clicked');
// Do whatever you want to do.
});
});
</script>
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>
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
call jquery function inside gridview .what i want to happen when i click on the link button open the div . i have problem here with this case didn't work .
JavaScript
function toggleDiv(divId) {
$("#shoow").toggle('slow');
}
HTML Markup
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False"
CellPadding="4"
ForeColor="#333333"
GridLines="None"
Width="507px"
Height="294px">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'></asp:Label>
<br />
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="toggleDiv('Shoow'); return false;">
LinkButton</asp:LinkButton>
<div id="Shoow" style="background-color: blue; width: 150px; height: 150px; display: none;">
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Description")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<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" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
Make these changes
Markup
Pass the clicked element as itself like toggleDiv(this)
Remove the id of the div
Sample Code
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'>
</asp:Label>
<br />
<asp:LinkButton ID="LinkButton1" runat="server"
OnClientClick="javascript:toggleDiv(this);return false;">
LinkButton</asp:LinkButton>
<div style="background-color: blue; width: 150px; height: 150px; display: none;">
</div>
</ItemTemplate>
JavaScript (Toggle the visibility of the element next to the element that's clicked)
function toggleDiv(elm) {
$(elm).next().toggle('slow');
}
Whenever I need to execute JS from a Gridview I try to avoid using asp controls like LinkButton as they tend to cause a postback which you then need to prevent, which can be done, but I find it far easier to just embed a basic html button or img tag with an onclick set for your JS. No postback and no extra code to prevent a postback.
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'></asp:Label>
<br />
<button ID="LinkButton1" runat="server">Button Text</button>
<div id="Shoow" runat=server style="background-color: blue; width: 150px; height: 150px; display: none;">
</div>
</ItemTemplate>
</asp:TemplateField>
Then in the OnRowDatabound event you do the following because runat="server" has been set:
dim btn as HtmlButton = e.Row.FindControl("LinkButton1")
dim div as HtmlContainer = e.Row.FindControl("Shoow")
dim js as String = String.Format("toggleDiv('#{0}')", div.UniqueID)
btn.Attributes.Add("onclick", js)
and the JS:
function toggleDiv(divId) {
$(divId).toggle('slow');
}
I have looked at several solutions on SO but none seem to work or don't address JQuery-Mobile, If I commment out Mobile the postback works fine and update is accepted.
I have an ASP.net page that i have added JQuery and Datepicker widget. - when adding JQuery Mobile JS to the page the mobile page works fine and the Datepicker has an added JS file to make it function as well. However the button in the page is not working, I have narrowed it down to jquery.mobile-1.4.3.min.js
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!--script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script-->
<script src="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.js"></script>
Button is within an <InsertItemTemplate>
</InsertItemTemplate>
<ItemTemplate>
FDID:
<asp:Label ID="FDIDLabel" runat="server" Text='<%# Eval("FDID") %>'></asp:Label><br />
CHOICE1:
<asp:Label ID="CHOICE1Label" runat="server" Text='<%# Bind("CHOICE1") %>'></asp:Label><br />
CHOICE2:
<asp:Label ID="CHOICE2Label" runat="server" Text='<%# Bind("CHOICE2") %>'></asp:Label><br />
CHOICE3:
<asp:Label ID="CHOICE3Label" runat="server" Text='<%# Bind("CHOICE3") %>'></asp:Label><br />
CHOICE4:
<asp:Label ID="CHOICE4Label" runat="server" Text='<%# Bind("CHOICE4") %>'></asp:Label><br />
CHOICE5:
<asp:Label ID="CHOICE5Label" runat="server" Text='<%# Bind("CHOICE5") %>'></asp:Label><br />
CHOICE6:
<asp:Label ID="CHOICE6Label" runat="server" Text='<%# Bind("CHOICE6") %>'></asp:Label><br />
IPADDRESS:
<asp:Label ID="IPADDRESSLabel" runat="server" Text='<%# Bind("IPADDRESS") %>'></asp:Label><br />
PICKDATE:
<asp:Label ID="PICKDATELabel" runat="server" Text='<%# Bind("PICKDATE") %>'></asp:Label><br />
<asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit"
Text="Edit"></asp:LinkButton>
<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
Text="Delete"></asp:LinkButton>
<asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" CommandName="New"
Text="New"></asp:LinkButton>
</ItemTemplate>
</asp:FormView>
not sure if it has anything to do with:
ui-btn-active
in the mobile.js
Actually this resolved the issue after further search.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.js"></script>