Editable columns and passing back the DB

Hi All,

I'm relatively new to javascript and this grid control. Seems very nice if only I could the edit functionality working as required. I have looked through previous posts and have managed to get the edit functionality working on the whole grid but need to allow edit functionality only on certain columns. How can this be done?

In addition once all the changes have been done, I need to be able to save the changes to the database. What is the best mechanism of the doing this? I.e Is there some way of the sending the whole array to the server via http or even better only the changed rows? I would imagine one way would be to use a hidden form field to construct the array data as delimited text and process it on the backend. Just thought there may be a better way of doing this.

If this is not possible does any one know of any controls allow such functionality, preferability a control that is platform independant.

Sorry for the long post and thanks for any help.

K

1. You can make only certain columns editable by specifying the editable columns specifically.

obj.setColumnTemplate( columnIndex, new My.Editable.Template );

2. This is unsanctioned, but this is how I solved the posting problem.

a. Use the Active.Table.XML instead of an array. It's a little harder to get started, but makes the rest of you life much easier.

b. Provides your template with a way to references the Active.XML.Table (for this example, call it obj._model

c. add the following to My.Editable.Template (or whatever you call it)

obj.setEvent( "onblur", function(event) { this.onBlurAction( event ); } );

    obj.onBlurAction = function( event ) {
        var name = this.element().name;
        var row = this.getRowProperty("index");
        var col = this.getColumnProperty("index");
        var originalVal = this.getItemProperty("text");
        var currentVal = this.element().value;
        if (currentVal!=originalVal) {
            var node = this._model.getNode( row, col );
            node.setAttribute("changedTo", newVal );
            node.setAttribute("name", name );
        }
    }

     // assuming that this template's toString() generates
     // <input type="text" name="x" value="y" .../>
    obj.setAttribute("value",function(){return this.returnTheRightValueFromThisHackSoSortingWorks();});

This will result in changed items having affecting nodes in the data model, which you can extract with the following stylesheet

Sorry if the code tag doesn't work for XSL (fingers crossed)

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" version="1.0" indent="yes" omit-xml-declaration="yes"/><!--   encoding="UTF-8"  -->
    <xsl:template match="/">
        <xsl:element name="model">
            <xsl:element name="changes">
                <xsl:apply-templates select="//*[@change and @name]"/>
            </xsl:element>
        </xsl:element>
    </xsl:template>
    <xsl:template match="//*[@change and @name]">
        <xsl:element name="change">
            <xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute>
            <xsl:attribute name="value"><xsl:value-of select="@change"/></xsl:attribute>
            <xsl:copy>
                <xsl:value-of select="."/>
            </xsl:copy>
        </xsl:element>
    </xsl:template>
</xsl:stylesheet>

d. Then it is just a matter of transforming the model's XML with the style sheet. And posting it to the server (assuming your server technology can process XML...

var resultXMLText = doXmlTranform( getMyGridsXmlDataModel().getXML().xml, getTheXSLStyleSheetShownAbove() );

     postToTheServert( resultXMLText );

Hope this helps!

I completely agree that while setting up an XML model on the back end can be a hassle, it should make other tasks (like validation and posting back to the server) easier. For example, one could store validation logic in an XSL file that is used to validate posted data not only by the browser client, but also by the server itself (we don't ever trust data from the client). All the business rules in one place... imagine that!

So, I'm sold on the idea. However, I'm struggling: when the model is a javascript array (as in all the examples, and in http://www.activewidgets.com/messages/1394-8.htm), I can successfully modify the data model when the user edits a grid and post that data model back to the server. But I can't seem to get the same with a model based on an XML table.

I wonder if others would benefit from a post of complete sample code of an editable grid (like Alex's http://www.activewidgets.com/messages/1394-8.htm), but based on an XML data model instead of the js array. I sure would. :-J

I agree it would be real great if there was a fully working example. That way at least it is possible to trace what is happening. Is there any possibility of this?

I just posted the XML example code in the new thread:

http://www.activewidgets.com/messages/1621-0.htm