0

Hi I have jqgrid which on resize trigger a function so that it resizes according to window size. This function fine but I need that same function to work when the jqgrid loads so I am calling the function like this

$(window).bind("load", function() {
     $('#' + grid_id).setGridWidth(width, true); //Back to original width
    $('#' + grid_id).setGridWidth($('#' + div_id).width(), true); //Resized to new width as per window
    });

But it is not working.

The same function is called when the window is resized like this

$(window).bind('resize', function () {
            $('#' + grid_id).setGridWidth(width, true); //Back to original width
            $('#' + grid_id).setGridWidth($('#' + div_id).width(), true); //Resized to new width as per window
        }).trigger('resize');

And it works fine. What is wrong am I doing here.

shv22
  • 680
  • 5
  • 28
  • Can You post the output of a developer console? https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console https://developers.google.com/web/tools/chrome-devtools/console/ Try this: http://stackoverflow.com/a/9828919/665159 – Asmodiel Apr 13 '17 at 11:58
  • As you're using window.load, why not use `$(document).ready(function() {`. – freedomn-m Apr 13 '17 at 11:59
  • You might also prefer to use one of the grid events, eg `loadComplete` http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events – freedomn-m Apr 13 '17 at 12:00
  • actually, this jqgrid is load from somewhere else in another files so I cant use that – shv22 Apr 13 '17 at 12:01

2 Answers2

1

You can call setGridWidth method of jqGrid only after the grid is created.

I suppose that you need to do is probably adding the option autowidth: true.

If you want to implement your own custom resizing then you can do it inside of jqGridAfterLoadComplete event. The code could be about the following:

var $grid = $("#grid"),
    resizeGrid = function () {
        var newWidth = $(this).closest(".ui-jqgrid").parent().width();
        $(this).jqGrid("setGridWidth", newWidth, true);
    };

$(window).on("resize", function() {
    resizeGrid.call($grid);
});

$grid.on("jqGridAfterLoadComplete", resizeGrid)
.jqGrid({
    // all jqGrid options
});

See https://jsfiddle.net/OlegKi/ejpn9/153/

Oleg
  • 220,925
  • 34
  • 403
  • 798
0

I allways used "DOMContentLoaded" event and It worked like a charm.

Please Try:

 element.addEventListener("DOMContentLoaded", function(event) {
    //Element loaded
  });
4b0
  • 21,981
  • 30
  • 95
  • 142
Tomasz Radwaski
  • 202
  • 2
  • 10