Nice article. Thanks for sharing.

Do you happen to know how I can refresh a YUI datatable from the code? not using a subscribe to an event.

I have code to do a requery that works fine. However, I also have code to perform a database update on a click. I would like to refresh the datatable contents after that database update.

Thanks in advance.

Best regards,

Rudi

Problem: If I select multiple rows , I am not able to fetch the data of the table (which is nested within a olumn).
PLease tell me how can I access the data in the table nested within the column of a datatable.When multiple rows are selected.

2) If have used the functions updateRow() or UpdateRecords() for pasting the data from one row into another.
The problem of using these functions in Paste option is that these two functions update the row of the datatable BUT it also keep updating the rows even when I make changes in the copied row later.
PLEASE HELP ME ON THIS URGENTLY

THanks in advance :)

Usability above precedence.
http://www.useit.com/alertbox/20050711.html

I am currently also looking into the “column freeze” feature you talked about (“if the table is going to scroll horizontally, allow the developer to freeze a column or multiple columns so that they are shown when scrolling from left to right.”)

Do you know if it is doable with the current YUI version, or any possible workarounds?

Thanks,
Chi

Thanks,
Zach

i want the sort key the client sets to be set even after data refresh.If u have a solution please help me.This is the code

YUI Library Examples: DataTable Control: Basic Example

/* custom styles for this example */
.yui-skin-sam .yui-dt-liner { white-space:nowrap; }

/* Remove row striping, column borders, and sort highlighting */
/* .yui-skin-sam tr.yui-dt-odd,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-desc,
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-even td.yui-dt-desc {
background-color: #fff;
}*/
.yui-skin-sam .yui-dt tbody td {
border-bottom: 1px solid #fff;
}
.yui-skin-sam .yui-dt thead th {
border-bottom: 1px solid #7f7f7f;
}
.yui-skin-sam .yui-dt tr.yui-dt-last td,
.yui-skin-sam .yui-dt th,
.yui-skin-sam .yui-dt td {
border: none;
}

/* Class for marked rows */

.yui-skin-sam .yui-dt tr.mark td.yui-dt0-col-Price,
.yui-skin-sam .yui-dt tr.mark td.yui-dt0-col-Price,
.yui-skin-sam .yui-dt tr.mark td.yui-dt0-col-Price,
.yui-skin-sam .yui-dt tr.mark td.yui-dt0-col-Price {
background-color: #891010;
color: #fff;
}

.yui-skin-sam .yui-dt tr.m td.yui-dt0-col-Price,
.yui-skin-sam .yui-dt tr.m td.yui-dt0-col-Price,
.yui-skin-sam .yui-dt tr.m td.yui-dt0-col-Price,
.yui-skin-sam .yui-dt tr.m td.yui-dt0-col-Price {
background-color: #108918;
color: #fff;
}

var Dom = YAHOO.util.Dom;
YAHOO.util.Event.addListener(window, “load”, function() {
YAHOO.example.XHR_Text = function() {

var myColumnDefs = [
{key:"Stock", sortable:true, resizeable:true},
{key:"Price", sortable:true, resizeable:true},
{key:"Per.Change", label:"%Change", sortable:true, resizeable:true},
{key:"Change", sortable:true, resizeable:true},
{key:"High", sortable:true, resizeable:true},
{key:"Low", sortable:true, resizeable:true},
{key:"Volume", sortable:true, resizeable:true}

];

myDataSource = new YAHOO.util.DataSource(“assets/js/price1.txt”);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;
myDataSource.responseSchema = {
recordDelim: “|;”,
fieldDelim: “;”,
fields: [{key:"Stock", parser:"string"},
{key:"Price", parser:"number"},
{key:"Volume"},
{key:"Per.Change", parser:"number"},
{key:"Change", parser:"number"},
{key:"High", parser:"number"},
{key:"Low", parser:"number"}

]

};

var myRowFormatter = function(elTr, oRecord) {
if (oRecord.getData(“Price”) 640) {
Dom.addClass(elTr, ‘m’);
}
return true;
};

myDataTable = new YAHOO.widget.DataTable(“basic”, myColumnDefs,
myDataSource, {caption:”MarketWatch”, formatRow: myRowFormatter, draggableColumns:true });

// Subscribe to events for row selection
myDataTable.subscribe(“rowMouseoverEvent”, myDataTable.onEventHighlightRow);
myDataTable.subscribe(“rowMouseoutEvent”, myDataTable.onEventUnhighlightRow);
myDataTable.subscribe(“rowClickEvent”, myDataTable.onEventSelectRow);

// Programmatically select the first row
myDataTable.selectRow(myDataTable.getTrEl(0));
// Programmatically bring focus to the instance so arrow selection works immediately
myDataTable.focus();

var myCallback = {
success: myDataTable.onDataReturnSetRows,

scope: myDataTable,
failure: function() {
YAHOO.log(“Polling failure”, “error”);
}

}
myDataSource.setInterval(5000,null, myCallback)

return {
oDS: myDataSource,
oDT: myDataTable
};
}();
});

// Custom parser
var stringToDate = function(sData) {
var array = sData.split(“-”);
return new Date(array[1] + ” ” + array[0] + “, ” + array[2]);
};

// DataSource instance
var myDataSource = new YAHOO.util.DataSource(“json_proxy.php?”);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
resultsList: “records”,
fields: [
{key:"ID", parser:"number"},
{key:"Date"},
{key:"Time" /*parser:stringToDate*/ },
{key:"TotalCharge",parser:"number"},
{key:"TotalEnergy",parser:"number"},
{key:"MaxPeak",parser:"number"},
{key:"NumbOfStrokes",parser:"number"},
{key:"jpgID"}
],
metaFields: {
totalRecords: “totalRecords” // Access to value in the server response
}
};

// DataTable configuration
var myConfigs = {
initialRequest: “sort=ID&dir=asc&startIndex=0&results=25″, // Initial request for first page of data
dynamicData: true, // Enables dynamic server-driven data
sortedBy : {key:”ID”, dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
paginator: new YAHOO.widget.Paginator({ rowsPerPage:25 }) // Enables pagination
};

// DataTable instance
var myDataTable = new YAHOO.widget.DataTable(“dynamicdata”, myColumnDefs, myDataSource, myConfigs);
// Update totalRecords on the fly with value from server
myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
}

return {
ds: myDataSource,
dt: myDataTable
};

}();

Please anyone explain what and where I must put a code for refreshings? Thank’s.

http://tech.groups.yahoo.com/group/ydn-javascript/

Thanks,
Zach

Here is my code:

YAHOO.util.Event.addListener(window, “load”, function() {
YAHOO.example.MultipleFeatures = function() {
var i=0;
var data = new Array();

data[i++] =
{title: “”,
lastChangedBy:”"
};

var myColumnDefs = [
{key:"lastChangedBy", label: "Updated Person",sortable:true, resizeable:true},
{key:"title", label: "Asset Group Name", sortable:true, resizeable:true}
];

/* This is where we set up the DataTable */
var myDataSource = new YAHOO.util.DataSource(data);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: [{key:"lastChangedBy"},{key:"title"} ]};
// Here is where we configure the pagination of the table. If the users want this, just flip flag to true
var myConfigs = {
paginator : new YAHOO.widget.Paginator({
rowsPerPage : 10
})
};

var myDataTable = new YAHOO.widget.DataTable(“basic”,
myColumnDefs, myDataSource, myConfigs);

return {
oDS: myDataSource,
oDT: myDataTable
};
}();
});

Thanks!
Zach

http://sourceforge.net/tracker/?group_id=165715&atid=836476

http://tech.groups.yahoo.com/group/ydn-javascript/

Sounds like your use case is possible. Have you looked at the examples describing XHR for the DataTable?

http://developer.yahoo.com/yui/datatable/#xhr