662 lines
21 KiB
HTML
662 lines
21 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>DojoX Portlet In a GridContainer example</title>
|
|
|
|
<!-- required: a default theme file -->
|
|
<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/soria/soria.css">
|
|
<link rel="stylesheet" href="../Dialog/Dialog.css">
|
|
|
|
<style type="text/css">
|
|
@import "../../../dojo/resources/dojo.css";
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
|
|
|
@import "../Portlet/Portlet.css";
|
|
@import "../../layout/resources/GridContainer.css";
|
|
@import "../Calendar/Calendar.css";
|
|
@import "../../grid/resources/Grid.css";
|
|
@import "../../grid/resources/tundraGrid.css";
|
|
@import "../../grid/resources/soriaGrid.css";
|
|
@import "../../grid/resources/nihiloGrid.css";
|
|
@import "../../image/resources/image.css";
|
|
@import "../../layout/resources/ExpandoPane.css";
|
|
|
|
.dijitTabContainer .gridContainerTable {
|
|
border: 0px none;
|
|
}
|
|
.dijitTabContainer .gridContainer {
|
|
padding: 2px;
|
|
}
|
|
|
|
#masker {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: white;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#clients .dijitTitlePaneContentInner,
|
|
#quotes .dijitTitlePaneContentInner {
|
|
padding: 0;
|
|
}
|
|
body , html{
|
|
padding: 0px;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.calendarStack span {
|
|
font-weight: bold;
|
|
}
|
|
.calendarStack div {
|
|
padding-bottom: 5px;
|
|
}
|
|
.gridContainer {overflow-y: auto;}
|
|
|
|
.dijitTooltip {
|
|
max-width: 400px;
|
|
}
|
|
.labelTable td {
|
|
padding: 4px;
|
|
border: 0;
|
|
}
|
|
.labelTable .tableContainer-labelCell {
|
|
background-color: #CCC;
|
|
}
|
|
.portletNoBorder div.dijitTitlePaneContentInner {
|
|
padding: 0;
|
|
}
|
|
.dj_ie6 .dropIndicator, .dj_ie6 .dojoxPortlet{
|
|
margin: 5px;
|
|
}
|
|
.gridContainerZone > *{
|
|
margin: 5px !important;
|
|
}
|
|
</style>
|
|
|
|
<!-- required: dojo.js -->
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: false"></script>
|
|
|
|
<!-- do not use! only for testing dynamic themes -->
|
|
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
|
|
|
|
<script type="text/javascript" src="test_PortletInGridContainer.js"></script>
|
|
<script type="text/javascript" src="../FeedPortlet.js"></script>
|
|
<script type="text/javascript" src="CalendarStackLayout.js"></script>
|
|
</head>
|
|
<body class="soria">
|
|
|
|
<div id="masker"></div>
|
|
|
|
<span dojoType="dojox.data.HtmlStore"
|
|
jsId="htmlStore" dataId="gridDataTable">
|
|
</span>
|
|
|
|
<div dojoType="dojox.data.FileStore" url="../../data/demos/stores/filestore_dojotree.php"
|
|
jsId="fileStore" pathAsQueryParam="true"></div>
|
|
|
|
<div dojoType="dijit.tree.ForestStoreModel" jsId="fileModel"
|
|
store="fileStore" query="{}"
|
|
rootId="DojoFiles" rootLabel="Dojo Files" childrenAttrs="children">
|
|
<script type="dojo/method" event="getChildren" args="parent, callback">
|
|
if (!this._allItems) {
|
|
this._allItems = [];
|
|
}
|
|
dijit.tree.ForestStoreModel.prototype.getChildren.apply(this, [parent, dojo.hitch(this, function(items){
|
|
this._allItems = this._allItems.concat(items);
|
|
console.log("getChildren of " + parent.name);
|
|
dojo.publish("/fileChange", [this._allItems]);
|
|
callback(items);
|
|
})]);
|
|
</script>
|
|
|
|
</div>
|
|
|
|
<div dojoType="dijit.Menu" id="gridCols" jsId="gridCols" style="display: none">
|
|
<div dojoType="dojox.widget.PlaceholderMenuItem" label="GridColumns"></div>
|
|
</div>
|
|
|
|
|
|
|
|
<div dojoType="dijit.layout.TabContainer" region="center" style="height:100%;">
|
|
|
|
<div dojoType="dijit.layout.BorderContainer"
|
|
id="mainLayout"
|
|
title="Home"
|
|
style="width: 100%; height: 100%; padding: 2px;">
|
|
|
|
<div dojoType="dojox.layout.GridContainer"
|
|
id="gridContainer"
|
|
region="center"
|
|
acceptTypes="Portlet"
|
|
hasResizableColumns="false"
|
|
nbZones="2"
|
|
dragHandleClass="dijitTitlePaneTitle">
|
|
|
|
<div dojoType="dojox.widget.Portlet" title="Info" toggleable="false" dragRestriction="true">
|
|
<p onclick="text_explode_2(this)">This is a Portlet widget, which is similar to a dijit.TitlePane,
|
|
but is designed to be used with the dojox.layout.GridContainer widget. Each widget can be extended
|
|
with a number of different plug in widgets, with each plug in specifying
|
|
an icon to display in the title bar. (<i>By the way, click this paragraph somewhere</i> :-)
|
|
</p>
|
|
<p>
|
|
Two settings widgets are currently defined, <b>dojox.widget.PortletSettings</b>
|
|
and <b>dojox.widget.PortletDialogSettings</b>
|
|
</p>
|
|
<p>This Portlet is not draggable, but all others are.</p>
|
|
</div>
|
|
|
|
<div dojoType="dojox.widget.FeedPortlet" title="Todays News"
|
|
id="todaysNews"
|
|
url="http://news.google.com/news?hl=en&topic=t&output=atom"
|
|
maxResults="5"
|
|
dndType="Portlet"
|
|
>
|
|
<div dojoType="dojox.widget.PortletFeedSettings"></div>
|
|
|
|
<div>
|
|
This is a FeedPortlet with a single feed.
|
|
Click the settings icon in the title bar to enter a
|
|
different feed to load. Hovering over a news item shows a summary
|
|
of it in a tooltip.
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dojox.widget.Portlet" title="Clients" id="clients"
|
|
class="gridPortlet"
|
|
dndType="Portlet">
|
|
|
|
<div id="staticGrid"
|
|
dojoType="dojox.grid.DataGrid"
|
|
rowsPerPage="10"
|
|
columnReordering="false"
|
|
store="htmlStore"
|
|
structure="layoutHtmlTable",
|
|
query="{}"
|
|
headerMenu="gridCols"
|
|
columnToggling="true"
|
|
title="Simple Grid"
|
|
autoHeight="true"
|
|
>
|
|
<script type="dojo/connect">
|
|
setTimeout(dojo.hitch(this, "resize"), 100);
|
|
</script>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div dojoType="dojox.widget.Portlet" title="Line Chart" id="lineChartPortlet" dndType="Portlet">
|
|
<div dojoType="dojox.widget.PortletDialogSettings"
|
|
id="lineChartSettings" dimensions="[300, 117]" title="Line Chart Settings">
|
|
<div dojoType="dojox.layout.TableContainer" cols="1">
|
|
<div dojoType="dijit.form.TextBox" title="Option 3"></div>
|
|
<div dojoType="dijit.form.TextBox" title="Option 4"></div>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<div dojoType="dijit.form.Button" onClick="dijit.byId('lineChartSettings').toggle();">OK</div>
|
|
</div>
|
|
</div>
|
|
<script type="dojo/connect" event="onUpdateSize">
|
|
if(window.chart){chart.resize();}
|
|
</script>
|
|
<div>
|
|
Change the zoom of the chart using the slider, then drag it using the mouse. This portlet uses
|
|
a dialog settings widget, click the settings icon in the title bar to see it.
|
|
</div>
|
|
<div id="zoomer" style="height:200px; width: 400px;"></div>
|
|
<div style="margin-bottom:5px;">Scale:</div>
|
|
<div id="scaleXSlider" dojoType="dijit.form.HorizontalSlider"
|
|
value="1" minimum="1" maximum="10" discreteValues="10" showButtons="false">
|
|
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="10" style="height:5px;"></div>
|
|
<div dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" minimum="1" maximum="10" count="10"
|
|
constraints="{pattern: '##'}" style="height:1.2em;font-size:75%;color:gray;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
-->
|
|
</div>
|
|
|
|
<div dojoType="dojox.layout.ExpandoPane" region="right"
|
|
title="Calendar"
|
|
style="height: 100%;">
|
|
|
|
<div dojoType="dojox.widget.tests.CalendarStackLayout">
|
|
<div dojoType="dijit.layout.ContentPane" dateref="2009-06-20">
|
|
<div>
|
|
<span>
|
|
Type:
|
|
</span>
|
|
Meeting
|
|
</div>
|
|
<div>
|
|
<span>
|
|
Time:
|
|
</span>
|
|
12:00 - 13:00
|
|
</div>
|
|
<div>
|
|
<span>
|
|
Details:
|
|
</span>
|
|
</div>
|
|
<div>
|
|
Meeting about the User Interface
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" dateref="2009-06-22">
|
|
<div>
|
|
<span>
|
|
Type:
|
|
</span>
|
|
Meeting
|
|
</div>
|
|
<div>
|
|
<span>
|
|
Time:
|
|
</span>
|
|
09:00 - 10:30
|
|
</div>
|
|
<div>
|
|
<span>
|
|
Details:
|
|
</span>
|
|
</div>
|
|
<div>
|
|
Morning prayer for the end of life of IE6
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" dateref="2009-06-24">
|
|
<div>
|
|
<span>
|
|
Type:
|
|
</span>
|
|
Appointment
|
|
</div>
|
|
<div>
|
|
<span>
|
|
Time:
|
|
</span>
|
|
19:00 - 20:30
|
|
</div>
|
|
<div>
|
|
<span>
|
|
Details:
|
|
</span>
|
|
</div>
|
|
<div>
|
|
Root canal at dentist. Gonna get a candy bar!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div dojoType="dijit.layout.BorderContainer" title="My Interests">
|
|
<div dojoType="dojox.layout.GridContainer"
|
|
id="gridContainer2"
|
|
acceptTypes="Portlet"
|
|
hasResizableColumns="false"
|
|
nbZones="2"
|
|
dragHandleClass="dijitTitlePaneTitle"
|
|
region="center"
|
|
>
|
|
<div dojoType="dojox.widget.ExpandableFeedPortlet" dndType="Portlet" title="Cool Blogs -> Remembering Your Selection" showFeedTitle="false">
|
|
<select dojoType="dojox.widget.PortletFeedSettings" id="coolBlogsSettings">
|
|
<script type="dojo/connect">
|
|
this.set("selectedIndex", dojo.cookie(this.id + "-selectedIndex") || 0);
|
|
</script>
|
|
<script type="dojo/connect" event="attr" args="name, value">
|
|
if(name == "selectedIndex"){
|
|
dojo.cookie(this.id + "-selectedIndex", value);
|
|
|
|
// Set a custom title when selection changes.
|
|
if (this.portlet){
|
|
this.portlet.attr("title", "Cool Blogs - " + this.text.options[value].innerHTML);
|
|
}
|
|
}
|
|
</script>
|
|
<option value="http://shaneosullivan.wordpress.com/category/dojo/feed/">Dojo Blatherings</option>
|
|
<option value="http://www.dojotoolkit.org/aggregator/rss">Planet Dojo</option>
|
|
<option value="http://feeds2.feedburner.com/ajaxian">Ajaxian</option>
|
|
</select>
|
|
<div>
|
|
This is an ExpandableFeedPortlet with multiple available feeds.
|
|
Click the settings icon in the title bar to choose a feed to load.
|
|
This Portlet also maintains its state using a cookie, so when you choose
|
|
a feed to show and refresh the page, that same feed will be selected.
|
|
this example also shows how to modify the title of the portlet when a new
|
|
feed is selected.
|
|
When a feed is loaded, it automatically sets the title of the Portlet to the
|
|
title of the feed. This portlet has disabled that behavior using
|
|
showFeedTitle="false"
|
|
</div>
|
|
</div>
|
|
<div dndType="Portlet" dojoType="dojox.widget.ExpandableFeedPortlet" title="Cool Blogs -> onlyOpenOne == true"
|
|
onlyOpenOne="true" >
|
|
<select dojoType="dojox.widget.PortletFeedSettings" id="multiOptions">
|
|
<option value="http://www.dojotoolkit.org/aggregator/rss/">Planet Dojo</option>
|
|
<option value="http://shaneosullivan.wordpress.com/category/dojo/feed/">Dojo Blatherings</option>
|
|
<option value="http://feeds2.feedburner.com/ajaxian">Ajaxian</option>
|
|
</select>
|
|
<div>
|
|
This is an ExpandableFeedPortlet with multiple available feeds, in which you
|
|
can only expand a single item at a time.
|
|
Click the settings icon in the title bar to choose a feed to load.
|
|
</div>
|
|
</div>
|
|
<div dojoType="dojox.widget.Portlet" dndType="Portlet" title="Quotes of the Day" id="quotes">
|
|
<div dojoType="dojox.widget.PortletSettings">
|
|
<div dojoType="dojox.layout.TableContainer" cols="1">
|
|
<div dojoType="dijit.form.TextBox" title="Option 3"></div>
|
|
<div dojoType="dijit.form.TextBox" title="Option 4"></div>
|
|
</div>
|
|
</div>
|
|
<script type="dojo/connect">
|
|
loadFeed("http://feeds2.feedburner.com/quotationspage/qotd", "quotes");
|
|
</script>
|
|
<div id="quotes">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dojox.widget.FeedPortlet" dndType="Portlet" title="Dojo Campus - Local Feed"
|
|
url="testAtom.xml"
|
|
maxResults="5"
|
|
local="true"
|
|
>
|
|
<div>
|
|
This is a FeedPortlet with a local feed, which is useful
|
|
if you have a feed that is not public, perhaps on an
|
|
intranet.
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dojox.widget.Portlet" dndType="Portlet" title="My Flickr">
|
|
<div dojoType="dojox.widget.PortletSettings">
|
|
<div dojoType="dojox.layout.TableContainer" cols="1">
|
|
<div dojoType="dijit.form.TextBox" title="Option 3"></div>
|
|
<div dojoType="dijit.form.TextBox" title="Option 4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dojox.image.SlideShow" imageWidth="300" imageHeight="300">
|
|
<script type="dojo/connect">
|
|
|
|
var flickrRestStore = new dojox.data.FlickrRestStore();
|
|
var req = {
|
|
query: {
|
|
userid: "44153025@N00",
|
|
apikey: "8c6803164dbc395fb7131c9d54843627",
|
|
setid: "72057594114596784",
|
|
sort: [
|
|
{
|
|
attribute: "interestingness",
|
|
descending: true
|
|
}
|
|
],
|
|
tag_mode: "any"
|
|
},
|
|
count: 20
|
|
};
|
|
this.setDataStore(flickrRestStore, req);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dijit.layout.BorderContainer" title="My Files">
|
|
<div dojoType="dojox.layout.ExpandoPane" region="left" title="File Explorer" style="width: 230px;">
|
|
<div
|
|
id="tree"
|
|
dojoType="dijit.Tree"
|
|
model="fileModel"
|
|
persist="false"
|
|
style="overflow-y: auto;height: 100%;max-width: 230px;">
|
|
<script type="dojo/method" event="onClick" args="item">
|
|
if (fileStore.isItem(item)){
|
|
dojo.publish("/fileinfo", [fileStore, item]);
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dojox.layout.GridContainer"
|
|
region="center"
|
|
acceptTypes="Portlet"
|
|
hasResizableColumns="false"
|
|
nbZones="2"
|
|
dragHandleClass="dijitTitlePaneTitle"
|
|
>
|
|
<div dojoType="dojox.widget.Portlet" dndType="Portlet" title="File Info" class="portletNoBorder">
|
|
<script type="dojo/connect">
|
|
var mapping = {
|
|
"fileName" : "name",
|
|
"filePath": "path",
|
|
"fileSize": "size",
|
|
"fileModified": "modified",
|
|
"fileParent":"parentDir",
|
|
"fileIsDir": "directory"
|
|
};
|
|
|
|
dojo.subscribe("/fileinfo", function(store, item) {
|
|
for (var dijitId in mapping) {
|
|
var attrib = mapping[dijitId];
|
|
var val = store.getValue(item, attrib);
|
|
if (attrib == "size") {
|
|
val += " bytes";
|
|
} else if (attrib == "modified") {
|
|
val = dojo.date.locale.format(new Date(Number(val)), {formatLength: "medium"});
|
|
} else if (attrib == "directory") {
|
|
val = val ? "Yes" : "No";
|
|
}
|
|
|
|
dijit.byId(dijitId).attr("content", val);
|
|
}
|
|
});
|
|
</script>
|
|
<div dojoType="dojox.layout.TableContainer" class="labelTable" spacing="0">
|
|
<div dojoType="dijit.layout.ContentPane" label="Name:" id="fileName"></div>
|
|
<div dojoType="dijit.layout.ContentPane" label="Path:" id="filePath"></div>
|
|
<div dojoType="dijit.layout.ContentPane" label="Size:" id="fileSize"></div>
|
|
<div dojoType="dijit.layout.ContentPane" label="Modified:" id="fileModified"></div>
|
|
<div dojoType="dijit.layout.ContentPane" label="Parent Directory:" id="fileParent"></div>
|
|
<div dojoType="dijit.layout.ContentPane" label="Is Directory?:" id="fileIsDir"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dojox.widget.Portlet" dndType="Portlet" title="File Contents"
|
|
id="fileContentPortlet"
|
|
style="max-height: 350px;">
|
|
<script type="dojo/connect" event="startup">
|
|
var widget = dijit.byId("fileContents");
|
|
dojo.style(this.containerNode, {
|
|
height: "310px",
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
paddingRight: 0
|
|
});
|
|
dojo.subscribe("/fileinfo", function(store, item) {
|
|
var path = dojo.config.baseUrl + "../" + store.getValue(item, "path");
|
|
|
|
if (path.indexOf(".png") > -1 || path.indexOf(".jpg") > -1 || path.indexOf(".gif") > -1) {
|
|
widget.attr("content", "<img src='" +path + "'>");
|
|
} else if(store.getValue(item, "size") > 0
|
|
&& path.indexOf(".zip") < 0
|
|
&& path.indexOf(".tgz") < 0){
|
|
widget.attr("href", path);
|
|
} else {
|
|
widget.attr("content", "");
|
|
}
|
|
});
|
|
</script>
|
|
<div dojoType="dijit.layout.ContentPane" id="fileContents" parseOnLoad="false">
|
|
<script type="dojo/method" event="_setContent" args="data, isFake">
|
|
var text = typeof data == "string" ? data : data.textContent;
|
|
if (text.indexOf("<img") != 0 && text.indexOf("<span") != 0) {
|
|
text = text.replace(/</gm, "<").replace(/>/gm, ">")
|
|
.replace(/\t/g, " ").split("\n").join("<br>");
|
|
}
|
|
dijit.layout.ContentPane.prototype._setContent.apply(this, [text, isFake]);
|
|
</script>
|
|
File contents are loaded here. Click on any file in the tree to see its contents.
|
|
</div>
|
|
</div>
|
|
|
|
<div dojoType="dojox.widget.Portlet" dndType="Portlet" title="Selected Files">
|
|
<script type="dojo/connect">
|
|
var timer;
|
|
|
|
dojo.subscribe("/fileChange", dojo.hitch(this, function(items){
|
|
this._items = items;
|
|
if (this._started) {
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
}
|
|
timer = setTimeout(dojo.hitch(this, "updateChart"), 200);
|
|
}
|
|
}));
|
|
|
|
</script>
|
|
<script type="dojo/connect" event="startup">
|
|
dojo.require("dojox.charting.themes.Bahamation");
|
|
var dc = dojox.charting;
|
|
|
|
var container = dojo.create("div", {}, this.containerNode);
|
|
dojo.style(container, {"height": "300px", "width" : "300px"});
|
|
|
|
console.log("dimensions of container are", dojo.marginBox(container));
|
|
|
|
var chart = this.chart = new dc.Chart2D(container);
|
|
chart.setTheme(dc.themes.Bahamation);
|
|
chart.addPlot("default", {
|
|
type: "Pie",
|
|
font: "normal normal 11pt Tahoma",
|
|
fontColor: "black",
|
|
labelOffset: -30,
|
|
radius: 80
|
|
});
|
|
this.updateChart();
|
|
</script>
|
|
<script type="dojo/method" event="updateChart">
|
|
var extensions = {};
|
|
var items = this._items;
|
|
var dc = dojox.charting;
|
|
|
|
if (!items || items.length < 1) {
|
|
return;
|
|
}
|
|
|
|
function val(item, attr) {
|
|
return fileStore.getValue(item, attr);
|
|
}
|
|
function getExtension(item) {
|
|
if (val(item, "directory")) {
|
|
return "folder";
|
|
}
|
|
var str = val(item, "name");
|
|
var parts = str.split(".");
|
|
if (parts.length < 2) {
|
|
return "none";
|
|
}
|
|
return parts[1];
|
|
}
|
|
|
|
dojo.forEach(items, function(item){
|
|
if (val(item, "directory")) {
|
|
return;
|
|
}
|
|
|
|
var count = extensions[getExtension(item)] ;
|
|
if (!count) {
|
|
count = 0;
|
|
}
|
|
var ext = getExtension(item);
|
|
extensions[ext] = ++count;
|
|
});
|
|
var series = [];
|
|
for (var ext in extensions) {
|
|
series.push({
|
|
y : extensions[ext],
|
|
text: ext,
|
|
stroke: "black",
|
|
tooltip: extensions[ext] + " " +
|
|
(ext == "none" ?
|
|
"files with no extension" :
|
|
ext + " files")
|
|
+ " found"
|
|
});
|
|
}
|
|
|
|
|
|
this.chart.addSeries("Series A", series);
|
|
this.chart.resize(300, 300);
|
|
|
|
dojo.forEach(this._anims || [], function(anim){
|
|
anim.destroy();
|
|
});
|
|
|
|
this._anims = [
|
|
new dc.action2d.MoveSlice(this.chart, "default"),
|
|
new dc.action2d.Highlight(this.chart, "default"),
|
|
new dc.action2d.Tooltip(this.chart, "default")];
|
|
|
|
this.chart.render();
|
|
</script>
|
|
<div>
|
|
This Pie chart shows the proportion of files in the Dojo toolkit.
|
|
As you open folders in the tree, it updates the chart.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<table id="gridDataTable" style="display:none;">
|
|
<thead>
|
|
<tr>
|
|
<th >First Name</th>
|
|
<th >Last Name</th>
|
|
<th >DOB</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr >
|
|
<td >Davy</td>
|
|
<td >Jones</td>
|
|
<td >10/26/1974</td>
|
|
</tr>
|
|
<tr >
|
|
<td >Dee</td>
|
|
<td >Murphy</td>
|
|
<td >2/25/1936</td>
|
|
</tr>
|
|
<tr >
|
|
<td >Dozy</td>
|
|
<td >Kowalski</td>
|
|
<td >3/17/1991</td>
|
|
</tr>
|
|
<tr >
|
|
<td >Mick</td>
|
|
<td >Mickelson</td>
|
|
<td >3/31/1993</td>
|
|
</tr>
|
|
<tr >
|
|
<td >Titch</td>
|
|
<td >Woods</td>
|
|
<td >1/29/1998</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |