Hello,
Just today I downloaded DHX and started to read the tutorials. Decided to “expand” the example a bit and added a button in the “ContactForm” which creates a window and attaches a grid to it.
So the user clicks on the button and a new window is displayed along with a “selectGrid” which gives the user the option to select any of the records.
<script type="text/javascript">
//Here we'll put the code of the application
var layout,menu,toolbar,contactsGrid,contactForm,selectGrid,selectToolbar;
dhtmlx.image_path = "codebase/imgs/";
function doOnRowDblClicked(rowId) {
return confirm("Row with ID " + rowId + " was double clicked. Do you want to proceed?");
}
dhtmlxEvent(window,"load",function(){
//application code goes here
//layout
layout = new dhtmlXLayoutObject(document.body,"2U");
layout.cells("a").setText("Contacts");
layout.cells("b").setText("Contact Details");
layout.cells("a").setWidth(600);
menu = layout.attachMenu();
menu.setIconsPath("codebase/imgs/");
menu.loadXML("xml/menu.xml");
toolbar = layout.attachToolbar();
toolbar.setIconsPath("icons/");
toolbar.loadXML("xml/toolbar.xml");
contactsGrid = layout.cells("a").attachGrid();
//contactGrid.setImagePath("./codebase/imgs/");
//contactGrid.setSkin("dhx_skyblue");
contactsGrid.setHeader("ID,Name,Last Name,Email");
contactsGrid.setInitWidths("50,100,100,*");
contactsGrid.setColAlign("left,left,left,left");
contactsGrid.setColTypes("ro,ro,ro,ro");
contactsGrid.setColSorting("int,str,str,str");
contactsGrid.init();
contactsGrid.attachHeader("#numeric_filter,#text_filter,#text_filter,#text_filter");
contactsGrid.load("xml/contacts.php");
contactForm = layout.cells("b").attachForm();
contactForm.loadStruct("xml/form.xml");
contactForm.attachEvent("onButtonClick", function(name, command){
// any custom logic here
var dhxWins= new dhtmlXWindows();
dhxWins.enableAutoViewport(true);
dhxWins.createWindow("w_departments", 100, 100, 500, 500);
dhxWins.window("w_departments").setText("Departments");
dhxWins.window("w_departments").centerOnScreen();
selectToolbar = dhxWins.window("w_departments").attachToolbar();
selectToolbar.loadXML("xml/selection_toolbar.xml");
selectGrid = dhxWins.window("w_departments").attachGrid();
selectGrid.attachEvent("onRowDblClicked", doOnRowDblClicked);
selectGrid.loadXML("xml/tab_departments.xml");
});
contactsGrid.attachEvent("onRowSelect", function(rID,cInd){
contactForm.load("./xml/contact_details.php?id="+rID);
})
var dpf = new dataProcessor("xml/contact_details.php");
dpf.init(contactForm);
dpf.attachEvent("onAfterUpdate",function(sid,action,tid,xml_node){
contactsGrid.cells(sid,1).setValue(contactForm.getItemValue("pname"));
contactsGrid.cells(sid,2).setValue(contactForm.getItemValue("psurname"));
contactsGrid.cells(sid,3).setValue(contactForm.getItemValue("email"));
})
})
</script>
Checked how to initialize a grid and that’s how I made the tab_departments.xml
<rows>
<head>
<beforeinit></beforeinit>
<afterInit>
<call command="load"><param>xml/tab_departments.php</param></call>
</afterInit>
<column width="20" type="ro" align="center" color="white" sort="str">ID</column>
<column width="80" type="ro" align="left" sort="str">Description</column>
<settings>
<colwidth>%</colwidth>
</settings>
</head>
</rows>
It seems to be working fine with one minor glitch:
After I click “OK” , data is displayed perfectly, but I cannot understand where this alert comes from.
That’s the result after i click OK
Thank you