There are several ways in which you can display details of a gridview row in order for the user to have a quick overview of the complete row. Especially when there are lot of columns in the gridview the user may find it difficult to scroll the page and view the details of entire row. This is why we have a control called 'DetailsView', a data-bound control that can be used to display single record at a time. There are many options to do this such as displaying details in a tooltip on mouseover event using jQuery, using AJAX ModalPopupExtender on click event etc. A more simple yet efficient approach is to display details of a gridview row in a modal popup dialog using Twitter Bootstrap's Modals plugin.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Modal Popup using Bootstrap</title>
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<h2 style="text-align:center;">
Display GridView Row Details in Modal Dialog using Twitter Bootstrap</h2>
<p style="text-align:center;">
Demo by Priya Darshini - Tutorial @ <a href="">Programmingfree</a>
</p>
<asp:GridView ID="GridView1" runat="server"
Width="940px" HorizontalAlign="Center"
OnRowCommand="GridView1_RowCommand"
AutoGenerateColumns="false" AllowPaging="false"
DataKeyNames="Code"
CssClass="table table-hover table-striped">
<Columns>
<asp:ButtonField CommandName="detail"
ControlStyle-CssClass="btn btn-info" ButtonType="Button"
Text="Detail" HeaderText="Detailed View"/>
<asp:BoundField DataField="Code" HeaderText="Code" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Continent" HeaderText="Continent" />
<asp:BoundField DataField="Region" HeaderText="Surface Area" />
<asp:BoundField DataField="Population" HeaderText="Population" />
<asp:BoundField DataField="IndepYear" HeaderText="Year of Independence" />
<asp:BoundField DataField="LocalName" HeaderText="Local Name" />
<asp:BoundField DataField="Capital" HeaderText="Capital" />
<asp:BoundField DataField="HeadOfState" HeaderText="Head of State" />
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<br />
<img src="" alt="Loading.. Please wait!"/>
</ProgressTemplate>
</asp:UpdateProgress>
<div id="currentdetail" class="modal hide fade"
tabindex=-1 role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3 id="myModalLabel">Detailed View</h3>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server"
CssClass="table table-bordered table-hover"
BackColor="White" ForeColor="Black"
FieldHeaderStyle-Wrap="false"
FieldHeaderStyle-Font-Bold="true"
FieldHeaderStyle-BackColor="LavenderBlush"
FieldHeaderStyle-ForeColor="Black"
BorderStyle="Groove" AutoGenerateRows="False">
<Fields>
<asp:BoundField DataField="Code" HeaderText="Code" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Continent" HeaderText="Continent" />
<asp:BoundField DataField="Region" HeaderText="Surface Area" />
<asp:BoundField DataField="Population" HeaderText="Population" />
<asp:BoundField DataField="IndepYear" HeaderText="Year of Independence" />
<asp:BoundField DataField="LocalName" HeaderText="Local Name" />
<asp:BoundField DataField="Capital" HeaderText="Capital" />
<asp:BoundField DataField="HeadOfState" HeaderText="Head of State" />
</Fields>
</asp:DetailsView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" />
</Triggers>
</asp:UpdatePanel>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal"
aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
In the above code, I have used a gridview and detailsview. To open detailsview in modal popup on button click, detailsview is placed inside a div with class='modal'.
3. In code-behind page use the below code. Here I am populating gridview with values from mysql table and using linq query to populate detailsview.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using MySql.Data.MySqlClient;
namespace DetailModalExample
{
public partial class Default : System.Web.UI.Page
{
DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
try
{
//Fetch data from mysql database
MySqlConnection conn = new MySqlConnection("server=localhost;uid=root;
password=priya123;database=world;pooling=false;");
conn.Open();
string cmd = "select * from country limit 7";
MySqlDataAdapter dAdapter = new MySqlDataAdapter(cmd, conn);
DataSet ds = new DataSet();
dAdapter.Fill(ds);
dt=ds.Tables[0];
//Bind the fetched data to gridview
GridView1.DataSource = dt;
GridView1.DataBind();
}
catch (MySqlException ex)
{
System.Console.Error.Write(ex.Message);
}
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if(e.CommandName.Equals("detail"))
{
int index = Convert.ToInt32(e.CommandArgument);
string code = GridView1.DataKeys[index].Value.ToString();
IEnumerable<DataRow> query = from i in dt.AsEnumerable()
where i.Field<String>("Code").Equals(code)
select i;
DataTable detailTable = query.CopyToDataTable<DataRow>();
DetailsView1.DataSource = detailTable;
DetailsView1.DataBind();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#currentdetail').modal('show');");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"ModalScript", sb.ToString(), false);
}
}
}
}
Note in the above code I am opening the div containing details view in modal popup using single line of jQuery code,
$('#currentdetail').modal('show');
That is all, now clicking the button field in gridview row will open a modal popup that consists of detailsview populated with the corresponding row data.
0 comments:
Post a Comment