Question

Here is a code excerpt from a dhtmlxgrid sample file:

   <p> You are allowed to clear data and structure of grid and then load new data from XML file.</p>

    <a href="#" onclick="savegrid();">Save Grid</a>
   <div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
    <a href='#alfa' onClick="ser()">Reload grid with another structure</a>
<br>
<script>
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.loadXML("../common/grid500.xml");


    function ser(){
        mygrid.clearAll(true);
        mygrid.loadXML("../common/gridH3.xml");
    }

    function savegrid(){
        // want to save the grid here   
    }
</script>

If I edit data in the grid. I’d like to be able to save it to file. How do I do that? This isn’t done automatically.

Answer 1

It is possible to get a csv or an XML of the dhtmlxgrid current data and have scripts to save the updates to a database or an xml file. The dhtmlxgrid method to load a csv into the grid is .loadCSVString(). The method to load an xml file is .loadXML(). The method to create a csv string with the current grid content is .serializeToCSV(). The method to create an xml with the current grid content is .serialize().

Here is a sample use of the grid. The data to be shown and edited in the grid is stored in an XML file. The updates/edits made in the grid must also be stored in that XML file. Since my XML file has a different definition than the XML that dhdmlxgrid uses, I extract the data from the XML as a csv string, load the string into the grid, then extract the updates as a csv string to save back to the XML. The code to do that is simpler than switching between the two xml formats.

HTML

One div is defined to be the grid element. Save and Cancel buttons are also defined.

<div id="links_grid" style="width: 100%; height: 189px; margin-bottom: 4px; border: 1px solid silver;">
</div>
<button onclick="save_node_xml(\''+card_id+'\')">Save</button>&nbsp; 
<button onclick="cancel_node_grid(\''+card_id+'\')">Cancel</button>

Grid Initialization

In this javascxript the grid object is created and filled with data.

        // Retrieve grid data from XML as CSV data (dhtmlx has other ways to link to data sources)

        grid_csv = $.ajax({
            url: "get_node_urls.php",
            type: "POST",
            data: { nodeid: card_id },
            cache: false,
            async: false,
            success: function (response) {
                if (response != '') 
                {
                    /* alert(response); */
                }
            }
       }).responseText;

       // Create grid and load data

        card_links_grid = new dhtmlXGridObject('links_grid'); 
        card_links_grid.setImagePath("dhtmlxGrid_dnld/codebase/imgs/"); 
        card_links_grid.setHeader("ID,Title,URL"); 
        card_links_grid.setInitWidths("50,120,190"); 
        card_links_grid.setColAlign("right,left,left"); 
        card_links_grid.setColTypes("ed,ed,ed");
        card_links_grid.setColSorting("str,str,str"); 
        card_links_grid.enableDragAndDrop(true);
        card_links_grid.init(); 
        card_links_grid.setColumnHidden(0,true); 
        card_links_grid.setSkin("dhx_skyblue");
        card_links_grid.bF(false); 
        card_links_grid.loadCSVString(grid_csv); // Load csv generated from XML data
        // Fix formatting, apply here styles to override what is hardcoded in the grid code
        $('table.hdr td',$('#links_grid')).css('padding','0');
        $('table.hdr td',$('#links_grid')).css('height','16');
        $('table.hdr td div.hdrcell',$('#links_grid')).css('margin','0');
        $('table.hdr td div.hdrcell',$('#links_grid')).css('height','16');

Save Data

In this script the grid content are retrieved and saved to XML.

    // Get grid data as CSV
    grid_csv = card_links_grid.serializeToCSV();

    // Make array from CSV
    var links_array = CSVToArray(grid_csv); // special function to make array from csv

    // Send data to XML
    for (var i=0; i<links_array.length; i++) {
        var link = links_array[i];
        var link_ix = link[0];
        var link_id = link[1];
        var link_title = link[2];
        var link_url = link[3];

        // Add updated links to XML
        $.ajax({
            url: "add_url.php",
            type: "POST",
            data: { nodeid: card_id, linkid: link_id, linktitle: link_title, linkurl: link_url },
            cache: false,
            async: false,
            success: function (response) {
                if (response != '') 
                {
                    // alert(response);             
               }
            }
        }); 
    }