jQuery UI Widgets Forums Grid Problem with horizontal scrollbar

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 10 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Problem with horizontal scrollbar #31512

    sobhanattar
    Member

    Hi
    FOA: Thanks for such an amazing product
    Second: I searched all the forum for this problem but non have the same problem. I followed your examples for making a grid. but from start I have this problem that

    Horizontal scroll bar don’t appear

    even when number of columns are more than the space (I use 100% for width). The awkward behavior is that sometimes the scroll bars appears but only scroll the header columns(see the image)

    This is my html and javascript

    <div id="company_grid" name="company_grid" style="height: 100%; width: 100%;"></div>

    and this is my Javascript

    //Grid Intialization and adjustments

    grid: function(datafields, columns)
    {
    var source = {
    datatype: "json",
    datafields: datafields,
    url: $('#company_grid_url').val()
    };
    var company_grid = $("#company_grid").jqxGrid({
    source: source,
    theme: 'bootstrap',
    width: '100%',
    height: '100%',
    scrollmode: 'logical',
    rowsheight: 35,
    columnsheight: 35,
    rtl: true,
    altrows: true,
    showdefaultloadelement: false,
    columnsresize: true,
    sortable: true,
    filterable: true,
    columns: columns
    });
    // Actions when the binding is complete
    company_grid.on("bindingcomplete", function (event){
    company_grid.jqxGrid('autoresizecolumns', 'all');// Resize all columns based on cells and columns headers
    });
    }

    Thanks in advance

    Problem with horizontal scrollbar #31525

    Dimitar
    Participant

    Hello sobhanattar,

    We were not able to reproduce the reported issue. Please make sure you are using the latest version of jQWidgets (3.0.3).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Problem with horizontal scrollbar #31526

    sobhanattar
    Member

    Hi,
    I’m using the latest version,
    As this issue is really preventing us from using jqwidgets, please let me know what other information is required so I provide them for you to solve the issue.

    Thanks in advance

    Problem with horizontal scrollbar #31531

    Dimitar
    Participant

    Hi sobhanattar,

    Please provide us with a complete example which we may run directly and test for the reported issue.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Problem with horizontal scrollbar #31532

    sobhanattar
    Member

    Hi
    This is my complete code which is come from one of your own examples. As you see in this image, when the width is 640 the behavior of scroll bar and grid is not as it should. For example the grid show only 5 columns while I have 6 columns. Another thing is that you can’t see no data label until you scroll and then it appears

    here is my complete code

    <!DOCTYPE html>
    <html lang="fa">
    <head>
    <link rel="stylesheet" type="text/css" href="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/styles/jqx.bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/globalization/globalize.culture.fa-IR.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="http://localhost/sarir/s3/application/plugins/jqwidgets/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var source = {
    datatype: "json",
    datafields: [
    { name: 'ShippedDate' },
    { name: 'Freight' },
    { name: 'ShipName' },
    { name: 'ShipAddress'},
    { name: 'ShipCity'},
    { name: 'ShipCountry'}
    ],
    };
    $("#grid").jqxGrid({
    source: source,
    //theme: 'bootstrap',
    width: 640,
    height: 450,
    //scrollmode: 'logical',
    //rowsheight: 35,
    //columnsheight: 35,
    //rtl: true,
    //altrows: true,
    //showdefaultloadelement: false,
    //columnsresize: true,
    //sortable: true,
    //filterable: true,
    columns: [
    { text: 'Ship Name', datafield: 'ShipName', width: 250},
    { text: 'Shipped Date', datafield: 'ShippedDate', width: 250},
    { text: 'Freight', datafield: 'Freight', width: 250},
    { text: 'Ship Address', datafield: 'ShipAddress', width: 50},
    { text: 'Ship City', datafield: 'ShipCity', width: 50},
    { text: 'Ship Country', datafield: 'ShipCountry', width: 50}
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div style="float: left;" id="grid">
    </div>
    </body>
    </html>

    Thanks in advance

    Problem with horizontal scrollbar #31587

    Dimitar
    Participant

    Hello sobhanattar,

    We tested your example, but everything works as expected at our side – the grid shows all 6 columns and the “No data to display” label is shown always in the middle. The version we used for testing is 3.0.3 and the browsers we tested on are Internet Explorer 9 and the latest versions of Google Chrome and Firefox.

    Please make sure you are using version 3.0.3 and that none of the source files is modified in any way.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.