Home > ASP.Net, Javascript, Jquery > JQuery UI Modal Dialog With Gridview to display Details

JQuery UI Modal Dialog With Gridview to display Details


Hi all,

try this example to use JQuery UI Modal Dialog With Gridview to display Details

In this example i will use Northwind Database to display Categories and there related Products

1) Open VS 2008 and create a new website

2) Add new Web.Config and add connection string


<connectionStrings>
 <add name="NorthwindConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
 </connectionStrings>

3) Add new Web page name it “DisplayCategories.aspx” and from Toolbox drag and drop Gridview Control and bind it to Categories table using SQLDataSource control


<asp:GridView ID="GV_Category" runat="server" DataSourceID="sds_Category" AutoGenerateColumns="False"
 DataKeyNames="CategoryID" CellPadding="4" ForeColor="#333333">
 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
 <Columns>
 <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" ReadOnly="true" InsertVisible="False"
 SortExpression="CategoryID" />
 <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
 <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
 <asp:TemplateField>
 <ItemTemplate>
 <a id="pop" class="popclass" href='ProductDetail.aspx?CategoryID=<%# Eval("CategoryID")%>'
 title="Products for Category :<%# Eval("CategoryName")%>">Products Detail</a>
 </ItemTemplate>
 </asp:TemplateField>
 </Columns>
 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <AlternatingRowStyle BackColor="White" />
 </asp:GridView>
 <asp:SqlDataSource ID="sds_Category" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
 </asp:SqlDataSource>

4) Add the following Javascript to Open Dialog for Details when i click on Category to display Category’s Product


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
 <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css">
 <script type="text/javascript">
 $(document).ready(function() {
 $('.popclass').live('click', function(e) {
 e.preventDefault();
 var page = $(this).attr("href")
 var pagetitle = $(this).attr("title")
 var $dialog = $('<div></div>')
 .html('')
 .dialog({
 autoOpen: false,
 modal: true,
 height: 525,
 width: 500,
 title: pagetitle,
 buttons: [{
 text: "Close",
 click: function() {
 $(this).dialog("close");
 }}]
 });
 $dialog.dialog('open');
 });
 });
 </script>

5) Add new Page name it “ProductDetail.aspx” and drag and drop Gridview and bind it to Products table using SQLDataSource With Category ID passed from Query String


<div>
 <asp:GridView ID="gvProducts" runat="server" DataSourceID="sds_Products" CssClass="datagrid"
 AutoGenerateColumns="False" DataKeyNames="ProductID" CellPadding="4" ForeColor="#333333">
 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
 <Columns>
 <asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="true" InsertVisible="False"
 SortExpression="ProductID" />
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
 <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
 </Columns>
 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <AlternatingRowStyle BackColor="White" />
 </asp:GridView>
 <asp:SqlDataSource ID="sds_Products" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
 <SelectParameters>
 <asp:QueryStringParameter Name="CategoryID" QueryStringField="CategoryID" Type="Int32" />
 </SelectParameters>
 </asp:SqlDataSource>
 </div>

Hope this helps

Good Luck.

 

Advertisements
Categories: ASP.Net, Javascript, Jquery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: