Search code examples
javascriptphpmysqlcomboboxdhtmlx

DHTMLX Dynamically populate combo


I have a working DHTMLX grid that has a number of columns containing Combo Boxes. A Few of these combo boxes need to be dynamically filled with data after a selection has been made in previous combo boxes.

Eg.

If User Selects a Project of 1234 in the Project Combo Box the Jobs Combo box should only display results from Jobs that belong to Project 1234.

I have been told to use the following functions and methods but cannot work out how to correctly apply them all.

Main APP Javascript code:

JoineryItems = timesheetGrid.getColumnCombo(6);

timesheetGrid.attachEvent("onEditCell",function(stage,rId,cInd,nValue,oValue){
                if(cInd == 4 && stage == 2) {
                    JoineryItems.clearAll();
                    JoineryItems.load("data/combo/JoineryItems.php?Project="+nValue);
                }
                else {}         
            });

With the following PHP Code in the Server Side Combo Connector

$Project = $_GET[Project];
include_once '../../includes/db_connect.php';
include_once '../../includes/functions.php';
require_once("../../codebase/connector/combo_connector.php");

$data = new ComboConnector($res, "MySQL");
$data->render_sql("SELECT jmpJobID as value, jmpJobID as label from Inf_Jobs where jmpClosed = 0 AND jmpProjectID = $Project",
    "jmpJobID",
    "jmpJobID(value),jmpJobID(label)"
    );
?>

Currently I cannot get the following to function correctly:

JoineryItems.clearAll(); - This Code does not seem to do anything at all even after the code runs the JoineryItems Combo Box still contains values.

JoineryItems.load(...); - Using a browser inspector I can see the results are coming through in XML format but the value is incorrect instead of the value and label being identical the label is coming through correctly and the value is coming through as an odd string of numbers which I cannot determine where they are coming from.

Whenever the onEditCell Event is attached to the grid, updating of my cell values does not occur until after a page refresh. E.G. if a user changes the date of work from the 2nd of March to the 3rd of March the cell displays the 2nd of March until the page is refreshed at which point it then displays the 3rd of march and if multiple changes are made before page refresh than only the last change is made.


Solution

  • This is done by the following:

    Define Column as a Combo using any of the available methods.

    Get the combo column

    MyCombo = MyGrid.getColumnCombo(ColumnIndex);
    

    Load the custom

    timesheetGrid.attachEvent("onCellChanged",function(rId,cInd,nValue){
                if (cInd == 0 ) {
                    MyCombo.clearAll();
                    MyCombo.load("data/combo/MyCombo.php?CustomGetVariable="+nValue);
                }
    

    Then in php you use your custom variable as part of your select statment and it returns the set of values as combo box options