3.2.0

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..
prabakar
June 23,
Me too so if someone could reply, that'd be great. :)
Dave
July 2,
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
July 6,
Yes I need one too this would be very helpfull!!!
Scott, Cipot
July 11,
Mee too
Vinay
July 23,
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
July 24,
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>
Thomas Porritt
July 25,
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
July 26,
if you write a php file that produce as output XML you have the solution....
Pgiuseppe
July 26,
produce output XML
JJE
August 24,
i would like to know... HOW?
glennlosentes
August 26,
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
August 28,
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
August 28,
thanks very much is works :)
Mark
August 28,
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
September 28,
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
October 29,
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
November 1,
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
November 10,
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
November 11,
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
December 13,
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
December 13,
i need 2 use a check box to select a row in a table a make it editable plz help me.
shyam
February 27,
How to print grid in table cell "<td></td>" to user other part of table
Atul Patel
March 30,
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
January 2,

This topic is archived.

See also:


Back to support forum