Start Building Professional
Web Apps Today

DHTMLXGRID serialize issue

Hi ,
I am able to get the data from the backend successfully in dhtmlxgrid.
Then I have added a new row using
function addRow(init_values)
{

    var rowId = (new Date()).valueOf();
    var cnt = mygrid.getRowIndex(rowId);
     var newId = (new Date()).valueOf();
mygrid.addRow(newId,"",cnt+1);
     mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true);
}
Also,I am able to add the values in the new row added.
But while serializing the grid I am not getting the desired xml.
I am only getting the first row fetched from the backend as the serialized xml and not the newly added row from UI.I have debugged the javascript and found that "temp" and "out" variable returned only the first row of the grid and not the newly added.

What could be the issue ?Here is how the grid is initialized.

var mygrid = null;
mygrid = new dhtmlXGridObject('mygrid');
var grid_get = "/url.do?
var header_l1 = "h1,h2.h3,h4,h5,h6,h7";
var width_l1 = "200,200,160,160,160,200,160";
var align_l1 ="center,center,center,center,center,center,center";
var type_l1 = "ed,ed,ed,ed,ed,ed,ed";
var sorts_l1 ="str,str,str,str,str,str,str";
mygrid.imgURL ="/dhtmlx/imgs/";
var headerStyles=[    "color:#000000;",
                     "color:#000000;",
                     "color:#000000;",
                     "color:#000000;",
                     "color:#000000;",
                     "color:#000000;",
                     "color:#000000;" ];
mygrid.setHeader(header_l1,"#cspan", headerStyles);
mygrid.setInitWidths(width_l1);
mygrid.setColAlign(align_l1);
mygrid.setColTypes(type_l1);
mygrid.enableMultiline(true);

var pp_header = "background-color:#C8C8C8;color:white;font-family:Tahoma Regular;";
var pp_grid = "height:auto;";
var pp_selCell = "background-color:#B5C7E7;font-family:Tahoma Regular;";
var pp_selRow = "background-color:#B5C7E7;font-family:Tahoma Regular;";
mygrid.setStyle(pp_header, pp_grid,pp_selCell, pp_selRow);
mygrid.setSizes();
mygrid.enableAlterCss("even","uneven");
mygrid.enableCollSpan(true);

mygrid.init();


mygrid.loadXML(grid_get);
mygrid.attachEvent("onCellChanged",doOncellChanged);
dhtmlxError.catchError("LoadXML", myErrorHandler);


Any help would be much appreciated.
Waiting for your reply as I am blocked totally on this.

Thanks & Regards,
Lalit

Are you using setSerializationLevel ? It possible to define "serialize-only-changed" mode, which doesn't include newly added rows. 

Please post any further questions to the forum 
      http://forum.dhtmlx.com

Yes , I am using setSerializationLevel(true,true).What do you mean by "serialize-only-changed" mode.
I want to add rows , fill values in it and serialize it in the form of xml.How can this be achieved ?
Thanks in advance,
Lalit.

Here is my serialize grid code which is hit when I click save button after adding values in the newly added rows
Please point me out what could be wrong here.
function serializeGrid()
{    
    alert(mygrid.getRowsNum());
    alert(mygrid.getAllRowIds("<row>"));
    
    mygrid.editStop();
    mygrid.setSerializationLevel(true,true);
    mygrid.submitSerialization(true);
    
    var myXmlStr = mygrid.serialize();
    
    alert(myXmlStr);
     document.myForm.operation.value= "saveValues";
     alert(document.myForm.operation.value);
    document.myForm.xmlStr.value=myXmlStr;
    alert(document.myForm.xmlStr.value);
    document.myForm.submit();
 
}


Thanks in advance,
Lalit

the 5th parameter of setSerializationLevel
         onlyChanged - include only Changed rows in result XML
be sure that this parameter is not set as true.

>>Here is my serialize grid code which is hit when I click save button

In your code you are mixing manual serialize calls and   form integration functionality (mygrid.submitSerialization(true)) but in any case it must not produce the problem - the same code works correctly in local samples

I have used setSerializationLevel(true,true,false,false,false,false) to ensure the 5th parameter to be false.
For your second comment,
I was just trying things with different options.I have used them individually earlier but of no use.

What could be wrong here ??

Thanks & Regards,
Lalit

The code looks correctly for me. 

If issue still occurs for you - please provide any kind of sample or demo link where it can be reconstructed. You can send it directly to support@dhtmlx.com

Hi , I have changed my addRow code as follows and the grid is properly serialized in xml.
The reason was cnt was not initialized.

function addRow(init_values)
{

var selRowId = mygrid.getSelectedRowId();
    var rowId = (new Date()).valueOf();
   var cnt = mygrid.getRowIndex(selRowId);
    if(selRowId == null)
    {
        cnt = 0;
    }

var selId = mygrid.getSelectedId();

    
      mygrid.addRow(rowId,"",cnt+1);
       mygrid.selectRow(mygrid.getRowIndex(rowId),false,false,true);
}

But the grid does not delete the properly selected row.It deletes the first row shown in the grid by default and sometimes the correct row.
I have used  getSelectedId() and getSelectedRowId() functions to get the selected row Id ?
Are those correct ? What is the difference between the two ?

function deleteRow(init_values)
{
      var selId = mygrid.getSelectedId();
      alert("SelectedId=" + selId);

      var selRowId = mygrid.getSelectedRowId();
      alert("SelectedRowId=" + selRowId);

      mygrid.deleteRow(selRowId);
}


Thanks,
Lalit

Try to replace 
           var rowId = (new Date()).valueOf();
with 
           var rowId = mygrid.uid();

The timing functions of js is not perfect and can produce equal values for 2 following calls. 

If issue still occurs for you - you can open ticket at http://support.dhtmlx.com