how to make jqgrid responsive on hidden of left menu panel in bootstrap

Question

I want to make jqgrid responsive with bootstrap, but how to resize jqgrid when left menu panel is hidden because when left menu is hidden on button click, window.resize function is not getting called only when we change browser size resize function is called .For reference please visit this site Jqrid demo

In this example if we hide left menu jqgrid will simply move to left instead of covering whole window screen and if you check datatables example it will move to left and occupy whole area datatables

Button in reference http url is next to text search for something

My example

html code

Left panel hide when click on anchor tag

<!-- Left panel code start to hide unhide left panel-->
<div class="navbar-header">
     <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
</div>

<!-- Left panel code end to hide unhide left panel-->

<!-- Left Panel Start --> 
<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
            <li>
                <a href="index-2.html"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">
                    <li><a href="index-2.html">Dashboard v.1</a></li>
                    <li><a href="dashboard_2.html">Dashboard v.2</a></li>
                    <li><a href="dashboard_3.html">Dashboard v.3</a></li>
                    <li><a href="dashboard_4_1.html">Dashboard v.4</a></li>
                    <li><a href="dashboard_5.html">Dashboard v.5 <span class="label label-primary pull-right">NEW</span></a></li>
                </ul>
            </li>
        </ul>
   </div>
</nav>
<!-- Left Panel End-- > 

<!-- Jqgrid div -->
<div class="container-fluid">
    <table id="table_list_1"></table>
</div>

Java Script

<script>
    $(document).ready(function () {

        // Examle data for jqGrid
        var mydata = [
            { "Id": "1", IsActive:"N", CategoryName: "Name 1", "ComboDuration": "83123a" },
            { "Id": "2", IsActive:"N", CategoryName: "Name 3", "ComboDuration": "83432a" },
            { "Id": "3", IsActive:"N", CategoryName: "Name 2", "ComboDuration": "83566a" }
        ];

        // Configuration for jqGrid Example 1
        $grid = $("#table_list_1");
        $grid.jqGrid({
            data: mydata,
            datatype: "local",
            autowidth: true,
            rowList: [10, 20, 30],
            colNames: ["", "Active", "Name", "Duration"],
            colModel: [
                { name: "act", template: "actions" },
                { name: "IsActive", align: "center", sortable: false},
                { name: "CategoryName", sortable: false },
                { name: "ComboDuration", align: "center", sortable: false,
                    classes: "hidden-xs", labelClasses: "hidden-xs" }       
            ],
            autoResizing: { compact: true },
            cmTemplate: { editable: true, autoResizable: true },
                iconSet: "fontAwesome",
            jsonReader: {
                id: "Id",
                repeatitems: false
            },
            autowidth: true,
            rownumbers: true,
            sortname: "Id",
            caption: "Categories",
            viewrecords: true
        }).jqGrid("filterToolbar");

        $(window).bind("resize", function () {
            $grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
        }).triggerHandler("resize");
});

jquery method called on left menu hide/unhide

   $('.navbar-minimalize').click(function () {

    // how to resize grid from here below code do not resize jqgrid
$("#table_list_1").jqGrid("setGridWidth", $("#table_list_1").closest(".container-fluid").width());
$("#table_list_1").triggerHandler('resize')
    $("body").toggleClass("mini-navbar");
    SmoothlyMenu();

});
</script>

left menu is hidden on which button click ? can you override/extend that button click ? — Frebin Francis, Jan 05 '16 at 13:22
@FrebinFrancis it is next to text 'search for something' on upper left corner — pise, Jan 05 '16 at 13:24
then you try to put one id for that button and extend that button click event — Frebin Francis, Jan 05 '16 at 13:25
@FrebinFrancis thank you for the help I will try it out and post, but one question how this things are handled in datatables why not the same thing in jqgrid. — pise, Jan 05 '16 at 13:26
if i am right jquery datatable has support for responsiveness in their latest updates, but jqgrid doesn't support this as of now. — Frebin Francis, Jan 05 '16 at 13:28
@FrebinFrancis Yes datatables have support to responsiveness but why we have to handle jqgrid responsive manually is there is something where jqgrid can handle it by default. — pise, Jan 05 '16 at 13:30
No, i used most of the versions of jqgrid in my projects including the latest version, they don't have supported this feature till now. — Frebin Francis, Jan 05 '16 at 13:32
@pise: Could you described more detailed how you use jqGrid and what you need. There are many different definition of "responsive" element. Even bootstrap allows you different variations. In general you need just call `setGridWidth` on some event, which it important for you: hiding some element on the page or resize of the window. Look [the answer](http://stackoverflow.com/a/34226305/315935) with [the demo](http://jsfiddle.net/OlegKi/andm1299/19/) which uses Bootstrap class `"hidden-xs"` do define that the column should be hidden on small grid. — Oleg, Jan 05 '16 at 13:40
@Oleg Your demo is working perfectly fine excepted for column text are not getting wrap if pull expand html code to right. How this is happening I copied your window.resize in my example and even that is getting resize when I drag code part to left and right jqgrid resize expect columns text are not getting wrap. Can you please how to wrap text. My [demo](http://jsfiddle.net/yNw3C/12486/) — pise, Jan 05 '16 at 13:57

score 0 · Accepted Answer · edited May 23 '17 at 11:52

0

There are many different definition of "responsive" element. Even bootstrap allows you different variations. In general you need just call setGridWidth on some event, which it important for you: hiding some element on the page or resize of the window. Look the answer with the demo which uses Bootstrap class "hidden-xs" do define that the column should be hidden on small grid.

To make wrapping of column headers you need to add the CSS rule white-space: pre-wrap; on .ui-th-column>div, described in the answer. If you need to add wrapping of the text inside of the grid body then you can add the same rule on .ui-jqgrid-btable .jqgrow>td too:

.ui-th-column>div,
.ui-jqgrid-btable .jqgrow>td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    vertical-align: middle;
}

See the modified demo http://jsfiddle.net/OlegKi/andm1299/26/

edited May 23 '17 at 11:52

Community

1
1

answered Jan 05 '16 at 17:45

Oleg

220,925
34
403
798

when I click on button to hide left panel jqgrid do not resize. Please see my code added – pise Jan 09 '16 at 09:05
@pise: Sorry, but I don't understand which "left panel" you mean. You should post the demo which reproduce the problem with exact step by step description how to reproduce the problem with the demo. You can modify my demo http://jsfiddle.net/OlegKi/andm1299/26/ for example, save it and post me the link of the new demo. If you want to support some actions, which should follow resizing of the grid you need just execute `$(window).triggerHandler("resize");`. – Oleg Jan 09 '16 at 09:14
Please see left panel code to hide/unhide left panel, on click anchor tag left panel hide/unhide and jqgrid should resize – pise Jan 09 '16 at 09:24
on click of button (anchor tag) `$('.navbar-minimalize').click(function ())` is called is there any way from here we can call window.resize function – pise Jan 09 '16 at 10:13
The left part of the demo is **not** a part of the frame which displays jqGrid results. Open http://jsfiddle.net/OlegKi/andm1299/26/embedded/result/ . It's **the results of the JavaScript code**, which creates jqGrid. You can add some more components on HTML page (near `
`) and extend JavaSript code. – Oleg Jan 09 '16 at 10:41

Gagankumar Gullipalli · Answer 2 · 2020-07-28T14:41:04.520

0

This Css done the job for me. May be useful for someone

.ui-jqgrid,
.ui-jqgrid-view,
.ui-jqgrid-hdiv,
.ui-jqgrid-bdiv,
.ui-jqgrid-pager
{
width: 100% !important;
}

edited Jul 28 '20 at 14:41

answered Jul 27 '20 at 16:44

Gagankumar Gullipalli

1
3

score 0 · Answer 3 · edited Aug 16 '23 at 18:30

0

Good noon! has a hyperlinc in *.cshtml-file

<div class="navbar-header">
  <a class="navbar-minimalize minimalize-styl-2 btn btn-primary" href="#">
    <i class="fa fa-bars"></I>
  </a>
</div>

key word - "navbar-minimalize".

edited Aug 16 '23 at 18:30

Tyler2P

2,324
26
22
31

answered Aug 15 '23 at 14:11

Владимир

1

in Js file writing $('.navbar-minimalize').on('click', function (event) { event.preventDefault(); $("body").toggleClass("mini-navbar"); SmoothlyMenu(); }); – Владимир Aug 15 '23 at 14:13
function SmoothlyMenu() { if (!$('body').hasClass('mini-navbar') || $('body').hasClass('body-small')) { // Hide menu in order to smoothly turn on when maximize menu $('#side-menu').hide(); // For smoothly turn on menu setTimeout( function () { $('#side-menu').fadeIn(400); }, 200); } – Владимир Aug 15 '23 at 14:13
else if ($('body').hasClass('fixed-sidebar')) { $('#side-menu').hide(); setTimeout( function () { $('#side-menu').fadeIn(400); }, 100); } else { // Remove all inline style from jquery fadeIn function to reset menu state $('#side-menu').removeAttr('style'); } } – Владимир Aug 15 '23 at 14:14

how to make jqgrid responsive on hidden of left menu panel in bootstrap

3 Answers3