:: Forum >> Version 1 >>

buid a Dynamic and Editable Table which Show the Existing Record in the Datebase

More information on this topic is available in the documentation section: /active.howto.load.js/.

Hi,

Pls, I need to Editor (like dynamic table) Which allow Add, edit and Delete a record.
but the dynamic table only in js...

Pls help..
prabakar
Thursday, June 23, 2005
Me too so if someone could reply, that'd be great. :)
Dave
Saturday, July 2, 2005
hehe I'm looking for the similar.. don't think I got enough time on hands to do it though.
I'll prolly just switch to static webpages :P

just thought it was a funny comment
Steve
Wednesday, July 6, 2005
Yes I need one too this would be very helpfull!!!
Scott, Cipot
Monday, July 11, 2005
Mee too
Vinay
Saturday, July 23, 2005
You can do a crude interaction using the DOM for Mozilla and IE with a function like the one below:

function userEditGridCell(o,e)
            {
                if(
e.ctrlKey){
                    
//alert(o["id"] + "\t ctrlKey = " + e.ctrlKey);
                    
userText prompt("Enter you changes below");
                    
o.innerHTML userText;
                }
            }  
Of cours you will have to modify the scrips to add the follwoing attributes to each <div block in the grid:

onclick="userEditGridCell(this,event)" 
Thomas Porritt
Sunday, July 24, 2005
Upon further investigation you can added this crude user functionality by adding the following code to the click event of the Active.Controls.Grid object:
if(event.ctrlKey){event.srcElement.innerHTML prompt("Enter new text to for this element. \nHTML is allowed")};  Using the Example basic.html in the examples folder the code in the script section imbedded in the body of the document looks like this:
<script>

    
//    create ActiveWidgets Grid javascript object
    
var obj = new Active.Controls.Grid;

    
//    set number of rows/columns
    
obj.setRowProperty("count"myData.length);
    
obj.setColumnProperty("count"2);

    
//    provide cells and headers text
    
obj.setDataProperty("text", function(ij){return myData[i][j]});
    
obj.setColumnProperty("text", function(i){return myColumns[i]});

    
//    set headers width/height
    
obj.setRowHeaderWidth("28px");
    
obj.setColumnHeaderHeight("20px");

    
//    set click action handler
    
obj.setAction("click", function(src){window.status src.getItemProperty("text");if(event.ctrlKey){event.srcElement.innerHTML prompt("Enter new text to for this element. \nHTML is allowed")};});

    
//    write grid html to the page
    
document.getElementById("dataGrid").innerHTML obj.toString();

    </
script
Thomas Porritt
Monday, July 25, 2005
I just "hacked" this stuff into being editable as shown in many of these forum pages. Then thought of a way to submit a javascript array to my servlet. Edits on the grid effect the javascript array on the clients computer.

I Created a form like this

<form name="input" action="SomeServlet" method="post" onSubmit="getArrayData()">
        <
input type="hidden" name="array" />
       </
form>
 
Then added this java script
function getArrayData() {
              
document.input.array.value myData.join(',') ;
        }
 
Then.. When the form submits to "SomeServlet" you can access the data in the javascript array as a joined String with the name "array". Print that data out and you can easily see how to reconstruct the original data.

Well. Thats the dirty trick that works for me. I have a grid that updates when I submit the form at least.
killgORE
Tuesday, July 26, 2005
if you write a php file that produce as output XML you have the solution....
Pgiuseppe
Tuesday, July 26, 2005
produce output XML
JJE
Wednesday, August 24, 2005
i would like to know... HOW?
glennlosentes
Friday, August 26, 2005
Hello everyone

I want the ability to "edit" and also to add a new row. I tried to use the example above by Thomas Porritt but I cant get it to work. I put the script into the body of the html and Active Widgets stoped working. I just had a blank page.

I assume the problem is due to where I puc the Active.Controls.Grid object code. I put it into grid.js is this right? I'm not sure where in the js file to put it. I tried it at the end of the script and in other different places but all I get is a blank page.

Please help!

Many thanks
Mark
Sunday, August 28, 2005
In Basic example, just replace this line:
//    set click action handler
obj.setAction("click", function(src){window.status src.getItemProperty("text")});
 
With this one
//    set click action handler 
obj.setAction("click", function(src){window.status src.getItemProperty("text");  if(event.ctrlKey){event.srcElement.innerHTML prompt("Enter new text to for this element. \nHTML is allowed"src.getItemProperty("text")) };}); 
 
And (Ctrl+click) on any cell
Sunday, August 28, 2005
thanks very much is works :)
Mark
Sunday, August 28, 2005
Is it possible to use the contenteditable property of a div to make cells editable without needing to click them first? So it would look like a little spreadsheet?
charliewallace
Wednesday, September 28, 2005
Hello,

I am working with Version 2 of activeWidgets and I am look for a way to recognize changed rows that have been edited by a user in order to submit them to a database.

Thanks

Wayne
How to Identify changed rows in a grid in order to update databse Version 2
Saturday, October 29, 2005
based on an event of the row being clicked or changed you could write the rows changed to a cookie like so row=3|8|9|10|24 then just parse out the data for those once they finish and update them
Dallas
Tuesday, November 1, 2005
To the authors, rock on, you guys rule.

To those of you asking for more detailed howto's, ever hear of google? hehe. Lookup ajax. It's very cool, not very hard to implement, and allows for pretty much any sort of interaction you'd like. Mark's question about the "mini-spreadsheet" is an ideal application for AJAX. This grid control can even serve as the front-end face of an AJAX system.

Much respect to the folks at ActiveWidgets for taking the time to illustrate their techniques.
dave
Thursday, November 10, 2005
Heres what I want to do:

The AW Grid will be initialized and will display a dataset. There will then be a series of AJAX requests made in the background to check for updates. Some would consider this polling. The server would hold on to the request for a certain period of time (just enough to ensure that it didnt time out) and then would send any updates back to the page. This is a basic attempt at makeing the HTTP somewhat stateful. I know how to do everything I have described except populate this new data back into the table. Anyone have any ideas? I could send the new data in any format, but most likeley it would be in XML. I just need more info about how to convert these updates into updates in the table. Does the API allow for this?
Blake
Friday, November 11, 2005
how to generate an activewidgets grid in a javascript form or php?
and what there properties ?
and what are there events?
please send an immediate mail to my id ad_acl@yahoo.com



adarsh
Tuesday, December 13, 2005
how to generate an activewidgets grid in a javascript form or php?
and what there properties ?
and what are there events?
please send an immediate mail to my id ad_acl@yahoo.com



adarsh
Tuesday, December 13, 2005
i need 2 use a check box to select a row in a table a make it editable plz help me.
shyam
Monday, February 27, 2006
How to print grid in table cell "<td></td>" to user other part of table
Atul Patel
Thursday, March 30, 2006
How to display data from a MySql table into a Html page dynamically..........Urgent Pls........I WANT CODE PLS..... SEND to vsrinivas8@yahoo.com
Srinivasu.V
Tuesday, January 2, 2007



This topic is archived.

Back to /active.howto.load.js/

Documentation:

Forum search