Is it possible to wire up cascading igCombo boxes within igGrid? If so how do you specifiy the parentComboKey? If not is my only option to override the 'editCellStarting' event to add or clear listitems as the child dropdowns are selected?
Thanks,
Chad
Hello Chad,
Thank you for posting in our forum.
You can set the parentComboKey and parentCombo options in the editorOptions for the specific column Settings of the grid .
For example in the settings of the grid you can define the editor options as follows to set 2 cascading combos:
columnSettings: [
{
//The combo is defined as an editor provider. Combo options are defined under 'editorOptions'.
columnKey: "Country",
editorType: 'combo',
required: true,
editorOptions: {
mode: "dropdown",
id: "contryCombo",
dataSource: dsCountry,
textKey: "txtCountry",
valueKey: "valCountry"
}
},
columnKey: "District",
id: "districtCombo",
dataSource: dsCascDistrict,
textKey: "txtDistrict",
valueKey: "valDistrict",
parentComboKey: "keyCountry",
parentCombo: "contryCombo"
…
The parentCombo option should be set to the id of the parent combo.
The parentComboKey is the column key in the dataSource, which will be used by the cascading functionality in order to get records matching with the selected value in the parent igCombo.
I’ve attached an example for your reference. Let me know if you’re aiming to achieve something similar.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
Please feel free to contact us if you need any further assistance with this matter.
Hi,
I was wondering if this only works for a specific version of igniteui.
I changed the paths for igniteui to
<link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/structure/infragistics.css" rel="stylesheet" /> <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.lob.js"></script>
And it no longer works. The page itself loads but the cascading functionality no longer works.
Greg