Changing a ListGrid by selecting something in the drop down menu

[tngo]

Where can I look in the documentation or could if you could possibly tell me how I would be able to change the listGrid's dataSource on our webapp by simply choosing another option during a drop down menu. What would this function be called?

Thanks

[Isomorphic]

Possibly we're not understand the question, but, are you looking for listGrid.setDataSource()? This is shown in the Built-in DS app - it switches DataSources on the fly based on a drop-down menu.

[tngo]

Where would I be able to find the Built-in DS app? In the documentation? Exactly your last part is what im trying to figure out.

[Isomorphic]

Sorry, that's the name of the SmartGWT starter project. There is a very old SmartClient sample that does the same thing, but really, this is simpler than you're guessing. We're literally talking about:

grid.setDataSource(dataSource);

And that's it. That's all.

The only other part we can imagine you might be missing is that you would want to take the selected record (if you use a SelectItem) or the selected MenuItem (if you use a Menu) and store the ID of the DataSource on the menuItem or record. Then it would be just eg "grid.setDataSource(selectItem.getSelectedRecord().dsID)" (if you had used dsID as the attribute name to store the DataSource ID.

[tngo]

Apologies, for my lack of understanding, was wondering if you could point me in the right direction regarding how to do this. So would I be writing it within the comboBox code? Or would it be a separate function.

disbursementsGridDefaults: {
_constructor: isc.ListGrid,
width: "100%",
height: 300,
minHeight: 125,
margin: 5,
showResizeBar: true,
autoParent: "panelCanvas",
autoFitFieldWidths: true,
autoFitWidthApproach: "both",
showFilterEditor: true,
dataSource: "rscReacctReinsurers",
autoFetchData: true,
recordClick : function() {
this.creator.rowChanged();
},
fields: [
{name: "rname"},
{name: "naic_code"},
]
},

controlButtonLayoutDefaults: {
_constructor: isc.HLayout,
width: "100%",
height: 30,
membersMargin: 10,
autoParent: "panelCanvas",
margin: 10
},

buttonLayoutSpacerDefaults: {
_constructor: isc.LayoutSpacer,
width: "*",
autoParent: "controlButtonLayout"
},
filterFormDefaults: {
_constructor: isc.DynamicForm,
autoParent: "controlButtonLayout",
width: 1,
height: 1,
wrapItemTitles: false,
canEdit: true,

fields: [
{name:"showPosted",
title:"Show",
editorType:"ComboBoxItem",
valueMap: {"reinsurer" : "Reinsurer", "broker" : "Broker"},
defaultToFirstOption: true}
]
},

[Isomorphic]

Use the standard "changed" event on the ComboBoxItem. That's how you react to the value changing.

[tngo]

I feel like I am close, but still doesnt seem to change.

isc.ClassFactory.defineClass("DisbursementsPanel", ScreenPanel).addProperties({
panelTitle: "Disbursements",
/* GRIDS */
disbursementsGridDefaults: {
_constructor: isc.ListGrid,
width: "100%",
height: 300,
minHeight: 125,
margin: 5,
showResizeBar: true,
autoParent: "panelCanvas",
autoFitFieldWidths: true,
autoFitWidthApproach: "both",
showFilterEditor: true,
dataSource: "rscReacctReinsurers",
autoFetchData: true,
recordClick : function() {
this.creator.rowChanged();
},
fields: [
{name: "rname"},
{name: "naic_code"},
]
},
checksGridDefaults: {
_constructor: isc.ListGrid,
width: "100%",
height: 300,
minHeight: 125,
margin: 5,
showResizeBar: true,
autoParent: "panelCanvas",
autoFitFieldWidths: true,
autoFitWidthApproach: "both",
showFilterEditor: true,
dataSource: "rscReacctReinsurerContacts",
autoFetchData: true,
recordClick : function() {
this.creator.checksRowChanged();
},
},
controlButtonLayoutDefaults: {
_constructor: isc.HLayout,
width: "100%",
height: 30,
membersMargin: 10,
autoParent: "panelCanvas",
margin: 10
},

buttonLayoutSpacerDefaults: {
_constructor: isc.LayoutSpacer,
width: "*",
autoParent: "controlButtonLayout"
},
filterFormDefaults: {
_constructor: isc.DynamicForm,
autoParent: "controlButtonLayout",
width: 1,
height: 1,
wrapItemTitles: false,
canEdit: true,

fields: [
{name:"showPosted",
title:"Show",
editorType:"ComboBoxItem",
valueMap: {"reinsurer" : "Reinsurer", "broker" : "Broker"},
defaultValue: "reinsurer",
changed : function (item, value) {
this.disbursementGrid.setDataSource(rscReacctReinsurerContacts)
}

}]
},

[Isomorphic]

Well, if the setDataSource() API were not working as expected, these forums would be blowing up, so, we're not sure what to recommend except elementary troubleshooting steps, like:

1. checking if your "changed" handler code is running at all
2. checking for typos such as having the DataSource ID wrong
3. checking if your code is just crashing
4. checking the Developer Console for warnings, such as, no such DataSource ID
5. checking if the DataSource is actually loaded
6. checking if you saved the file after making the last set of changes