jQWidgets Forums

Tagged: grid width

This topic contains 4 replies, has 2 voices, and was last updated by vadivelu 11 years, 4 months ago.

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

Author

grid width problem Posts

January 7, 2014 at 9:49 am grid width problem #47373

vadivelu

Participant

Hi,

I am Using “jqwidgets-ver3.1.0”.

I am creating a grouping grid with 100% of width and all the columns are having % of with except the last column rest of the width will set for the last column.

when I view this page on the browser and I start to do group expand and collapse or resize the column then, I can see the space on the right side of the grid. Please advise me how to fix this issue.

Example Code


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to override the built-in rendering of the Groups headers. The Grouping of Product and Ship Date columns is disabled.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            

            // prepare the data
            var data = generatedata(200);

            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };

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

            var toThemeProperty = function (className) {
                return className + " " + className + "-" + theme;
            }

            var groupsrenderer = function (text, group, expanded, data) {
                if (data.groupcolumn.datafield == 'price' || data.groupcolumn.datafield == 'quantity') {
                    var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
                    var text = data.groupcolumn.text + ': ' + number;
                    if (data.subItems.length > 0) {
                        var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, data.subItems);
                    }
                    else {
                        var rows = new Array();
                        var getRows = function (group, rows) {
                            if (group.subGroups.length > 0) {
                                for (var i = 0; i < group.subGroups.length; i++) {
                                    getRows(group.subGroups[i], rows);
                                }
                            }
                            else {
                                for (var i = 0; i < group.subItems.length; i++) {
                                    rows.push(group.subItems[i]);
                                }
                            }
                        }
                        getRows(data, rows);
                        var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, rows);
                    }
                    
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row-details') + '">' + "Total" + ' (' + aggregate.sum + ')' + '</span></div>';
                }
                else {
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + '</span>';
                }
            }

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                source: dataAdapter,
                groupable: true,
				groups: ['firstname'],
                groupsrenderer: groupsrenderer,
                selectionmode: 'singlecell',
				columnsresize: true,
                groups: ['price'],
                columns: [
                  { text: 'First Name', groupable: true, datafield: 'firstname', width: '20%' },
                  { text: 'Last Name', groupable: true, datafield: 'lastname', width: '20%' },
                  { text: 'Product', groupable: false, columntype: 'dropdownlist', datafield: 'productname', width: '15%' },
                  { text: 'Ship Date', groupable: false, datafield: 'date', width: '15%', cellsalign: 'right'},
                  { text: 'Quantity', datafield: 'quantity', width: '15%', cellsalign: 'right'},
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2'}
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="width:100%">
        <div id="jqxgrid"></div>

    </div>
</body>
</html>

Regards
K.Vadivelu

January 7, 2014 at 9:54 am grid width problem #47374

Peter Stoev

Keymaster

Hi Vadivelu,

You need to set the last column’s width, too.

      { text: 'Price', datafield: 'price', cellsalign: 'right', width: '15%', cellsformat: 'c2' }

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 7, 2014 at 10:10 am grid width problem #47375

vadivelu

Participant

Hi Peter Stoev,

Thanks for your quick reply, if i give 15% to the last column then if I resize any of other columns then the last colums is coming towards left side then i can able to see the space on the right side of the grid. I want to fit the last column towards the right side always until the column sizes or exceed the grid width.

Please assist me how to fix this, because it was worked on the “jQWidgets v2.8.0“, now i upgraded to “jqwidgets-ver3.1.0″ it is not working.

Regards
K.Vadivelu

January 7, 2014 at 10:22 am grid width problem #47376

Peter Stoev

Keymaster

Hi Vadivelu,

You cannot fit the last column in the way you wish. The only possible solution is the one I suggested you. If the sum of your column widths is “100%”, there will not be empty space.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 7, 2014 at 10:39 am grid width problem #47378

vadivelu

Participant

Hi Peter Stoev,

Please advise me if i set the 15% of width for the last column and can change the last column width on columnresized method.

$(“#grid”).on(“columnresized”, function (event)
{
$(‘#grid’).jqxGrid(‘setcolumnproperty’, ‘column’, ‘width’, ‘20%’);
});

I am trying this but it is not working. Please advise me.

Regards
K.Vadivelu

Author

Posts

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

You must be logged in to reply to this topic.