Exploring Client-Side Cross Browser XML Data-Binding

[genius551v]

Hi,

I have this:

// Grid
            var yg = YAHOO.ext.grid;
            var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
            var cols = [{
                   header: "Id",
                   width: 30,
                   sortType: sort.asInt,
                   hidden: true
                   //editor: new yg.NumberEditor({allowBlank: false, allowNegative: false, allowDecimals: false})
                },{
                   header: "Nombre",
                   width: 200,
                   sortType: sort.asUCString,
                   editor: new yg.TextEditor({allowBlank: false})
                },{
                   header: "Fecha Inicio",
                   width: 100,
                   sortType: sort.asDate,
                   renderer: formatDate,
                   editor: new yg.DateEditor({format: 'd/m/Y', allowBlank: false})
                },{
                   header: "Fecha Fin",
                   width: 100,
                   sortType: sort.asDate,
                   renderer: formatDate,
                   editor: new yg.DateEditor({format: 'd/m/Y', allowBlank: false})
                },{
                   header: "Estado",
                   width: 100,
                   sortType: sort.asUCString,
                   renderer: SelectEstado,
                   editor: new yg.SelectEditor('sel_estado')
                },{
                   header: "Observaciones",
                   width: 200,
                   sortType: sort.asUCString,
                   renderer: italic,
                   editor: new yg.TextEditor({allowBlank: true})
                }];
                
            cm = new YAHOO.ext.grid.DefaultColumnModel(cols);
    		cm.defaultSortable = true;
    		
    		var schema = {
                tagName: 'prod_coleccion',
                id: 'use-index',
                fields: ['col0', 'col1', 'col2', 'col3', 'col5', 'col4']
            };

            dm = new YAHOO.ext.grid.XMLDataModel(schema);
            //dm.setDefaultSort(cm, 0, "DESC");

            dm.addPreprocessor(2, parseDate);
            dm.addPreprocessor(3, parseDate);
            dm.addPostprocessor(2, parseDatePost);
            dm.addPostprocessor(3, parseDatePost);
            dm.addPreprocessor(5, parseText);
            
            // edits are synced with the DM, the method defines how to  <--THIS!
            // create new node
            dm.createNode = function(doc, id, colData){
                var root = doc.getElementsByTagName('catalog')[0];
                var newNode = doc.createElement('prod_coleccion');
                newNode.appendChild(doc.createElement('col0'));
                newNode.appendChild(doc.createElement('col1'));
                newNode.appendChild(doc.createElement('col2'));
                newNode.appendChild(doc.createElement('col3'));
                newNode.appendChild(doc.createElement('col4'));
                newNode.appendChild(doc.createElement('col5'));
                this.setNamedValue(newNode, 'col0', colData[0]);
                this.setNamedValue(newNode, 'col1', colData[1]);
                this.setNamedValue(newNode, 'col2', colData[2]);
                this.setNamedValue(newNode, 'col3', colData[3]);
                this.setNamedValue(newNode, 'col4', colData[4]);
                this.setNamedValue(newNode, 'col5', colData[5]);
                root.appendChild(newNode);
                return newNode;
            };

            var idsession = document.getElementById('idsesion').value;
            dm.load('web/xml/getAllProd_coleccionToXML_'+idsession+'.xml');
                            		
            sm = new YAHOO.ext.grid.EditorAndSelectionModel();
            //sm = new YAHOO.ext.grid.NavEditorSelectionModel();

            // Manejar la seleccion
            //sm.addListener('selectionchange', handleSelection);

            grid = new YAHOO.ext.grid.Grid('grid-editor', dm, cm, sm);
            var start = new Date().getTime();
            grid.render();

THIS is the method to "Exploring Client-Side Cross Browser XML Data-Binding" "...when the user has the ability to delete records, you could end up with nothing to clone. To avoid this problem, you can override the createNode() method of XMLDataModel...."

so, when i add a row in the gird, thats work ok, but the xml do not save in my server side...:-(

my addrow funtion:

var addrow = function(){
        var fecha = new Date();
        var id = 'rowid_' + (++newIndex);
        dm.addRow(id,['?', '', fecha, fecha, '1','']);
        var row = grid.getRowsById(id);
        sm.selectRow(row);
        sm.focusRow(row);
    };

xml server side:

<?xml version="1.0" encoding="ISO-8859-1"?> 
<catalog> 
<TotalCount>3</TotalCount> 
<prod_coleccion> 
<col0>1</col0> 
<col1>AAAAAA</col1> 
<col2>2006-12-05</col2> 
<col3>2006-12-05</col3> 
<col4>aaaaaaaa</col4> 
<col5>1</col5> 
</prod_coleccion> 
<prod_coleccion> 
<col0>2</col0> 
<col1>BBBBBBB</col1> 
<col2>2006-12-05</col2> 
<col3>2006-12-05</col3> 
<col4>bbbbbbbb</col4> 
<col5>1</col5> 
</prod_coleccion> 
<prod_coleccion> 
<col0>3</col0> 
<col1>CCCCCCC</col1> 
<col2>2006-12-05</col2> 
<col3>2006-12-05</col3> 
<col4>cccccccccc</col4> 
<col5>1</col5> 
</prod_coleccion> 

<prod_coleccion><col0/><col1/><col2/><col3/><col4/><col5/></prod_coleccion>  <--WRONG!

</catalog>

any help tnks!

[tryanDLS]

I think this has been discussed - not sure if someone offered code to handle.

In an XMLDataModel, the changes get reflected in the DM.data object which is an array that reflects what was in the XML. It doesn't get automatically get updated back into the XML dom. You can see this if you set a BP in the something that listens to the cellupdated event.

Someplace you have to write code that replicates the changes from the data array back to your XML object.

EDIT: Well, I take that back, it does look like the DM.xml property is getting updated. Is this what you're passing back to the server?

[genius551v]

thanks for your quick answer.

this it is to which you talk about?

my savedata funtion is (JS):

function savetable(e){
    var xml = dm.getDocument();
    .......
    YAHOO.util.Connect.asyncRequest('POST','domain/XmlSave_Prod_coleccion.php',cb,xml);

my server side savedata is (PHP):

....
$xml = $HTTP_RAW_POST_DATA;
echo $xml;

[tryanDLS]

Yes that will give you the updated xml.

You may need to change the header (via initHeader, I think) that asynRequest uses for the post - it's not xml by default. This may impact how the data looks when you get it on the server.

[genius551v]

Hi,

I use POST and the aplication works fine, but i add this:

            // edits are synced with the DM, the method defines how to
            // create new node
            dm.createNode = function(doc, id, colData){
                var root = doc.getElementsByTagName('catalog')[0];
                var newNode = doc.createElement('prod_coleccion');
                newNode.appendChild(doc.createElement('col0'));
                newNode.appendChild(doc.createElement('col1'));
                newNode.appendChild(doc.createElement('col2'));
                newNode.appendChild(doc.createElement('col3'));
                newNode.appendChild(doc.createElement('col4'));
                newNode.appendChild(doc.createElement('col5'));
                this.setNamedValue(newNode, 'col0', colData[0]);
                this.setNamedValue(newNode, 'col1', colData[1]);
                this.setNamedValue(newNode, 'col2', colData[2]);
                this.setNamedValue(newNode, 'col3', colData[3]);
                this.setNamedValue(newNode, 'col4', colData[4]);
                this.setNamedValue(newNode, 'col5', colData[5]);
                root.appendChild(newNode);
                return newNode;
            };

and now dont works Sad

I mean: without this works and xml saves, with this xml well no longer saves the new data

you even think that I must change the method POST anyway???

TNKS

[tryanDLS]

Hmm..this response seems to have been lost 1st time around.

Why are you modifying createNode? The DM will keep the xml in sync with your grid changes. What you're doing may possibly cause a invalid XML document and isn't going to reflect what it's in the grid.

EDIT - I replied on the dup thread, which I'm now going to whack to avoid further confusion. Please continue with this thread

[genius551v]

and so? :cry: :?:

[tryanDLS]

You still have not answered the question I asked - why are you modifying createNode?

[genius551v]

when my xml file not have data (my php -> sql = 0 DATA) the dm.load is empty or something like that, anyway, I need that my grid paints a row in target at least.

http://www.yui-ext.com/forum/viewtop...hlight=loading

tnks

[rleblic]

genius551v,

This is an excerpt from XMLDataModel:etNamedValue():

        var childNode = node.getElementsByTagName(name);
        if(childNode && childNode.item(0) && childNode.item(0).firstChild) {
            childNode.item(0).firstChild.nodeValue = value;
        }else{
        ...

The code that overrides the model's createNode() function in your example, is using IDOMElement.appendChild, which adds the specified node to the dom tree, but just as a leaf node.
So childNode.item(0).firstChild will be pointing to null, and the code which assigns the node's value will be never executed.

Hope this helps,

regards.