Change grid size when window resize

[drakiParticipant]

Hello,

I testing a grid, and I have a little problem with automatically resizing. I have a navbar on top of page what always 74 px height. And the grid calculate the 100% height, from top of the browser. I can resolve, when the grid load set the height for the div, but when resize the windows I can’t handle it.
Could you please help me in the solution?

$(document).ready(function () {
    // prepare the data
    var data = new Array();
    var firstNames =
        [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
        ];
    var lastNames =
        [
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
        ];
    var productNames =
        [
            "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
        ];
    var priceValues =
        [
            "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
        ];
    for (var i = 0; i < 100; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["productname"] = productNames[productindex];
        row["price"] = price;
        row["quantity"] = quantity;
        row["total"] = price * quantity;
        data[i] = row;
    }
    var source =
        {
            localdata: data,
            datatype: "array"
        };
    var dataAdapter = new $.jqx.dataAdapter(source, {
        loadComplete: function (data) { },
        loadError: function (xhr, status, error) { }
    });

   /* View browser height, subtract nav_bar piexels and store height_good variable  */
   var response = new $.jqx.response();
   var viewPort = response.viewPort;
   var height = viewPort.height;
   var nav_height = 74;
   var height_good= height - nav_height;

    /* View browser height, when size changing */
    response.resize(function ()
    {
        var viewPort = response.viewPort;
        var height = viewPort.height;
        var height_good =  height - nav_height;
        console.log(height_good);
    })

    $("#grid_c").jqxGrid(
        {
            width: '100%',
            source: dataAdapter,
            height: height_good,
            showfilterrow: true,
            filterable: true,
            columns: [
                { text: 'First Name', datafield: 'firstname', width: 100 },
                { text: 'Last Name', datafield: 'lastname', width: 100 },
                { text: 'Product', datafield: 'productname', width: 180 },
                { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
            ]
        });
});

How can I use the calculated height for the height of grid when the window size is changing?

Regards,
draki

[StanislavParticipant]

Hello draki,

Take a look at this example: Link
The NavBar and the Grid are placed in a splitter.
The NavBar’s hight is a constant of 74px(the splitter content size is set to 74px) and the grid takes up the rest of the splitter.

This way, you won’t need to calculate the hight of the grid on every change.

Best Regards,
Stanislav

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

[drakiParticipant]

Hello Stanislav,

Thank you for your response, the splitters are working fine. But earlier using bootstrap to make my divs responsive. How I see, the splitter is do not cooperating with bootstrap responsive tags. Maybe still have a solution for change the grid size, when the browser resized?

Regards,
draki

[StanislavParticipant]

Hello draki,

Do you mean something like this?
https://www.jqwidgets.com/jquery-widgets-demo/demos/twitter/bootstrap-grid-layout.htm?light

Best Regards,
Stanislav

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

[drakiParticipant]

Hello Stanislav,

Appreciate to your reply, but not really I don’t want to use tabs. I don’t care if the grid cells not responsive.
I would like something this:
https://drive.google.com/file/d/1GLp_ERfy0Zd5UxGjSacHRRvwdSpQPh5T/view?usp=sharing

Now, at the first load everything is okay, because the grid size is viewPort.height – 74 px, and when I resize the windows I’d like to resize the grid again to the new viewport size – 74 px.
And of course I’d like to be fast therefore don’t need to reload the data, only re draw the grid.

Regards,
draki

[Author]

Posts