jQuery UI Widgets Forums Grid Column Grid Shift

This topic contains 2 replies, has 2 voices, and was last updated by  Yavor Dashev 1 month, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Column Grid Shift #115185

    narue1992
    Participant

    I have a simple grid that allows users to edit the values in each cell.
    For some reason, when the user focuses the last column the grid lines shift left.
    Is this some styling bug or is there a jqxgrid setting I have to apply to force the columns as fixed?
    I am using v7.1.0.

    Thanks

    <div style="width:700px;border:1px solid red;">
       <div id="jqxgrid" style="margin:15px;"></div>
    </div>
    $("#jqxgrid").jqxGrid({
            theme: 'energyblue',
            width: "650",
            selectionmode: 'singlecell',
            editable: true,
            altrows: true,
            source: adapter,
            columns: [
            { text: '', datafield: 'ID', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 50, editable: false },
            {
                text: 'Test',
                datafield: 'Test',
                width: 200,
                columntype: 'textbox',
                cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
                    var rowData = $("#jqxgrid").jqxGrid('getrowdata', row);
                    rowData.Test = newvalue;
                    var commit = $("#jqxgrid").jqxGrid('updaterow', rowData);
                }
            }, {
                    text: 'Result',
                    datafield: 'Result',
                    width: 100,
                    columntype: 'textbox',
                    cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
                        var rowData = $("#jqxgrid").jqxGrid('getrowdata', row);
                        rowData.Result = newvalue;
                        var commit = $("#jqxgrid").jqxGrid('updaterow', rowData);
                    }
            }, {
                    text: 'Other',
                    datafield: 'Other',
                    width: 250,
                    columntype: 'textbox',
                    cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
                        var rowData = $("#jqxgrid").jqxGrid('getrowdata', row);
                        rowData.Other = newvalue;
                        var commit = $("#jqxgrid").jqxGrid('updaterow', rowData);
                    }
            }]
        });
    Column Grid Shift #115186

    narue1992
    Participant

    I was able to fix it by applying a class overwrite.
    Seems weird that I would need to do this so hopefully there is a better solution.

    Thanks

    #jqxgrid .jqx-grid-cell{padding-left:0px !important}
    #jqxgrid .jqx-grid-column-header{padding-left:0px !important}
    Column Grid Shift #115193

    Yavor Dashev
    Participant

    Hi narue1992,

    I have tested the latest version of jQWidgets regarding your issue but it is not present as described by you.
    One thing I have noticed is that you use quite old version of jQWidgets.

    I would suggest you to update to the newest version and this should eliminate the problem.

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.