Description:
In this article, I will explain how to display
gridview row details on modal popup dialog box using Jquery.
In some
scenario, you may need to display the overview of the complete gridview row.
If there
are lot of columns in the gridview the user may find it difficult to scroll the
page and view the details of the entire gridview row.
To overcome
this, we are adding modal popup with the link button that will retrieve the
entire gridview row data and it will display overview of the single record at a
time.
To include
Jquery modal dialog box with gridview row,
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.js"></script>
<link href="jquery-ui-1.10.3.custom" rel="Stylesheet"
type="text/css"
/>
3. Add ‘View’ template column with
gridview.
4. If the user clicks the view button, the
values are fetched from the gridview cells of the selected row and it will
display with modal popup dialog.
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script
type="text/javascript">
$(document).ready(function () {
$("[id*=lnkpopup]").click(function () {
var
row = $(this).closest("tr");
$("#PopupAge").html($(".CAge", row).html());
$("#PopupSex").html($(".CSex", row).html());
$("#PopupEmail").html($(".CEmail", row).html());
$("#popupwindow").dialog({
title: "Record Details",
height: 210,
width: 400,
buttons: {
"Ok": function () {
$(this).dialog('close');
}
},
modal: true
});
return
false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div
id="popupwindow"
style="display: none">
<b>Id:</b> <span id="PopupAge"></span>
<br />
<b>Name:</b> <span id="PopupSex"></span>
<br />
<b>Age:</b> <span id="PopupEmail"></span>
</div>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Age" ItemStyle-CssClass="CAge" HeaderText="Age" />
<asp:BoundField DataField="Sex" ItemStyle-CssClass="CSex" HeaderText="Sex" />
<asp:BoundField DataField="Email" ItemStyle-CssClass="CEmail" HeaderText="Email" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton Text="Details" ID="lnkpopup" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
The above
program used to display the gridview row details with the modal popup window
using JQuery.
Show gridview row details inside Jquery Dialog Modal
Popup , How to show gridview row details on popup window using Jquery , Display
gridview row details on Modal Dialog using Jquery, Jquery Modal Dialog to
display gridview row details.
0 comments:
Post a Comment