jQWidgets Forums

Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid

This topic contains 7 replies, has 2 voices, and was last updated by devildant 7 years, 6 months ago.

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

Author

jqxGrid forceFit table Posts

November 14, 2017 at 10:16 pm jqxGrid forceFit table #97322

Participant

Hello,

i recently discovered jqxgrid, and i would like to use it to replace a jqgrid table, and, there is an option in jqgrid that allows to always have a table without horizontal scrollbar.
at each column resize the others are resize automatically so that the sum of the columns is at 100%.
this options is called: forceFit
is there an equivalent in jqxgrid? or possibly a trick to have the same behavior.

cordially

November 16, 2017 at 1:00 pm jqxGrid forceFit table #97382

Hristo

Participant

Hello devildant,

I would like to suggest you look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm?light
Please, clarify your requirements if the above is not what you want

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

November 16, 2017 at 3:15 pm jqxGrid forceFit table #97386

devildant

Participant

Hello Hristo,

it’s not exactly that.
I will try to explain better than that.
I put below the doc of the force fit option of jqgrid, I think it will be more meaningful than my explanations.

forcefit : if a column's width is changed, the adjacent column (to the right) will resize so that the overall grid width is maintained (e.g., reducing the width of column 2 by 30px will increase the size of column 3 by 30px). In this case there is no horizontal scrollbar.

November 17, 2017 at 1:01 pm jqxGrid forceFit table #97407

Hristo

Participant

Hello devildant,

I think I got it.
You could use the mentioned before example (“Fluid Size” demo) and implement the “columnsresize” option to the Grid.
Only you should create all columns with a fixed size (or in percentages) of the columns except one. That column should be without “width” member – in that way it will be calculated automatically.
Please, take a look at this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxGrid Fluid Size Example. The width and height of the Grid in this demo are in Percentages.</title>
    <meta name="description" content="Responsive Grid Example. In this example, the Grid is with fluid size" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
        <script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 3px;
            box-sizing: border-box;
            margin: 0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date'},
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#grid").jqxGrid(
            {
                width: '100%',
                height: '100%',
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                columnsresize: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox',  datafield: 'name', width: '20%' },
                  {
                      text: 'Product', datafield: 'productname', width: '35%'
                  },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: '30%', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', cellsalign: 'right' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="grid">
    </div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

November 17, 2017 at 2:44 pm jqxGrid forceFit table #97409

devildant

Participant

Hello,

Thank you that’s it, but we can show the horizontal scroll bar if we increase too much the other columns.
I will create a jquery plugin, so that the columns is resized automatically to avoid horizontal overflow.

just one question, how change resizable option for one column dynamically ?

i read the documentation and i see that :
Sets a property of a column.Possible property names: ‘text’, ‘hidden’, ‘hideable’, ‘renderer’, ‘cellsrenderer’, ‘align’, ‘cellsalign’, ‘cellsformat’, ‘pinned’, ‘contenttype’, ‘resizable’, ‘filterable’, ‘editable’, ‘cellclassname’, ‘classname’, ‘width’, ‘minwidth’, ‘maxwidth’

Parameter Type
dataField String
propertyName String
propertyValue ObjectReturn Value
None
Code example

Invoke the setcolumnproperty method.

// @param String. Column data field.
// @param String. Property Name.
// @param Object. Property Value.
$(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘firstname’, ‘width’, 100);

but when i use (see the next code) the function setcolumnproperty with resizable to false, the column show resizable one cursor : col-resize
$("#grid").jqxGrid('setcolumnproperty', datafield, 'resizable', false);

November 17, 2017 at 2:55 pm jqxGrid forceFit table #97410

devildant

Participant

example image

November 20, 2017 at 11:51 am jqxGrid forceFit table #97453

Hristo

Participant

Hello devildant,

I hope you already found the solution on this in that forum topic:
https://www.jqwidgets.com/community/topic/bug-column-resize-and-scrollbar/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

November 24, 2017 at 1:10 am jqxGrid forceFit table #97521

devildant

Participant

hello,

yes it’s ok, thx.

best regards

Author

Posts

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

You must be logged in to reply to this topic.