Obligatory "but it works fine on my computer."
I have a grid with the last column being a dropdown from where you can select an option, and then OK. A coworker has discovered that when the area is clicked to reveal the dropdown, it resizes, causing all the data in the grid to shift to the left. Try as I might, I cannot replicate the issue, nor can I find any other problem relating to it, so that brings me here.
I received a video of the phenomenon, but here it is in gif form.
And here is the code used for this table.
let columns = [ { headerText: "id", key: "id", dataType: "string", hidden: true }, { headerText: "No.", key: "項目No", dataType: "int", width: "60px" }, { headerText: "名前", key: "name", dataType: "string", width: "240px" }, { headerText: "<%=Session["shop_label"]%>", key: "store", dataType: "string", width: "240px" }, { headerText: "<%=Session["dept_label"]%>", key: "department", dataType: "string", width: "240px" }, { headerText: "権限", key: "roleId", dataType: "string", width: "240px", formatter: formatId }, ]; $("#grdMain").igGrid({ autoGenerateColumns: false, renderCheckboxes: true, width: "100%", height: "500px", rowEditable: false, primaryKey: "id", autoCommit: false, columns: columns, rowsRendered: function (evt, ui) { }, features: [ { name: "Updating", enableAddRow: false, editMode: "row", enableDeleteRow: false, columnSettings: [ { columnKey: "id", readOnly: true }, { columnKey: "項目No", readOnly: true, }, { columnKey: "name", readOnly: true }, { columnKey: "store", readOnly: true }, { columnKey: "department", readOnly: true }, { columnKey: "roleId", editorType: 'combo', required: false, editorOptions: { mode: "dropdown", dataSource: roles, textKey: "roleName", valueKey: "roleId" } } ], rowEditDialogOptions: { showReadonlyEditors: false }, editCellStarting: function (evt, ui) { }, }, { name: "Sorting", columnSettings: [ { columnKey: "項目No", allowSorting: true, currentSortDirection: "ascending" }, { columnKey: "name", allowSorting: true, }, { columnKey: "store", allowSorting: true, }, { columnKey: "department", allowSorting: true, }, { columnKey: "roleId", allowSorting: true, firstSortDirection: "descending", }, ] } ] });
I'd like some insight for why this phenomenon happens and how I can fix it.
Hello,
Thank you for posting into our community!
I have been looking into your question and in an effort to reproduce the described behavior I have prepared a small sample with a similar configuration as the provided code snippet. However, I have noticed that a custom formatter function is used for the column with the igCombo editor and since I was not sure what is the structure of the igGrid data and the data for the combo editor on your side, I have used some sample data and a simplified formatter function. On my side, I was not able to reproduce this behavior and the igCombo editor does not resize.
Having this in mind, in order to be able to assist you further, it would be extremely helpful if you could provide me with a sample populated with some sample data for testing. Also, if possible, it would be great if you could try to modify the provided by me sample, so it reproduces the issue.
Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach it in this forum thread.
Having a sample, which I can debug on my side, will be highly appreciated and extremely helpful in providing you with a solution as soon as possible.
Additionally, please keep in mind the following:
Here could be found my sample for your reference. Please test it on your side and let me know how it behaves.
Thank you for your cooperation. Looking forward to your reply.
Sincerely, Riva Ivanova Entry Level Software Developer
Hello, and thank you for the response.
As requested, this is the formatter function.
const formatId = (val) => { if (val) { for (let i = 0; i < roles.length; i++) { if (roles[i].roleId == val) { return roles[i].roleName; } } } else { return "設定なし" } }
The formatter function takes a list of employees and then compares it to a list of roles to see who belongs to which role, which is then displayed in the dropdown. Here is the role list:
[ {roleId: 0, roleName: '設定なし'}, {roleId: 1, roleName: '社長'}, {roleId: 4, roleName: '部長'}, ]
And here is a sample of employees:
[ { department: "経営戦略", id: 5556, name: "江", roleId: 1, store: "鹿児島本店", 項目No: 1, }, { department: "美容開発", id: 5558, name: "吉", roleId: 4, store: "鹿児島本店", 項目No: 2 }, { department: "美容開発", id: 127760, name: "ジョン", store: "鹿児島本店", 項目No: 3, } ]
I'll try to modify the grid based on your suggestions and will update if there are any changes.