Search code examples
javascriptphpmysqldhtmlx

DHTMLX Grid Pulling Additional Data

I am trying to build an app for users to submit their work times in but am having trouble with pulling additional data into the grid.

Eg: If a user were to type in there employee code of 0000 into the Employee Code Column the Employee Name Field would need to update to read "John Doe" All this data is stored in databases on the back end and I have been able to access it on refresh eg. If the page is reloaded after the new row has been created and the data is present it will pull the correct data in, but i do not want them to have to refresh the page to do this. How can I pull in the extra data after the cell has been updated.

The Grid is created on the page with JavaScript as follows:

timesheetGrid.setColumnIds("Column Names, Column Names");
            timesheetGrid.setImagePath("codebase/imgs/"); //set the image path for the grids icons
            timesheetGrid.setInitWidths("70,100,100,100,70,100,150,100,70,70,100,70,70,*,*");  //sets the initial widths of columns
            timesheetGrid.setColAlign("center,center,center,center,center,center,center,center,center,center,center,center,center,left,left");  //sets the alignment of columns
            timesheetGrid.setColTypes("edn,ro,dhxCalendar,ro,edn,ro,ed,ro,ro,ro,ed,edn,ch,txt,ro"); //sets the types of columns
            timesheetGrid.setColSorting("str,str,date,date,str,str,str,str,str,str,str,str,str,str,str");  //sets the sorting types of columns
            timesheetGrid.setDateFormat("%Y-%m-%d"); //Set the Date Format to be used in the Grid
            timesheetGrid.attachHeader("#text_filter,#text_filter,#text_filter,,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,,,");
            timesheetGrid.setColumnHidden(3,true);
            timesheetGrid.enableEditEvents(true,false,true);
            timesheetGrid.init();
            //timesheetGrid.makeFilter("WeekEnding",0); //TODO: Add Filter For Week Ending
            //this.lockRow(id, true); //Make Specific Row Read Only TODO: Non Active Week Rows Read Only
            timesheetGrid.load("data/timesheets.php");
            var dpg = new dataProcessor("data/timesheets.php");
            dpg.enableDataNames(true); // will use names instead of indexes
            dpg.init(timesheetGrid);

PHP is used to pull data from the correct avenues

require("../codebase/connector/grid_connector.php");//adds the connector engine
    $conn = new GridConnector($res,"MySQL");             //initializes the connector object
if ($conn->is_select_mode()) {//code for loading data
    SQL Code is HERE
}else { //code for other operations - i.e. update/insert/delete
    OTHER SQL CODE IS HERE
}

As the Data is sensitive I cannot display any of it sorry for any inconvenience. Any Help would be much appreciated.

Solution

  • If the data you're providing is XML you can attach an event to your grid and call this grid.updateFromXML("data/timesheets.php"); This will parse and paint the whole grid information

    If you're looking to update just the row you updated you can send via GET the id of the row and it will only parse and paint the row you're sending grid.updateFromXML("data/timesheets.php?for=" + row_id));

    Full Code would be something like this:

    dpg.defineAction ("update", myUpdate);
function myUpdate(tag){
    timesheetGrid.updateFromXML("data/timesheets.php?for="+tag.getAttribute("sid"));
    return true;
}

    If the data you're retrieving is not XML formatted, I'm afraid you would need to update the values from the row manually via the same event.