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

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..

Me too so if someone could reply, that'd be great. :)

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

Yes I need one too this would be very helpfull!!!

Mee too

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)"

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(i, j){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>

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.

if you write a php file that produce as output XML you have the solution....

produce output XML

i would like to know... HOW?

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

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

thanks very much is works :)

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?

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

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

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.

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?

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

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

i need 2 use a check box to select a row in a table a make it editable plz help me.

How to print grid in table cell "<td></td>" to user other part of table

How to display data from a MySql table into a Html page dynamically..........Urgent Pls........I WANT CODE PLS..... SEND to vsrinivas8@yahoo.com