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
15
Row dropdown is causing data to shift in grid
posted

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.