Wrong value in optionsfilter after filter

Suite and Optimus Suite 5
#1

The following situation I’m using:

Layout splitscreen , the upper half is a grid used for selection (can also be added,edited and deleted)
In the lower half of the layout is put a tabbar, and for each tab a grid is attached.
So far I implemented two grids, both have options_connector.

When I have selected a Marker (from grid in upper half of the layout), than I want to filter in the grid from the first tab. On initialization the right values are loaded, but after applying the filter, the values from the second grid optionfilter are loaded.

See my source files:

marker.html

[code]

html, body { width: 100%; height: 100%; margin: 0px; overflow: auto; background-color: red; } 
<!--  Common --> 
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>


<!--  Grid  -->
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxGrid/codebase/dhtmlxgrid.css">    
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_black.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">


<!--  Layout  -->
<script type="text/javascript" src="/dhx/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_black.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">

<!--  Toolbar  -->
<script type="text/javascript" src="/dhx/dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_black.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css">

<!--  Tabbar  -->
<script type="text/javascript" src="/dhx/dhtmlxTabbar/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxTabbar/codebase/dhtmlxtabbar.css">

<!--<script src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_deprecated.js"></script>  -->
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_drag.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_keymap_access.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_keymap_excel.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_keymap_extra.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_nxml.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_selection.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_start.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_validation.js"></script>

<!-- dhtmlxForm
<script src="/dhx/dhtmlxForm/codebase/dhtmlxcommon.js"></script>
<script src="/dhx/dhtmlxForm/codebase/dhtmlxform.js"></script>	
<script src="/dhx/dhtmlxForm/codebase/dhtmlxdataprocessor.js"></script>	
<script src="/dhx/dhtmlxForm/codebase/connector/connector.js"></script>
 -->
<!--  Dataprocessor  -->
<script type="text/javascript" src="/dhx/dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js"></script>
<!--
<script type="text/javascript" src="/dhx/dhtmlxDataProcessor/codebase/dhtmlxdataprocessor_debug.js"></script>
-->

<!--  Connector -->
<script type="text/javascript" src="/dhx/dhtmlxConnector/codebase/connector.js"></script>

<script type="text/javascript" >
var dhxGrid, dhxLayout, dhxToolbar, dhxTabbar;
function doOnload() {

	// -- Layout Menu
	dhxLayout = new dhtmlXLayoutObject(document.body, "2E", "dhx_skyblue");

	// -- Layout Grid
	dhxLayout.cells("a").setText("Markers");
	dhxLayout.cells("b").hideHeader();

	// -- Layout Grid attachToolbar
	dhxToolbar = dhxLayout.cells("a").attachToolbar();
	dhxToolbar.addButton("btn_add",  1, "Add");
	dhxToolbar.addSeparator("sep", 2);            
	dhxToolbar.addButton("btn_del",  3, "Delete");
	dhxToolbar.addSeparator("sep", 4);
	dhxToolbar.addButton("btn_edit", 5, "Edit");
	dhxToolbar.base.onclick=function(e){e=e||event;e.cancelBubble=true;}

	dhxToolbar.attachEvent("onClick", function(id) 
	{
		if (id == "btn_add")
		{
			var id=dhxGrid.uid(); 
			dhxGrid.addRow(id,'',0); 
			dhxGrid.showRow(id);
		}
		if (id == "btn_del")
		{
			dhxGrid.deleteSelectedRows();
		}
		if (id == "btn_edit")
		{
			dhxGrid.editCell();				
		}               
	});

	// -- Layout Grid attachGrid
	dhxGrid = dhxLayout.cells("a").attachGrid();
	dhxGrid.setImagePath("/dhx/dhtmlxGrid/codebase/imgs/");

	dhxGrid.setHeader("Name, Address, City, Province, Zip code, Phone");
	dhxGrid.setInitWidths("300,*");
	dhxGrid.enableAutoWidth(true);
	dhxGrid.setColTypes("ed,ed,ed,coro,ed,ed");	
	dhxGrid.attachHeader("#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_select_filter,#connector_text_filter,#connector_text_filter");
	dhxGrid.setColSorting("str,str,str,coro,str,str");

	dhxGrid.init();
	dhxGrid.enableSmartRendering(true);
	dhxGrid.loadXML("marker_connector.php");

	dhxGrid.attachEvent("onRowSelect", markerSelected);

	var dp = new dataProcessor("marker_connector.php");
	dp.init(dhxGrid);

}

function markerSelected(id)
{
	if (id != "")
	{
		var gridContact, contactToolbar;
		var gridAccommodation, accommodationToolbar;

		dhxTabbar = dhxLayout.cells("b").attachTabbar();
		dhxTabbar.setImagePath("/dhx/dhtmlxTabbar/codebase/imgs/");
		dhxTabbar.setSkin("modern");
		dhxTabbar.addTab("a1", "Accommodations", "130px");
		dhxTabbar.addTab("a2", "Contacts", "100px");
		dhxTabbar.addTab("a3", "Grades", "100px");
		dhxTabbar.setTabActive("a1");

		/* ************************
		 * MARKER ACCOMMODATION TAB
		 * ************************/
		accommodationToolbar = dhxTabbar.cells("a1").attachToolbar();
		accommodationToolbar.setSkin("dhx_skyblue");			
		accommodationToolbar.addButton("btn_add",  1, "Add");
		accommodationToolbar.addSeparator("sep", 2);            
		accommodationToolbar.addButton("btn_del",  3, "Delete");
		accommodationToolbar.addSeparator("sep", 4);
		accommodationToolbar.addButton("btn_edit", 5, "Edit");
		accommodationToolbar.base.onclick=function(e){e=e||event;e.cancelBubble=true;}

		accommodationToolbar.attachEvent("onClick", function(id) 
		{
			if (id == "btn_add")
			{
				var id=gridAccommodation.uid(); 
				gridAccommodation.addRow(id,'',0); 
				gridAccommodation.showRow(id);
			}
			if (id == "btn_del")
			{
				gridAccommodation.deleteSelectedRows();
			}
			if (id == "btn_edit")
			{
				gridAccommodation.editCell();
			}               
		});

		gridAccommodation = dhxTabbar.cells("a1").attachGrid();
		gridAccommodation.setImagePath("/dhx/dhtmlxGrid/codebase/imgs/");
		gridAccommodation.setSkin("dhx_skyblue");

		gridAccommodation.setHeader("Accommodation Type,# Rooms,Description,Date");
		gridAccommodation.setInitWidths("150,60,250,80");
		gridAccommodation.setColTypes("coro,ed,ed,ed");	
		gridAccommodation.attachHeader("#connector_select_filter,&nbsp;,#connector_text_filter,&nbsp;");
		gridAccommodation.setColSorting("coro,str,str,str");

		gridAccommodation.enableAutoWidth(true);
		gridAccommodation.init();
		gridAccommodation.enableSmartRendering(true);
		gridAccommodation.loadXML("accommodation_connector.php?marker_id="+id);
		
		var dpAccommodation = new dataProcessor("accommodation_connector.php?marker_id="+id);
		dpAccommodation.init(gridAccommodation);			
		
		/* ************************
		 *  MARKER CONTACTS TAB
		 * ************************/
		contactToolbar = dhxTabbar.cells("a2").attachToolbar();
		contactToolbar.setSkin("dhx_skyblue");			
		contactToolbar.addButton("btn_add",  1, "Add");
		contactToolbar.addSeparator("sep", 2);            
		contactToolbar.addButton("btn_del",  3, "Delete");
		contactToolbar.addSeparator("sep", 4);
		contactToolbar.addButton("btn_edit", 5, "Edit");
		contactToolbar.base.onclick=function(e){e=e||event;e.cancelBubble=true;}

		contactToolbar.attachEvent("onClick", function(id) 
		{
			if (id == "btn_add")
			{
				var id=gridContact.uid(); 
				gridContact.addRow(id,'',0); 
				gridContact.showRow(id);
			}
			if (id == "btn_del")
			{
				gridContact.deleteSelectedRows();
			}
			if (id == "btn_edit")
			{
				gridContact.editCell();
			}               
		});

		gridContact = dhxTabbar.cells("a2").attachGrid();
		gridContact.setImagePath("/dhx/dhtmlxGrid/codebase/imgs/");
		gridContact.setSkin("dhx_skyblue");

		gridContact.setHeader("Contact Type,Title,First Name,Last Name,Suffix,Phone,Fax,Pager,Mobile,E-mail,Note(s)");

		gridContact.setColTypes("coro,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed");	
		gridContact.attachHeader("#connector_select_filter,&nbsp;,#connector_text_filter,#connector_text_filter,&nbsp;,#connector_text_filter,&nbsp;,&nbsp;,#connector_text_filter,#connector_text_filter,#connector_text_filter");
		gridContact.setColSorting("coro,str,str,str,str,str,str,str,str,str,str");
		gridContact.enableAutoWidth(true);
		gridContact.init();
		gridContact.enableSmartRendering(true);
		gridContact.loadXML("contact_connector.php?marker_id="+id);

		var dpContact = new dataProcessor("contact_connector.php?marker_id="+id);
		dpContact.init(gridContact);
	
	}
}
</script>
[/code]

marker_connector.php

[code]<?php
$res = mysql_connect(“host”,“user”,“password”);
mysql_select_db(“database”);

require("../dhx/dhtmlxConnector/codebase/grid_connector.php");
require("../dhx/dhtmlxConnector/codebase/options_connector.php");

$gridConn = new GridConnector($res);
$gridConn->enable_log("log_markers.txt"); 

$filter1 = new OptionsConnector($res);
$filter1->render_sql("SELECT province_id AS value, province_name AS label FROM provinces", "province_id", "province_id(value),province_name(label)");

$gridConn->set_options("provinceID",$filter1);
$gridConn->dynamic_loading(100);


$gridConn->sql->attach("UPDATE","
		UPDATE 
			markers 
		SET 
			name		='{name}',
			address		='{address}',
			city		='{city}',
			provinceID	='{provinceID}',
			zipcode		='{zipcode}',
			phone		='{phone}'
		WHERE 
			marker_id	='{marker_id}'
		");
$gridConn->sql->attach("INSERT","
		INSERT INTO	markers (name,address,city,provinceID,zipcode,phone)
		VALUES ({name},{address},{city},{provinceID},{zipcode},{phone})
		");

if ($gridConn->is_select_mode())  //code for loading data
{
	$gridConn->render_sql("SELECT marker_id,name,address,city,provinceID,province_name,zipcode,phone FROM markers INNER JOIN provinces ON (markers.provinceID = provinces.province_id)", "marker_id", "name,address,city,provinceID,zipcode,phone");
}
else //code for other operations - i.e. update/insert/delete
{	
	$gridConn->render_table("markers", "marker_id", "name,address,city,provinceID,zipcode,phone");
}

?>[/code]

contact_connector.php

[code]<?php
if (isset($_REQUEST[‘marker_id’]) && $_REQUEST[‘marker_id’] != “” )
{
$marker_id = $_REQUEST[‘marker_id’];

	$res = mysql_connect("host","user","password");
	mysql_select_db("database");

	require("../dhx/dhtmlxConnector/codebase/grid_connector.php");
	require("../dhx/dhtmlxConnector/codebase/options_connector.php");

	$gridConn = new GridConnector($res);
	$gridConn->enable_log("log_contact.txt"); 
	
	$filterContact = new OptionsConnector($res);
	$filterContact->render_sql("SELECT 
							contact_type_id AS value, 
							contact_type_name AS label 
						FROM 
							contact_types", 
						"contact_type_id", 
						"contact_type_id(value),contact_type_name(label)"
						);

	$gridConn->set_options("contact_typeID",$filterContact);
	$gridConn->dynamic_loading(100);

	$gridConn->sql->attach("INSERT","
					INSERT INTO 
						contacts (contact_typeID,marker_id,title,first_name,last_name,suffix,phone,fax,pager,mobile,email,note) 
					VALUES 
						('{contact_typeID}','$marker_id','{title}','{first_name}','{last_name}','{suffix}','{phone}','{fax}','{pager}','{mobile}','{email}','{note}')"
					);

	$gridConn->sql->attach("UPDATE","
					UPDATE contacts 
					SET contact_typeID  ='{contact_typeID}', 
						title           ='{title}', 
						first_name      ='{first_name}', 
						last_name       ='{last_name}', 
						suffix          ='{suffix}', 
						phone           ='{phone}' ,
						fax             ='{fax}' ,
						pager           ='{pager}' ,
						mobile          ='{mobile}' ,
						email           ='{email}' ,
						note            ='{note}'
					WHERE 
						contact_id = '{contact_id}'
					AND
						marker_id ='$marker_id'"
					);	
					
	$gridConn->sql->attach("DELETE", "
					DELETE FROM 
						contacts 
					WHERE 
						contact_id='{contact_id}' 
					AND 
						marker_id='$marker_id'"
					); 
	
	if ($gridConn->is_select_mode())//code for loading data
		$gridConn->render_sql("SELECT 
								contact_id,
								marker_id,
								contact_typeID,
								contact_type_name,
								title,
								first_name,
								last_name,
								suffix,
								phone,
								fax,
								pager,
								mobile,
								email,
								note 
							FROM 
								contacts 
							INNER JOIN 
								contact_types 
							ON 
								(contacts.contact_typeID = contact_types.contact_type_id) 
							WHERE 
								marker_id='".$marker_id."'",
							"contact_id", 
							"contact_typeID,title,first_name,last_name,suffix,phone,fax,pager,mobile,email,note"
							);
							
	else //code for other operations - i.e. update/insert/delete
		$gridConn->render_table("contacts", "contact_id", "contact_typeID,title,first_name,last_name,suffix,phone,fax,pager,mobile,email,note");
}

?>
[/code]

accommodation_connector.php

[code]<?php
if (isset($_REQUEST[‘marker_id’]) && $_REQUEST[‘marker_id’] != “” )
{
$marker_id = $_REQUEST[‘marker_id’];

	$res = mysql_connect("host","user","password");
	mysql_select_db("database");

	require("../dhx/dhtmlxConnector/codebase/grid_connector.php");
	require("../dhx/dhtmlxConnector/codebase/options_connector.php");

	$gridConn = new GridConnector($res);
	$gridConn->enable_log("log_accommodation.txt"); 
	
	$filterAccommodation = new OptionsConnector($res);
	$filterAccommodation->render_sql("SELECT 
							marker_accommodation_type_id AS value, 
							name AS label 
						FROM 
							marker_accommodation_types", 
						"marker_accommodation_type_id", 
						"marker_accommodation_type_id(value),name(label)"
						);

	$gridConn->set_options("marker_accommodation_typeID",$filterAccommodation);
	$gridConn->dynamic_loading(100);

	$gridConn->sql->attach("INSERT","
					INSERT INTO 
						marker_accommodation (marker_id,marker_accommodation_typeID,rooms,description,date) 
					VALUES 
						('$marker_id','{marker_accommodation_typeID}','{rooms}','{description}',".date("Y-m-d").")"
					);

	$gridConn->sql->attach("UPDATE","
					UPDATE marker_accommodation 
					SET 
						marker_accommodation_typeID  ='{marker_accommodation_typeID}', 
						rooms           			 ='{rooms}', 
						description      			 ='{description}', 
						date      					 = ".date("Y-m-d")." 
					WHERE 
						marker_accommodation_id = '{marker_accommodation_id}'
					AND
						marker_id ='$marker_id'"
					);	
					
	$gridConn->sql->attach("DELETE", "
					DELETE FROM 
						marker_accommodation 
					WHERE 
						marker_accommodation_id = '{marker_accommodation_id}' 
					AND 
						marker_id='$marker_id'"
					); 
	
	if ($gridConn->is_select_mode())//code for loading data
		$gridConn->render_sql("SELECT 
								marker_accommodation_id,
								marker_id,
								marker_accommodation_typeID,
								name,
								rooms,
								description,
								date
							FROM 
								marker_accommodation 
							INNER JOIN 
								marker_accommodation_types 
							ON 
								(marker_accommodation.marker_accommodation_typeID = marker_accommodation_types.marker_accommodation_type_id) 
							WHERE 
								marker_id='".$marker_id."'",
							"marker_accommodation_id", 
							"marker_accommodation_typeID,rooms,description,date"
							);
							
	else //code for other operations - i.e. update/insert/delete
		$gridConn->render_table("marker_accommodation", "marker_accommodation_id", "marker_accommodation_typeID,rooms,description,date");
}

?>
[/code]

Has this to do with the alias value and label in the options_connectors? I tried to rename the alias in contact_connector.php, but then the filter is not working and the data is not loaded.

marker.PNG1273×454 22.4 KB

#2

While you have

a) unique dataprocessor for each grid
b) each grid loaded from its own connector file

each grid will be fully sepated from others, and will not be able to load options from them.

The above code looks correct, the only strange thing - you are creating toolbar and grid each time when record in master grid was selected - it may lead to problems, why not to init all subgrid once and just reload them on selection in the master grid.

#3

You suggested to init subgrid and toolbar once and reload grids on selection on master grid. Which files and what needs to be adjusted to make this possible?

But if I make the changes will the original problem according the selectionfilter also be solved?

#4

The code from the markerSelected method need to be moved in the main init. And instead of component creation it will have something like

gridAccommodation.clearAll(); gridAccommodation.loadXML("accommodation_connector.php?marker_id="+id); gridContact.clearAll(); gridContact.loadXML("contact_connector.php?marker_id="+id);

But if I make the changes will the original problem according the selectionfilter also be solved?
Not quite sure, its not clear why it occurs in first place.

#5

I made changes to the sourcecode, but it still loads the wrong values in the filter select box

see my attached code:

[code]

html, body { width: 100%; height: 100%; margin: 0px; overflow: auto; background-color: red; } 
<!--  Common --> 
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>

<!--  Grid  -->
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxGrid/codebase/dhtmlxgrid.css">    
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_black.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">

<!--  Layout  -->
<script type="text/javascript" src="/dhx/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_black.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">

<!--  Tabbar  -->
<script type="text/javascript" src="/dhx/dhtmlxTabbar/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxTabbar/codebase/dhtmlxtabbar.css">

<!--  Toolbar  -->
<script type="text/javascript" src="/dhx/dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_black.css">
<link rel="stylesheet" type="text/css" href="/dhx/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css">
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_drag.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_keymap_access.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_keymap_excel.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_keymap_extra.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_nxml.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_selection.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_start.js"></script>
<script type="text/javascript" src="/dhx/dhtmlxGrid/codebase/ext/dhtmlxgrid_validation.js"></script>

<!--  Dataprocessor  -->
<script type="text/javascript" src="/dhx/dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js"></script>

<!--  Connector -->
<script type="text/javascript" src="/dhx/dhtmlxConnector/codebase/connector.js"></script>

<script type="text/javascript" >
// global variables
var dhxGrid = null, dhxLayout = null, dhxToolbar = null, dhxTabbar = null;
var gridContact = null, contactToolbar = null;
var gridAccommodation = null, accommodationToolbar = null;
var dpMarker = null, dpContact=null, dpAccommodation = null;
var g_marker_id; 

function doOnload() {
	// -- Layout Menu
	dhxLayout = new dhtmlXLayoutObject(document.body, "2E", "dhx_skyblue");

	// -- Layout Grid
	dhxLayout.cells("a").setText("Markers");
	dhxLayout.cells("b").hideHeader();

	markerGrid();		
}	

function markerGrid() {
	// -- Layout Grid attachToolbar
	if (dhxToolbar == null)
	{
		dhxToolbar = dhxLayout.cells("a").attachToolbar();
		dhxToolbar.addButton("btn_add",  1, "Add");
		dhxToolbar.addSeparator("sep", 2);            
		dhxToolbar.addButton("btn_del",  3, "Delete");
		dhxToolbar.addSeparator("sep", 4);
		dhxToolbar.addButton("btn_edit", 5, "Edit");
		dhxToolbar.base.onclick=function(e){e=e||event;e.cancelBubble=true;};

		dhxToolbar.attachEvent("onClick", function(id) 
		{
			if (id == "btn_add")
			{
				var idd=dhxGrid.uid(); 
				dhxGrid.addRow(idd,'',0); 
				dhxGrid.showRow(idd);
			}
			if (id == "btn_del")
			{
				dhxGrid.deleteSelectedRows();
			}
			if (id == "btn_edit")
			{
				dhxGrid.editCell();				
			}
		});
	}

	// -- Layout Grid attachGrid
	if (dhxGrid == null)
	{
		dhxGrid = dhxLayout.cells("a").attachGrid();
		dhxGrid.setImagePath("/dhx/dhtmlxGrid/codebase/imgs/");

		dhxGrid.setHeader("Name, Address, City, Province, Zip code, Phone");
		dhxGrid.setInitWidths("300,*");
		dhxGrid.enableAutoWidth(true);
		dhxGrid.setColTypes("ed,ed,ed,coro,ed,ed");	
	dhxGrid.attachHeader("#connector_text_filter,#connector_text_filter,#connector_text_filter,#connector_select_filter,#connector_text_filter,#connector_text_filter");
		dhxGrid.setColSorting("str,str,str,coro,str,str");
		dhxGrid.enableSmartRendering(true);
		dhxGrid.attachEvent("onRowSelect", markerSelected);
		dhxGrid.init();
	}
	dhxGrid.clearAll();
	dhxGrid.loadXML("marker_connector.php");		

	dpMarker = new dataProcessor("marker_connector.php");
	dpMarker.init(dhxGrid);
}

function accommodation() {
	if (accommodationToolbar == null)
	{
		accommodationToolbar = dhxTabbar.cells("a1").attachToolbar();
		accommodationToolbar.setSkin("dhx_skyblue");			
		accommodationToolbar.addButton("btn_add",  1, "Add");
		accommodationToolbar.addSeparator("sep", 2);            
		accommodationToolbar.addButton("btn_del",  3, "Delete");
		accommodationToolbar.addSeparator("sep", 4);
		accommodationToolbar.addButton("btn_edit", 5, "Edit");
		accommodationToolbar.base.onclick=function(e){e=e||event;e.cancelBubble=true;};

		accommodationToolbar.attachEvent("onClick", function(id) 
		{
			if (id == "btn_add")
			{
				var idd=gridAccommodation.uid(); 
				gridAccommodation.addRow(idd,'',0); 
				gridAccommodation.showRow(idd);
			}
			if (id == "btn_del")
			{
				gridAccommodation.deleteSelectedRows();
			}
			if (id == "btn_edit")
			{
				gridAccommodation.editCell();
			}
			return true;
		});
	}

	if (gridAccommodation == null)
	{
		gridAccommodation = dhxTabbar.cells("a1").attachGrid();
		gridAccommodation.setImagePath("/dhx/dhtmlxGrid/codebase/imgs/");
		gridAccommodation.setSkin("dhx_skyblue");
		gridAccommodation.setHeader("Accommodation Type,# Rooms,Description,Date");
		gridAccommodation.setInitWidths("150,60,*,80");
		gridAccommodation.enableAutoWidth(true);
		gridAccommodation.enableSmartRendering(true);
		gridAccommodation.setColTypes("coro,ed,ed,ed");	
	gridAccommodation.attachHeader("#connector_select_filter,&nbsp;,#connector_text_filter,&nbsp;");
		gridAccommodation.setColSorting("coro,str,str,str");
		gridAccommodation.init();
	}
}

function contact() {
	if (contactToolbar == null)
	{
		contactToolbar = dhxTabbar.cells("a2").attachToolbar();
		contactToolbar.setSkin("dhx_skyblue");			
		contactToolbar.addButton("btn_add",  1, "Add");
		contactToolbar.addSeparator("sep", 2);            
		contactToolbar.addButton("btn_del",  3, "Delete");
		contactToolbar.addSeparator("sep", 4);
		contactToolbar.addButton("btn_edit", 5, "Edit");
		contactToolbar.base.onclick=function(e){e=e||event;e.cancelBubble=true;};

		contactToolbar.attachEvent("onClick", function(id) 
		{
			if (id == "btn_add")
			{
				var idd=gridContact.uid(); 
				gridContact.addRow(idd,'',0); 
				gridContact.showRow(idd);
			}
			if (id == "btn_del")
			{
				gridContact.deleteSelectedRows();
			}
			if (id == "btn_edit")
			{
				gridContact.editCell();
			}
			return true;
		});	
	}

	if (gridContact == null)
	{
		gridContact = dhxTabbar.cells("a2").attachGrid();
		gridContact.setImagePath("/dhx/dhtmlxGrid/codebase/imgs/");
		gridContact.setSkin("dhx_skyblue");
		gridContact.setHeader("Contact Type,Title,First Name,Last Name,Suffix,Phone,Fax,Pager,Mobile,E-mail,Note(s)");
		gridContact.setInitWidths("150,75,120,120,75,90,90,90,90*,100");
		gridContact.enableAutoWidth(true);
		gridContact.enableSmartRendering(true);	
		gridContact.setColTypes("coro,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed");	
			gridContact.attachHeader("#connector_select_filter,&nbsp;,#connector_text_filter,#connector_text_filter,&nbsp;,#connector_text_filter,&nbsp;,&nbsp;,#connector_text_filter,#connector_text_filter,#connector_text_filter");
		gridContact.setColSorting("coro,str,str,str,str,str,str,str,str,str,str");
		gridContact.init();
	}	
}

function markerSelected (marker_id) {
	g_marker_id = marker_id;

	if (dhxTabbar == null)
	{
		dhxTabbar = dhxLayout.cells("b").attachTabbar();
		dhxTabbar.setImagePath("/dhx/dhtmlxTabbar/codebase/imgs/");
		dhxTabbar.setSkin("modern");
		dhxTabbar.addTab("a1", "Accommodations", "130px");
		dhxTabbar.addTab("a2", "Contacts", "100px");
		dhxTabbar.addTab("a3", "Grades", "100px");	

		dhxTabbar.attachEvent("onSelect", function(id, last_id)
		{		
			switch (id)
			{
				case "a1" : 
					accommodation();
					gridAccommodation.clearAll();	
					gridAccommodation.loadXML("accommodation_connector.php?marker_id="+g_marker_id);

					dpAccommodation = new dataProcessor("accommodation_connector.php?marker_id="+g_marker_id);
					dpAccommodation.init(gridAccommodation);
				break;

				case "a2" : 
					contact();
					gridContact.clearAll();
					gridContact.loadXML("contact_connector.php?marker_id="+g_marker_id);
					dpContact = new dataProcessor("contact_connector.php?marker_id="+g_marker_id);
					dpContact.init(gridContact);
				break;

				case "a3" : 
				break;					
			}
			return true;
		});
	}
	dhxTabbar.setTabActive("a1");

	if (dhxTabbar.getActiveTab() != null)
	{
		switch (dhxTabbar.getActiveTab())
		{
			case "a1" : 
				accommodation();
				gridAccommodation.clearAll();	
				gridAccommodation.loadXML("accommodation_connector.php?marker_id="+g_marker_id);

				dpAccommodation = new dataProcessor("accommodation_connector.php?marker_id="+g_marker_id);
				dpAccommodation.init(gridAccommodation);
			break;

			case "a2" : 
				contact();

				gridContact.clearAll();
				gridContact.loadXML("contact_connector.php?marker_id="+g_marker_id);

				dpContact = new dataProcessor("contact_connector.php?marker_id="+g_marker_id);
				dpContact.init(gridContact);
			break;

			case "a3" : 
			break;					
		}
	}	
	return true;
}
</script>
[/code]
#6

Can you provide the xml file , after loading which select box filled with incorrect options ?

The only scenario when some problems with column filling can occur - usage of movable columns - which are not used in your case.

#7

How can I do that? The data is coming from the database.

#8

Just load the same url, as used in loadXML in the separate window
Or use firebug like tool, which shows data retreived from server ( latest IE, Opera, Chrome has dev. tools as well, which allows to see all XHR requests and server responses )

#9

I now see what happens: The first time the connector is loaded (accomodation_connector.php)
the xml output has coll_options filled in. When I change the tab to contacts, the connector (contact_connector.php) is loaded, the xml output now has another data in coll_options field.

When I select accommodation tab again no coll_options is send as output to xml, so it reminds the last col_options.

<rows total_count="6"> ... <coll_options for="0"> <item value="1" label="honeymoon suite"></item> <item value="2" label="Bisuness suite"></item> <item value="3" label="Standard"></item> <item value="4" label="Standard"></item> <item value="5" label="Delux Room"></item> <item value="6" label="Super Deluxe"></item> <item value="7" label="Simple Room"></item> </coll_options>

<rows total_count="4">
...
<coll_options for="0">
   <item value="3" label="Owner"></item>
   <item value="4" label="Manager"></item>
   <item value="5" label="Sales"></item>
</coll_options>
</rows>

I tried the following:
When I select a marker (event attached) the connectors for accommodation and contacts is loaded. I added the parameters &connector=true&dhx_colls=0 to the url (see below)

gridAccommodation.clearAll();
gridAccommodation.loadXML("accommodation_connector.php?marker_id="+g_marker_id+"&connector=true&dhx_colls=0");
dpAccommodation = null;
dpAccommodation = new dataProcessor("accommodation_connector.php?marker_id="+g_marker_id+"&connector=true&dhx_colls=0");
dpAccommodation.init(gridAccommodation);

gridContact.clearAll();
gridContact.loadXML("contact_connector.php?marker_id="+g_marker_id+"&connector=true&dhx_colls=0");
dpContact = null;
dpContact = new dataProcessor("contact_connector.php?marker_id="+g_marker_id+"&connector=true&dhx_colls=0");
dpContact.init(gridContact);

Now the xml output has the coll_options field, but still the filter is populated with the values from the other filter (contact_type).

Any thoughts about how to tackle this problem