ASP.NET: Display GridView Row Details in Modal Popup using Twitter Bootstrap


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!!

Subscribe to GET LATEST ARTICLES!


advertise here

Related

Latest 1533532952689504924

Post a Comment

  1. yet again a great demo and work priya... keep rocking :-)

    ReplyDelete
    Replies
    1. Thanks amar! Sure I will try my best!

      Delete
  2. Wow....its so aw some,waiting for the print option desperately in the model pop up...

    ReplyDelete
  3. Hi Priya,
    I 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.

    ReplyDelete
    Replies
    1. Hi Sonu,

      Did 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

      Delete
    2. Hi Priya,
      Have 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

      Delete
    3. Hi Sonu,

      Check 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!

      Delete
  4. thanks a lot dear friend lovely example

    ReplyDelete
  5. I 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 .

    ReplyDelete
    Replies
    1. Change your MasterPage script reference to use ResolveUrl() and put your script inside the ContentPlaceHolder being used as follows:

      <script src='<%= Page.ResolveUrl("~/jquery-1.6.2.min.js")' type="text/javascript"></script>

      Hope this helps!

      Delete
  6. Hello - thanks for the tutorial - very good!

    But 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?

    ReplyDelete
    Replies
    1. 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.

      Thanks,
      Priya

      Delete
  7. Hello

    i 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

    ReplyDelete
  8. Hello I manage to get it working - sort of..

    For 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 :)

    ReplyDelete
  9. 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.

    ReplyDelete
  10. Thank for the tutorial. An easy, but very useful way to give a nice touch to my project. Thumbs up for you

    ReplyDelete
  11. Hi Priya This All are Very Good Posts. Very Advanced Technologies Like Bottstrap.
    If You Have Time Post Bootstrap Gridview With Search Option Thanks

    ReplyDelete
    Replies
    1. Hi,

      First 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!

      Delete
  12. Hi, I'm trying to use this code but i got an error in rowcommand.
    (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.

    ReplyDelete
    Replies
    1. Hi,

      Have 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!

      Delete
  13. Hi,
    while 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

    ReplyDelete
  14. Hello,

    DataTable detailTable = query.CopyToDataTable()

    i got no datarow error in this line.

    Please help me to solve this error
    Thank you

    ReplyDelete
    Replies
    1. Hi Reena,

      I 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

      Delete
    2. Hello,

      I have sorted out the problem and now it works.
      Really it was a good post of you.
      Thank you so much.

      Delete
  15. The demo is good. But i want to give edit option also in details view.
    Can you give update on this.

    ReplyDelete
    Replies
    1. Hu Yeap,
      Have you got the solution ?

      Delete
    2. Hi,

      Check 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

      Delete
  16. Hello ,

    Can 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

    ReplyDelete
  17. 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..

    ReplyDelete
    Replies
    1. Hi Sajitha,

      Take a look at this,

      http://www.programming-free.com/2013/07/bootstrap-pagination-for-aspnet-gridview.html

      Hope this helps!

      Thanks,
      Priya

      Delete
  18. 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.
    here is the link
    http://forums.asp.net/p/1925427/5465670.aspx/1?Bootstrap+modal+is+not+showing+from+the+code+behind

    ReplyDelete
    Replies
    1. Hi,

      Can 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!

      Delete
  19. Great. This is what i'm looking for. Thanks for your sharing.

    ReplyDelete
  20. Hi, I am using it for edit records, is it possible to hide popup on asp button click .

    ReplyDelete
    Replies
    1. When i am clicking button , popup hide , but page fade remains as it is.

      Delete
    2. Hi,

      Do 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);
      }

      Delete
  21. 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.

    Mona

    ReplyDelete
    Replies
    1. Hi,

      Please 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!

      Delete
  22. Hi Priya,

    Thank 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

    ReplyDelete
  23. 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 ?

    ReplyDelete
    Replies
    1. Hi,

      Check out my latest article for this,

      http://www.programming-free.com/2013/09/gridview-crud-bootstrap-modal-popup.html

      Thanks,
      Priya

      Delete
  24. hi do you have any code for this in vb?

    ReplyDelete
  25. Thanks , great article just one question, do we required the update panel ? If yes, why? how internally it works. just need to understand it better

    ReplyDelete
    Replies
    1. Hi,

      We 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

      Delete
  26. Hi ,
    I try this example but when I click detial button I got black background only:(like that)
    http://oi40.tinypic.com/24qlgkg.jpg
    why?
    Thanks!!

    ReplyDelete
    Replies
    1. In which browser are you trying to open this? Check browser support for the version of bootstrap you are using.

      Delete
    2. Chrome and IE.. both of them same result.

      Delete
  27. your 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.

    Error: 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...

    ReplyDelete
    Replies
    1. 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

      Hope this helps!

      Thanks,
      Priya

      Delete
  28. Hi Priya,
    I 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

    ReplyDelete
    Replies
    1. 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

      Delete
    2. 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'

      Delete
    3. Dayo,

      When 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

      Delete
  29. Nice Demo Priya....It really helped me a lot in my project.....Keep posting such a nice coding

    ReplyDelete
  30. will u please show the modal popup for registration

    ReplyDelete
  31. hi,

    i am trying the same example using a master but it does not work , any idea

    ReplyDelete
  32. Hi,

    The 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

    ReplyDelete
  33. Hi,
    Your Demo website Modal Does not Appear ,,,

    ReplyDelete
  34. Please I need Help !! I used Bootstrap 3.0.3 But Its Cannot appear any modal?????

    ReplyDelete
  35. thanks for great article, but with mastepage it doesn't work, it show only gray backgroun.

    ReplyDelete

emo-but-icon

Currency Converter

Built using AngularJS and ASP.NET Web API

SUBSCRIBE


item