I have been developing an app to use jQuery's jqGrid plugin, and I thought I had it all wrapped up until I tried to view the grid in IE. In IE, the grid appears with a much larger height in the .ui-jqgrid-view div, but the data itself stays at a smaller size and displays at the bottom of the container div (.ui-jqgrid-view). I need to get the grid to display "properly". I don't care if it is the larger size (that IE displays) or smaller (as in FF)... I just need to have the data fill the grid area. Thanks!
I uploaded a screenshot: here
Grid Code:
$("#list").jqGrid({
url: gDataPath,
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'VId', 'First Name', 'Last Name', 'MId'],
colModel: [
{ name: 'ID1', index: 'ID1', width: 75, align: 'left' },
{ name: 'VID', index: 'VID', width: 75, align: 'left' },
{ name: 'FirstName', index: 'FirstName', width: 225, align: 'left' },
{ name: 'LastName', index: 'LastName', width: 225, align: 'left' },
{ name: 'MIDno', index: 'MIDno', width: 260, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 100,
rowList: [50, 100, 200, 500],
sortname: 'ID1',
sortorder: "desc",
viewrecords: true,
imgpath: 'http://mysite/Content/images',
caption: 'Project Name Data',
ondblClickRow: function(rowid, iRow, iCol) {
var i = jQuery("#list").getRowData(rowid);
window.location = '<%=linkPath %>/'+ i.VisitID;
}
});
Try with <table id="list"></table> as container. I don't think divs is proper container for jqGrid. Then you can wrap the table tag within any div.
Related
I have a Jquery grid which is formed on a html table.
i have added the required properties for the grid including the pager functionality.I have set my page size to 10.
The page up and page down buttons are no visible.
when i looked closely, i found that it is saying Page: 1 out of 1
But in the right corner it again says 1-10 of 257 records.
Here aremy html tags
<table class="table table-bordered" id="tblJQGrid"></table>
<div id="pager"></div>
And here is the code for binding the grid.
$("#tblJQGrid").jqGrid(
{url: "#Url.Action("GetGeographyBreakUpData", "GeoMap")"+ "?Parameters=" + Params + "",
datatype: "json",
//data: { "Parameters": Params },
mtype: 'GET',
cache: false,
colNames: ['Id','GeoGraphy', 'Completed', 'InProgress'],
colModel: [
{ name: 'Id', index: 'Id', width: 20, stype: 'text',hidden:true },
{ name: 'Geography', index: 'Geography', width: 150 },
{ name: 'Completed', index: 'Completed', width: 150 },
{ name: 'InProgress', index: 'InProgress', width: 150 },
],
pager:'#pager',
jsonReader: {cell:""},
rowNum: 10,
sortorder: "desc",
sortname: 'Id',
viewrecords: true,
caption: "Survey Status:Summary",
scrollOffset: 0});
$("#tblJQGrid").jqGrid('navGrid','#pager',{search:true});
Any suggestion on what i am missing or doing wrong?
Try using loadonce: true, forceClientSorting: true option.
When I drag a edit form, the position of the form is not valid.
Always it starts from position (0,0) to the window.
Its position is not relative to mouse cursor position.
How can I fix this?
These are my code.
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
$("#jqGrid").jqGrid({
url: url,
mtype: "GET",
postData: data,
datatype: "jsonp",
colModel: [
{ label: 'd_id', name: 'd_id', width: 15, key: true, hidden: true},
{ label: 'driver', name: 'd_name', width: 30, align:"center", editable: true, editoptions: {size: 40} },
{ label: 'phone', name: 'd_phone', width: 30, align:"center", editable: true, editoptions: {size: 40} },
{ label: '', name: '' }
],
viewrecords: true,
autowidth: true,
height: '100%',
rownumbers: true,
rownumWidth: 25,
rowNum: 20,
editurl: g_base_url + 'driver/edit',
pager: "#jqGridPager",
loadError : function(xhr,st,err) {
},
loadComplete: function () {
},
onCellSelect: function(rowid, iCol, cellcontent, e) {
}
});
and my jqgrid version is 4.8, jquery version is jquery-1.11.2 and jquery-ui version is 1.11.4.
please visit jqgrid demo and click edit button ("+" symbol in the page bar) and drag edit form serveral times. You can find its position always starts at pos (0,0).
demo link is http://www.guriddo.net/demo/guriddojs/edit_add_delete/edit_template/index.html
I want to get all row ids by use of row css class of a jqgrid in a method called in gridcomplete.But it is only returning rows of current page.
I want to get all row ids present in the jqgrid.
Below is my code.
function GetAllCompanyProducts(productData) {
/// <summary>method to load the Proposal grid</summary>
//Load the grid
var tabelWidth = $("#tblCompanyProducts").width();
jQuery("#tblCompanyProducts").jqGrid({
datatype: 'local',
data: productData,
jsonReader: { repeatitems: false },
loadui: "block",
autowidth: true,
mtype: 'get',
rowNum: 30,
rowList: [30, 100, 200],
viewrecords: true,
colNames: ['ProductId', 'ProductName', 'Price'],
colModel: [
{ name: 'ProductId', index: 'ProductId', width: '30%' },
{ name: 'ProductName', index: 'ProductName', width: '30%' },
{ name: 'Price', index: 'Price', width: '30%' }
],
sortname: 'ProductId',
sortorder: 'asc',
caption: "Product List",
width: tabelWidth - 10,
pager: '#divPager',
height: "100%",
hoverrows: true,
onPaging: function () {
$("#tblCompanyProducts").trigger('reloadGrid');
},
});
$("#tblCompanyProducts").jqGrid('setGridParam', { gridComplete: MakeGridRowsDraggable($("#" + this.id)) });
}
function MakeGridRowsDraggable(grid) {
/// <summary></summary>
/// <param name="grid" type=""></param>
//$("#tblCompanyProducts").val(new Date().getTime());
var searchResultsRows = $("#tblCompanyProducts .ui-row-ltr");
}
The above code returning only the rows set in the first page.
Can anybody help me on this..
I have a problem with my two jqGrid grids. First I have one grid with some data that works just fine. It has an loadComplete event which sets the first row as selected. This is so that the second jqGrid gets populated based on the selected row (id) on the first jqGrid.
I have an onSelectRow event on the first grid which calls a function which contains the $('#grid).jqGrid() call of the second grid. This second grid has en url which links to a method in a controller which gets some data from a database.
This works all fine for the first selectrow (which happends automatically after the loadComplete).
My problem is that the second jqGrid doesnt repopulate after I select a different row. The programm never gets to the method in the controller (I tested with some logging). I'm really stuck at this since it works for the first load but not the second and so on.
$("#fontsgrid").jqGrid({
url: 'getfonts',
mtype: "post",
datatype: "json",
sortable: true,
colNames: ['Name', 'Family', 'Cost', 'Lic', 'File', 'Added', 'Mod', 'Add', 'Edit'],
colModel: [
{ name: 'name', index: 'name', width: 90, sorttype: "text", sortable: true, align: 'left'},
{ name: 'family', index: 'family', width: 100, sorttype: "text", sortable: true},
{ name: 'cost', index: 'cost', width: 60, sorttype: "currency", sortable: true, formatter: 'currency', formatoptions: {decimalSeparator: ",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "€ "}},
{ name: "licenses", index: "licenses", width: 30, sorttype: "int", sortable: true},
{ name: "filename", index: "filename", width: 90, sorttype: "text", sortable: true},
{ name: "date_upload", index: "date_upload", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
{ name: "date_edit", index: "date_edit", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
{name: "add_cart", index: 'add_cart', width: 70},
{name: "edit", index: "edit", width: 30}
],
rowNum: 100,
width: 580,
height: 359,
rowList: [100, 250, 500],
sortname: "name",
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: "Font List",
pager: $('#pager'),
loadComplete: function () {
$('#fontsgrid').jqGrid('setSelection', $("#fontsgrid tr[role]").next().attr("id"));
},
onSelectRow: function (id) {
loadInstallGridFonts(id);
}
}).navGrid('#pager', {edit: false, add: false, del: false});
function loadInstallGridFonts($fontid) {
$('#installGridFonts').jqGrid({
url: 'getinstallations',
mtype: "post",
datatype: "json",
sortable: true,
postData: {'fontid': $fontid},
colNames: ['Installation', 'Bedrijfsnaam', 'Date Installed', 'Edit'],
colModel: [
{ name: 'installation', index: 'installation', width: 90, sorttype: "text", sortable: true, align: 'left'},
{ name: 'bedrijf', index: 'bedrijf', width: 100, sorttype: "text", sortable: true},
{ name: "date_installed", index: "date_installed", width: 80, sortable: true, sorttype: "date", formatter: "date", formatoptions: { newformat: 'Y-m-d' }},
{name: "edit", index: "edit", width: 30}
],
rowNum: 50,
width: 480,
height: 359,
altRows: 'true',
rowList: [50, 75, 100],
sortname: "installation",
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: "Installation List",
pager: $('#pagerInstall')
}).navGrid('#pagerInstall', {edit: false, add: false, del: false});
}
'getfonts' and 'getinstallations' are both aliases for a controller/method used in routing (codeIgniter).
The problem is that the programm only goes to the method behind the 'getinstallations' once and not after a new rowselect.
I see many problems in your code. First of all it's important to understand that the code like
$('#installGridFonts').jqGrid({
...
});
create the grid. It means that it convert <table> element, which you placed initially on the page, to relatively complex structure of divs and tables (see here for examples). The consequence of it: you can make such call only once. If you try to create the same grid at the second time jqGrid verify that the grid already exist and do nothing. It's exactly what you can see.
One more important thing is the following: jqGrid creates the structure of divs and tables which represent the grid once, but it can fill the body of the grid (the data inside of the grid) multiple times. If you need to fill the grid with the data returned from the server you should just set parameters of the grid (url, datatype, postData and so on) and then make $("#installGridFonts").trigger("reloadGrid"). The reloading means executing new request to the server and loading the data in the the grid.
So the code could be about the following:
// we will use navGrid below more as once without editing buttons
// so we change defaults of navGrid with the folling settings
$.extend($.jgrid.nav, {edit: false, add: false, del: false});
// creates the second grid. because we don't want to make any request
// to the server at the time we will use datatype: "local"
$("#installGridFonts").jqGrid({
datatype: "local",
...
}).jqGrid("navGrid", "#pagerInstall");
// create the first grid
$("#fontsgrid").jqGrid({
...
onSelectRow: function (rowid) {
$("#installGridFonts").jqGrid("setGridParam", {
datatype: "json",
postData: {fontid: rowid}
}).trigger("reloadGrid");
}
}).jqGrid("navGrid", "#pager");
If it's required you can hide the second grid directly after creating and show it inside of onSelectRow callback.
I want to centralize the options for my jqgrids into one javascript file that all my grids can use. Such as if its sortable, height, width and the methods such as onSelectRow and loadComplete. I then want to load the options which are specific to that grid such as colModel, caption and sort order in a different javascript file for example
GridMain.js
datatype: 'local',
height: 'auto',
width: 'auto',
pager: $('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortorder: "asc",
viewrecords: true,
sortable: true,
onSelectRow: function (id) {
//redirect to brand details page
document.location.href = url + id;
}
UserGrid.js
colModel: [
{ name: 'Id', index: 'Id', hidden: true, key: true },
{ name: 'Name', index: 'Name', width: 250, align: 'left' },
{ name: 'Disabled', index: 'Deleted', width: 100, align: 'left' },
{ name: 'Actions', index: 'Actions', width: 150, align: 'center', sortable: false, title: false}],
sortname: 'Name',
caption: "Users"
});
I have tried many different ways and i cant seem to figure it out. I tried using the setGridParam method but height, width, colModel cant be changed after the grid is created.
I am using tableToGrid('.table-to-grid', { options }); to initialize my grid
Any help would be appreciated. Thanks
You can include in the GridMain.js the code like
$.extend($.jgrid.defaults, {
datatype: 'local',
viewrecords: true,
height: 'auto',
...
});
(see here for more information).
You can also confider to defining column templates (see here).
I don't recommend you to use tableToGrid and better create jqGrid directly.