Jqx grid not getting resized properly - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: auto, collapse, column, grid, jqxgrid, jqxsplitter, panel, percent, percentage, resize, splitter

This topic contains 4 replies, has 2 voices, and was last updated by Vardhman Jain 9 years, 10 months ago.

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

Author

Jqx grid not getting resized properly Posts

January 19, 2015 at 6:22 am Jqx grid not getting resized properly #65561

Participant

Hi ,

I am using licensed jqxgrid veriosn 3.6 for my application.Here,in my application there are two panels,
1-Left panel for navigation
2-Right panel containing jqxgrid

Now,I have a expand collpase button after clicking which the left panel should collapse and right panel should take the entire screen size.So, along with the right panel ,the jqxgrid should also resize accordingly.However,after doing so,only the header portion is getting resized(specifically #toolbarjqxgrid div is getting resized) ,but the columns are not getting resized accordingly.But ,just as I try to inpect the jqxgrid, the columns now get resized properly.

I have given the width of columns in percentage already.I something other than this I need to do ,to resize the columns automatically.Can anyone please help me in this.

January 19, 2015 at 7:08 am Jqx grid not getting resized properly #65573

Dimitar

Participant

Hello Vardhman Jain,

Here is an example that shows how to implement the behaviour you require for your grid:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CompanyName', type: 'string' },
                    { name: 'ContactName', type: 'string' },
                    { name: 'ContactTitle', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Country', type: 'string' }
                ],
                localdata: data,
                updaterow: function (rowid, rowdata, commit) {
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                height: '100%',
                source: dataAdapter,
                columnsresize: true,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName', width: '20%' },
                    { text: 'Contact Name', datafield: 'ContactName', width: '20%' },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: '20%' },
                    { text: 'City', datafield: 'City', width: '20%' },
                    { text: 'Country', datafield: 'Country', width: '20%' }
                ]
            });

            $("#CompanyName").jqxInput({ height: 23 });
            $("#ContactName").jqxInput({ height: 23 });
            $("#ContactTitle").jqxInput({ height: 23 });
            $("#City").jqxInput({ height: 23 });
            $("#Country").jqxInput({ height: 23 });
            $("#splitter").jqxSplitter({ width: 850, height: 400, panels: [{ min: 150, size: 330, collapsible: false }, { min: 250}] });
            $('#jqxgrid').on('rowselect', function (event) {
                // event arguments.
                var args = event.args;
                // selected row.
                var row = event.args.row;
                // update inputs.
                $("#CompanyName").val(row.CompanyName);
                $("#ContactName").val(row.ContactName);
                $("#ContactTitle").val(row.ContactTitle);
                $("#City").val(row.City);
                $("#Country").val(row.Country);
            });
            $("#Save").jqxButton({ width: 70, height: 23 });
            $("#Save").click(function () {
                var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
                var rowid = $("#jqxgrid").jqxGrid('getrowid', row);
                var data = { CompanyName: $("#CompanyName").val(), ContactName: $("#ContactName").val(), ContactTitle: $("#ContactTitle").val(), City: $("#City").val(), Country: $("#Country").val() };
                $("#jqxgrid").jqxGrid('updaterow', rowid, data);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="splitter">
        <div>
            <div style="border: none;" id='jqxgrid'>
            </div>
        </div>
        <div id="ContentPanel">
            <form id="Form">
            <table style="margin-top: 20px; width: 100%;">
                <tr>
                    <td style="text-align: right;">
                        Company Name:
                    </td>
                    <td style="text-align: left;">
                        <input type="text" id="CompanyName" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">
                        Contact Name:
                    </td>
                    <td style="text-align: left;">
                        <input type="text" id="ContactName" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">
                        Contact Title:
                    </td>
                    <td style="text-align: left;">
                        <input type="text" id="ContactTitle" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">
                        City:
                    </td>
                    <td style="text-align: left;">
                        <input type="text" id="City" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">
                        Country:
                    </td>
                    <td style="text-align: left;">
                        <input type="text" id="Country" />
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td style="padding-left: 35px; text-align: left;">
                        <input value="Save" type="button" id="Save" />
                    </td>
                </tr>
            </table>
            </form>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 20, 2015 at 7:34 am Jqx grid not getting resized properly #65656

Vardhman Jain

Participant

Hi Dimitar,

Thanks for your reply.I tried the code you sent yesterday,but it is not working for me.Later,I found that I am facing this issue because the js files for jqxgrid are not getting reloaded again after resizing the panels ,so the calculated column width remain same as before.

If the jqxgrid is included within iFrame then the resizing of the jqxgrid is happening. But we don’t need to use iFrame in our application.
So is there any way to reload the js files on resizing the page.

January 20, 2015 at 7:40 am Jqx grid not getting resized properly #65658

Dimitar

Participant

Hi Vardhman Jain,

The example I shared does not have an iframe and works perfectly fine on our side. Please make sure you are using the latest version of jQWidgets (3.6.0). If the issue persists, please share how exactly we can reproduce the behaviour with our code (browser, browser version, other relevant information).

Best Regards,
Dimitar

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

January 22, 2015 at 6:07 am Jqx grid not getting resized properly #65812

Vardhman Jain

Participant

Thanks for the reply Dimitar.I finally got the solution for this.Actually,the grid was not getting refreshed automatically,due to which it was taking the new size of screen.So,I just used the refresh function for refreshing the grid and now it is working fine.

Author

Posts

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

You must be logged in to reply to this topic.