Row dropdown is causing data to shift in grid

Xiong Clayton posted over 1 year ago

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.

600

Offline Riva Ivanova posted over 1 year ago
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:

The “No.” column I set to dataType: “int”, however, this is not a supported dataType. All supported data types could be found here.

A rowEditable option is set, however, the igGrid does not provide such an option. All available options could be found here.

Setting the rowEditDialogOptions option only has effect if the editMode option is set to “dialog”, however, in the provided code snippet it is set to “row”.

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
Cancel
Reply

Cancel

Offline Xiong Clayton posted over 1 year ago in reply to Riva Ivanova

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.

15

Offline Xiong Clayton posted over 1 year ago in reply to Xiong Clayton

An update - as no one else could reproduce the bug, we tried confirming again on that one coworker's computer.

The bug had not occurred again, no matter what we tried. There were no changes at all to the source code.

I know that we never got to the bottom of it, but the grid seems to be working fine and in the meantime we can close this issue.

Thanks for all your advice and efforts.
Cancel
Reply

Cancel
600

Offline Riva Ivanova posted over 1 year ago in reply to Xiong Clayton

Hello,

I am glad that the described behavior is no longer reproducible and that everything works as expected.

Thank you for using Infragistics components.

Regards,
Riva Ivanova
Entry Level Software Developer
Cancel
Reply

Cancel