ASP.NET: Display GridView Row Details in Modal Popup using Twitter Bootstrap
DEMO There are several ways in which you can display details of a gridview row in order for the user to have a quick overview ...
https://www.programming-free.com/2013/02/gridviewrow-details-modalpopup-bootstrap.html?m=0
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.
Steps to Follow,
1. Download bootstrap files from here.
2. Include the latest jQuery library, bootstrap files (bootstrap.js,bootstrap.css) from the download and use below html code in .aspx page.
<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. See live demo. (I have created this demo using simple html table and the output will be the same in asp.net page.)
Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!
yet again a great demo and work priya... keep rocking :-)
ReplyDeleteThanks amar! Sure I will try my best!
DeleteWow!! nice one, thank you priya
ReplyDeleteMost Welcome!
DeleteWow....its so aw some,waiting for the print option desperately in the model pop up...
ReplyDeleteHi Priya,
ReplyDeleteI was trying a lot of options to style the ASP.Net GridView Pager contorl but was not successful. Can you help me with the same.
Hi Sonu,
DeleteDid you have a chance to look at this?
http://www.dotnetcurry.com/ShowArticle.aspx?ID=244
By the way, what kind of styling do you exactly want to have on your gridview pager. Can you show an example?
Thanks,
Priya
Hi Priya,
DeleteHave look at that but was not successful. some example is pager style I am looking at is http://cssdeck.com/labs/twitter-bootstrap-pagination-and-pager.
Regards,
Sonu
Hi Sonu,
DeleteCheck out my latest post
Bootstrap Pagination for ASP.NET GridVIew - @http://www.programming-free.com/2013/07/bootstrap-pagination-for-aspnet-gridview.html
Hope this helps!
thanks a lot dear friend lovely example
ReplyDeleteWelcome!
DeleteLove it!!
ReplyDelete:) Glad that you love it!
DeleteThank you!
ReplyDeleteI can't Make it work i can't see the popup window; i do everything like you say the only difference is that i use Master page in my code and i add all the scripts in the master page .
ReplyDeleteChange your MasterPage script reference to use ResolveUrl() and put your script inside the ContentPlaceHolder being used as follows:
Delete<script src='<%= Page.ResolveUrl("~/jquery-1.6.2.min.js")' type="text/javascript"></script>
Hope this helps!
Hello - thanks for the tutorial - very good!
ReplyDeleteBut I am having an issue where clicking the Detail button just refreshes the page - it adds the sb.tostring in the script tags - but nothing actually happens and it just refreshes the page?
using master page and put references in contentplaceholder on the page using the site.master tried in ie. chrome, firefox too.
Any suggestions you have would e greatly appreciated?
Please check whether the javascript files are referenced properly. This is definitely reference issue and can be solved with a quick googling on 'reference javasript files included in master page'. If this still does not resolve your issue, please post your code snippet and I will try to debug it.
DeleteThanks,
Priya
Hello
ReplyDeletei am referencing the js files within the content page and not the master page.
I reference another js file in the content page in the same way which does a filter on a gridview as the user types into the text box,which works fine.
Cheers
Hello I manage to get it working - sort of..
ReplyDeleteFor whatever reason the target attribute specified in the updatepanel2 was not liked in my vb.net 2010 website. saying controlid XYZ was not found for trigger in updatepanel updatePanel2
so I did some research on internet and found that it was needed to be added after load complete etc.. which I did and it did not work..
SO. I then put this same code into the same function that populates the gridview from my wcf webservice (populategrid sub is called in the page load event)
and then it WORKED!!!! however, it only works for the first button click, then if another button is clicked, it refreshes the page, then allows you to click once again, then refresh, then click etc etc.
Any ideas what that could be?
Thanks in advance :)
Pls, I am a beginner of asp.net developer, i uses VB.Net i really need the script to call bootstrap modal from a asp.net button but all try yeild no reason, pls can you help me, maybe 1. You can help me with simple calling of the bootstrap modal from a asp.net button or send the sample code of this project to me my email is atplerry@gmail, atplerry@yahoo.com. I really appreciate your help Thanks.
ReplyDeleteThank for the tutorial. An easy, but very useful way to give a nice touch to my project. Thumbs up for you
ReplyDeleteThank you!
DeleteHi Priya This All are Very Good Posts. Very Advanced Technologies Like Bottstrap.
ReplyDeleteIf You Have Time Post Bootstrap Gridview With Search Option Thanks
Hi,
DeleteFirst of all, Thank you for your appreciation and comment!
There is no such thing called Bootstrap GridView. GridView is an ASP.NET server side control and if you want it to look like Bootstrap table(http://twitter.github.io/bootstrap/base-css.html#tables) you can just add this attribute called CssClass="table table-hover" to your gridview.
And for the search option, I recommend you to have a look at this,
http://www.programming-free.com/2012/12/aspnet-ajax-search-highlight-results-in.html
Hope this helps!
Hi, I'm trying to use this code but i got an error in rowcommand.
ReplyDelete(Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index)
How could i resolve this problem.
Hi,
DeleteHave you set DataKey in your GridView? To use DataKeys[index], you need to set DataKey value to Primary Key Column name of your underlying table. This key will be used to get data for the detailsview, that corresponds to that particular primary key value.
<asp:GridView ID="GridView1" runat="server"
OnRowCommand="GridView1_RowCommand"
AutoGenerateColumns="false" DataKeyNames="Code">
Hope this helps!
Hi,
ReplyDeletewhile using this i got an error in div that there are no attribute supported in div
div id="currentdetail" class="modal hide fade"
tabindex=-1 role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true"
div class="modal-header"
How could i resolve this.
Thank you
Hello,
ReplyDeleteDataTable detailTable = query.CopyToDataTable()
i got no datarow error in this line.
Please help me to solve this error
Thank you
Hi Reena,
DeleteI am getting value from MySql table and populating the DataTable first. Then I am displaying a particular row in detailsview. Were you able to bring up the Gridview with data in the first place? If not please populate your GridView first. You can get best and immediate help on this topic referring to this post and your code, if you submit your queries in asp.net forums such as,
http://forums.asp.net
http://stackoverflow.com
Hope this helps!
Thanks,
Priya
Hello,
DeleteI have sorted out the problem and now it works.
Really it was a good post of you.
Thank you so much.
Most Welcome!
DeleteThe demo is good. But i want to give edit option also in details view.
ReplyDeleteCan you give update on this.
Hu Yeap,
DeleteHave you got the solution ?
Hi,
DeleteCheck out my latest post for this,
http://www.programming-free.com/2013/09/gridview-crud-bootstrap-modal-popup.html
This article does not show how to use details view to edit records but you may have to create your own form elements to provide edit functionality.
Thanks,
Priya
Hello ,
ReplyDeleteCan you tell me how to get particular Name value in popup detail view where Detail View is written instead of that Name should be display
i am having a asp.net gridview and applying bootstrap classes table table-hover table-striped to it..it is displaying vertical lines. How can we avoid that? also i want the bootstrap pagination style to be applied to gridview, can anyone please help me on this..
ReplyDeleteHi Sajitha,
DeleteTake a look at this,
http://www.programming-free.com/2013/07/bootstrap-pagination-for-aspnet-gridview.html
Hope this helps!
Thanks,
Priya
I have used your code but modal is not showing. the details view also getting populated from code behind but modal not showing. I have posted my problem in the asp.net forum with detailed code.please check it to see the code and give me the solution for it.
ReplyDeletehere is the link
http://forums.asp.net/p/1925427/5465670.aspx/1?Bootstrap+modal+is+not+showing+from+the+code+behind
Hi,
DeleteCan you please check whether bootstrap.js file is being referenced properly from your master page? You can get some help on referencing jquery files from master page here,
http://www.dotnetcurry.com/ShowArticle.aspx?ID=669
Hope this helps!
Great. This is what i'm looking for. Thanks for your sharing.
ReplyDeleteMost Welcome!
DeleteHi, I am using it for edit records, is it possible to hide popup on asp button click .
ReplyDeleteWhen i am clicking button , popup hide , but page fade remains as it is.
DeleteHi,
DeleteDo you want to close the popup automatically after user clicks on "save" button once editing is done?
If yes, then this should be your last piece of code in Save buttons click event,
protected void btnSave_Click(object sender, EventArgs e)
{
//Code to save data should come here //
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#editdetail').modal('hide');");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"ModalCloseScript",
sb.ToString(), false);
}
I tried the same code using 2008 VS Framework 2.0, when i click detail button in gridview am not getting the detailview but the page is not accessible with full grey. Please help me to get this feature, it is very nice.
ReplyDeleteMona
Hi,
DeletePlease take a look at these links, this might help you,
http://stackoverflow.com/questions/16729464/bootstrap-modal-doesnt-show-the-dialog
http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background
I advise you to check whether you have all the dependent libraries included using a modern browser. For example -> Google Chrome - Inspect Element - Network Tab. Refresh the page once after going to Network tab to see whether dependent files are included properly. You may also need to check the Console tab for errors.
Hope this helps!
Hi Priya,
ReplyDeleteThank you for your help.
I have checked the shared link and tried the same but still facing the same issue.
I copied the above code and changed the mysql connectivity only. And in console also am not getting any error, only warning ''Unknown property 'box-sizing'. Declaration dropped.
Regards,
Mona
if i want to add new data how can i modify modal? and button has a function to add data. how can i call codebehind ?
ReplyDeleteHi,
DeleteCheck out my latest article for this,
http://www.programming-free.com/2013/09/gridview-crud-bootstrap-modal-popup.html
Thanks,
Priya
hi do you have any code for this in vb?
ReplyDeletenice one buddy...
ReplyDeleteThanks , great article just one question, do we required the update panel ? If yes, why? how internally it works. just need to understand it better
ReplyDeleteHi,
DeleteWe are loading modal popup with data from server side without re-loading the page and hence to do partial page update (AJAX), UpdatePanel is essential. If you are new to UpdatePanel take a look at this article,
http://msdn.microsoft.com/en-us/library/bb399001.aspx
Hope this helps!
Thanks,
Priya
Hi ,
ReplyDeleteI try this example but when I click detial button I got black background only:(like that)
http://oi40.tinypic.com/24qlgkg.jpg
why?
Thanks!!
In which browser are you trying to open this? Check browser support for the version of bootstrap you are using.
DeleteChrome and IE.. both of them same result.
Deleteyour posts are simple and nice. Thanks a LOOOOt.but when am used this coding in asp.net usercontrol,it doesn't displayed popup window.it shows some javascript error.
ReplyDeleteError: body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.
How could i resolve this......Plz...
This post explains how to show modal popup on gridview view row command event. If you are trying this in a user control, then check for proper jQuery references and update jquery library to latest version. If it still does not work,then post your question with appropriate code at forums.asp.net
DeleteHope this helps!
Thanks,
Priya
Hi Priya,
ReplyDeleteI did everything correctly, I suppose but the popup isn't showing up. Below is my snippet for your review.
I have a div with two columns is a tabpanel of tabcontainer. The second div contain the gridview in which I'd the button to view details of the data populated in the gridview. I put the popup code immediately after the gridview for easy access. However, after the clicking the button, nothing showed up
Since, most of you are having issues in getting this work, I am going to upload the sample application soon,which can be downloaded and used instantly. Stay tuned for updates.
DeleteThanks,
Priya
I really appreciate your work cos its simple...but can you please explain this line ' if(e.CommandName.Equals("detail"))' in gridview_rowcommand function.I dont understand where you get the 'details'
DeleteDayo,
DeleteWhen a user clicks on "Detail" button, a command with the name provided in 'CommandName' attribute will be generated which is provided in the Gridview button code quoted below,
<asp:ButtonField CommandName="detail"
ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Detail" HeaderText="Detailed View"/>
Whenever an user clicks on a button present in a gridview, gridviewrow_command event will be triggered.In case there are multiple button columns in a gridview, we can make use of commandname attribute to identify the operation to be performed based on this command.
Hope this helps!
Thanks,
Priya
Dayo, o fo mi je gan an o (You fall my hand o).
DeleteNice Demo Priya....It really helped me a lot in my project.....Keep posting such a nice coding
ReplyDeleteThank you ...
Deletewill u please show the modal popup for registration
ReplyDeletehi,
ReplyDeletei am trying the same example using a master but it does not work , any idea
Hi,
ReplyDeleteThe modal pops up ok for me but it's showing the same detailsview for each row (row 0).
Do you know what might be causing this to only pick up the first row and not for each row?
Thanks
Hi,
ReplyDeleteYour Demo website Modal Does not Appear ,,,
Please I need Help !! I used Bootstrap 3.0.3 But Its Cannot appear any modal?????
ReplyDeleteThanks. Love the Demo.
ReplyDeletethanks for great article, but with mastepage it doesn't work, it show only gray backgroun.
ReplyDeletehi, i encounter the same problem also. did u figure it out already? please let me know. thank you.
DeleteHello,
ReplyDeletethis works great but I have one issue
I have this link button
Export to Excel
it exports data to excel
if I move this button outside of updatePanel it works as intended
Inside UpdatePanel it causes an error
"JavaScript runtime error: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed."
the error is coming from ScripResource.axd
var eventArgs = new Sys.WebForms.EndRequestEventArgs(error, data ? data.dataItems : {}, executor);
Sys.Observer.raiseEvent(this, "endRequest", eventArgs);
if (error && !eventArgs.get_errorHandled()) {
throw error;
}
The code I have for exporting to Excel is. the error occurs in Response.Flush() or Response.End()
protected void lnkIntSrchXlsExport_Click(object sender, EventArgs e)
{
grdInteractiveSearch.AllowPaging = false;
grdInteractiveSearch.DataBind();
DataTable dt = new DataTable("GridView_Data");
foreach (DataControlFieldHeaderCell cell in grdInteractiveSearch.HeaderRow.Cells)
{
dt.Columns.Add(cell.ContainingField.HeaderText);
}
foreach (GridViewRow row in grdInteractiveSearch.Rows)
{
dt.Rows.Add();
for (int i = 0; i < row.Cells.Count; i++)
{
dt.Rows[dt.Rows.Count - 1][i] = row.Cells[i].Text;
}
}
using (XLWorkbook wb = new XLWorkbook())
{
wb.Worksheets.Add(dt);
Response.Clear();
Response.Buffer = true;
Response.Charset = "";
Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.xlsx");
using (MemoryStream MyMemoryStream = new MemoryStream())
{
wb.SaveAs(MyMemoryStream);
MyMemoryStream.WriteTo(Response.OutputStream);
Response.Flush();
Response.End();
}
}
Hi Priya,
ReplyDeleteYou said and I quote
"Since, most of you are having issues in getting this work, I am going to upload the sample application soon,which can be downloaded and used instantly. Stay tuned for updates.
Thanks,
Priya "
Priya Darshini
29 January 2014 at 23:51
Please, where did you publish the sample source code, because the popup is not popping up.
Your website is really cool and this is a great inspiring article. 먹튀검증
ReplyDeleteI visited a lot of website but I believe this one holds something extra in it.
ReplyDeleteAlso visit my web-site; 휴게텔
Mua vé tại đại lý vé máy bay Aivivu, tham khảo
ReplyDeletevé máy bay đi Mỹ tháng nào rẻ nhất
từ mỹ về việt nam được chưa
ve may bay tu canada ve viet nam
vé máy bay nhật việt
giá vé máy bay từ hàn quốc về việt nam
Vé máy bay từ Đài Loan về VN
danh sách khách sạn cách ly tại tphcm
Chi phí cho chuyên gia nước ngoài
What a post I've been looking for! I'm very happy to finally read this post. 안전놀이터 Thank you very much. Can I refer to your post on my website? Your post touched me a lot and helped me a lot. If you have any questions, please visit my site and read what kind of posts I am posting. I am sure it will be interesting.
ReplyDeleteWhat a post I've been looking for! I'm very happy to finally read this post. 토토사이트 Thank you very much. Can I refer to your post on my website? Your post touched me a lot and helped me a lot. If you have any questions, please visit my site and read what kind of posts I am posting. I am sure it will be interesting.
ReplyDeleteI am glad that I read your blog. You have clearly explained the responsibilities of app developers. They are responsible for front-end and back-end development, including implementing themes and plugins. I also came across one of the freelancing platforms that are Eiliana.com; they help you connect with good developers and help you find top app development companies near me that provide you good freelance work. I hope that helps you.
ReplyDeleteoncainven
ReplyDeleteoh its just awesome!
ReplyDeletehttps://shivgangadigital.com/