Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1175
v17.2 igCombo
posted

How do I create an igGrid that supports a combo box editor that is tied to a Boolean data type.  But instead of showing true/false values, we want the user to see and select YES/NO.

I have it so it works, but when the user selects a value, the drop down actually shows TRUE|FALSE.  I passed in the data types but it isn't working...  Here's what I have.

$(function() {
    $('#employeeGrid').igGrid({
        autoGenerateColumns: false,
        columns: [{
            key: 'EmployeeId',
            dataType: 'number',
            headerText: 'EmployeeId'
        }, {
            key: 'Name',
            dataType: 'string',
            headerText: 'Employee Name',
            width: '245px'
        }, {
            key: 'Title',
            dataType: 'string',
            headerText: 'Title',
            width: '95px'
        }, {
            key: 'FlsaType',
            dataType: 'string',
            headerText: 'FLSA Type',
            width: '105px',
            template: '<div class="center editable">${FlsaType}</div>'
        }, {
            key: 'IsSupervisor',
            dataType: 'bool',
            headerText: 'Supervisor?',
            width: '95px',
            template: '<div class="center editable">{{if !isBoolean(${IsSupervisor}) }} &nbsp; {{elseif isBoolean(${IsSupervisor}) && boolParse(${IsSupervisor})}} Yes {{else}} No {{/if}}</div>'
        }, {
            key: 'IsActive',
            dataType: 'bool',
            headerText: 'Active (Current)<br />Employee?',
            width: '85px',
            template: '<div class="center editable">{{if boolParse(${IsActive}) }}Active{{else}}Inactive{{/if}}</div>'
        }],
        features: [{
            columnSettings: [{
                columnKey: 'HomeLocation',
                readOnly: true
            }, {
                columnKey: 'EmployeeId',
                readOnly: true
            }, {
                columnKey: 'EmployeeNumber',
                readOnly: true
            }, {
                columnKey: 'Name',
                readOnly: true
            }, {
                columnKey: 'Title',
                readOnly: true
            }, {
                columnKey: 'FlsaType',
                editorType: 'combo',
                editorOptions: {
                    allowCustomValue: false,
                    enableClearButton: false,
                    dataSource: ["Non-Exempt", "Exempt"]
                }
            }, {
                columnKey: 'IsSupervisor',
                editorType: 'combo',
                editorOptions: {
                    allowCustomValue: false,
                    enableClearButton: false,
                    dataSource: [{
                        "Key": "Yes",
                        "Value": "True"
                    }, {
                        "Key": "No",
                        "Value": "False"
                    }]
                }
            }, {
                columnKey: 'IsActive',
                editorType: 'combo',
                editorOptions: {
                    allowCustomValue: false,
                    enableClearButton: false,
                    dataSource: [{
                        "Key": "Active",
                        "Value": "True"
                    }, {
                        "Key": "Inactive",
                        "Value": "False"
                    }]
                }
            }],
            name: 'Updating',
            enableAddRow: false,
            enableDeleteRow: false,
            editMode: 'cell',
            showDoneCancelButtons: false
        }, {
            columnSettings: [{
                columnKey: 'EmployeeId',
                allowHiding: false,
                hidden: true
            }, {
                columnKey: 'Name',
                allowHiding: false
            }, {
                columnKey: 'Title',
                allowHiding: false
            }, {
                columnKey: 'FlsaType',
                allowHiding: false
            }, {
                columnKey: 'IsSupervisor',
                allowHiding: false
            }, {
                columnKey: 'IsActive',
                allowHiding: false
            }],
            name: 'Hiding'
        }],
        primaryKey: 'EmployeeId',
        autoCommit: true,
        enableUTCDates: false
        }
    });
});