Jqgrid - Table not displaying responsive behavior

Question

Hi I Have the following code which displays the table using jqgrid. But, i noticed that none of the jqGrid is being responsive.

How can i make existing jqGrid responsive for tablet and smart phones

UPUDATE

I have updated my code with the following

 $(window).on("resize", function () {
    var newWidth = $("#loanGrid").closest(".ui-jqgrid").parent().width();
   $("#loanGrid").jqGrid("setGridWidth", newWidth, true);
});

The respomnsiveness works but not completely.

Here is the code below and fiddle here HTML

<div class="container-fluid">
   <div class="row">
      <div class="col-md-11">
         <h3 class="subheader"> Sample Info </h4>
         <div class="redmond">
            <table id="output"></table>
         </div>
     </div>
  </div>     
</div>

jqGrid JavaScript

$("#output").jqGrid({
    url: jsonData,
    mtype: "GET",
    datatype: "json",
    /*  postData: {
          json: JSON.stringify(data)
      },
      */
    colModel: [
      /**    { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
      {
        name: 'Symbol',
        label: 'Symbol',
        align: 'left',
        width: 65
      }, {
        name: 'Description',
        label: 'Description',
        align: 'left',
        width: 165
      }, {
        name: 'ShareQuantity',
        label: 'ShareQuantity',
        align: 'right',
        width: "85",
        formatter: 'currency',
        formatoptions: {
          prefix: " ",
          suffix: " "
        }
      }, {
        name: 'SharePrice',
        label: 'Share Price',
        align: 'right',
        width: 100,
        template: "number",
        formatoptions: {
          prefix: " $",
          decimalPlaces: 4
        }
      },
      /*{ label: 'Value1', 
                  name: 'Value1', 
                  width: 80, 
                  sorttype: 'number', 
                  formatter: 'number',
                  align: 'right'
              }, */
      {
        name: 'TotalValue',
        label: 'Total Value',
        width: 160,
        sorttype: 'number',
        align: "right",
        formatter: 'currency',
        formatoptions: {
          prefix: " $",
          suffix: " "
        }
      }, {
        name: 'LTVRatio',
        label: 'LTV Ratio',
        width: 70,
        sorttype: 'number',
        align: "right",
        formatter: 'percentage',
        formatoptions: {
          prefix: " ",
          suffix: " "
        }
      }, {
        name: 'LTVCategory',
        label: 'LTV Category',
        width: 120,
        width: 165
      },

      {
        name: 'MaxLoanAmt',
        label: 'MaxLoanAmount',
        width: 165,
        sorttype: 'number',
        align: "right",
        formatter: 'currency',
        formatoptions: {
          prefix: " $",
          suffix: " "
        }
      }

    ],
    additionalProperties: ["Num1"],
    /*beforeProcessing: function (data) {
        var item, i, n = data.length;
        for (i = 0; i < n; i++) {
            item = data[i];
            item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
            item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
            item.Value = parseFloat($.trim(item.Value).replace(",", ""));
            item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
            item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
        }
    }, */
    iconSet: "fontAwesome",
    loadonce: true,
    rownumbers: true,
    cmTemplate: {
      autoResizable: true,
      editable: true
    },
    autoResizing: {
      compact: true
    },
    forceClientSorting: true,
    sortname: "Symbol",
    footerrow: true,
    caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",


    loadComplete: function() {
      var $self = $(this),
        sum = $self.jqGrid("getCol", "Price", false, "sum"),
        sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
      //ltvratio =  $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
      $self.jqGrid("footerData", "set", {
        LTVCategory: "Max Approved Loan Amount:",
        Price: sum,
        MaxLoanAmt: sum1
      });
    }
  });

  //jQuery("#loanGrid").jqGrid('filterToolbar', { stringResult: true,  searchOnEnter: false, defaultSearch: "cn" });
});

You need include the code, which resize the grid (something like `$(window).bind("resize", ...)`). See http://jsfiddle.net/OlegKi/andm1299/45/ or http://jsfiddle.net/OlegKi/andm1299/46/ and [the answer](http://stackoverflow.com/a/35505598/315935), [this one](http://stackoverflow.com/a/34226305/315935), [this one](http://stackoverflow.com/a/25036623/315935) and some other — Oleg, May 13 '16 at 22:21
@Oleg- Thank you . I added the following code as per example and it is now responsive, but not completely. The responsiveness breaks down for example after the screen size reached 778px. How can I make it work? what ami missing? I followed your examplehttp://jsfiddle.net/ejpn9/4/ and this is my fiddle https://jsfiddle.net/dev2020/w7pxts0z/3/ — user244394, May 16 '16 at 15:36
Why you post all time the demos, which are not working? You can just modify my demos and include your code and data to have working demos. If you need to load the data from `url` then you can use [Echo](http://doc.jsfiddle.net/use/echo.html#json) service of jsfiddle: you need just use `url: '/echo/json/'` and send JSON data as `json` parameter. In case of jqGrid it means the usage of `url: '/echo/json/', mtype: "POST", datatype: "json", postData: { json: JSON.stringify(jsonData) }`. See https://jsfiddle.net/OlegKi/w7pxts0z/5/ What exactly you want to fix? — Oleg, May 16 '16 at 16:02
You should describe **which responsive behavior** you need to implement on resizing. One can for example resize all columns, one can resize one specific column or one can hide some columns if the grid size (the size of outer container) will be less then some value. You can for example add `classes: "hidden-xs", labelClasses: "hidden-xs"` in some columns to hide the column on width<768px : https://jsfiddle.net/OlegKi/w7pxts0z/6/ See [here](http://getbootstrap.com/css/#responsive-utilities-classes) other classes which you can use — Oleg, May 16 '16 at 16:45
If you don't want to hide some columns then I don't understand the problem which you have. You just wrote "The respomnsiveness works but not completely." You should specify exactly what you need to implement and what is not working. — Oleg, May 16 '16 at 21:01

score 1 · Answer 1 · answered May 16 '16 at 17:07

1

You can use Bootstrap classes .visible-* or hidden-* to hide/show some elements on the page depend on the window resolution (see the documentation). The properties classes, labelClasses or colModel can be used in free jqGrid (starting with version 4.8, see here and here) to assign the classes to the column. For example the demo https://jsfiddle.net/OlegKi/w7pxts0z/7/ uses

classes: "hidden-xs hidden-sm", labelClasses: "hidden-xs hidden-sm"

in LTVCategory column and the properties

classes: "hidden-xs", labelClasses: "hidden-xs"

in ShareQuantity and SharePrice columns. As the result the column LTVCategory will be hidden on "extra small devices" (width<768px) and "small devices" (width<992px, but width>=768px).

answered May 16 '16 at 17:07

Oleg

220,925
34
403
798

Thank u much as always you are very detailed and descriptive . I was able to make it responsive for most part even after following ur example word for word.., the responsive part seemed to not work forbelow 700 px. But the same code work perfectly in JSFIDDLE https://jsfiddle.net/dev2020/w7pxts0z/18/ but not on my machine.. Also , si there a way to pass json data "Name" to caption. example caption: "Collateral Value Valuation as of: " + Name+ "", – user244394 May 19 '16 at 19:15
@user244394: You are welcome! Why you post always non-working jsfiddle demos? The last one have syntax error: missing comma at the end of the line 93 after `labelClasses: "hidden-sm"` before `template: "number",`. The fixed one is https://jsfiddle.net/OlegKi/w7pxts0z/19/. To add `Name` you can use `jsonData.Name`: https://jsfiddle.net/OlegKi/w7pxts0z/20/. You can change `caption` dynamically using `setCaption` method alternatively. – Oleg May 19 '16 at 19:35
I just posted working version of my code, I am using live web services to populate the table in real life vs the fiddle canned data. Thanks to you its working except 2 things , inside caption when i pass jsonData.clientId i am getting undefined and for percentage not showing % formatter: 'percentage', https://jsfiddle.net/dev2020/w7pxts0z/34/ formatoptions: { prefix: " ", suffix: " " } – user244394 May 19 '16 at 20:46
@user244394: `jsonData` has no `borrower` property. You can use for example `jsonData[0].borrower` instead of `jsonData.borrower`, but I'm not sure that it's what you want to display. There are **no** predefined `formatter: 'percentage'`. You want probably use `formatter: 'currency', formatoptions: { suffix: " %" }`? See ttps://jsfiddle.net/OlegKi/w7pxts0z/35/ – Oleg May 19 '16 at 20:54
@user244394: The question is still opened. Is your initial problem (responsive behavior of free jqGrid) is solved now? – Oleg May 24 '16 at 06:18

Jqgrid - Table not displaying responsive behavior

1 Answers1