Datagrid view double click using jquery with asp.net
I've got a gridView called gvLineItems in an asp.net page.. I want to throw in some jquery to allow for a double click on the row of the gridview and let it redirect to another page:
<script src="include/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var selected = null;
$(document).ready(function(){
$("#divGridView table tbody tr").find("tr").dblclick(function(){
window.location = "<%#ResolveUrl("~/Default2.aspx")%>?record=" + $(this).find("td:first").text();
});
});
</script>
Does anyone see anything strange here?
Here is the real ugly asp.net ajax with the div etc...
<div id="divGridView" style="width:100%">
<asp:UpdatePanel ID="myPanel" runat="server" >
<ContentTemplate>
<asp:GridView GridLines="Horizontal" CellPadding="4" Font-Size="Small" DataKeyNames="ID" Width="100%" AlternatingRowStyle-BackColor="#F0F8FF" BackColor="#E8E8E8" HeaderStyle-BackColor="#377CB1" ID="gvLineItems" runat="server" AllowSorting="True" AutoGenerateColumns="False" ShowFooter="True" >
<Columns>
<asp:TemplateField HeaderText="ID" SortExpression="ID" Visible="False">
<ItemTemplate>
<asp:Label ID="lblExpenseReportLineItemID" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="HeaderLevelCheckBox" AutoPostBack="true" OnCheckedChanged="SelectAllRows" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelector" runat="server" onclick="ChangeRowColor(this)" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="1%" />
<HeaderStyle HorizontalAlign="Center" Width="1%" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ibAddLineItem" runat="server" ImageUrl="images/InsertRow.gif" CommandName="Insert" ToolTip="Insert line item" />
</ItemTemplate>
<ItemStyle Width="1%" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ibDelete" runat="server" CommandName="DeleteRow" ImageUrl="images/d.gif"
ToolTip="Delete Line Item?" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Item Date" SortExpression="LineItemDate">
<ItemTemplate>
<ajaxToolkit:CalendarExtender TargetControlID="txtLineItemDate" ID="CalendarExtender3" runat="server">
</ajaxToolkit:CalendarExtender>
<asp:TextBox Width="60px" onchange='return isLessThanEndDate(this);' ID="txtLineItemDate" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.LineItemDate") %>'>
</asp:TextBox>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="10%" />
<HeaderStyle ForeColor="White" HorizontalAlign="Center" Width="12%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Comm.CU" SortExpression="Comm">
<ItemTemplate>
<table width="100%" cellpadding="2" cellspacing="0" style=" border-style:solid; border-width:thin; border-color:#DDD;">
<tr>
<td ><asp:TextBox Enabled="False" ToolTip="Click Search...To find a commission" Width="40px" ID="txtComm" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.CommissionID") %>' /></td>
</tr>
<tr><td><asp:TextBox Enabled="False" ToolTip="Click Search...To find a cost unit" Width="40px" ID="txtWBS" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.WBSID") %>' /></td></tr>
<tr><td align="center"><a href='FindCommCost.aspx?ExpenseReportID=<%#Eval("ERID")%>&ExpenseReportLineItemID=<%#Eval("ID")%>' style="color:Navy">Search...</a></td></tr>
</table>
</ItemTemplate>
<ItemStyle Width="1%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Type" SortExpression="Reason">
<ItemTemplate>
<asp:DropDownList ID="ddlExpenseTypes" OnSelectedIndexChanged="ddlExpenseTypes_SelectedIndexChanged" DataSource='<%# GetExpenseTypes() %>' SelectedValue='<%# Bind("ExpenseReasonID") %>' DataTextField="ExpenseReasonID" DataValueField="ExpenseReasonID" AutoPostBack="true" runat="server" ></asp:DropDownList>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="1%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Receipt" SortExpression="Date">
<ItemTemplate>
<asp:CheckBox ID="cbReceipt" runat="server" Checked='<%# DataBinder.Eval(Container, "DataItem.HasReceipt") %>' />
</ItemTemplate>
<HeaderStyle ForeColor="White" />
<ItemStyle HorizontalAlign="Center" Width="1%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount" SortExpression="Amount">
<ItemTemplate>
<asp:TextBox Width="40px" AutoPostBack="true" OnTextChanged="ChangedAmount" ID="txtAmou开发者_开发百科nt" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.AmountSpent") %>' />
</ItemTemplate>
<ItemStyle Width="1%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Currency" SortExpression="Currency">
<ItemTemplate>
<asp:DropDownList ID="ddlCurrency" OnSelectedIndexChanged="ddlCurrency_SelectedIndexChanged" runat="server" AutoPostBack="true" DataSource='<%# GetCurrency() %>' SelectedValue='<%# Bind("CountryID") %>' DataTextField="CountryID" DataValueField="CountryID"></asp:DropDownList>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="1%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Rate" SortExpression="Rate">
<ItemTemplate>
<asp:TextBox Width="33px" AutoPostBack="true" ID="txtRate" OnTextChanged="ChangedAmount" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Rate") %>' />
</ItemTemplate>
<ItemStyle Width="1%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="USD" SortExpression="USD">
<ItemTemplate>
<asp:Label ID="lblUSD" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.AmountBackInUSD") %>' />
</ItemTemplate>
<ItemStyle Width="1%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Desc." SortExpression="Desc.">
<ItemTemplate>
<asp:TextBox Width="100px" Font-Names="Arial" ToolTip="If the expense type is Entertainment this field is required!" ID="txtExpenseReasonDescription" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.ExpenseReasonDescription") %>' />
</ItemTemplate>
<ItemStyle Width="1%" HorizontalAlign="Left" />
</asp:TemplateField>
<asp:HyperLinkField HeaderText="Link" SortExpression="Link" DataNavigateUrlFields="AttachmentLink" DataNavigateUrlFormatString="{0}"
DataTextField="AttachmentLink" DataTextFormatString="Link" Target="_blank" >
<ControlStyle ForeColor="Navy" />
<HeaderStyle ForeColor="White" />
</asp:HyperLinkField>
<asp:TemplateField HeaderText="Upload File?" SortExpression="ID" >
<ItemTemplate>
<asp:FileUpload Width="90px" Font-Size="xx-small" ID="fuAttachment" runat="server" />
<asp:Button ID="btnUpload" font-size="xx-small" runat="server" Text="Upload" OnClick="UploadTheFile" />
</ItemTemplate>
<HeaderStyle ForeColor="White" />
<ItemStyle Width="50%" />
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#377CB1" />
<AlternatingRowStyle BackColor="AliceBlue" />
<FooterStyle CssClass="FooterStyle" />
</asp:GridView>
<div style="width:100%">
<br />
<asp:UpdateProgress ID="udProgress" runat="server" DisplayAfter="100" Visible="True" DynamicLayout="True"><ProgressTemplate><img border="0" src="images/loading.gif" alt="loading" /></ProgressTemplate></asp:UpdateProgress>
<br />
<asp:Label ID="lblMessage2" runat="server"></asp:Label>
</div>
<div style="width:100%; text-align:right;">
<table width="100%" cellpadding="2" cellspacing="0">
<tr>
<td class="tableFields" style="height: 68px">
</td>
<td align="right">
<asp:Panel ID="pGridControls" runat="server" Width="100%" Visible="False">
<asp:Label ID="Label2" runat="server" Text="Click Update to <u>save</u> any changes" Font-Bold="True" ForeColor="#377CB1"></asp:Label>
<asp:ImageButton ID="ibSaveGrid" runat="server" ImageUrl="images/smallSave.gif" ToolTip="Save / refresh changes?" CausesValidation="False" OnClick="ibSaveGrid_Click" /><asp:ImageButton ID="ibDeleteGrid" runat="server" ImageUrl="images/smallDelete.gif" ToolTip="Delete checked rows?" CausesValidation="False" OnClick="ibDeleteGrid_Click" /></asp:Panel>
<hr /> <h3>
<asp:Panel ID="Panel5" runat="server" Width="50%" HorizontalAlign="Right" BackColor= "#F0FFF0" CssClass="PadIt">
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender4" runat="server" TargetControlID="Panel5" Radius="6" Corners="All" BorderColor="#377CB1" Color="#F0FFF0">
</ajaxToolkit:RoundedCornersExtender>
Employee Due (USD):<asp:Label ID="lblMessage3" runat="server"></asp:Label>
</asp:Panel>
</h3> </td>
</tr>
</table>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ibOk" />
<asp:AsyncPostBackTrigger ControlID="rbSort" />
</Triggers>
</asp:UpdatePanel>
<asp:Literal ID="CheckBoxIDsArray" runat="server"></asp:Literal></div>
</td>
</tr>
</table>
</asp:Panel>
</div>
Here's my edit:
<script type="text/javascript">
var selected = null;
$(document).ready(function(){
$("#divGridView table tbody tr").dblclick(function(){
window.location = "<%#ResolveUrl("~/Default2.aspx")%>?ID=" + $(this).find("td:first").text();
});
});
</script>
I've now almost got it working...I can see the correct ID number, got to work on why the redirect isnt working.
Enclose the gridview in a <div id="divGridView" /> and try this
$(document).ready(function(){
$("#divGridView table tbody tr").dblclick(function(){
var id= $(this).find("td:first").text();
window.location = "<%#ResolveUrl("~/Default2.aspx")%>?record=" + id;
});
});
The tag you're looking for to get your ID, $(this).find("td:first").text() has Visible=false which will cause it to not be rendered, so jQuery won't find it.
Easiest solution is probably to put the ID in a markup (like a span) that's just rendered invisible client-side using display:none in the first display column
Here is what I ended up doing:
<script type="text/javascript">
var selected = null;
$(document).ready(function(){
$("#divGridView table tbody tr").dblclick(function(){
//window.location = "<%#ResolveUrl("~/Search.aspx")%>?ID=" + $(this).find("td:first").text();
window.location = "myURL/Search.aspx?ID=" + $(this).find("td:first").text();
});
});
</script>
加载中,请稍侯......
精彩评论