Am facing a design issue when re sizing the column headers as below,
Here is the code i use , can anyone please advise me if am wrong ?
jQuery("#jQGridDemo").jqGrid({
data:dataArray,
datatype: "local",
shrinkToFit: true,
height: 500,
width: 900,
rowheight: 160,
colNames: ['User', 'IP Address', 'Registered Contacts'],
colModel: [{ name: 'UserLinePort', width: 520, index: 'UserLinePort', stype: 'text', sortable: true },
{ name: 'SourceIP', index: 'SourceIP', width: 130, editable: true, stype: 'text', sortable: true },
{ name: 'registeredcontact', index: 'registeredcontact', width: 190, editable: true, sortable: true },
],
rowNum: 30,
rowList: [30, 50, 100],
pager: '#jQGridDemoPager',
loadComplete: function () {
stopLoadingIcon();
}
});
jqGrid 4.5.1 is relatively old version. After publishing 4.7.1 short after publishing 4.7 and renaming jqGrid to Guriddo jqGrid JS with changing license agreement and prices (see the post), I started alternative fork of jqGrid: free jqGrid which features are described in the readmes to every published version and in the wiki.
I rewrote many places of old jqGrid code. For example I rewrote the large part of column resizing and have changes the resizing of the grid. You can see on the demo for example how the resizing works now.
One can't change the existing behavior in jqGrid 4.5.1 using some additional options. You can test the current behavior of free jqGrid (the current version is 4.10.0) and Guriddo jqGrid JS (the current version is 5.0.1) and choose, which one corresponds more to your requirements. You can see on the demo site how Guriddo jqGrid JS works.
Related
Please see my js code below
$(function () {
$("#grid").jqGrid({
url: "/Home/GetRoles",
dataType: 'json',
mtype: 'Get',
colNames: ['ID', 'Role Name', 'Active'],
colModel: [
{ key: true, hidden: true, name: 'RoleId', index: 'RoleId' },
{ key: true, name: 'RoleName', index: 'RoleName' },
{ key: true, name: 'Active', index: 'Active' }
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Roles',
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false
});
});
and output of Get request
{"total":2,"page":1,"records":13,"rows":[{"RoleId":1,"RoleName":"Role1","Active":true},{"RoleId":2,"RoleName"
:"Role 2","Active":false},{"RoleId":13,"RoleName":"Role 3","Active":false},{"RoleId":3,"RoleName":"Role
4","Active":false},{"RoleId":4,"RoleName":"Role 5","Active":false},{"RoleId":5,"RoleName":"Role 6","Active"
:false},{"RoleId":6,"RoleName":"Role 7","Active":false},{"RoleId":7,"RoleName":"Role 8","Active":false
},{"RoleId":8,"RoleName":"Role 9","Active":false},{"RoleId":9,"RoleName":"Role 10","Active":false}]}
but grid is always empty
You should fix dataType: 'json' to datatype: 'json', the property key: true could be placed only in one column. You should remove it from columns RoleName and Active. Your JSON data contains line feed in the middle of the string "Role 4". Have the JSON data really new line character on the place? It would be the error too.
Moreover you should always write the information about the version of jqGrid you use and from which fork (free jqGrid, Guriddo jqGrid JS or an old jqGrid in version <=4.7). The problem existing in one version can not exist in another one. Moreover different version and forks have different options implemented and so to suggest you some workaround one need to know the version and the fork which you use. I develop free jqGrid fork, and can recommend you to you the latest version (4.13.0) of jqGrid from the fork.
I have created a jqgrid as follows:
$("#table_jqgrid").jqGrid({
autowidth: true,
shrinkToFit: true,
datatype: function(postdata) {
jQuery.ajax({
url: 'getxmlInfo',
data:postdata,
dataType:"xml",
complete: function(xmldata,stat){
debugger;
console.log(xmldata);
if(stat=="success") {
var thegrid = jQuery("#table_jqgrid")[0];
console.log(thegrid)
debugger;
thegrid.addXmlData(xmldata.responseXML);
}
}
});
},
colNames: ['col1', 'col2', 'col3', 'col4', 'col5', 'col6'],
colModel :[
{name: 'col1', index: 'col1', width: 60, sorttype: "int"},
{name: 'col2', index: 'col2', width: 90, sorttype: "date"},
{name: 'col3', index: 'col3', width: 100},
{name: 'col4', index: 'col14', width: 80, align: "right", sorttype: "float"},
{name: 'col5', index: 'col5', width: 80, align: "right", sorttype: "float"},
{name: 'col6', index: 'col6', width: 80, align: "right", sorttype: "float"}
],
pager: '#pager_jqgrid',
loadonce:true,
rowNum:10,
rowList:[10,20,30],
sortname: 'col1',
sortorder: 'desc',
rowTotal:40,
viewrecords: true,
});
Everything is working fine when changing records per page.But pagination is not correct.
getxmlInfo is a url to servlet function which returns corresponding xml as ajax response.
Initially page number is 1 and records/page is 10 then 10 rows will be shown.Is there any way to set total number of pages in jqgrid?
After a long search one link revealed there exists an option that is setting rowTotal parameter.But it is not working .How we can persist pagination data on each ajax call.Is there exists any solution to set totalrows on each ajax call.
I would strictly recommend you don't use datatype as function if you need make just an Ajax call to the server. More as 90% of the code which implements such feature uses it in a wrong way. Your code for example can send Ajax request only once in Internet Explorer because well known problem with caching of Ajax requests. You use additionally complete callback instead of "success", which is also not full correctly. The "notmodified" is an example of successful response too. You should never use jQuery.ajax if you are not a real specialist in the subject.
You should understated jqGrid also really good to be able to use datatype as function. You can find an example of the implementation in the answer. You can see that the code is not so short. The answer is written many years ago and it's not supports many features added in jqGrid later. The function datatype in jqGrid 4.5.3 and later for example contains 5 parameters. The function addXmlData which you try to call contains 5 parameters too. Your current implementation of datatype break some standard callbacks, for example loadComplete, loadError, beforeProcessing. Some features of jqGrid like virtual scrolling or frozen columns will be broken too.
I recommend you to replace datatype to
url: "getxmlInfo",
datatype: "xml"
I recommend you additionally remove all index properties from colModel. You use loadonce: true option which require to the index and name value are the same. You use for example name: 'col4', index: 'col14' which break the rule.
I strictly recommend you to add gridview: true option which will just improve performance of the loading of the grid. You should consider to use autoencode: true option if the XML data returned from the server don't contains HTML fragments which need be set in the cells of jqGrid.
I am using jQuery UI Autocomplete in jqGrid, but the autocomplete list is displayed behind the add / edit form. I am using the latest jQuery UI and jqGrid. Here is the code snippet:
colModel : [
{
name: "birthPlaceId",
index: "birthPlaceId",
editable: true,
edittype: "text",
hidden: true
}, {
name: "birthPlaceName",
index: "birthPlaceName",
editable: true,
editoptions: {
size: 75,
dataInit: function (e) {
$(e).autocomplete({
source: "${ajaxPlacesUrl}",
minLength: 1,
focus: function (event, ui) {
$(e).val(ui.item.label);
},
select: function (event, ui) {
$(e).val(ui.item.label);
$("input#birthPlaceId").val(ui.item.value);
}
});
}
},
editrules: {
edithidden: true,
required: false
},
edittype: "text",
hidden: true,
width: 75
}
]
Here is the JSON data getting from the server for "W":
[{"value":30,"label":"Washington, DC, USA"},
{"value":31,"label":"Windsor, Ontario, Canada"},
{"value":111,"label":"Wylie, Texas, USA"}]
I searched and couldn't find a fix for this. Appreciate any help. Thanks.
The problems with displaying of jQuery UI Autocomplete menu behind the Add/Edit form can be solved typically in one from two ways. The first way will be the usage of appendTo option of jQuery UI Autocomplete. The option van change place of Autocomplete menu on the page. Another way will be to change z-index of Add/Edit form. You can use zIndex property to reduce the default 950 value to some less value. See the answer for the code example.
in jqgrid for inline editing when we click the save icon, ** internally it calls the saveRow method, but i want to call my custom method where i will implement my save logic as well calling to controller method.**
i used below code for grid.
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate', 'PostalCode', 'Mobile'],
colModel: [
{name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
{ name: 'LoginID', index: 'LoginID', width: '16%', editable: true, sortable: true },
{ name: 'Emailid', index: 'Emailid', width: '16%', editable: true,
sortable: true },
],
rowNum: 10,
height: '100%',
scrollOffset: 0,
rowList: 10,
shrinkToFit: true,
pager: $("#pager2"),
editurl: "/home1/EditUserData",
caption: "Simple data manipulation"
});
jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true},
});
});
so please anyone let me know how to implement it.
I don't really understand your requirements. saveRow has a lot of customization possibilities. You can rename all parameters which will be sent to the server using prmNames option of jqGrid. Using extraparam parameter of saveRow you can specify additional information which can be sent to the server. The callback serializeRowData can be used to implement your custom serialization. For example you can convert the data to JSON. Using aftersavefunc you can make some custom actions after the data will be successfully saved on the server. So I recommend you use the features instead of implementing your custom saveRow method.
UPDATED: If you want to have navigator icon which uses your custom saveRow you should don't add "Save" button by inlineNav. You can use save: false option of inlineNav. Then you can just use navButtonAdd and add your custom icon which look exactly like original "Save" button and make call of your "custom saveRow" in the onClickButton callback.
I am using jqGrid to render some data. Now I want the ability to modify the data based on the values of two different select boxes. For example, I have a dropdown of location id's and a dropdown of date ranges. I want to filter by the location id and date range, handling this logic in my /something/search action. How can I pass this additional data into jqGrid dynamically? So, (1) on the initial load and (2) when on onChange event is fired, i'll pass in something like {data: {location_id: 10, range_start: '1/1/2012', range_end: '1/5/2010'}}. I could then read this in as a param, just like I do for "page", "rows", "sidx", etc..
Edit:
Included my existing code if needed:
grid.jqGrid({
url: "/something/search",
datatype: "json",
colNames: ['', 'ID', 'Description', 'Start', 'End', 'Last Updated'],
colModel: [{name:'act',index:'act', width:16,sortable:false},
{ name: 'id', index: 'id', width: 100, hidden: true },
{ name: 'description', index: 'description', width: 200 },
{ name: 'start_date', index: 'start_date', width: 120 },
{ name: 'end_date', index: 'end_date', width: 120 },
{ name: 'last_update', index: 'last_update', width: 120 }],
rowNum: 20,
rowList: [10, 20, 50],
pager: '#data-list-pager',
sortname: 'ident',
viewrecords: true,
sortorder: "desc",
multiselect: false,
height: "100%",
caption: "",
altRows: true,
width: 865});
The first way to solve the problem is to follow the way which I described here. In the case the controls which the user will use to filter the grid will be outside of the grid.
Another way which I can suggest is to use the Toolbar Searching. The advantage of the approach is that the controls used for searching will be integrated in the grid. In the case you can use either the select control or text input with the jQuery UI Datepicker.
To add the Toolbar Searching you need just call filterToolbar with the parameters which you prefer. If you would you stringResult: true option the format of the filters parameter which will be send to the server will be the same like in case of the usage of advanced searching. To define 'greater or equal' searching operation for the 'start_date' and the 'less or equal' searching operation for the 'end_date' you need just add searchoptions having 'ge' or 'le' as the first element of the sopt property.
As the result one will be able to filter the grid:
and
see the demo.