Dropdown in listgrid

[harikrishnadhas.k]

Dear All,

I'm using a combo box type to a field and sets the optionDataSource property to show the list of records. My code to create list grid is

isc.ListGrid.create({
					ID						: "country",
					top						: 200,
					width					: 720,
					height					: 150,
					alternateRecordStyles	: true,
					fields:[
    	 						{name:"currencycode", ID:"currencycode",  title:"Currency",  
		       		editorType: "comboBox", width:150,
			        editorProperties: {textMatchStyle: "substring", 
			        valueField: "currencycode", displayField: "currencyname",  
			        pickListFields: [{name:"currencyname",title:"Currency Name"},{name:"currencycode",title:"Currency Name"}],pickListWidth:250, pickListHeight:100,
			        autoFetchData: true,
					showAllRecords:true, focus:"parent.getDDDWData('D_DDDW_CURRENCY',this);" }, prompt:"Enter the Follow Up By user"}],
					canEdit					: true
					});

When i select any record from the drop down list it shows displayfield correctly, after i press enter key or gone to enter any field in any other row the drop down field value converted to value field.

I want to show the displayField value at all time and i should be able to get the valueField value when get the grid values to update in backend table.

Please guide me... I spent 2 days already in this..

Thanks in advance.
-Harikrishnadhas.K

[harikrishnadhas.k]

In Dynamic Form

In Dynamic drop down works fine. The code i used for dynamic form is

isc.DynamicForm.create({
						fields:[
    	 						{name			: "currency",
    	 						 ID				: "currency",
    	 						 title			: "Currency", 
						         valueField		: "currencycode",
						         displayField	: "currencyname",
						         pickListWidth	: 250,
						         pickListHeight	: 100,
								 pickListFields	: [{name:"currencyname", title:"Currency Name"},{ name:"currencycode", title:"Currency Code"}],
								 autoFetchData	: true,
								 editorType		: "comboBox",
								 showAllRecords	: true,
								 focus:"parent.getDDDWData('D_DDDW_CURRENCY',this);",
								 textMatchingStyle	: "substring"}],
    					ID:"Currency_DDDW"
						});

The code to create drop down in list grid differs from the dynamic form.
I explored through smartclient samples and written the above code.

The function i called in focus event of the drop down field will do an ajax call which retrieves no of rows from oracle table and creates the datasource and set the datasource to the optionDataSource property of the dropdown field.

function getDDDWData(as_optioncode, ao_col)
{
	if(this[as_optioncode] != undefined)setDataSource(ao_col, this[as_optioncode]);
	else setDataSource(ao_col, createDDDW(as_optioncode));
}

function createDDDW(as_optioncode)
{
	DDDW.getData(as_optioncode, {callback :	function(rs)
											{
												isc.DataSource.create({
																		ID			: as_optioncode,
																		clientOnly	: true,
																		testData	: rs});
											}
											, async:false});
	return this[as_optioncode];
}

function setDataSource(ao_col, ao_ds)
{
	if(ao_col.optionDataSource == undefined)ao_col.optionDataSource = ao_ds;
}

In both dynamic form and list grid I'm using the same code to arrive data source.

Please guide to display displayField at all time in listgrid.

Thanks in advance.
-Harikrishnadhas.K

[harikrishnadhas.k]

Hi Isomorphic,

Can u please help me in this problem....

Thanks in advance.
Harikrishnadhas.K

[Isomorphic]

Please do not post the same question 6 times. Your other posts have been deleted. If you want timely responses, you can purchase a support contract or consulting time from Isomorphic.

Instead of trying to set optionDataSource on the fly, you can either use listGridField.optionDataSource (which does what you appear to want to do, but without the extra code), or load and create the DataSource *before* creating the ListGrid that will use it as an optionDataSource.

[harikrishnadhas.k]

Thanks for ur reply.

ok. i'm sorry for multiple post of same content....

I tried what ur telling too. I didn't get the current output too.
It shows only one field in picklist and no headers shown in the picklist.

Can u pls post a example code.

[Isomorphic]

All the existing examples already work in the way described: the DataSource is created first, then the components that use the DataSource are created. Make sure your code is creating the components *only after the DataSource is created*. In your case it would need to be after the callback for fetchData() occurs. If you can't get it to work, post sample code with your attempt.

[harikrishnadhas.k]

Thanks for ur reply,

What my problem is when assigning the optiondatasource directly, the there is only display column is coming in the picklist.

I want to show 2 or more columns in the picklist. When i'm setting the optionDataSource on fly its working.

I hope u got my point.

[harikrishnadhas.k]

I'm not using smartclient server. I'm doing my seperate ajax call through dwr framework to get data to the datasource.

[Isomorphic]

Once again, create the component that uses the optionDataSource only after you have created the optionDataSource. pickListFields work fine with fields that have an optionDataSource in a grid if you try any example, such as:

http://www.smartclient.com/index.jsp#editByRow

Just replace the continent field with:

        {name:"continent", editorProperties:{
             optionDataSource:"countryDS",
             pickListFields:[{name:"countryCode"}, {name:"countryName"}]
         }},

So again, create the DataSource first. What you were trying to do with directly assigning an optionDataSource to an already created grid is invalid: the DataSource needs to be created before the grid is created.

[harikrishnadhas.k]

Thanks for reply,


I created the optionDataSource first and then created the listgrid.
Its coming the picklist correctly, but the earlier problem continues. that is when i'm selecting a row from picklist it shows displayfield value first and then it is converted to the valuefield value when i'm going to next row.

[harikrishnadhas.k]

Dear isomorphic,

I'm trying with formatCellValue for the picklist field.
How can i access the cell from the formatCellValue function.

I want to use the getSelectedRecord function of the picklist.

Please guide me....

[Isomorphic]

Are you able to reproduce your problem with the values reverting using any of the SmartClient samples? If not, it could be a problem with your DataSource. Take a look at the RPC tab in the Developer Console to see what requests are being issued to your DataSource and whether it is responding correctly.

As far as getSelectedRecord(), if you need to store a value from the selected record for later use in a formatter, use the changed() event (installed via editorProperties) to grab the value and store it. You can get to the grid via item.grid.

[harikrishnadhas.k]

isc.ListGrid.create({
ID: "countryList",
width:500, height:224, alternateRecordStyles:true, showAllRecords:true, cellHeight:22,
// use server-side dataSource so edits are retained across page transitions
dataSource: countryDS,
// display a subset of fields from the datasource
fields:[
{name:"countryName", editorType: "comboBox", width:100,
editorProperties: {textMatchStyle: "startswith", optionDataSource: countryDS,
valueField: "countryCode", displayField: "countryName",
pickListFields: [{name:"countryName"},{name:"countryCode"}],pickListWidth:250, pickListHeight:100,
autoFetchData: true, filterLocally:true,
showAllRecords:true}},
{name:"continent"},
{name:"member_g8"},
{name:"population",
formatCellValue:"isc.Format.toUSString(parseInt(value))"},
{name:"independence"}
],
autoFetchData: true,
canEdit: true,
editEvent: "click",
listEndEditAction: "next",
cellClick: function (record, rowNum, colNum) {
if(this.getField(colNum).name == 'countryName')
isc.say(record.countryName);
},
})

Please try this in "Grids\Edit\Enter New Rows" sample.

[harikrishnadhas.k]

I Tried Using the changed event. I can get the value i want from the optionDataSource. But how can access the value got from changed event in fortmatcellvalue function. When i set the value got in field object and use from formatcellvalue its setting same value to all cells in the field.

changed : function(form, item, value)																		{
																			if(item.getSelectedRecord() != null)
																				item.grid.getField("currencycode").dispVal = item.getSelectedRecord()[item.getDisplayFieldName()];
																			else item.grid.getField("currencycode").dispVal = value;
																																							
																		}

formatCellValue	:function(val, rec, rowNum, colNum, grid)
													{
														return this.dispVal;
}

[Isomorphic]

Earlier in this thread you raised this issue:

- When you have a databound SelectItem or ComboBoxItem with a displayField and valueField specified, selecting an item from the drop down list initially correctly shows the display-field value in the form item.
However when you force the drop down list to fetch new data (which can be done in various ways - in our test case we were re-sorting the pick-list data), you can lose the display value for the selected item, and start showing the underlying data value instead.

This turned out to be a bug - we've now fixed this, and the fix should be present in 7.0 final.

However I think you were seeing a separate issue as well -
Your code to modify the "Grids\Edit\Enter New Rows" sample has a couple of issues which should be corrected:

Firstly you're setting optionDataSource / valueField / displayField on the editor (using editorProperties), not on the ListGridField. The ListGrid will need to know about these properties to perform mapping once you've performed a save of the edited row.
Secondly you're using the same dataSource for the grid and optionDataSource for the editable field, which may cause unexpected behavior since by changing the record values, you'll be changing the set of options that show up in the drop down list (they're drawn from the same data-set).
There are cases where it makes sense to have a ListGridField's optionDataSource match the dataSource of the grid (for example editing an employee/manager relationship - you may want to draw the list of possibly managers from another field in the same datasource) - but it doesn't make sense in the example you posted, with the displayField matching the underlying fieldName, and the valueField being something else.

Here's a quick demo showing how to make use of optionDataSource / displayField in a ListGridField. See if this helps clarify things:

isc.DataSource.create({
    ID:"ds1",
    clientOnly:true,
    fields:[
        {name:"f1", primaryKey:true},
        {name:"f2"},
        {name:"f3"}
    ],
    testData:[
        {f1:"1", f2:"Record 1", f3:"Description for Record 1"},
        {f1:"2", f2:"Record 2", f3:"Description for Record 2"},
        {f1:"3", f2:"Record 3", f3:"Description for Record 3"},
        {f1:"4", f2:"Record 4", f3:"Description for Record 4"},
        // show a record with a f2 value that matches a record from ds2's "a" field value
        // This will be valueMapped across to the appropriate display value
        {f1:"5", f2:"a5", f3:"Record 5 - f2 matches a record in ds2"}
    ]
});


isc.DataSource.create({
    ID:"ds2",
    clientOnly:true,
    fields:[
        {name:"a", primaryKey:true},
        {name:"b"},
        {name:"c"}
    ],
    testData:[
        {a:"a1", b:"ds2 Record 1", c:"Description for Record 1 on DS 2"},
        {a:"a2", b:"ds2 Record 2", c:"Description for Record 2 on DS 2"},
        {a:"a3", b:"ds2 Record 3", c:"Description for Record 3 on DS 2"},
        {a:"a4", b:"ds2 Record 4", c:"Description for Record 4 on DS 2"},
        {a:"a5", b:"ds2 Record 5", c:"Description for Record 5 on DS 2"}
    ]
});


// A listGrid demonstrating optionDataSource / valueMap
isc.ListGrid.create({
    ID:"testGrid",
    dataSource:"ds1",
    height:200, width:300,
    autoFetchData:true,
    canEdit:true,
    fields:[
        {name:"f2", optionDataSource:"ds2", displayField:"b", valueField:"a",
         editorProperties:{pickListFields:[{name:"a"}, {name:"b"}]}},
        {name:"f3"}
    ]
});

// A button so you can see the underlying data value for field f2
isc.IButton.create({
    top:250,
    title:"Show Selected Record Values",
    autoFit:true,
    click:"isc.warn(isc.Log.echo(testGrid.getSelectedRecord()))"
})

---
Update: I think this may essentially "close this issue out" - it seems like you shouldn't need to use formatCellValue() since the translation happens automatically as demonstrated in this example - however if you're still having issues, please let us know
Thanks