By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,190 Members | 777 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,190 IT Pros & Developers. It's quick & easy.

Javascript Datagrid with Datepicker

P: n/a
Hi,

I need to build an editable Datagrid with add & delete buttons on each
row using javascript.
DataGrid need not be pre-populated with values.

To make the thing complicated, one of the column need to be a date
picker field.

I know things will be easier with ASPX datagrid.
Sadly, I have to stick with classic ASP. Thats why Javascript is my
only option.

Anyone know where I can find sample javascript code for the above.

Thanks in advance.
Julian

Oct 4 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
GLC
I have created an editable datagrid/table.
My table only had two editable fields but the concept should work.
The first column was an edit button, the second was a delete/disable
button.
The third was an uneditable ID.
The fourth and fifth were editable.

I created two hidden textareas.
When the edit button was clicked, the textareas were filled with the
data from the appropriate cells, resized and placed over the cells. The
edit button was changed to a save button and the delete button was
changed to a cancel button.

When the cancel button was clicked everything was simply reversed.

If the save button was clicked I used AJAX to save the values and then
updated the cells to reflect the new value.
ju**********@gmail.com wrote:
Hi,

I need to build an editable Datagrid with add & delete buttons on each
row using javascript.
DataGrid need not be pre-populated with values.

To make the thing complicated, one of the column need to be a date
picker field.

I know things will be easier with ASPX datagrid.
Sadly, I have to stick with classic ASP. Thats why Javascript is my
only option.

Anyone know where I can find sample javascript code for the above.

Thanks in advance.
Julian
Oct 4 '06 #2

P: n/a
Hi,

Looks like what I am looking for, do you have any sample codes or site
which you can share?

Thanks.

Julian Lim
GLC wrote:
I have created an editable datagrid/table.
My table only had two editable fields but the concept should work.
The first column was an edit button, the second was a delete/disable
button.
The third was an uneditable ID.
The fourth and fifth were editable.

I created two hidden textareas.
When the edit button was clicked, the textareas were filled with the
data from the appropriate cells, resized and placed over the cells. The
edit button was changed to a save button and the delete button was
changed to a cancel button.

When the cancel button was clicked everything was simply reversed.

If the save button was clicked I used AJAX to save the values and then
updated the cells to reflect the new value.
ju**********@gmail.com wrote:
Hi,

I need to build an editable Datagrid with add & delete buttons on each
row using javascript.
DataGrid need not be pre-populated with values.

To make the thing complicated, one of the column need to be a date
picker field.

I know things will be easier with ASPX datagrid.
Sadly, I have to stick with classic ASP. Thats why Javascript is my
only option.

Anyone know where I can find sample javascript code for the above.

Thanks in advance.
Julian
Oct 5 '06 #3

P: n/a
GLC
I no longer work for company I wrote it for and it was an internal app.
Give me a little bit of time, and I can recreate it.

ju**********@gmail.com wrote:
Hi,

Looks like what I am looking for, do you have any sample codes or site
which you can share?

Thanks.

Julian Lim
GLC wrote:
I have created an editable datagrid/table.
My table only had two editable fields but the concept should work.
The first column was an edit button, the second was a delete/disable
button.
The third was an uneditable ID.
The fourth and fifth were editable.

I created two hidden textareas.
When the edit button was clicked, the textareas were filled with the
data from the appropriate cells, resized and placed over the cells. The
edit button was changed to a save button and the delete button was
changed to a cancel button.

When the cancel button was clicked everything was simply reversed.

If the save button was clicked I used AJAX to save the values and then
updated the cells to reflect the new value.
ju**********@gmail.com wrote:
Hi,
>
I need to build an editable Datagrid with add & delete buttons on each
row using javascript.
DataGrid need not be pre-populated with values.
>
To make the thing complicated, one of the column need to be a date
picker field.
>
I know things will be easier with ASPX datagrid.
Sadly, I have to stick with classic ASP. Thats why Javascript is my
only option.
>
Anyone know where I can find sample javascript code for the above.
>
Thanks in advance.
Julian
Oct 5 '06 #4

P: n/a
Hi,

Wow, thanks in advance. Actually, I only need the add and delete
button.

Any idea on how to incorporate a datepicker field in one of the cell
which can be dynamically add or delete ?

Regards,
Julian

GLC wrote:
I no longer work for company I wrote it for and it was an internal app.
Give me a little bit of time, and I can recreate it.

ju**********@gmail.com wrote:
Hi,

Looks like what I am looking for, do you have any sample codes or site
which you can share?

Thanks.

Julian Lim
GLC wrote:
I have created an editable datagrid/table.
My table only had two editable fields but the concept should work.
The first column was an edit button, the second was a delete/disable
button.
The third was an uneditable ID.
The fourth and fifth were editable.
>
I created two hidden textareas.
When the edit button was clicked, the textareas were filled with the
data from the appropriate cells, resized and placed over the cells. The
edit button was changed to a save button and the delete button was
changed to a cancel button.
>
When the cancel button was clicked everything was simply reversed.
>
If the save button was clicked I used AJAX to save the values and then
updated the cells to reflect the new value.
>
>
ju**********@gmail.com wrote:
Hi,

I need to build an editable Datagrid with add & delete buttons on each
row using javascript.
DataGrid need not be pre-populated with values.

To make the thing complicated, one of the column need to be a date
picker field.

I know things will be easier with ASPX datagrid.
Sadly, I have to stick with classic ASP. Thats why Javascript is my
only option.

Anyone know where I can find sample javascript code for the above.

Thanks in advance.
Julian
Oct 6 '06 #5

P: n/a
GLC
Since a dynamic row will have a dynamic button, it needs an event
attached to it.
I use:
* EventManager.js
* by Keith Gaughan
for event management.
For moving the text boxes, I started using position.js by Matt Kruse
from http://www.JavascriptToolbox.com/
It is not necessary but it works better than what I had done myself.
Here is the html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ajax Example</title>
<script src="EventManager.js" type="text/javascript"></script>
<script src="position.js" type="text/javascript"></script>
<script src="default.js" type="text/javascript"></script>
<style type="text/css"td {font-family:arial;}
textarea {font-family:arial;overflow:auto;}
.hiddenText {font-family:arial;position:absolute;border:1px solid
#00000;}
</style>
</head>
<body>
<form id="frmMain" method="post" action="">
<label for="groups">Group:</label>
<select id="groups" onchange="showItems();">
<option selected>Empty</option>
</select>
<IMG title="New Group" onclick="newGroup();" alt="New Group"
src="images/new.png">
<span id="newGroup" style="DISPLAY: none">
<input id="groupName" type="text" maxLength="25"<IMG title="Save
Group" onclick="saveGroup();" alt="Save Group" src="images/save.png">
<img src="images/cancel.png" alt="Cancel" title="Cancel"
onclick="cancelGroup();">
</span><br>
<br>
<table id="tblMain" style="BORDER-RIGHT:#000000 1px solid;
BORDER-TOP:#000000 1px solid; BORDER-LEFT:#000000 1px solid;
BORDER-BOTTOM:#000000 1px solid; BORDER-COLLAPSE:separate;
empty-cells:show"
cellspacing="0" cellpadding="2">
<thead>
<tr>
<th colSpan="2"><IMG id="btnNewItem" title="New Item"
onclick="newItem();" alt="New Item" src="images/new.png"
style="VISIBILITY:hidden;CURSOR:pointer"></th>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
<tr style="DISPLAY:none" id="newItem">
<td><img src="images/save.png" alt="Save Item" title="Save Item"
onclick="saveNewItem();"></td>
<td><img src="images/cancel.png" alt="Cancel" title="Cancel"
onclick="cancelNewItem();"></td>
<td></td>
<td><textarea rows="1" id="newItemName"></textarea></td>
<td><textarea rows="1" id="newItemDesc"></textarea></td>
</tr>
</thead>
<tbody id="tbMain"></tbody>
</table>
<div id="editItem" style="DISPLAY:none">
<textarea id="itemName" class="hiddenText"></textarea<textarea
id="itemDescription" class="hiddenText"></textarea>
</div>
<div id="errorInfo"></div>
</form>
<script type="text/javascript">
showGroups();
</script>
</body>
</html>

Javascript coming next...

ju**********@gmail.com wrote:
Hi,

Wow, thanks in advance. Actually, I only need the add and delete
button.

Any idea on how to incorporate a datepicker field in one of the cell
which can be dynamically add or delete ?

Regards,
Julian

GLC wrote:
I no longer work for company I wrote it for and it was an internal app.
Give me a little bit of time, and I can recreate it.

ju**********@gmail.com wrote:
Hi,
>
Looks like what I am looking for, do you have any sample codes or site
which you can share?
>
Thanks.
>
Julian Lim
>
>
GLC wrote:
I have created an editable datagrid/table.
My table only had two editable fields but the concept should work.
The first column was an edit button, the second was a delete/disable
button.
The third was an uneditable ID.
The fourth and fifth were editable.

I created two hidden textareas.
When the edit button was clicked, the textareas were filled with the
data from the appropriate cells, resized and placed over the cells. The
edit button was changed to a save button and the delete button was
changed to a cancel button.

When the cancel button was clicked everything was simply reversed.

If the save button was clicked I used AJAX to save the values and then
updated the cells to reflect the new value.


ju**********@gmail.com wrote:
Hi,
>
I need to build an editable Datagrid with add & delete buttons on each
row using javascript.
DataGrid need not be pre-populated with values.
>
To make the thing complicated, one of the column need to be a date
picker field.
>
I know things will be easier with ASPX datagrid.
Sadly, I have to stick with classic ASP. Thats why Javascript is my
only option.
>
Anyone know where I can find sample javascript code for the above.
>
Thanks in advance.
Julian
Oct 6 '06 #6

P: n/a
GLC
Here is the javascript for the html file:

// Javascript file for default.htm functions

function createRequestObj(){
var xmlhttp=false;

// Standard method
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}

// Opera
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}

// IE
if(!xmlhttp && ActiveXObject){
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
}

return xmlhttp;
}

function showGroups(){
function ready(){
if(xhr.readyState == 4){
if(xhr.status == 200 ){
var selGroup = document.getElementById("groups");
// Empty dropdown
selGroup.innerHTML="";
// Add initial option
var tmpOption = document.createElement("option");
tmpOption.value="";
tmpOption.text="Select One";
selGroup.options.add(tmpOption,0);

var groups=xhr.responseXML.getElementsByTagName("group ");
for(var x=0;x<groups.length;x++){
// add each option
tmpOption = document.createElement("option");
tmpOption.value=groups[x].getElementsByTagName("groupID")[0].firstChild.data;
tmpOption.text=groups[x].getElementsByTagName("name")[0].firstChild.data;
selGroup.options.add(tmpOption);
}
// clean up to prevent memory leaks
selGroup = tmpOption = groups = response = null;
} else {
// unknown error occured
alert(xhr.responseText);
}
xhr = null;
}
}

var xhr = createRequestObj();
if(xhr){
xhr.open("get", "groups.aspx?action=view", true);
xhr.onreadystatechange=ready;
xhr.send(null);
}

}

function showItems(){
// cancel any current edits
cancelAll();

var selGroup = document.getElementById("groups");
var btnNewItem = document.getElementById("btnNewItem");
var tbody = document.getElementById("tbmain");
// remove events
EventManager.CleanUp();
// empty table
while(tbody.rows.length>0){
tbody.deleteRow(0);
}

if(selGroup.selectedIndex>0){
btnNewItem.style.visibility="";
function ready(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var row, tmpCell, tmpImg, itemEnabled;
var items=xhr.responseXML.getElementsByTagName("item") ;
// Add items to table
for(var x=0;x<items.length;x++){
// item enabled 1=yes, 0=no
itemEnabled =
items[x].getElementsByTagName("enabled")[0].firstChild.data;

row = document.createElement("tr");
if(0==itemEnabled){ // item is disabled, change row color
row.style.color="#ff0000";
}
// edit/save
tmpCell = document.createElement("td");
// edit button
tmpImg = document.createElement("img");
tmpImg.src="images/edit.png";
tmpImg.alt=tmpImg.title="Edit";
tmpImg.id="btnEdit_"+x;
tmpImg.style.cursor="pointer";
EventManager.Add(tmpImg, "click", editItem, false);
tmpCell.appendChild(tmpImg);
// save button
tmpImg = document.createElement("img");
tmpImg.src="images/save.png";
tmpImg.alt=tmpImg.title="Save";
tmpImg.id="btnSave_"+x;
tmpImg.style.cursor="pointer";
tmpImg.style.display="none";
EventManager.Add(tmpImg, "click", saveItem, false);
tmpCell.appendChild(tmpImg);
row.appendChild(tmpCell);

// disable/cancel
tmpCell = document.createElement("td");
tmpImg = document.createElement("img");
tmpImg.style.cursor="pointer";
if(0==itemEnabled){ // item is disabled, display enable
// enable button
tmpImg.src="images/back.png";
tmpImg.alt=tmpImg.title="Enable";
tmpImg.id="btnDisable_"+x;
EventManager.Add(tmpImg, "click", enableItem, false);
} else {
// disable button
tmpImg.src="images/remove.png";
tmpImg.alt=tmpImg.title="Disable";
tmpImg.id="btnDisable_"+x;
EventManager.Add(tmpImg, "click", disableItem, false);
}
tmpCell.appendChild(tmpImg);
// cancel edit button
tmpImg = document.createElement("img");
tmpImg.style.cursor="pointer";
tmpImg.style.display="none";
tmpImg.src="images/cancel.png";
tmpImg.alt=tmpImg.title="Cancel";
tmpImg.id="btnCancel_"+x;
EventManager.Add(tmpImg, "click", cancelEditItem, false);
tmpCell.appendChild(tmpImg);
row.appendChild(tmpCell);

// id
tmpCell = document.createElement("td");
tmpCell.appendChild(document.createTextNode(items[x].getElementsByTagName("itemID")[0].firstChild.data));
row.appendChild(tmpCell);
// name
tmpCell = document.createElement("td");
tmpCell.appendChild(document.createTextNode(items[x].getElementsByTagName("name")[0].firstChild.data));
row.appendChild(tmpCell);
// description
tmpCell = document.createElement("td");
try{
// Description may not exist, ignore if it doesn't
tmpCell.appendChild(document.createTextNode(items[x].getElementsByTagName("descript")[0].firstChild.data));
}
catch(e){}
row.appendChild(tmpCell);

tbody.appendChild(row);
}
// clean up to prevent memory leaks
row = tmpCell = tmpImg = null;
} else {
// unknown error
alert(xhr.responseText);
}
// clean up to prevent memory leaks
tbody = xhr = null;
}
}

var xhr = createRequestObj();
if(xhr){
xhr.open("get", "items.aspx?action=view&group=" + selGroup.value,
true);
xhr.onreadystatechange=ready;
xhr.send(null);
}
} else {
btnNewItem.style.visibility="hidden";
}
selGroup = null;
}

function newGroup(){
document.getElementById("groupName").value="";
document.getElementById("newGroup").style.display= "inline";
}

function saveGroup(){
function ready(){
if(xhr.readyState == 4){
if(xhr.status == 200 ){
if(xhr.responseText.indexOf("error")==-1){
showGroups();
} else {
// error occured
alert(xhr.responseText);
}
} else {
// unknown error occured
alert(xhr.responseText);
}
xhr = null;
}
}

var groupName = document.getElementById("groupName");
if(groupName.value.length>0){
var xhr = createRequestObj();
if(xhr){
xhr.open("post", "groups.aspx?action=add", true);
xhr.onreadystatechange=ready;
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhr.send('name=' +
encodeURI(document.getElementById("groupName").val ue));
}
cancelGroup();
} else {
groupName.focus();
alert("Please enter a group name.");
}
}

function cancelGroup(){
document.getElementById("newGroup").style.display= "none";
}

function newItem(){
cancelAll();

document.getElementById("newItemName").value="";
document.getElementById("newItemDesc").value="";
document.getElementById("newItem").style.display=" ";
}

function saveNewItem(){
function ready(){
if(xhr.readyState == 4){
if(xhr.status == 200 ){
if(xhr.responseText.indexOf("error")==-1){
showItems();
} else {
// error occured
alert(xhr.responseText);
}
} else {
// unknown error occured
document.getElementById("errorInfo").innerHTML=xhr .responseText;
}
xhr = null;
}
}

var itemName = document.getElementById("newItemName");
var itemDesc = document.getElementById("newItemDesc");
if(itemName.value.length>0){
var xhr = createRequestObj();
if(xhr){
xhr.open("post", "items.aspx?action=add", true);
xhr.onreadystatechange=ready;
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
var strSend = "group=" + document.getElementById("groups").value +
"&name=" + encodeURI(itemName.value) +
"&description=" + encodeURI(itemDesc.value);
xhr.send(strSend);
}
cancelNewItem();
} else {
itemName.focus();
alert("Please enter an item name.");
}
itemName = itemDesc = null;
}

function cancelNewItem(){
document.getElementById("newItem").style.display=" none";
}

function editItem(e){
// cancel any current edits
cancelAll();

// get target button
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

// btn cell row
var itemRow = targ.parentNode.parentNode;
var itemID = itemRow.cells[2].innerHTML;
var itemName = itemRow.cells[3];
var itemDesc = itemRow.cells[4];

var editItemName = document.getElementById("itemName");
var editItemDesc = document.getElementById("itemDescription");

// get position of cells
var namePos = Position.get(itemName);
var descPos = Position.get(itemDesc);

// resize edit boxes
editItemName.style.width = namePos.width;
editItemName.style.height = namePos.height;
editItemDesc.style.width = descPos.width;
editItemDesc.style.height = namePos.height;

// set edit box values
editItemName.value = itemName.innerHTML;
editItemDesc.value = itemDesc.innerHTML;

// move edit boxes over the cells
Position.set(editItemName, namePos.left, namePos.top);
Position.set(editItemDesc, descPos.left, descPos.top);

// display the edit boxes
document.getElementById("editItem").style.display= "block";

// swap images
document.getElementById("btnEdit_"+itemRow.section RowIndex).style.display="none";
document.getElementById("btnSave_"+itemRow.section RowIndex).style.display="";
document.getElementById("btnDisable_"+itemRow.sect ionRowIndex).style.display="none";
document.getElementById("btnCancel_"+itemRow.secti onRowIndex).style.display="";

// clean up to prevent memory leaks
descPos = namePos = editItemDesc = editItemName = itemName = itemDesc
= itemRow = target = e = null;
}

function saveItem(e){
// get target button
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

// btn cell row
var itemRow = targ.parentNode.parentNode;
var itemID = itemRow.cells[2].innerHTML;

alert("Save Item not finished.");
cancelEditItem();
}

function disableItem(e){
// get target button
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

// btn cell row
var itemRow = targ.parentNode.parentNode;
var itemID = itemRow.cells[2].innerHTML;

ableItem(itemID, false);

itemID = itemRow = targ = e = null;
}

function enableItem(e){
// get target button
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

// btn cell row
var itemRow = targ.parentNode.parentNode;
var itemID = itemRow.cells[2].innerHTML;

ableItem(itemID, true);

itemID = itemRow = targ = e = null;
}

function ableItem(itemId,enabled){
function ready(){
if(xhr.readyState == 4){
if(xhr.status == 200 ){
if(xhr.responseText.indexOf("error")==-1){
showItems();
} else {
// error occured
alert(xhr.responseText);
//document.getElementById("errorInfo").innerHTML=xhr .responseText;
}
} else {
// unknown error occured
//alert("Error: "+xhr.status);
document.getElementById("errorInfo").innerHTML=xhr .responseText;
}
xhr = null;
}
}

var xhr = createRequestObj();
if(xhr){
var url = "items.aspx?action="+(enabled?"enable":"disabl e");
xhr.open("post", url, true);
xhr.onreadystatechange=ready;
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhr.send('id=' + itemId);
}
}

function cancelEditItem(){
var tbody = document.getElementById("tbmain");
// swap images
for(var x=0;x<tbody.rows.length;x++){
document.getElementById("btnEdit_"+x).style.displa y="";
document.getElementById("btnSave_"+x).style.displa y="none";
document.getElementById("btnDisable_"+x).style.dis play="";
document.getElementById("btnCancel_"+x).style.disp lay="none";
}

document.getElementById("editItem").style.display= "none";
}

function cancelAll(){
cancelGroup();
cancelNewItem();
cancelEditItem();
}

ju**********@gmail.com wrote:
Hi,

Wow, thanks in advance. Actually, I only need the add and delete
button.

Any idea on how to incorporate a datepicker field in one of the cell
which can be dynamically add or delete ?

Regards,
Julian

GLC wrote:
I no longer work for company I wrote it for and it was an internal app.
Give me a little bit of time, and I can recreate it.

ju**********@gmail.com wrote:
Hi,
>
Looks like what I am looking for, do you have any sample codes or site
which you can share?
>
Thanks.
>
Julian Lim
>
>
GLC wrote:
I have created an editable datagrid/table.
My table only had two editable fields but the concept should work.
The first column was an edit button, the second was a delete/disable
button.
The third was an uneditable ID.
The fourth and fifth were editable.

I created two hidden textareas.
When the edit button was clicked, the textareas were filled with the
data from the appropriate cells, resized and placed over the cells. The
edit button was changed to a save button and the delete button was
changed to a cancel button.

When the cancel button was clicked everything was simply reversed.

If the save button was clicked I used AJAX to save the values and then
updated the cells to reflect the new value.


ju**********@gmail.com wrote:
Hi,
>
I need to build an editable Datagrid with add & delete buttons on each
row using javascript.
DataGrid need not be pre-populated with values.
>
To make the thing complicated, one of the column need to be a date
picker field.
>
I know things will be easier with ASPX datagrid.
Sadly, I have to stick with classic ASP. Thats why Javascript is my
only option.
>
Anyone know where I can find sample javascript code for the above.
>
Thanks in advance.
Julian
Oct 6 '06 #7

P: n/a
Hi,

In the midst of putting your codes togethers. Anyway, thanks a lot for
the codes.

Regards,
Julian

GLC wrote:
Here is the javascript for the html file:

// Javascript file for default.htm functions

function createRequestObj(){
var xmlhttp=false;

// Standard method
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}

// Opera
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}

// IE
if(!xmlhttp && ActiveXObject){
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
}

return xmlhttp;
}

function showGroups(){
function ready(){
if(xhr.readyState == 4){
if(xhr.status == 200 ){
var selGroup = document.getElementById("groups");
// Empty dropdown
selGroup.innerHTML="";
// Add initial option
var tmpOption = document.createElement("option");
tmpOption.value="";
tmpOption.text="Select One";
selGroup.options.add(tmpOption,0);

var groups=xhr.responseXML.getElementsByTagName("group ");
for(var x=0;x<groups.length;x++){
// add each option
tmpOption = document.createElement("option");
tmpOption.value=groups[x].getElementsByTagName("groupID")[0].firstChild.data;
tmpOption.text=groups[x].getElementsByTagName("name")[0].firstChild.data;
selGroup.options.add(tmpOption);
}
// clean up to prevent memory leaks
selGroup = tmpOption = groups = response = null;
} else {
// unknown error occured
alert(xhr.responseText);
}
xhr = null;
}
}

var xhr = createRequestObj();
if(xhr){
xhr.open("get", "groups.aspx?action=view", true);
xhr.onreadystatechange=ready;
xhr.send(null);
}

}

function showItems(){
// cancel any current edits
cancelAll();

var selGroup = document.getElementById("groups");
var btnNewItem = document.getElementById("btnNewItem");
var tbody = document.getElementById("tbmain");
// remove events
EventManager.CleanUp();
// empty table
while(tbody.rows.length>0){
tbody.deleteRow(0);
}

if(selGroup.selectedIndex>0){
btnNewItem.style.visibility="";
function ready(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var row, tmpCell, tmpImg, itemEnabled;
var items=xhr.responseXML.getElementsByTagName("item") ;
// Add items to table
for(var x=0;x<items.length;x++){
// item enabled 1=yes, 0=no
itemEnabled =
items[x].getElementsByTagName("enabled")[0].firstChild.data;

row = document.createElement("tr");
if(0==itemEnabled){ // item is disabled, change row color
row.style.color="#ff0000";
}
// edit/save
tmpCell = document.createElement("td");
// edit button
tmpImg = document.createElement("img");
tmpImg.src="images/edit.png";
tmpImg.alt=tmpImg.title="Edit";
tmpImg.id="btnEdit_"+x;
tmpImg.style.cursor="pointer";
EventManager.Add(tmpImg, "click", editItem, false);
tmpCell.appendChild(tmpImg);
// save button
tmpImg = document.createElement("img");
tmpImg.src="images/save.png";
tmpImg.alt=tmpImg.title="Save";
tmpImg.id="btnSave_"+x;
tmpImg.style.cursor="pointer";
tmpImg.style.display="none";
EventManager.Add(tmpImg, "click", saveItem, false);
tmpCell.appendChild(tmpImg);
row.appendChild(tmpCell);

// disable/cancel
tmpCell = document.createElement("td");
tmpImg = document.createElement("img");
tmpImg.style.cursor="pointer";
if(0==itemEnabled){ // item is disabled, display enable
// enable button
tmpImg.src="images/back.png";
tmpImg.alt=tmpImg.title="Enable";
tmpImg.id="btnDisable_"+x;
EventManager.Add(tmpImg, "click", enableItem, false);
} else {
// disable button
tmpImg.src="images/remove.png";
tmpImg.alt=tmpImg.title="Disable";
tmpImg.id="btnDisable_"+x;
EventManager.Add(tmpImg, "click", disableItem, false);
}
tmpCell.appendChild(tmpImg);
// cancel edit button
tmpImg = document.createElement("img");
tmpImg.style.cursor="pointer";
tmpImg.style.display="none";
tmpImg.src="images/cancel.png";
tmpImg.alt=tmpImg.title="Cancel";
tmpImg.id="btnCancel_"+x;
EventManager.Add(tmpImg, "click", cancelEditItem, false);
tmpCell.appendChild(tmpImg);
row.appendChild(tmpCell);

// id
tmpCell = document.createElement("td");
tmpCell.appendChild(document.createTextNode(items[x].getElementsByTagName("itemID")[0].firstChild.data));
row.appendChild(tmpCell);
// name
tmpCell = document.createElement("td");
tmpCell.appendChild(document.createTextNode(items[x].getElementsByTagName("name")[0].firstChild.data));
row.appendChild(tmpCell);
// description
tmpCell = document.createElement("td");
try{
// Description may not exist, ignore if it doesn't
tmpCell.appendChild(document.createTextNode(items[x].getElementsByTagName("descript")[0].firstChild.data));
}
catch(e){}
row.appendChild(tmpCell);

tbody.appendChild(row);
}
// clean up to prevent memory leaks
row = tmpCell = tmpImg = null;
} else {
// unknown error
alert(xhr.responseText);
}
// clean up to prevent memory leaks
tbody = xhr = null;
}
}

var xhr = createRequestObj();
if(xhr){
xhr.open("get", "items.aspx?action=view&group=" + selGroup.value,
true);
xhr.onreadystatechange=ready;
xhr.send(null);
}
} else {
btnNewItem.style.visibility="hidden";
}
selGroup = null;
}

function newGroup(){
document.getElementById("groupName").value="";
document.getElementById("newGroup").style.display= "inline";
}

function saveGroup(){
function ready(){
if(xhr.readyState == 4){
if(xhr.status == 200 ){
if(xhr.responseText.indexOf("error")==-1){
showGroups();
} else {
// error occured
alert(xhr.responseText);
}
} else {
// unknown error occured
alert(xhr.responseText);
}
xhr = null;
}
}

var groupName = document.getElementById("groupName");
if(groupName.value.length>0){
var xhr = createRequestObj();
if(xhr){
xhr.open("post", "groups.aspx?action=add", true);
xhr.onreadystatechange=ready;
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhr.send('name=' +
encodeURI(document.getElementById("groupName").val ue));
}
cancelGroup();
} else {
groupName.focus();
alert("Please enter a group name.");
}
}

function cancelGroup(){
document.getElementById("newGroup").style.display= "none";
}

function newItem(){
cancelAll();

document.getElementById("newItemName").value="";
document.getElementById("newItemDesc").value="";
document.getElementById("newItem").style.display=" ";
}

function saveNewItem(){
function ready(){
if(xhr.readyState == 4){
if(xhr.status == 200 ){
if(xhr.responseText.indexOf("error")==-1){
showItems();
} else {
// error occured
alert(xhr.responseText);
}
} else {
// unknown error occured
document.getElementById("errorInfo").innerHTML=xhr .responseText;
}
xhr = null;
}
}

var itemName = document.getElementById("newItemName");
var itemDesc = document.getElementById("newItemDesc");
if(itemName.value.length>0){
var xhr = createRequestObj();
if(xhr){
xhr.open("post", "items.aspx?action=add", true);
xhr.onreadystatechange=ready;
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
var strSend = "group=" + document.getElementById("groups").value +
"&name=" + encodeURI(itemName.value) +
"&description=" + encodeURI(itemDesc.value);
xhr.send(strSend);
}
cancelNewItem();
} else {
itemName.focus();
alert("Please enter an item name.");
}
itemName = itemDesc = null;
}

function cancelNewItem(){
document.getElementById("newItem").style.display=" none";
}

function editItem(e){
// cancel any current edits
cancelAll();

// get target button
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

// btn cell row
var itemRow = targ.parentNode.parentNode;
var itemID = itemRow.cells[2].innerHTML;
var itemName = itemRow.cells[3];
var itemDesc = itemRow.cells[4];

var editItemName = document.getElementById("itemName");
var editItemDesc = document.getElementById("itemDescription");

// get position of cells
var namePos = Position.get(itemName);
var descPos = Position.get(itemDesc);

// resize edit boxes
editItemName.style.width = namePos.width;
editItemName.style.height = namePos.height;
editItemDesc.style.width = descPos.width;
editItemDesc.style.height = namePos.height;

// set edit box values
editItemName.value = itemName.innerHTML;
editItemDesc.value = itemDesc.innerHTML;

// move edit boxes over the cells
Position.set(editItemName, namePos.left, namePos.top);
Position.set(editItemDesc, descPos.left, descPos.top);

// display the edit boxes
document.getElementById("editItem").style.display= "block";

// swap images
document.getElementById("btnEdit_"+itemRow.section RowIndex).style.display="none";
document.getElementById("btnSave_"+itemRow.section RowIndex).style.display="";
document.getElementById("btnDisable_"+itemRow.sect ionRowIndex).style.display="none";
document.getElementById("btnCancel_"+itemRow.secti onRowIndex).style.display="";

// clean up to prevent memory leaks
descPos = namePos = editItemDesc = editItemName = itemName = itemDesc
= itemRow = target = e = null;
}

function saveItem(e){
// get target button
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

// btn cell row
var itemRow = targ.parentNode.parentNode;
var itemID = itemRow.cells[2].innerHTML;

alert("Save Item not finished.");
cancelEditItem();
}

function disableItem(e){
// get target button
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

// btn cell row
var itemRow = targ.parentNode.parentNode;
var itemID = itemRow.cells[2].innerHTML;

ableItem(itemID, false);

itemID = itemRow = targ = e = null;
}

function enableItem(e){
// get target button
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

// btn cell row
var itemRow = targ.parentNode.parentNode;
var itemID = itemRow.cells[2].innerHTML;

ableItem(itemID, true);

itemID = itemRow = targ = e = null;
}

function ableItem(itemId,enabled){
function ready(){
if(xhr.readyState == 4){
if(xhr.status == 200 ){
if(xhr.responseText.indexOf("error")==-1){
showItems();
} else {
// error occured
alert(xhr.responseText);
//document.getElementById("errorInfo").innerHTML=xhr .responseText;
}
} else {
// unknown error occured
//alert("Error: "+xhr.status);
document.getElementById("errorInfo").innerHTML=xhr .responseText;
}
xhr = null;
}
}

var xhr = createRequestObj();
if(xhr){
var url = "items.aspx?action="+(enabled?"enable":"disabl e");
xhr.open("post", url, true);
xhr.onreadystatechange=ready;
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhr.send('id=' + itemId);
}
}

function cancelEditItem(){
var tbody = document.getElementById("tbmain");
// swap images
for(var x=0;x<tbody.rows.length;x++){
document.getElementById("btnEdit_"+x).style.displa y="";
document.getElementById("btnSave_"+x).style.displa y="none";
document.getElementById("btnDisable_"+x).style.dis play="";
document.getElementById("btnCancel_"+x).style.disp lay="none";
}

document.getElementById("editItem").style.display= "none";
}

function cancelAll(){
cancelGroup();
cancelNewItem();
cancelEditItem();
}

ju**********@gmail.com wrote:
Hi,

Wow, thanks in advance. Actually, I only need the add and delete
button.

Any idea on how to incorporate a datepicker field in one of the cell
which can be dynamically add or delete ?

Regards,
Julian

GLC wrote:
I no longer work for company I wrote it for and it was an internal app.
Give me a little bit of time, and I can recreate it.
>
ju**********@gmail.com wrote:
Hi,

Looks like what I am looking for, do you have any sample codes or site
which you can share?

Thanks.

Julian Lim


GLC wrote:
I have created an editable datagrid/table.
My table only had two editable fields but the concept should work.
The first column was an edit button, the second was a delete/disable
button.
The third was an uneditable ID.
The fourth and fifth were editable.
>
I created two hidden textareas.
When the edit button was clicked, the textareas were filled with the
data from the appropriate cells, resized and placed over the cells. The
edit button was changed to a save button and the delete button was
changed to a cancel button.
>
When the cancel button was clicked everything was simply reversed.
>
If the save button was clicked I used AJAX to save the values and then
updated the cells to reflect the new value.
>
>
ju**********@gmail.com wrote:
Hi,

I need to build an editable Datagrid with add & delete buttons on each
row using javascript.
DataGrid need not be pre-populated with values.

To make the thing complicated, one of the column need to be a date
picker field.

I know things will be easier with ASPX datagrid.
Sadly, I have to stick with classic ASP. Thats why Javascript is my
only option.

Anyone know where I can find sample javascript code for the above.

Thanks in advance.
Julian
Oct 9 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.