Hi
I have two joined tables in a grid (one for addresses (fname, lname, email, category) and one for categories (cat_id, cat_name)).
Each time I change the category it only shows the new category id but the categories name still remains is the same.
I thought reloading the complete grid could be a solution, but it’s not the right way in my opinion, because the grid flickers.
Reloading just the selected row would be nice, but in the Documentation I did not find a Method for that.
How can I update the row of a grid that contains data of joined tables ?
Kind regards
Alain
Code of index.html
<!DOCTYPE html>
<html>
<head>
<title>Kassaapp 0.1 beta</title>
<script src="codebase/dhtmlx.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>
<style>
html, body {
width: 100%; /*provides the correct work of a full-screen layout*/
height: 100%; /*provides the correct work of a full-screen layout*/
overflow: hidden; /*hides the default body's space*/
margin: 0px; /*hides the body's scrolls*/
}
</style>
<body>
<script type="text/javascript">
dhtmlxEvent(window,"load",function(){
var layout = new dhtmlXLayoutObject(document.body,"2U");
layout.cells("a").setText("Contacts");
layout.cells("b").setText("Contact Details");
layout.cells("b").setWidth(400);
var contactsGrid = layout.cells("a").attachGrid();
contactsGrid.setHeader("Name,Last Name,Email, Category ID, Category Name"); //sets the headers of columns
contactsGrid.setColumnIds("fname,lname,email,category, cat_name"); //sets the columns' ids. The name of the Ids has nothing to do with the names in data/contacts.php, just the position of the column is important
contactsGrid.setInitWidths("250,250,*,*,*"); //sets the initial widths of columns
contactsGrid.setColAlign("left,left,left,left,left"); //sets the alignment of columns
contactsGrid.setColTypes("ro,ro,ro,ro,ro"); //sets the types of columns
contactsGrid.setColSorting("str,str,str,str,str"); //sets the sorting types of columns
contactsGrid.init();
contactsGrid.load("data/contacts.php");
contactsGrid.attachHeader("#text_filter,#text_filter,#text_filter");
var menu = layout.attachMenu();
menu.setIconsPath("icons/");
menu.loadStruct("data/menu.xml");
var toolbar = layout.attachToolbar();
toolbar.attachEvent("onclick",function(id){
if(id=="newContact"){ //'newContact' is the id of the button in the toolbar
var rowId=contactsGrid.uid(); //generates an unique id
var sel = contactsGrid.getSelectedRowId(); //gets the id of the selected row
contactsGrid.addRow(rowId,[ //adds a new row
contactForm.getItemValue("fname"),
contactForm.getItemValue("lname"),
contactForm.getItemValue("email"),
contactForm.getItemValue("category"),
contactsGrid.cells(sel,4).getValue()],0); //reads the cell value of column "Category Name" of the selected row
};
if(id=="delContact"){
var rowId = contactsGrid.getSelectedRowId();
var rowIndex = contactsGrid.getRowIndex(rowId);
if(rowId!=null){
contactsGrid.deleteRow(rowId);
if(rowIndex!=(contactsGrid.getRowsNum()-1)){
contactsGrid.selectRow(rowIndex+1,true);
}
else
{contactsGrid.selectRow(rowIndex-1,true)}
}
}
});
var contactForm = layout.cells("b").attachForm();
contactForm.loadStruct("data/form.xml");
contactForm.bind(contactsGrid);
contactForm.attachEvent("onButtonClick", function(){
contactForm.save(); //sends the values of the updated row to the server
});
toolbar.setIconsPath("icons/");
toolbar.loadStruct("data/toolbar.xml");
var dpg = new dataProcessor("data/contacts.php"); //inits dataProcessor
dpg.init(contactsGrid); //associates the dataProcessor instance with the grid
dpg.attachEvent("onAfterUpdate", function(sid, action, tid, tag){
if (action == "inserted"){
contactsGrid.selectRowById(tid); //selects the newly-created row
contactForm.setFocusOnFirstActive();//set focus to the 1st form's input
}});
});
dp.enableDataNames(true);
</script>
</body>
</html>Code of contacts.php
<?php
require("../codebase/connector/grid_connector.php");//adds the connector engine
$res=mysql_connect("localhost","user","password");//connects to server with db
mysql_select_db("dbname");//connects to db
$conn = new GridConnector($res); //initializes the connector object
if ($conn->is_select_mode())//code for loading data
$conn->render_complex_sql ("SELECT * FROM contacts LEFT JOIN categories ON contacts.category = categories.cat_id",
"contact_id",
"fname,lname,email,category,cat_name");
else //code for other operations - i.e. update/insert/delete
$conn->render_table("contacts","contact_id","fname,lname,email,category");