Databases
StackOverflow2013
Postsdbo
POjqGrid Results over flow the grid and "Please, Select Row" message
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjqGrid Results over flow the grid and "Please, Select Row" message
    text
    copied!<p>(I am relatively new to web programming so it may be an easily overlooked issue)</p> <p>I am using ASP.NET MVC4 to build an application which contains a razor view displaying a jqGrid. It is dynamically getting the column meta data using ajax, and the data all seems to return fine. When I run the app and the view is displayed, the data is shown but both the headers and body of the grid over flow the grid (see image).</p> <p><img src="https://i.stack.imgur.com/NfIa0.png" alt="Rendered Grid"></p> <p>I did notice that there appears to be a warning beneath the data stating "Please, select row". My suspicion is the issue is either CSS or related to the warning. I have tried changing various properties in the ui.jqgrid.css, site.css, etc to no avail.</p> <p>Here is the rendered html:</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;Feed List Preview&lt;/title&gt; &lt;link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="/Content/site.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="/Scripts/jquery-1.8.2.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="/Content/themes/redmond/jquery-ui-1.9.0.custom.min.css" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="/Content/jquery.jqGrid/ui.jqgrid.css" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="/Scripts/jquery.jqGrid.src.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var jqDataUrl = "LoadData"; var jqMetaUrl = "GetColumnData"; $(document).ready(function () { $.ajax( { type: "POST", url: jqMetaUrl, data: "", dataType: "json", success: function (result) { col_names = result.colNames; col_model = result.colModel; $("#jqTable").jqGrid({ url: jqDataUrl, datatype: "json", mtype: "POST", //Specify the column names colNames: col_names, //Configure the columns colModel: col_model, //Grid total width and height width: 800, shrinkToFit:false, height: 400, //Paging toppager: true, pager: $('#jqTablePager'), rowNum: 25, rowList: [25, 50, 100], viewrecords: true, //Specify if total number of records is displayed //Formatting altRows: true //Default Sorting (ignored) //Grid Caption //caption: "Feed List Preview" }).navGrid("#jqTablePager", { refresh: true, add: false, edit: false, del: false }, {}, //settings for edit {}, //settings for add {}, //settings for delete { sopt: ["cn"] } //search options, Some options can be set on column level ) }, error: function (x, e) { alert("ReadyState: " + x.readyState + "; Status:" + x.status + "; Message:" + e.msg + ";"); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt; &lt;h1&gt; Header &lt;/h1&gt; &lt;/div&gt; &lt;h2&gt;Feed List Preview&lt;/h2&gt; &lt;div&gt; &lt;table id="jqTable" class="scroll"&gt;&lt;/table&gt; &lt;div id="jqTablePager" /&gt; &lt;/div&gt; &lt;script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="/Scripts/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload