appendGrid - Demo: Drop Down List

appendGrid

The dynamic table input jQuery plugin

Demo:	Basic	HTML 5	Work with UI Widget
	Manipulation	Custom Type	Layout / Style
	Validation	Custom Button	Show / Hide Column
	Multiple Grid	Header / Detail	Server-side Handling
	Drop Down List	Drag & Drop	Detect Empty Row
	Sub Panel	Sub Grid	Fixed Header
	Work with Bootstrap	Large Data Set

There are several ways to generate drop down list which is the select element inside appendGrid. You can pass options as string, array, object or even a function to generate options!

If you are passing options as object, the option order generated may not be the same as what you defined in the object. It is because different web browser will have its own method to handle ordering. Please consider to use array or string instead when the option order is critical.

Drop Down List Test
	String 1	String 2	String[]	Object[]	Function	Cascade 1	Cascade 2	Cascade 3	UI selectmenu
1									Item 4
2									Item 3
3									Item 2

Show Source Code

HTML:

1 2	`<table` `id="tblAppendGrid">` `</table>`

JavaScript:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

$(function () {
    $('#tblAppendGrid').appendGrid({
        caption: 'Drop Down List Test',
        columns: [
            {
                name: 'String1', display: 'String 1', type: 'select',
                ctrlOptions: '1:Option 1;2:Option 2;3:Option 3;4:Option 4;5:Option 5',
                onChange: handleChange
            },
            {
                name: 'String2', display: 'String 2', type: 'select',
                ctrlOptions: 'Option 1;Option 2;Option 3;Option 4;Option 5',
                onChange: handleChange
            },
            {
                name: 'Array1', display: 'String[]', type: 'select',
                ctrlOptions: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5'],
                onChange: handleChange
            },
            {
                name: 'Array2', display: 'Object[]', type: 'select',
                ctrlOptions: [
                    { label: 'A-1', value: 1, group: 'Group 1', title: 'Prefix A' },
                    { label: 'B-1', value: 2, group: 'Group 1' },
                    { label: 'C-1', value: 3, group: 'Group 1' },
                    { label: 'A-2', value: 4, group: 'Group 2', title: 'Prefix A' },
                    { label: 'B-2', value: 5, group: 'Group 2' },
                    { label: 'C-2', value: 6, group: 'Group 2' },
                    { label: 'D-2', value: 7, group: 'Group 2' },
                    { label: 'Special', value: 8, title: 'No Option Group!' },
                    { label: 'A-3', value: 9, group: 'Group 3', title: 'Prefix A' },
                    { label: 'B-3', value: 10, group: 'Group 3' }
                ],
                onChange: handleChange
            },
            { name: 'Function', display: 'Function', type: 'select', ctrlOptions: generateOptions },
            {
                name: 'Cascade1', display: 'Cascade 1', type: 'select',
                ctrlOptions: { 0: '{Choose}', 1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E' },
                onChange: handleCascadeChange1
            },
            {
                name: 'Cascade2', display: 'Cascade 2', type: 'select',
                ctrlOptions: { 0: '{Choose}' }, ctrlAttr: { disabled: 'disabled' },
                onChange: handleCascadeChange2
            },
            {
                name: 'Cascade3', display: 'Cascade 3', type: 'select',
                ctrlOptions: { 0: '{Choose}' }, ctrlAttr: { disabled: 'disabled' }
            },
            {
                name: 'UiSelectMenu', display: 'UI selectmenu', type: 'ui-selectmenu', uiOption: { 'width': '100px' },
                // You can use string / array / object / function on `ctrlOptions` for `ui-selectmenu` type
                ctrlOptions: '0:Item 0;1:Item 1;2:Item 2;3:Item 3;4:Item 4'
            }
        ],
        initData: [
            { String1: 1, String2: 'Option 3', Array1: 'Value 2', Array2: 3, Function: 5, Cascade1: 0, Cascade2: 0, Cascade3: 0, UiSelectMenu: 4 },
            { String1: 2, String2: 'Option 4', Array1: 'Value 3', Array2: 5, Function: 3, Cascade1: 1, Cascade2: 2, Cascade3: 0, UiSelectMenu: 3 },
            { String1: 3, String2: 'Option 5', Array1: 'Value 4', Array2: 8, Function: 1, Cascade1: 2, Cascade2: 3, Cascade3: 5, UiSelectMenu: 2 }
        ],
        // Since the cascading drop down list are empty when row inserted,
        // it is required to generate options and fill values again after that.
        rowDataLoaded: function (caller, record, rowIndex, uniqueIndex) {
            // Trigger rebuild the cascade drop down list if there is a valid value assigned
            if (0 < record.Cascade1) {
                var cascade1 = $('#tblAppendGrid').appendGrid('getCellCtrl', 'Cascade1', rowIndex);
                $(cascade1).trigger('change');
                // Check value of cascade 2
                var cascade2 = $('#tblAppendGrid').appendGrid('getCellCtrl', 'Cascade2', rowIndex);
                if (0 < record.Cascade2) {
                    $(cascade2).val(record.Cascade2).trigger('change');
                    // Check value of cascade 3
                    var cascade3 = $('#tblAppendGrid').appendGrid('getCellCtrl', 'Cascade3', rowIndex);
                    if (0 < record.Cascade3) {
                        $(cascade3).val(record.Cascade3);
                    }
                }
            }
        }
    });
});
function generateOptions(elem) {
    // Generate options as you like
    for (var z = 1; z <= 5; z++) {
        elem.options[z - 1] = new Option('Option ' + z, z);
    }
}
function handleChange(evt, rowIndex) {
    alert('Selected Value = ' + evt.target.value);
}
function handleCascadeChange1(evt, rowIndex) {
    // Get the select elements
    var elem1 = evt.target;
    var elem2 = $('#tblAppendGrid').appendGrid('getCellCtrl', 'Cascade2', rowIndex);
    var elem3 = $('#tblAppendGrid').appendGrid('getCellCtrl', 'Cascade3', rowIndex);
    // Clear the generated options in elem2 and elem3
    elem2.options.length = 1;
    elem3.options.length = 1;
    // Check if user selected a valid option
    if (0 < elem1.selectedIndex) {
        // Generate options for elem2
        var selectedText = elem1.options[elem1.selectedIndex].innerHTML;
        for (var z = 1; z <= 5; z++) {
            elem2.options[z] = new Option(selectedText + '-' + z, z);
        }
        elem2.disabled = false;
    } else {
        elem2.disabled = true;
    }
    elem3.disabled = true;
}
function handleCascadeChange2(evt, rowIndex) {
    // Get the select elements
    var elem2 = evt.target;
    var elem3 = $('#tblAppendGrid').appendGrid('getCellCtrl', 'Cascade3', rowIndex);
    // Clear the generated options in elem3
    elem3.options.length = 1;
    // Check if user selected a valid option
    if (0 < elem2.selectedIndex) {
        // Generate options for elem3
        var selectedText = elem2.options[elem2.selectedIndex].innerHTML;
        for (var z = 1; z <= 5; z++) {
            elem3.options[z] = new Option(selectedText + '-' + z, z);
        }
        elem3.disabled = false;
    } else {
        elem3.disabled = true;
    }
}

Download Sample