Webix Grid RTL Support: Enabling Right-to-Left Scrolling in Grid View

1

I have implemented the RTL (Right-to-Left) view by overriding the default layout from RTL to LTR. However, the grid view scroll is not functioning properly in RTL mode — it remains static instead of moving as expected. In contrast, the scrolling works perfectly in LTR mode. It seems the grid scroll behavior isn’t adapting correctly to the RTL configuration, and additional adjustments or event handling may be required to fully support RTL scrolling.

function convertWebixColumnsToRTL() {
    const isRightToLeft = localStorage.getItem('isRightToLeft') === 'true';
    if (!isRightToLeft) return;
 
    setTimeout(() => {
        const datatables = document.querySelectorAll(".webix_dtable");
        const webix_layout_lines = document.querySelectorAll(".webix_view");
        const processMargin = (col) => {
                    const style = col.style;
                    const dir = style.marginLeft ? 'marginLeft' : (style.marginRight ? 'marginRight' : null);
                    if (dir) {
                        if(dir === 'marginLeft'){
                            const opposite =  'marginRight';
                            style[opposite] = style[dir];
                            style[dir] = "";
                        }
                    }
                };
        webix_layout_lines.forEach(processMargin);
        datatables.forEach(datatableElement => {
            const parent = datatableElement.closest("[view_id]");
            if (!parent) return;
 
            const viewId = parent.getAttribute("view_id");
            const datatable = webix.$$(viewId);
 
            if (!datatable || (datatable.name !== "datatable" && datatable.name !== "treetable")) return;
 
            setTimeout(() => {
                const gridView = datatable.$view;
 
                // Common function to flip style direction
                const processColumn = (col) => {
                    const style = col.style;
                    const dir = style.left ? 'left' : (style.right ? 'right' : null);
                    if (dir) {
                        if(dir === 'left'){
                            const opposite =  'right';
                            style[opposite] = style[dir];
                            style[dir] = "";
                        }
                    }
                };
               
                // Get all needed elements
                const editorCells = gridView.querySelectorAll(".webix_dt_editor");
 
                // Process all if not just editor mode
                const headerColumns = gridView.querySelectorAll(".webix_hcolumn");
                const dataColumns = gridView.querySelectorAll(".webix_column");
                const dataCellColumns = gridView.querySelectorAll(".webix_hcell");
                    [...headerColumns, ...dataColumns, ...dataCellColumns, ...editorCells].forEach(processColumn);
            });
        });
    }, 100);
}
2

Hello @Ajith ,

To set the scroll behavior to the RTL mode, you’ll need to calculate the offset for the scrollbar:

const scrollBarX = this.$view.querySelector(".webix_vscroll_x");
const gridBody = this.$view.querySelector(".webix_ss_center");
const scrollOffset = scrollBarX.scrollWidth - gridBody.clientWidth;

After calculating the correct offset, you can use the scrollTo method to scroll the grid to the desired position.

Here is the example with Webix UI: Code Snippet

And here is the example using Webix Grid: Code Snippet