0

here is the SimpleLocalGridWithColumnChooser: [http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithColumnChooser5.htm] Its uses jqgrid, jq-UI and multiselector plugins. i want to convert the entire grid as in the above link into responsive one. Here is the source code of it http://pastebin.com/Gps8KLYP

jgillich
  • 71,459
  • 6
  • 57
  • 85
Dinesh Ravi
  • 1,209
  • 1
  • 17
  • 35
  • Welcome to stackoverflow! We can help you more if you show us what you tried instead of making it look like homework for us. – GiveMeAllYourCats Jun 14 '14 at 12:52
  • Ok Thaks for the info. I will – Dinesh Ravi Jun 16 '14 at 04:45
  • Could you specify more clear what you need? The description "i want to convert it into responsive one" is not clear enough. – Oleg Jun 16 '14 at 08:45
  • @Oleg: The Grid provided in the link is not responsive. I just want to make it into responsive one so that i can make it visible in smart phone too. Here is the link [http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithColumnChooser5.htm] and its source code http://pastebin.com/Gps8KLYP . – Dinesh Ravi Jun 16 '14 at 10:18
  • @DineshRavi: Sorry, but I still don't understand how you define "responsive grid" and what the problem exactly you have. – Oleg Jun 16 '14 at 10:51
  • @Oleg: The grid should resize itself according to the browser window size – Dinesh Ravi Jun 16 '14 at 10:57
  • you can bind `resize` event to the window and use `setGridWidth` inside of the event handle. See [here](http://stackoverflow.com/a/1633086/315935) an example. The full solution could depends on web browsers which you need to support and from whether you need change the grid size on changing of size of the web browser or on zooming of the window too. In general `resize` event on window and `setGridWidth` method will be the key of your solution. – Oleg Jun 16 '14 at 11:06

1 Answers1

0

Put your jqgrid in a div: 

<div id ="gridDiv">
    <table id="list"></table>
    <div id="pager" style="text-align:center;"></div>
</div>

Then add follwing JS:

$(window).bind('resize', function() {
    $('.ui-jqdialog').center();
    $("#list").setGridWidth($('#gridDiv').width(), true);
    $("#pager").setGridWidth($('#gridDiv').width(), true);
});
Ibrahim Khan
  • 20,616
  • 7
  • 42
  • 55
  • I tried your solution. Its still not responsive. i don't know where exactly i should place the js. Here is the source code of it http://pastebin.com/Gps8KLYP. Can you please just place it exactly where to come. – Dinesh Ravi Jun 16 '14 at 04:50