How do I bind grid on clicking on specific tab in jQuery UI tabs?
Question
I am using jQuery tabs for displaying gridviews. Project requirements is that when user clicks on a tab gridview should be refreshed.My code is
<script language="javascript">
$(function () {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#divtab1">Inbox</a>
</li>
<li><a href="#divtab2">Outbox</a>
</li>
<li><a href="#divtab3">Archive</a>
</li>
</ul>
<div id="divtab1" runat="server" style="padding: 25px;">
</div>
</div>
How to bind gridview on clicking on a specific tab ?
1 answers
solution1
2 2014-02-04 13:24:32
Use this Code for Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div#tabs {
border: 1px solid #aaaaaa;
background: #ffffff;
color: #222222;
}
div#tabs ul {
border: 1px solid #aaaaaa;
background: #cccccc;
color: #222222;
font-weight: bold;
}
div#tabs ul li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
border: 1px solid #d3d3d3;
background: #e6e6e6;
font-weight: normal;
color: #555555;
}
a {
float: left;
padding: .5em 1em;
text-decoration: none;
color: #555555;
}
.active {
margin-bottom: -1px;
border: 1px solid #aaaaaa;
background: #ffffff;
font-weight: normal;
color: #212121;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="tabs">
<ul>
<li><a href="#divtab1" data-key="Title">Inbox</a>
</li>
<li><a href="#divtab2" data-key="Director">Outbox</a>
</li>
<li><a href="#divtab3" data-key="ReleaseDate">Archive</a>
</li>
</ul>
<div class="container">
<div id="divtab1" style="padding: 25px;"></div>
<div id="divtab2" style="padding: 25px;"></div>
<div id="divtab3" style="padding: 25px;"></div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var tabRef = 'div#tabs ul li a'
var tabContRef = 'div#tabs div.container';
var tabClass = 'active';
$(tabRef).click(function () {
if (!$(this).hasClass(tabClass)) {
var thisHref = $(this).attr('href');//Current container id
var thisDataKey = $(this).attr('data-key');//data key
var responseContainerRef = tabContRef + ' div' + thisHref;//Getting selector of current conatiner
$(tabContRef + ' >div').hide();//Hiding all tab container
$(responseContainerRef).fadeIn(200);//Showing current container
$(tabRef).removeClass(tabClass);
$(this).addClass(tabClass);
var currentResponseHtml = $.trim($(responseContainerRef).html());
if (currentResponseHtml == "" || currentResponseHtml == "Synchronization Error!!")
$.ajax({
url: "RepaterDataInHTML.aspx?SortBy=" + thisDataKey,//adding query string value
type: "GET", cache: "false",
beforeSend: function () {
$(responseContainerRef).html('Loading Please Wait...');
}, success: function (htmlResponse) {
$(responseContainerRef).html(htmlResponse);
}, error: function () {
$(responseContainerRef).html('Synchronization Error!!');
}
});
}
return false;
});
</script>
</body>
</html>
and use this code for binding repeater or gridview I'm using repeater here
aspx page code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RepaterDataInHTML.aspx.cs" Inherits="RepaterDataInHTML" %>
<table cellspacing="0" rules="all" border="1" id="_gridView" style="border-collapse: collapse;">
<asp:repeater runat="server" id="_repDB">
<HeaderTemplate>
<tr><th scope="col">Title</th><th scope="col">Director</th><th scope="col">Genre</th><th scope="col">RunTime</th><th scope="col">ReleaseDate</th></tr>
</HeaderTemplate>
<ItemTemplate>
<tr><td><%#Eval("Title")%></td><td><%#Eval("Director")%></td><td><%#Eval("Genre")%></td><td><%#Eval("RunTime")%></td><td><%#Eval("ReleaseDatestr")%></td></tr>
</ItemTemplate>
</asp:repeater>
</table>
and code behind code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class RepaterDataInHTML : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
List<Movie> DBrep = new List<Movie>();
DBrep = new DataBaseInFormOfList().GetMovies();
List<Movie> DBsort = new List<Movie>();
if (Request.QueryString["SortBy"] != null)
{
string SortBy = Request.QueryString["SortBy"].ToString();
if (SortBy == "Title")
{
DBsort = DBrep.OrderBy(o => o.Title).ToList();
}
else if (SortBy == "Director")
{
DBsort = DBrep.OrderBy(o => o.Director).ToList();
}
else if (SortBy == "Genre")
{
DBsort = DBrep.OrderBy(o => o.Genre).ToList();
}
else if (SortBy == "RunTime")
{
DBsort = DBrep.OrderBy(o => o.RunTime).ToList();
}
else if (SortBy == "ReleaseDate")
{
DBsort = DBrep.OrderBy(o => o.ReleaseDate).ToList();
}
else
{
DBsort = DBrep;
}
_repDB.DataSource = DBsort;
_repDB.DataBind();
}
else
{
//Response.Write("No Data Found");
}
}
}
public class DataBaseInFormOfList
{
public List<Movie> GetMovies()
{
return new List<Movie> {
new Movie { Title="Shrek", Director="Andrew Adamson", Genre=0,
ReleaseDate=DateTime.Parse("16-05-2001"), RunTime=89 },
new Movie { Title="Fletch", Director="Michael Ritchie", Genre=0,
ReleaseDate=DateTime.Parse("31-05-1985"), RunTime=96 },
new Movie { Title="Casablanca", Director="Michael Curtiz", Genre=1,
ReleaseDate=DateTime.Parse("01-01-1942"), RunTime=102 },
new Movie { Title="Batman", Director="Tim Burton", Genre=1,
ReleaseDate=DateTime.Parse("23-03-1989"), RunTime=126 },
new Movie { Title="Dances with Wolves",
Director="Kevin Costner", Genre=1,
ReleaseDate=DateTime.Parse("21-11-1990"), RunTime=180 },
new Movie { Title="Dirty Dancing", Director="Emile Ardolino", Genre=1,
ReleaseDate=DateTime.Parse("21-08-1987"), RunTime=100 },
new Movie { Title="The Parent Trap", Director="Nancy Meyers", Genre=0,
ReleaseDate=DateTime.Parse("29-07-1998"), RunTime=127 },
new Movie { Title="Ransom", Director="Ron Howard", Genre=1,
ReleaseDate=DateTime.Parse("08-11-1996"), RunTime=121 },
new Movie { Title="Ocean's Eleven",
Director="Steven Soderbergh", Genre=1,
ReleaseDate=DateTime.Parse("07-12-2001"), RunTime=116 },
new Movie { Title="Steel Magnolias", Director="Herbert Ross", Genre=1,
ReleaseDate=DateTime.Parse("15-11-1989"), RunTime=117 },
new Movie { Title="Mystic Pizza", Director="Donald Petrie", Genre=1,
ReleaseDate=DateTime.Parse("21-10-1988"), RunTime=104 },
new Movie { Title="Pretty Woman", Director="Garry Marshall", Genre=1,
ReleaseDate=DateTime.Parse("23-03-1990"), RunTime=119 },
new Movie { Title="Interview with the Vampire",
Director="Neil Jordan", Genre=1,
ReleaseDate=DateTime.Parse("11-11-1994"), RunTime=123 },
new Movie { Title="Top Gun", Director="Tony Scott", Genre=2,
ReleaseDate=DateTime.Parse("16-05-1986"), RunTime=110 },
new Movie { Title="Mission Impossible",
Director="Brian De Palma", Genre=2,
ReleaseDate=DateTime.Parse("22-05-1996"), RunTime=110 },
new Movie { Title="The Godfather", Director="Francis Ford Coppola",
Genre=1, ReleaseDate=DateTime.Parse("24-03-1972"), RunTime=175 },
new Movie { Title="Carlito's Way", Director="Brian De Palma",
Genre=1, ReleaseDate=DateTime.Parse("10-11-1993"), RunTime=144 },
new Movie { Title="Robin Hood: Prince of Thieves",
Director="Kevin Reynolds",
Genre=1, ReleaseDate=DateTime.Parse("14-06-1991"), RunTime=143 },
new Movie { Title="The Haunted", Director="Robert Mandel",
Genre=1, ReleaseDate=DateTime.Parse("06-05-1991"), RunTime=100 },
new Movie { Title="Old School", Director="Todd Phillips",
Genre=0, ReleaseDate=DateTime.Parse("21-02-2003"), RunTime=91 },
new Movie { Title="Anchorman: The Legend of Ron Burgundy",
Director="Adam McKay", Genre=0,
ReleaseDate=DateTime.Parse("09-07-2004"), RunTime=94 },
new Movie { Title="Bruce Almighty", Director="Tom Shadyac",
Genre=0, ReleaseDate=DateTime.Parse("23-05-2003"), RunTime=101 },
new Movie { Title="Ace Ventura: Pet Detective", Director="Tom Shadyac",
Genre=0, ReleaseDate=DateTime.Parse("04-02-1994"), RunTime=86 },
new Movie { Title="Goonies", Director="Richard Donner",
Genre=0, ReleaseDate=DateTime.Parse("07-06-1985"), RunTime=114 },
new Movie { Title="Sixteen Candles", Director="John Hughes",
Genre=1, ReleaseDate=DateTime.Parse("04-05-1984"), RunTime=93 },
new Movie { Title="The Breakfast Club", Director="John Hughes",
Genre=1, ReleaseDate=DateTime.Parse("15-02-1985"), RunTime=97 },
new Movie { Title="Pretty in Pink", Director="Howard Deutch",
Genre=1, ReleaseDate=DateTime.Parse("28-02-1986"), RunTime=96 },
new Movie { Title="Weird Science", Director="John Hughes",
Genre=0, ReleaseDate=DateTime.Parse("02-08-1985"), RunTime=94 },
new Movie { Title="Breakfast at Tiffany's", Director="Blake Edwards",
Genre=1, ReleaseDate=DateTime.Parse("05-10-1961"), RunTime=115 },
new Movie { Title="The Graduate", Director="Mike Nichols",
Genre=1, ReleaseDate=DateTime.Parse("02-04-1968"), RunTime=105 },
new Movie { Title="Dazed and Confused", Director="Richard Linklater",
Genre=0, ReleaseDate=DateTime.Parse("24-09-1993"), RunTime=103 },
new Movie { Title="Arthur", Director="Steve Gordon",
Genre=1, ReleaseDate=DateTime.Parse("25-09-1981"), RunTime=97 },
new Movie { Title="Monty Python and the Holy Grail",
Director="Terry Gilliam",
Genre=0, ReleaseDate=DateTime.Parse("10-05-1975"), RunTime=91 },
new Movie { Title="Dirty Harry", Director="Don Siegel",
Genre=2, ReleaseDate=DateTime.Parse("23-12-1971"), RunTime=102 }
};
}
}
public class Movie
{
private string _title = string.Empty;
private string _director = string.Empty;
private int _genre = 0;
private int _runtime = 0;
private DateTime _releaseDate = DateTime.MinValue;
public string Title { get { return _title; } set { _title = value; } }
public string Director { get { return _director; } set { _director = value; } }
public int Genre { get { return _genre; } set { _genre = value; } }
public int RunTime { get { return _runtime; } set { _runtime = value; } }
public DateTime ReleaseDate { get { return _releaseDate; } set { _releaseDate = value; } }
public string ReleaseDatestr { get { return _releaseDate.ToShortDateString(); } }
}
public class Methods
{
//public string GetPagination(
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to activate current tab in Jquery UI tabs?
How do I include the id of a Jquery UI Tab in the url?
How do I add a new tab programmatically to AJAX tabs?
How to set specific tab when tabs opened
How do I bind this JSON data to a Kendo UI Chart?
How do I bind this JSON to Kendo UI's TreeView?
Kendo UI Grid bind
How can I properly bind and fill Kendo UI grid with two table EF?
How do I instantiate a static grid of UI images in Unity optimally?
How do I update a grid in my XAML UI?
Related Tags