Next
Update
Prev
Change History
Change History (XML)

Dependent ComboBoxes can be defined by setting the value of the itemEditor attribute to DynamicComboBoxEditor. This example demonstrates how to use the dependent ComboBox for the Subject2 column, the values of which are dependent on what was selected in the Subject1 column.

Double click on the Subject1 column and select a different value and then double click on the Subject2 column.

...
    <DataGridColumn dataField="Subject1" ... itemEditor="ComboBoxEditor" editorDataField="selectedDataField" itemRendererDataField="code" itemRenderer="DataProviderItem" itemRendererDataProvider="[{\'code\'\:\'G-1\',\'label\'\:\'GMC-1\'}, {\'code\'\:\'G-2\',\'label\'\:\'GMC-2\'}, {\'code\'\:\'G-3\',\'label\'\:\'GMC-3\'}, {\'code\'\:\'G-4\',\'label\'\:\'GMC-4\'}, {\'code\'\:\'G-5\',\'label\'\:\'GMC-5\'}, {\'code\'\:\'G-6\',\'label\'\:\'GMC-6\'}]" />
    <DataGridColumn dataField="Subject2" ... itemEditor="DynamicComboBoxEditor" editorDataField="selectedDataField" itemRendererDataField="code" itemRenderer="DataProviderItem" itemRendererDataProvider="[{'code':'G-1-1', 'label':'GMC-1 Release1', 'Subject1':'G-1', 'visible':true},{'code':'G-1-2', 'label':'GMC-1 Release2', 'Subject1':'G-1', 'visible':true},{'code':'G-1-3', 'label':'GMC-1 Release3', 'Subject1':'G-1', 'visible':true},{'code':'G-1-4', 'label':'GMC-1 Release4', 'Subject1':'G-1', 'visible':true},{'code':'G-1-5', 'label':'GMC-1 Release5', 'Subject1':'G-1', 'visible':true},{'code':'G-2-1', 'label':'GMC-2 Release1', 'Subject1':'G-2', 'visible':false},{'code':'G-2-2', 'label':'GMC-2 Release2', 'Subject1':'G-2', 'visible':false},{'code':'G-2-3', 'label':'GMC-2 Release3', 'Subject1':'G-2', 'visible':false},{'code':'G-2-4', 'label':'GMC-2 Release4', 'Subject1':'G-2', 'visible':false},{'code':'G-2-5', 'label':'GMC-2 Release5', 'Subject1':'G-2', 'visible':false},{'code':'G-3-1', 'label':'GMC-3 Release1', 'Subject1':'G-3', 'visible':false},{'code':'G-3-2', 'label':'GMC-3 Release2', 'Subject1':'G-3', 'visible':false},{'code':'G-3-3', 'label':'GMC-3 Release3', 'Subject1':'G-3', 'visible':false},{'code':'G-3-4', 'label':'GMC-3 Release4', 'Subject1':'G-3', 'visible':false},{'code':'G-3-5', 'label':'GMC-3 Release5', 'Subject1':'G-3', 'visible':false},{'code':'G-4-1', 'label':'GMC-4 Release1', 'Subject1':'G-4', 'visible':false},{'code':'G-4-2', 'label':'GMC-4 Release2', 'Subject1':'G-4', 'visible':false},{'code':'G-4-3', 'label':'GMC-4 Release3', 'Subject1':'G-4', 'visible':false},{'code':'G-4-4', 'label':'GMC-4 Release4', 'Subject1':'G-4', 'visible':false},{'code':'G-4-5', 'label':'GMC-4 Release5', 'Subject1':'G-4', 'visible':false},{'code':'G-5-1', 'label':'GMC-5 Release1', 'Subject1':'G-5', 'visible':false},{'code':'G-5-2', 'label':'GMC-5 Release2', 'Subject1':'G-5', 'visible':false},{'code':'G-5-3', 'label':'GMC-5 Release3', 'Subject1':'G-5', 'visible':false},{'code':'G-5-4', 'label':'GMC-5 Release4', 'Subject1':'G-5', 'visible':false},{'code':'G-5-5', 'label':'GMC-5 Release5', 'Subject1':'G-5', 'visible':false},{'code':'G-6-1', 'label':'GMC-6 Release1', 'Subject1':'G-6', 'visible':false},{'code':'G-6-2', 'label':'GMC-6 Release2', 'Subject1':'G-6', 'visible':false},{'code':'G-6-3', 'label':'GMC-6 Release3', 'Subject1':'G-6', 'visible':false},{'code':'G-6-4', 'label':'GMC-6 Release4', 'Subject1':'G-6', 'visible':false},{'code':'G-6-5', 'label':'GMC-6 Release5', 'Subject1':'G-6', 'visible':false}]" />
...
editorDataField The value must be selectedDataField.
itemRendererDataField This property is to set the name of the field that contains code, which is defined in the value of the itemRendererDataProvider property.
itemRendererLabelField This property is to set the name of the field that contains the label displayed in the cell, which is defined in the value of the itemRendererDataProvider property. (default value : label)
itemRenderer The value must be DataProviderItem.
itemRendererDataProvider This property is to set the values of the ComboBox.

© 2017 KoolChart. All rights reserved.