datastore+grid+combo

Suite and Optimus Suite 5
#1

I need to bind a grid to a datastore.
The grid has two combo columns.
I use the following code:

	var myData = new dhtmlXDataStore({
			                url:"php/Data.php",
				        datatype:"json"
				      });
	      
	var DP   = new dataProcessor("php/Data.php");
        DP.init(myData);
...
	Grid.setHeader(["fieldA","fieldB"]); 
	Grid.setColTypes("combo,combo"); 
	Grid.setInitWidths('*,*'); 
	Grid.setColumnIds("fieldA,fieldB");	
	Grid.init(); 
	
	var combo = Grid.getColumnCombo(0); 
	combo.load('./php/Combo.php');	 
	
	Grid.sync(myData);

When the grid is loaded, the first column displays the id/value of the field (eg. “A”), not the label (eg. “Alpha”).

However, if I click to edit, the cell changes and I see the label (“Alpha”) as well as the correct combo options below.
If I choose another option (eg. “Beta”), after having edited I see the label on the edited cell (“Beta”), while in the other rows I still see the id/value.

If I reload the page, on the cell I edited I see the id/value again but I see that it has changed to the id/value (“B”) of the option that I choose (“Beta”), so the cell has been edited correctly.

Am I missing something? How to make the grid display labels and not id/values in such a case?

#2

Solved by myself
Grid syncing with datastore must be done after combo has loaded its data (see the last line):

[code]var myData = new dhtmlXDataStore({
url:“php/Data.php”,
datatype:“json”
});

var DP = new dataProcessor(“php/Data.php”);
DP.init(myData);
…
Grid.setHeader([“fieldA”,“fieldB”]);
Grid.setColTypes(“combo,combo”);
Grid.setInitWidths(’,’);
Grid.setColumnIds(“fieldA,fieldB”);
Grid.init();

var combo = Grid.getColumnCombo(0);
combo.load(’./php/Combo.php’, function() {Grid.sync(myData);});

[/code]

#3

Ok new problem now.
I need to group rows by fieldA, I tried the following code:

[code] var DP = new dataProcessor(“php/Data.php”);
DP.init(myData);
…
Grid.setHeader([“fieldA”,“fieldB”]);
Grid.setColTypes(“combo,combo”);
Grid.setInitWidths(’,’);
Grid.setColumnIds(“fieldA,fieldB”);
Grid.init();

var combo = Grid.getColumnCombo(0);
combo.load(’./php/Combo.php’, function() {Grid.sync(myData);
Grid.groupBy(0);
});
[/code]

Grouping works, but each group is named after the field’s id/value (in my case, a number), not by its label
Any ideas?

#4

Found a solution here, using the property customGroupFormat

[code] var DP = new dataProcessor(“php/Data.php”);
DP.init(myData);
…
Grid.setHeader([“fieldA”,“fieldB”]);
Grid.setColTypes(“combo,combo”);
Grid.setInitWidths(’,’);
Grid.setColumnIds(“fieldA,fieldB”);
Grid.customGroupFormat=function(text,count){
return combo.getOption(text).text;
};
ufficiPreferitiGrid.init();
Grid.init();

   var combo = Grid.getColumnCombo(0);
   combo.load('./php/Combo.php', function() {
        Grid.sync(myData);
        Grid.groupBy(0);                           
   });

[/code]

#5

Unfortunately the grouping operates with the value of a cell but not with the title. So you should use the customGroupFormat function.