Footable 2 Select rows - wordpress

I'm using FOOTABLE to create job board. What I want to add is a checkbox option to select jobs (rows) so users can send cv to multiple jobs at once. Any idea on how to implement this in existing table?
simple example:
<table class="footable toggle-arrow" data-page-size="20" >
<thead>
<tr>
<th><!--select option id col--></th>
<th><span>Job Description</span></th>
<th><span>Area</span></th>
<th><span>Number</span></th>
<th><!--TYPE--></th>
<th><!--SEND--></th>
</tr>
</thead>
<tbody>
<tr><!---JOB-->
<td><input type="checkbox" value="id"></td>
<td>job description value</td>
<td>area value</td>
<td>job number</td>
<td data-value="4566">4566</td>
<td data-value="3"><img title="hot" src="vip.png" /></td>
<td></td>
</tr><!---END JOB-->
</tbody>
Thanks!


Here's a quick example of one way you could do this:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<a id="sendSelectedButton" href="#">Send Selected</a>
<table id="theTable">
<thead>
<tr>
<th></th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 1</td>
<td>send
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 2</td>
<td>send
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 3</td>
<td>send
</td>
</tr>
</tbody>
</table>
<script>
function sendRows(rows) {
if (rows === undefined ||
rows === null ||
rows.length === 0)
return;
//Do stuff to send rows here.
}
$(document).ready(function() {
$("#sendSelectedButton").on("click", function() {
var checkRows = $("#theTable").find("tbody tr").has("input:checked");
sendRows(checkRows);
});
$("table").on("click", "tr a", function() {
var row = $(this).parents("tr");
sendRows(row);
});
});
</script>
</body>
</html>
Here's a plunk with the same code: http://plnkr.co/edit/tK4WpCvV7vSjVFmKlJIx
I didn't add any Footable here because it doesn't seem like that Footable will affect it one way or another.
I think you'll find that things quickly get a lot more complex as your application matures. I'd suggest you look some type of data binding. I personally use Knockout.js. Even if you don't decide to use Knockout.js, I think their tutorial is pretty cool. (http://knockoutjs.com/index.html)

Related

Bootstrap tables is not working currectly on RTL direction

I'm writing a website that support arabic language. I'm using bootstrap-tables for my tables, It work very well, but when I change direction to RTL its not working currectly and when I push the table header to resiz it, next table header resize.
html:
<link href="https://unpkg.com/jquery-resizable-columns#0.2.3/dist/jquery.resizableColumns.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/jquery-resizable-columns#0.2.3/dist/jquery.resizableColumns.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>
<table dir="rtl" data-toggle="table" data-resizable="true">
<thead>
<tr>
<th> th1 </th>
<th> th2 </th>
<th> th3 </th>
</tr>
</thead>
<tbody>
<tr>
<td> td1 </td>
<td> td2 </td>
<td> td3 </td>
</tr>
<tr>
<td> td1 </td>
<td> td2 </td>
<td> td3 </td>
</tr>
<tr>
<td> td1 </td>
<td> td2 </td>
<td> td3 </td>
</tr>
</tbody>
<table>
js:
$(document).ready(function () {
$(function () {
$("#table").resizableColumns();
});
});

As I understand you used bootstrap-table and jquery.resizableColumns to make columns resizable. Bootstrap-table in rtl direction just works fine and it should not have any problem the problem is in jquery.resizableColumns.
To solve this problem you can customize jquery.resizableColumns.js as below:
remove marked
remove purple marked and add green marked

Google sheets app script fails to process CSS styling

I have an image in google spreadsheet. Pressing the button fires the script which is supposed to open a stylized table. Instead, it opens a table and fails to apply CSS style to it. I read Google documentation on making a separate file for styling and putting an include in the main HTML file as follows
// <?!= include('stylesheet'); ?>
I did this. I get a table with with being a plain text.
How to make the script actually process CSS styles?
gs file:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
};
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('Stundu_laiki')
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
stylesheet.html file with CSS for tables
<style>
.w3-table,.w3-table-all{}.w3-table-all{border:1px solid #ccc}
.w3-table-lined tr:nth-child(odd){background-color:#fff}.w3-table-lined tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
</style>
stundu_laiki.html with a table
<!DOCTYPE html>
<html>
<head>
<base target="_top">
**<?!= include('stylesheet'); ?>**
</head>
<body>
<table width="98%" border="1" cellpadding="3px" cellspacing="0" style="w3-table-all">
<tr>
<td width="23%">1.</td>
<td width="77%">8:30 - 9:10</td>
</tr>
<tr>
<td>2.</td>
<td>9:20 - 10:00</td>
</tr>
<tr>
<td>3.</td>
<td>10:10 - 10:50</td>
</tr>
<tr>
<td>4.</td>
<td>11:05 - 11:45</td>
</tr>
<tr>
<td>5.</td>
<td>12:00 - 12:40</td>
</tr>
<tr>
<td>6.</td>
<td>13:10 - 13:50</td>
</tr>
<tr>
<td>7.</td>
<td> 14:00 - 14:40</td>
</tr>
<tr>
<td>8.</td>
<td>14:50 - 15:30</td>
</tr>
<tr>
<td>9.</td>
<td>15:35 - 16:15</td>
</tr>
</table>
<h2> Saīsināto dienu stundu laiki</h2>
<table width="98%" border="1" cellpadding="3px" cellspacing="0" class="w3-table-all">
<tr>
<td width="23%">1.</td>
<td width="77%">8:30 - 9:00</td>
</tr>
<tr>
<td>2.</td>
<td>9:10 - 9:40</td>
</tr>
<tr>
<td>3.</td>
<td>9:50 - 10:20</td>
</tr>
<tr>
<td>4.</td>
<td>10:35 - 11:05</td>
</tr>
<tr>
<td>5.</td>
<td>11:20 - 11:50</td>
</tr>
<tr>
<td>6.</td>
<td>12:20 - 12:50</td>
</tr>
<tr>
<td>7.</td>
<td> 13:00 - 13:30</td>
</tr>
<tr>
<td>8.</td>
<td>13:40 - 14:10</td>
</tr>
<tr>
<td>9.</td>
<td>14:15 - 14:45</td>
</tr>
</table>
</body>
</html>

Use createTemplateFromFile instead then evaluate your html. See final script below.
Final script:
function openDialog() {
var html = HtmlService.createTemplateFromFile('stundu_laiki')
.evaluate()
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
Output:

Static row above knockout.js observable array table

I have a html table and the rows come form an observable array....
<tbody data-bind="foreach: TableArray">
<tr>
<td data-bind:"text: Item1"></td>
etc....
How can I skip the first row... so I can add a static row (not a header) to the top of the table.
<tbody data-bind="foreach: TableArray">
<tr>
<td> Static Row </td>
</tr>
<tr>
<td data-bind:"text: Item1"></td>

The secret is in the containerless foreach markup. Check "Note 4" of the following link:
http://knockoutjs.com/documentation/foreach-binding.html
Here's a fiddle showing a basic example.
http://jsfiddle.net/internetH3ro/M9f4D/7/
Basic view model:
function ViewModel() {
var self = this;
self.items = [{
firstName: 'James',
lastName: 'McConnell'
},{
firstName: 'Scott',
lastName: 'Hanselman'
},{
firstName: 'Bill',
lastName: 'Gates'
}];
}
HTML markup:
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<!-- ko foreach: items -->
<tr>
<td><span data-bind="text: $data.firstName"></span></td>
<td><span data-bind="text: $data.lastName"></span></td>
</tr>
<!-- /ko -->
</table>
So you just wrap the content you want repeated in a comment, and Knockout will repeat that content for each element in your collection. Pretty nifty, I wish Angular had something like this.

One way to approach the issue would be to use Knockout's containerless binding syntax.
See Note 4 in Knockout's documentation of the foreach binding.
http://knockoutjs.com/documentation/foreach-binding.html
Javascript
var YourVM = function () {
this.allItems = ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]);
};
ko.applyBindings(new YourVM());
HTML
<table>
<thead>
<tr>
<th>Your Column</th>
</tr>
</thead>
<tbody>
<tr class="row-static">
<td>Static Row</td>
</tr> <!-- ko foreach: allItems -->
<tr>
<td data-bind="text: $data"></td>
</tr> <!-- /ko -->
</tbody>
</table>
Live example on JS Bin
http://jsbin.com/AzEwEce/1/edit

You could use an if binding to only output an extra row on the "first" pass.
Example:
<table data-bind ="foreach: rows">
<tr data-bind="if: $index() == 0" >
<td><span data-bind="text: $index"></span></td>
</tr>
<tr>
<td><span data-bind="text: text"></span></td>
</tr>
</table>

Problem with HTML? Scrollbars Not Appearing via window.open

I have a VB.NET web application where I am opening a window when a user clicks on a link to view some external tabular data. The data I'm displaying definitely requires a vertical scrollbar in order to see everything...For some reason I cannot get a vertical scrollbar to show up when the new window loads.
Here's the JS that opens the window:
function showDataTable(id, type) {
var pageUrl = "queries/ReportData.aspx";
windowHandle = window.open(pageUrl, "FarmQuery", 'resizable=yes,scrollbars=yes');
windowHandle.focus();
}
The corresponding Page_Load method for the window being opened:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim db As New UtilDb
Dim errMsg As String = ""
If (Not Page.IsPostBack) Then
db.OpenGeoDb(MyGlobals.GeodataServiceName, errMsg)
LoadFarmInfo(db, errMsg)
LoadQueryData(db, errMsg)
db.CloseGeoDb()
End If
End Sub
And for what it's worth I added
style="overflow: scroll;"
To the div containing the data table.
It almost seems like the data table is rendering after the rest of the "page" has been contructed. Any suggestions?
EDIT
The problem occurs in Firefox and IE. I modified the window parameters argument in the JS from 'resizable=yes,scrollbars=yes' to 'resizable=yes,scrollbars=yes,toolbar=yes' and did get the toolbar to show up which indicates those options are "working".
Unfortunately I cannot post the HTML.
EDIT
Here's the sample HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>
Farm Query
</title><link href="../Default.css" type="text/css" rel="stylesheet" /><link href="ReportData.css" type="text/css" rel="stylesheet" /></head>
<body>
<form name="form1" method="post" action="ReportData.aspx?wfpId=DES-046&type=1" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="#" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKP2r/ZCgLbzub6CgKJ+/qJC4VfHXBxZJkelz+i1sSmIFdWB5tZ" />
</div>
<div style="overflow: auto;">
<table class="dxgvControl" cellspacing="0" cellpadding="0" id="FarmerInfoGridView" border="0" style="width:600px;border-collapse:collapse;border-collapse:separate;">
<tr>
<td><table id="FarmerInfoGridView_DXMainTable" class="dxgvTable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;empty-cells:show;">
<tr id="FarmerInfoGridView_DXDataRow0" class="dxgvDataRow">
<td id="FarmerInfoGridView_tcrow0" colspan="7" style="border-right-width:0px;border-bottom-width:0px;">
<table width="100%" cellpadding="5" cellspacing="5">
<tr>
<td class="keyDescription">WFP ID:</td>
<td>asdf</td>
</tr>
<tr>
<td class="keyDescription">Name:</td>
<td>Name, Name</td>
</tr>
<tr>
<td class="keyDescription">Company Name:</td>
<td>Acme</td>
</tr>
<tr>
<td class="keyDescription">Address:</td>
<td>123 Lotus Lane</td>
</tr>
<tr>
<td class="keyDescription">City/State:</td>
<td>NY, NY</td>
</tr>
<tr>
<td class="keyDescription">Zip:</td>
<td>11111</td>
</tr>
</table>
</td>
</tr>
</table><img id="FarmerInfoGridView_IADD" src="#" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="FarmerInfoGridView_IADU" src="/SAM_Project/WebResource.axd" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="FarmerInfoGridView_IDHF" src="/SAM_Project/WebResource.axd" alt="Hide" style="border-width:0px;position:absolute;visibility:hidden;" /><div id="FarmerInfoGridView_LP" align="center" style="left:0px;top:0px;z-index:30000;display:none;">
<table class="dxgvLoadingPanel" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
<tr>
<td class="dx"><img src="/SAM_Project/WebResource.axd" alt="" align="middle" style="border-width:0px;" /></td><td class="dx" style="padding-left:0px;">Loading…</td>
</tr>
</table>
</div><div id="FarmerInfoGridView_LD" class="dxgvLoadingDiv" style="display:none;z-index:29999;position:absolute;">
</div><input type="hidden" name="FarmerInfoGridView$DXSelInput" id="FarmerInfoGridView_DXSelInput" /><table id="FarmerInfoGridView_DXStyleTable" border="0" style="display:none;">
<tr>
<td></td>
</tr><tr class="dxgvEditingErrorRow">
<td class="dxgv" colspan="7" style="border-right-width:0px;"></td>
</tr><tr class="dxgvSelectedRow">
<td></td>
</tr><tr class="dxgvFocusedRow">
<td></td>
</tr><tr class="dxgvFocusedGroupRow">
<td></td>
</tr><tr class="dxgvDataRow">
<td></td>
</tr>
</table><input type="hidden" name="FarmerInfoGridView$CallbackState" id="FarmerInfoGridView_CallbackState" value="#" /></td>
</tr>
</table><script id="dxss_27477558" type="text/javascript">
<!--
var dxo = new ASPxClientGridView('FarmerInfoGridView');
window['FarmerInfoGridView'] = dxo;
dxo.callBack = function(arg) { WebForm_DoCallback('FarmerInfoGridView',arg,aspxCallback,'FarmerInfoGridView',aspxCallbackError,true); };
dxo.callBacksEnabled=true;
dxo.pageRowCount=1;
dxo.pageRowSize=10;
dxo.selectedWithoutPageRowCount=0;
dxo.visibleStartIndex=0;
dxo.focusedRowIndex=-1;
dxo.allowFocusedRow=false;
dxo.allowMultiSelection=false;
dxo.isColumnsResizable=false;
dxo.isVerticalScrolling=false;
dxo.isHorizontalScrolling=false;
dxo.isMainControlResizable=false;
dxo.callbackOnFocusedRowChanged=false;
dxo.callbackOnSelectionChanged=false;
dxo.autoFilterDelay='1200';
dxo.ClearColumns();
dxo.CreateColumn('',0,'WFP_ID',1);
dxo.CreateColumn('',1,'Last_Name',1);
dxo.CreateColumn('',2,'First_name',1);
dxo.CreateColumn('',3,'Farm_Name',1);
dxo.CreateColumn('',4,'Address',1);
dxo.CreateColumn('',5,'City_State',1);
dxo.CreateColumn('',6,'Zip',1);
dxo.InlineInitialize();
//-->
</script>
<table class="dxgvControl" cellspacing="0" cellpadding="0" id="AnimalGridView" border="0" style="width:600px;border-collapse:collapse;border-collapse:separate;">
<tr>
<td><table id="AnimalGridView_DXMainTable" class="dxgvTable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;empty-cells:show;">
<tr id="AnimalGridView_DXDataRow0" class="dxgvDataRow">
<td id="AnimalGridView_tcrow0" colspan="43" style="border-right-width:0px;border-bottom-width:0px;">
<table cellpadding="5" cellspacing="5" width="100%" id="rounded-corner">
<tr>
<th colspan="8" class="tableHeader">Animal Inventory</th>
</tr>
<tr>
<td colspan="2">Updated:</td>
<td colspan="2">11/14/2007</td>
<td colspan="2">Total AU:</td>
<td colspan="2">0</td>
</tr>
<tr>
<td>Mature Dairy</td>
<td>0</td>
<td>Dairy Heifers</td>
<td>0</td>
<td>Veal</td>
<td>0</td>
<td>Beef</td>
<td>0</td>
</tr>
<tr>
<td>Calves</td>
<td>0</td>
<td>Bulls</td>
<td>0</td>
<td>Ducks</td>
<td>0</td>
<td>Elk</td>
<td>0</td>
</tr>
<tr>
<td>Sheep</td>
<td>0</td>
<td>Lambs</td>
<td>0</td>
<td>Geese</td>
<td>0</td>
<td>Buffalo</td>
<td>0</td>
</tr>
<tr>
<td>Goats</td>
<td>2</td>
<td>Kids</td>
<td>0</td>
<td>Rabbits</td>
<td>0</td>
<td>Bears</td>
<td>0</td>
</tr>
<tr>
<td>Pigs</td>
<td>0</td>
<td>Piglets</td>
<td>0</td>
<td>Emu</td>
<td>0</td>
<td>Mountain Lion</td>
<td>0</td>
</tr>
<tr>
<td>Horses</td>
<td>0</td>
<td>Foals</td>
<td>0</td>
<td>Ostrich</td>
<td>0</td>
<td>Guinea Pigs</td>
<td>0</td>
</tr>
<tr>
<td>Donkeys</td>
<td>0</td>
<td>Oxen</td>
<td>0</td>
<td>Walaroo</td>
<td>0</td>
<td>Greenhouse</td>
<td>0</td>
</tr>
<tr>
<td>Chickens</td>
<td>0</td>
<td>Turkeys</td>
<td>0</td>
<td>Llama</td>
<td>0</td>
<td>Vegetables</td>
<td>0</td>
</tr>
<tr>
<td>Ginny Hens</td>
<td>0</td>
<td>Peacock</td>
<td>0</td>
<td>Alpaca</td>
<td>0</td>
<td>Pheasant</td>
<td>0</td>
</tr>
<tr>
<td>Deer</td>
<td>0</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table><img id="AnimalGridView_IADD" src="/SAM_Project/WebResource.axd" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="AnimalGridView_IADU" src="/SAM_Project/WebResource.axd" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="AnimalGridView_IDHF" src="/SAM_Project/WebResource.axd" alt="Hide" style="border-width:0px;position:absolute;visibility:hidden;" /><div id="AnimalGridView_LP" align="center" style="left:0px;top:0px;z-index:30000;display:none;">
<table class="dxgvLoadingPanel" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
<tr>
<td class="dx"><img src="/SAM_Project/WebResource.axd" alt="" align="middle" style="border-width:0px;" /></td><td class="dx" style="padding-left:0px;">Loading…</td>
</tr>
</table>
</div><div id="AnimalGridView_LD" class="dxgvLoadingDiv" style="display:none;z-index:29999;position:absolute;">
</div><input type="hidden" name="AnimalGridView$DXSelInput" id="AnimalGridView_DXSelInput" /><table id="AnimalGridView_DXStyleTable" border="0" style="display:none;">
<tr>
<td></td>
</tr><tr class="dxgvEditingErrorRow">
<td class="dxgv" colspan="43" style="border-right-width:0px;"></td>
</tr><tr class="dxgvSelectedRow">
<td></td>
</tr><tr class="dxgvFocusedRow">
<td></td>
</tr><tr class="dxgvFocusedGroupRow">
<td></td>
</tr><tr class="dxgvDataRow">
<td></td>
</tr>
</table><input type="hidden" name="AnimalGridView$CallbackState" id="AnimalGridView_CallbackState" value="#" /></td>
</tr>
</table><script id="dxss_1369069069" type="text/javascript">
<!--
var dxo = new ASPxClientGridView('AnimalGridView');
window['AnimalGridView'] = dxo;
dxo.callBack = function(arg) { WebForm_DoCallback('AnimalGridView',arg,aspxCallback,'AnimalGridView',aspxCallbackError,true); };
dxo.callBacksEnabled=true;
dxo.pageRowCount=1;
dxo.pageRowSize=10;
dxo.selectedWithoutPageRowCount=0;
dxo.visibleStartIndex=0;
dxo.focusedRowIndex=-1;
dxo.allowFocusedRow=false;
dxo.allowMultiSelection=false;
dxo.isColumnsResizable=false;
dxo.isVerticalScrolling=false;
dxo.isHorizontalScrolling=false;
dxo.isMainControlResizable=false;
dxo.callbackOnFocusedRowChanged=false;
dxo.callbackOnSelectionChanged=false;
dxo.autoFilterDelay='1200';
dxo.ClearColumns();
//-->
</script>
<div style="margin-left: auto; margin-right: auto; width: 450px;padding: 5px 5px;"><input id="btnClose" type="submit" value="Close Window" onclick="window.close();" /></div>
</div>
<script type="text/javascript">
//<![CDATA[
WebForm_InitCallback();//]]>
</script>
</form>
</body>
</html>

If you want to always force a scroll bar on a page, try adding the following CSS to the page:
html {
overflow-y:scroll;
}
This will cause the page to always have a vertical scrollbar no matter if it is needed or not.
You might also want to change your code to use:
windowHandle = window.open(pageUrl, "FarmQuery", 'resizable=1,scrollbars=1');
as 1=yes/true but yes does not necessarily equal 1/true (funny cross browser logic!).

This definitely sounds like a CSS issue to me.
Try stripping your link to the CSS file out of the popup page and then see if the problem still exists (I bet it won't).
Then, this becomes a new question: What CSS could cause the scrollbars to disappear on a page?
A rule of overflow: hidden; on the body is a very likely culprit.

Have you tried sizing your main browser window to approximately the size of your popup window and directly navigating to the page that you would display in your popup? Do the scrollbars appear when you load the page directly? The popup window is possibly a red herring.

Scrollbars should just appear when you open a new window if the content doesn't fit the client area. Try adding "width=600,height=600" in your options to reduce the window size right down...if no bars are appearing it is more likely a css problem.
Remove your "default.css" line. Do you still get the problem?

When I tried the html you provided, and I resize the window so the content don't fit, I get scrollbars on the div (which appears slightly smaller than the full window). I tried to remove the style="overflow: auto;" on the div tag, and the scrollbar was only applied on the full window. This seems to work, and when you say that the scrollbars dont apply, my first thought is that it is something defined in your CSS files that causes the problem. It might be in either ../Default.css or ReportData.css .
If the style for div is set to overflow:hidden in one of the css files, you can override this to set style="overflow: visible;" in the div tag on your page. This will cause the content of the div not to be clipped, and scrolling is handled by the window instead of the div tag.
If it is not the div tag that is the problem, it might be some other tags. Look for overflow: hidden on any tags in your css files to see if that might be the problem.

There could be a Position:fixed in your css file which is preventing the scrollbars to appear.

window.open('CHFPhoneMonitoringChecklist.html', 'CHFwin', 'resizable=yes,location=1,status=1,scrollbars=1,width=1250,height=1000');

dojox.grid.DataGrid dojox.data.HtmlStore

It would be so slick if you could use dojox.grid.DataGrid and dojox.data.HtmlStore together. Maybe there is an easier way to get sortable tables with Dojo, but this is all I can come up with... and it doesn't quite work. There is a DojoCampus example of this but it does not work either! What am I missing?
<html>
<head>
<style type="text/css" media="all">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/resources/dojo.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/grid/resources/tundraGrid.css";
</style>
<script type="text/javascript">
var djConfig = {parseOnLoad: true};
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dojox.data.HtmlStore");
dojo.require("dojox.grid.DataGrid");
dojo.require('dojo.parser');
</script>
<script type="text/javascript">
var layoutBooks = [[{
field: "isbn",
name: "ISBN",
width: 10
},
{
field: "author",
name: "Author",
width: 10
},
{
field: "title",
name: "Title",
width: 'auto'
}]];
</script>
</head>
<body class=tundra>
<b>
Standard HTML table:
</b>
<br>
<table id="myData2">
<thead>
<tr>
<th>
isbn
</th>
<th>
title
</th>
<th>
author
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
A9B57C
</td>
<td>
Title of 1
</td>
<td>
Author of 1
</td>
</tr>
<tr>
<td>
A9B57F
</td>
<td>
Title of 2
</td>
<td>
Author of 2
</td>
</tr>
<tr>
<td>
A9B577
</td>
<td>
Title of 3
</td>
<td>
Author of 3
</td>
</tr>
<tr>
<td>
A9B574
</td>
<td>
Title of 4
</td>
<td>
Author of 4
</td>
</tr>
<tr>
<td>
A9B5CC
</td>
<td>
Title of 5
</td>
<td>
Author of 5
</td>
</tr>
</tbody>
</table>
<br>
<br>
<b>
dojox.grid.DataGrid connected to the above table:
</b>
<br>
<div dojoType="dojox.data.HtmlStore" dataId="myData2" jsId="gridStore">
</div>
<div style="width: 400px; height: 200px;">
<div id="grid" dojoType="dojox.grid.DataGrid" store="gridStore" structure="layoutBooks"
query="{}" rowsPerPage="40">
</div>
</div>

I think this example doesn't work because of line breaks in your th tags. Try writing ths in one line:
<th>isbn</th>

for sorting the grid you can do grid.setSortIndex(colIndx,isAsc)
1) colIndx is zero based index of the columns of the grid.
2) if isAsc is true that column will be sorted in ascending order.

Resources