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
        }
    });
});

Parents
  • 17590
    Verified Answer
    Offline posted

    Hello Karthik,

    Thank you for posting in our community.

    By design, when column type is of type Boolean the items in its combo drop down list are true and false.

    What I can suggest is creating a custom editor provider for this column which will override the default one according to your requirement. What needs to be handled is the list items option of the combo editor/ By default these items are - "true" and "false".

    Some further reference about implementing a custom editor provider can be found here

    Another option, if suitable in your scenario, is changing column type to string. In this case in the editor options you can set the textKey and the valueKey accordingly. For example:

    features: [
          {
                        name: "Updating",
                        columnSettings: [
                          {
                             name: "ShipCountry",
                             editorType: "combo",
                             editorOptions: {

                                     dataSource: data,
                                     textKey: "Text",
                                    valueKey: "Val"
                              }
                           }
                   ] 
        }

    Please let me know if you need any further assistance with this matter.

Reply Children