this.className = "javaxt.dhtml.DataGrid";

var me = this;

var table;

var mask;

var currPage = 1;

var eof = false;

var pageRequests = {};

var loading = false;

var checkboxHeader;

var columns;

var rowHeight; //<-- Assumes all the rows are the same height!

//Legacy config parameters

var filterName, filter;

//Create default style

var defaultStyle = {};

if (javaxt.dhtml.style){

if (javaxt.dhtml.style.default){

var tableStyle = javaxt.dhtml.style.default.table;

if (tableStyle){

defaultStyle = tableStyle;

var checkboxStyle = javaxt.dhtml.style.default.checkbox;

defaultStyle.checkbox = checkboxStyle;

}

}

}

//Set default config

var defaultConfig = {

/** Style config. See default styles in javaxt.dhtml.Table for a list of

style: defaultStyle,

/** Used to define columns to display. Each entry in the array should

columns: [],

/** The URL endpoint that this component uses to fetch records

url: "",

/** JSON object with key/value pairs that are appended to the URL

params: null,

/** Data to send in the body of the request. This parameter is optional.

payload: null,

/** If true, and if the payload is empty, will sent params as a URL

post: false,

/** Used to specify the page size (i.e. the maximum number records to

limit: 50,

/** If true, the server will be asked to return a total record count by

count: false,

/** If true, the grid will automatically fetch records from the server

autoload: false,

/** If true, the grid will sort values in the grid locally using whatever

localSort: false,

/** Optional list of field names used to specify which database fields

fields: [],

/** If true, will hide the header row. Default is false.

hideHeader: false,

/** If true, the table will allow users to select multiple rows using

multiselect: false,

/** Default method used to get responses from the server. Typically, you

getResponse: function(url, payload, callback){

//Transform GET request into POST request if possible. This will

//tidy up the URLs and reduce log size

var contentType;

if (!payload && config.post==true){

contentType = "application/x-www-form-urlencoded";

var idx = url.indexOf("?");

if (idx>-1){

payload = url.substring(idx+1);

url = url.substring(0, idx);

}

}

//Get response

javaxt.dhtml.utils.get(url, {

payload: payload,

contentType: contentType,

success: function(text, xml, url, request){

callback.apply(me, [request]);

},

failure: function(request){

callback.apply(me, [request]);

}

});

},

/** Default method used to parse responses from the server. Should return

parseResponse: function(request){

return [];

},

/** Default method used to update a row with values. This method can be

update: function(row, record){

for (var i=0; i<record.length; i++){

row.set(i, record[i]);

}

},

/** DOM element with custom show() and hide() methods. The mask is

mask: null

};

//**************************************************************************

//** Constructor

//**************************************************************************

var init = function(){

//Merge config with default config

config = merge(config, defaultConfig);

//Extract required config variables

filterName = config.filterName;

if (config.sort==="local") config.localSort = true;

if (config.fields){

if (!isArray(config.fields)){

config.fields = config.fields.split(",");

}

}

else{

config.fields = [];

}

//Parse column config

var multiselect = config.multiselect;

columns = [];

for (var i=0; i<config.columns.length; i++){

var column = config.columns[i];

//Set "fields" class variable

if (column.field){

var addField = true;

for (var j=0; j<config.fields.length; j++){

if (config.fields[j]==column.field){

addField = false;

break;

}

}

if (addField) config.fields.push(column.field);

}

else{

//Don't allow remote sorting on columns without a field name

if (config.localSort!==true){

column.sortable = false;

}

}

//Clone the column config

var clone = {};

for (var p in column) {

if (column.hasOwnProperty(p)) {

clone[p] = column[p];

}

}

//Update "header" setting in the column config

var header = column.header;

if (header==='x' && !checkboxHeader){

clone.header = createCheckbox();

var checkbox = clone.header.checkbox;

checkboxHeader = {

idx: i,

isChecked: checkbox.isChecked,

check: checkbox.select,

uncheck: checkbox.deselect

};

}

else{

clone.header = createHeader(header, column.sortable);

}

columns.push(clone);

}

//Update column config using the "sort" filter

setFilter(config.filter);

//Create table

table = new javaxt.dhtml.Table(parent, {

multiselect: multiselect,

hideHeader: config.hideHeader,

columns: columns,

style: config.style

});

table.el.className = "javaxt-datagrid";

me.el = table.el;

//Get mask

mask = config.mask;

if (!mask) mask = table.getMask();

//Add load function to the table

table.load = function(records, append){

if (!append) me.clear();

var rows = table.addRows(records.length);

var select = false;

if (checkboxHeader){

select = checkboxHeader.isChecked();

}

var isDataStore = (records instanceof javaxt.dhtml.DataStore);

for (var i=0; i<rows.length; i++){

//Assign the record to the row

rows[i].record = isDataStore ? records.get(i) : records[i];

//Override the update method

rows[i].update = function(){

config.update(this, this.record);

};

//Override the native "set" method on the row

rows[i]._set = rows[i].set;

rows[i].set = function(key, val){

if (key==='x'){

//Create checkbox

for (var j=0; j<config.columns.length; j++){

if (config.columns[j].header==='x'){

var field = config.columns[j].field;

var col = this.childNodes[j];

var obj = col.getContent();

if (obj){

//Column has a checkbox already?

}

else{

val = field ? this.record[field] : this.record;

var checkboxDiv = createCheckbox(val, this);

var checkbox = checkboxDiv.checkbox;

if (select) checkbox.select();

this._set(j, checkboxDiv);

}

return;

}

}

}

else{

//Wrap value in an overflow div as requested

for (var j=0; j<config.columns.length; j++){

if (config.columns[j].header===key && config.columns[j].wrap===true){

val = wrap(val);

break;

}

}

this._set(key, val);

}

};

//Override the native "onclick" method on the row

rows[i]._onclick = rows[i].onclick;

rows[i].onclick = function(e){

//Special case for columns with checkboxes

if (checkboxHeader){

//Check if the client clicked inside a checkbox

var insideCheckbox = false;

var checkboxCol = this.childNodes[checkboxHeader.idx];

var checkbox = checkboxCol.getContent().checkbox;

var rect = _getRect(checkbox.el);

var clientX = e.clientX;

var clientY = e.clientY;

if (clientX>=rect.left && clientX<=rect.right){

if (clientY>=rect.top && clientY<=rect.bottom){

insideCheckbox = true;

}

}

if (insideCheckbox){

//Update checkbox header

if (checkbox.isChecked()){

//Count number of rows that are selected

var numRows = 0;

var checkedItems = 0;

var rows = this.parentNode.childNodes;

for (var i=1; i<rows.length; i++){ //skip phantom row

numRows++;

var checkboxCol = rows[i].childNodes[checkboxHeader.idx];

if (checkboxCol.getContent().checkbox.isChecked()){

checkedItems++;

}

}

//Check the checkbox header as needed

if (checkedItems===numRows){

checkboxHeader.check();

}

}

else{

//Uncheck the checkbox header

checkboxHeader.uncheck();

}

}

else{

if (!e.ctrlKey && !e.shiftKey){

var numSelectedRows = 0;

table.forEachRow(function (row) {

if (row.selected){

numSelectedRows++;

if (numSelectedRows>1){

//Update the click event to simulate a ctrl+click

e = new MouseEvent("click", {

isTrusted: e.isTrusted,

view: e.view,

bubbles: e.bubbles,

cancelable: e.cancelable,

clientX: e.clientX,

clientY: e.clientY,

screenX: e.screenX,

screenY: e.screenY,

altKey: e.altKey,

ctrlKey: true

});

//Exit forEachRow

return true;

}

}

});

}

}

}

this._onclick(e);

};

//Update the row

rows[i].update();

}

if (!append) table.update();

};

//Watch for selection change events

table.onSelectionChange = function(rows){

me.onSelectionChange();

};

//Watch for scroll events

table.onScroll = function(y, maxY, h){

//Calculate start and end rows

var startRow = Math.ceil(y/rowHeight);

if (startRow==0) startRow = 1;

var endRow = Math.ceil((y+h)/rowHeight);

var prevPage = currPage;

setPage(Math.ceil(endRow/config.limit));

//console.log(startRow + "/" + endRow + " (Page: " + currPage + ")");

var d = Math.abs(maxY-y);

if (d<rowHeight){ //if (y===maxY){

if (!eof){

if (currPage===prevPage) setPage(currPage+1);

load(currPage);

}

}

me.onScroll();

};

//Watch for header click events

table.onHeaderClick = sort;

//Watch for row click events

table.onRowClick = function(row, e){

me.onRowClick(row, e);

};

//Watch for key events

table.onKeyEvent = function(keyCode, modifiers){

me.onKeyEvent(keyCode, modifiers);

};

//Load records

if (config.autoload===true) load();

};

//**************************************************************************

//** setFilter

//**************************************************************************

/** Used to update the filter with new params

this.setFilter = function(newFilter){

console.warn(

"The filter object in the javaxt.dhtml.DataGrid class is a legacy " +

"feature and will be removed in the future.");

setFilter(newFilter);

};

var setFilter = function(newFilter){

if (!newFilter) newFilter = {};

if (!filter) filter = newFilter;

//Remove duplicates from newFilter

removeDuplicateParams(newFilter);

for (var key in newFilter) {

if (newFilter.hasOwnProperty(key)) {

filter[key] = newFilter[key];

}

}

var deletions = [];

for (var key in filter) {

if (filter.hasOwnProperty(key)) {

if (newFilter[key]===null || newFilter[key]==='undefined'){

deletions.push(key);

}

}

}

for (var i=0; i<deletions.length; i++){

var key = deletions[i];

delete filter[key];

}

for (var j=0; j<columns.length; j++){

columns[j].sort = null;

var colHeader = columns[j].header;

if (colHeader.setSortIndicator) colHeader.setSortIndicator(null);

}

if (filter.orderby){

var arr = filter.orderby.split(",");

for (var i=0; i<arr.length; i++){

var field = arr[i].trim();

if (field.length>0){

var fieldName, sortDirection;

field = field.toUpperCase();

if (field.endsWith(" ASC") || field.endsWith(" DESC")){

var x = field.lastIndexOf(" ");

fieldName = field.substring(0, x).trim();

sortDirection = field.substring(x).trim();

}

else{

fieldName = field;

sortDirection = "ASC";

}

for (var j=0; j<columns.length; j++){

if (columns[j].field){

if (columns[j].field.toUpperCase() === fieldName){

columns[j].sort = sortDirection;

var colHeader = columns[j].header;

if (colHeader.setSortIndicator){

colHeader.setSortIndicator(sortDirection);

}

break;

}

}

}

}

}

}

};

//**************************************************************************

//** getFilter

//**************************************************************************

/** Returns the current filter

this.getFilter = function(){

console.warn(

"The filter object in the javaxt.dhtml.DataGrid class is a legacy " +

"feature and will be removed in the future.");

return filter;

};

//**************************************************************************

//** getParams

//**************************************************************************

this.getParams = function(){

return config.params;

};

//**************************************************************************

//** setPage

//**************************************************************************

/** Used to set the currPage variable and call the onPageChange method.

var setPage = function(page){

if (isNaN(page) || page<1) page = 1;

if (page!=currPage){

var prevPage = currPage;

currPage = page;

me.onPageChange(currPage, prevPage);

}

};

//**************************************************************************

//** getCurrPage

//**************************************************************************

/** Returns the current page number

this.getCurrPage = function(){

return currPage;

};

//**************************************************************************

//** getScrollInfo

//**************************************************************************

/** Returns scroll position and dimenstions for the visible area.

this.getScrollInfo = function(){

return table.getScrollInfo();

};

//**************************************************************************

//** enableScroll

//**************************************************************************

/** Used to enable scrolling.

this.enableScroll = function(){

table.enableScroll();

};

//**************************************************************************

//** disableScroll

//**************************************************************************

/** Used to disable scrolling.

this.disableScroll = function(){

table.disableScroll();

};

//**************************************************************************

//** isScrollEnabled

//**************************************************************************

/** Returns true if scrolling is enabled.

this.isScrollEnabled = function(){

return table.isScrollEnabled();

};

//**************************************************************************

//** Events

//**************************************************************************

/** Called whenever the client scrolls within the table. */

this.onScroll = function(){};

/** Called whenever the table advances to the next page of records or

this.onPageChange = function(currPage, prevPage){};

this.onSelectionChange = function(){};

/** Called immediately before fetching records from the server. */

this.beforeLoad = function(page){};

/** Called immediately after fetching records from the server. */

this.onLoad = function(){};

/** Called whenever there is an issue fetching records from the server. */

this.onError = function(request){};

/** Called whenever the client clicks or taps on a row in the table. */

this.onRowClick = function(row, e){};

/** Called whenever a keyboard event is initiated from the table. */

this.onKeyEvent = function(keyCode, modifiers){};

/** Called whenever a client clicks on a checkbox, either in the header or

this.onCheckbox = function(value, checked, checkbox){};

/** Called whenever a client clicks on a header. */

this.onSort = function(idx, sortDirection){};

//**************************************************************************

//** forEachRow

//**************************************************************************

/** Used to traverse all the rows in the table using a callback function.

this.forEachRow = function(callback){

table.forEachRow(callback);

};

//**************************************************************************

//** select

//**************************************************************************

/** Used to select a given row in the grid

this.select = function(row){

table.select(row);

};

//**************************************************************************

//** selectAll

//**************************************************************************

/** Selects all the rows in the grid

this.selectAll = function(){

table.selectAll();

};

//**************************************************************************

//** deselectAll

//**************************************************************************

/** Deselects all the rows in the grid

this.deselectAll = function(){

table.deselectAll();

};

//**************************************************************************

//** clear

//**************************************************************************

/** Removes all the rows from the grid

this.clear = function(){

table.clear();

currPage = 1;

pageRequests = {};

if (checkboxHeader) checkboxHeader.uncheck();

};

//**************************************************************************

//** remove

//**************************************************************************

/** Removes a row from the grid

this.remove = function(row){

table.removeRow(row);

};

//**************************************************************************

//** show

//**************************************************************************

/** Used to unhide the grid if it is hidden

this.show = function(){

table.show();

};

//**************************************************************************

//** hide

//**************************************************************************

/** Used to hide the grid

this.hide = function(){

table.hide();

};

//**************************************************************************

//** focus

//**************************************************************************

/** Used to set browser focus on the table.

this.focus = function(){

table.focus();

};

//**************************************************************************

//** refresh

//**************************************************************************

/** Used to clear the grid and reload the first page.

this.refresh = function(callback){

me.clear();

//eof = false;

setPage(1);

load(1, callback);

};

//**************************************************************************

//** load

//**************************************************************************

/** Used to load records from the remote store. Optionally, you can pass an

this.load = function(){

if (arguments.length>0){

var records = arguments[0];

var page = 1;

if (arguments.length>1) page = parseInt(arguments[1]);

if (isNaN(page) || page<1) page = 1;

if (isArray(records) || records instanceof javaxt.dhtml.DataStore){

me.beforeLoad(page);

table.load(records, page>1);

setPage(page);

calculateRowHeight();

if (arguments.length===1){

eof = true;

}

else{ //caller provided a page number

if (records.length<config.limit) eof = true;

}

me.onLoad();

}

}

else{

load();

}

};

//**************************************************************************

//** setLimit

//**************************************************************************

/** Used to update the number of records to load per page.

this.setLimit = function(limit){

config.limit = limit;

};

//**************************************************************************

//** scrollTo

//**************************************************************************

/** Scrolls to the top of a page or to a row in the table

this.scrollTo = function(obj){

if (isElement(obj)){

var y = 0;

table.forEachRow(function (row) {

if (row==obj){

return true;

}

y += row.offsetHeight;

});

table.scrollTo(0, y);

return;

}

if (!isNumber(obj)) return;

var page = parseInt(obj);

//Calculate scroll

var y = ((page-1)*config.limit)*rowHeight;

if (y<0) y = 0;

//Check whether the page is already loaded in the grid

var numPagesInGrid = Math.ceil(table.getRowCount()/config.limit);

if (page>numPagesInGrid){

if (page==numPagesInGrid+1){

//Caller wants to jumpt to the next available page.

//Load the page and scroll when ready.

load(page, function(){

table.scrollTo(0, y);

});

}

else{