Sample: dhtmlxGrid Save Data dynamicaly dhtmlxGrid main page
X

Editable Grid means also the ability to save updated values to some server data storage. With dhtmlxDataProcessor you can:

  • connect grid with server side built on any language
  • save inserted rows, updated values and deleted rows
  • set validators on cells
  • define mandatory columns
  • define moment to send data to server (after each cell update, row selection change or manualy with Save button)
  • * - fields which shouldn't have empty value marked with red border.
     
    Add row
    Remove Selected Row

    Enable Auto Update

     
    <script  src="../js/dhtmlXDataProcessor.js"></script>
    <div id="gridbox" width="100%" height="250px" style="background-color:white;overflow:hidden"></div>
    <script>
     
        mygrid = new dhtmlXGridObject('gridbox');
        ...
        mygrid.init();
     
    //============================================================================================
        //To use our automated methods you should always point your grid to same file - member of dhtmlxGridDataProcessor library (just check the path)
        mygrid.loadXML("php/get.php");
        
        //init dataprocessor and assign verification function
        //specify server update processor - member of dhtmlxGridDataProcessor library (just check the path) or your own
        myDataProcessor = new dataProcessor("php/update.php");
        //use column IDs instead of column indexes naming request parameters
        myDataProcessor.enableDataNames(true);
        //verify if the value of 2nd column (zero-based numbering is 1) is not empty
        myDataProcessor.setVerificator(1)
        //verify value of 4th column (zero-based numbering is 3) against checkIfNotZero verification function (see it below)
        myDataProcessor.setVerificator(3,checkIfNotZero)
        //you can also specify update mode. Availabel modes are: update automaticaly (cell based, row based) and manual update
        //cell ("cell") based mode means that grid will attempt to update data on server after each editing of cell (on editor closed). 
        //row ("row") based mode means that grid will attempt to update data on server when row selection changed or Enter key pressed
        //manual ("off") means that you need to run myDataProcessor.sendData() to begin update process (automatic update off).
        myDataProcessor.setUpdateMode("off");//available values: cell (default), row, off
        //set error handler (handler for action with type "error")
        myDataProcessor.defineAction("error",myErrorHandler);
        //specify transaction method - POST or GET (default is GET)
        myDataProcessor.setTransactionMode("GET");
        //initialize data processor for the grid object (in our case - mygrid)
        myDataProcessor.init(mygrid);
    //============================================================================================
        //Example of error handler. It gets <action> tag object as incomming argument.
        function myErrorHandler(obj){
            alert("Error occured.\n"+obj.firstChild.nodeValue);
            myDataProcessor.stopOnError = true;
            return false;
        }
        
        //Example of verification function. It verifies that value is not 0 (zero).
        //If verification failed it should return false otherwise true.
        //Verification fucntion specified in setVerificator method will always get two argumentrs: value to verify and column name (use it for message)
        function checkIfNotZero(value,colName){
            if(value.toString()._dhx_trim()=="0"){
                showMessage(colName+ " should not be 0")
                return false
            }else
                return true;
        }
    </script>
    THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
    UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.