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}) }} {{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 } }); });
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.
Hmmmm, I migrated from v12.2 to v17.2 and something broke along the way. My code originally had textKey and valueKey options set but they didn't take effect after the upgrade. Using a bool data type with those options works as expected in v12.2.
I see you suggested that I change the data type to string. So that leads me to assume that the editor rewrite broke the ability to use textKey/valueKey on other data types on v15.2.
In any event, switching the local datatype to string worked.
Thanks,