I tried solutions given for this problem. But still, it is not working. I feel JSON response is not in the right format.
Have implemented JQGrid in struts2. Create a user list in action and returned as json type using result type as json in struts.xml.
This is the Json i obtained,
{"JSON":"success","userList":[{"fName":"abi","lName":"babu"},{"fName":"abi1","lName":"babu1"},{"fName":"abi2","lName":"babu2"},{"fName":"abi3","lName":"babu3"},{"fName":"abi4","lName":"babu4"},{"fName":"abi5","lName":"babu5"},{"fName":"abi6","lName":"babu6"}]}
The JSP page is,
<script type="text/javascript">
$(function () {
'use strict';
$("#datagrid").jqGrid({
url: "json-table",
datatype: "json",
colNames:['fName','lName'],
colModel:[
{name:'fName',index:'fName', key:true, width:100,editable:true,editoptions:{size:10}},
{name:'lName',index:'lName', width:100,editable:true},
],
rowNum:10,
rowList:[3,6],
loadonce: true,
pager: '#navGrid',
sortname: 'fName',
sortorder: "asc",
height: "auto", //210,
width:600,
onSelectRow: function(id) {
var getID = $(this).jqGrid('getCell', id, 'fName');
},
viewrecords: true,
caption:"JQ GRID"
});
});
</script>
Any help would be highly appreciated. Thanks.
You need just include jsonReader parameter which corresponds the format of your input data:
jsonReader: {root: "userList", repeatitems: false}
See the demo.
Related
This is controller code:
using JQGird.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace JQGird.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult EmployeeDetail()
{
Database1Entities db = new Database1Entities();
var employeedata = db.Empployees.Select(data => new
{
data.Id,
data.Name,
data.Designation,
data.Address,
data.Salary
});
var jsondat = new
{
total = 1,
page = 1,
records = db.Empployees.ToList().Count,
rows = employeedata
};
return Json(jsondat, JsonRequestBehavior.AllowGet);
}
}
}
and this is view of index action method
#{
ViewBag.Title = "Index";
}
<header>
<script>
$(document).ready(function () {
$('#grid').jqGrid({
url: '/Home/EmployeeDetails',
datatype: 'json',
myType: 'GET',
colNames: ['Id', 'Name', 'Designation', 'Address', 'Salary'],
colModel: [
{ name: 'Id', index: 'Id' },
{ name: 'Name', index: 'Name' },
{ name: 'Designation', index: 'Designation' },
{ name: 'Address', index: 'Address' },
{ name: 'Salary', index: 'Salary' }
],
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
reocords: 'records',
id: '0',
repeatitems: false
},
pager: $('#pager'),
rowNum: 5,
rowList: [2, 5, 10],
width: 600,
viewrecords: true,
caption: 'Jqgrid MVC Tutorial'
});
});
</script>
<script src="~/Scripts/jquery.jqGrid.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
</header>
<h1>Records of employees</h1>
<div>
<table id="grid">
</table>
<div id="pager"></div>
</div>
When i run the application, i t only show data. I have also check that the Json data is coming successffully to the view but jqgrid is not working. What mistakes i am doing?
HTML of the page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
<body>
<h1>Records of employees</h1>
<div>
<table id="grid">
</table>
<div id="pager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#grid').jqGrid({
url: '/Home/EmployeeDetail',
datatype: 'json',
//myType: 'GET',
loadonce: true,
colNames: ['Id', 'Name', 'Designation', 'Address', 'Salary'],
colModel: [
{ name: 'Id', index: 'Id' },
{ name: 'Name', index: 'Name' },
{ name: 'Designation', index: 'Designation' },
{ name: 'Address', index: 'Address' },
{ name: 'Salary', index: 'Salary' }
],
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
reocords: 'records',
id: '0',
repeatitems: false
},
pager: $('#pager'),
rowNum: 5,
rowList: [2, 5, 10],
width: 600,
viewrecords: true,
caption: 'Jqgrid MVC Tutorial'
});
});
</script>
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/i18n/grid.locale-en.js"></script>
<script src="/Scripts/jquery.jqGrid.min.js"></script>
<script src="/Scripts/jquery.jqGrid.js"></script>
</body>
</html>
The HTML page have wrong order of JavaScripts which you includes.
It's important to understand that jqGrid is jQuery plugin. So one have to include first jQuery and only then one can includes jqGrid JavaScript files.
In the same way you use $(document).ready(function () {...}); which contains $ and .ready defined by jQuery, but you use the code before you included jQuery file jquery-1.9.1.min.js.
The next error: you included both non-minimized jqGrid jquery.jqGrid.js and then minimized version of the same file jquery.jqGrid.min.js. It's wrong. You should include only one from the files.
One more problem could exist in the order of the main jqGrid file (jquery.jqGrid.min.js, jquery.jqGrid.js or jquery.jqGrid.src.js) and the corresponding locale file grid.locale-en.js. There are different requirements for different versions of jqGrid and different forks, but the recommended order which works in all versions of jqGrid is: first include locale file (like grid.locale-en.js) and then the main jqGrid file (like jquery.jqGrid.min.js).
you skipped <body>...</body> after </header>.
The code of EmployeeDetail action don't uses any parameters which jqGrid send. You don't implemented any paging and sorting in the server code. Instead of that you just return all data at once. You should use loadonce: true options in the case. jqGrid will load all the data and then it will use sorting, paging and filtering on the client side. I hope that you use jqGrid in version higher as 3.7 which implemented support of loadonce: true. If you use loadonce: true option then the total, page and records properties of the server response will be ignored. Thus you can reduce the code of the server side and use return Json(employeedata, JsonRequestBehavior.AllowGet); instead of return Json(jsondat, JsonRequestBehavior.AllowGet);.
There are no myType option, but there are exist mtype option which default value is 'GET'. So you should remove myType: 'GET' option which will be ignored by jqGrid.
Some options of jqGrid can depend from the version of jqGrid which you use. I would recommend you to use gridview: true, autoencode: true, height: "auto". I would recommend you to remove unneeded index properties from all columns defined in colModel. Instead of that you can add key: true option for Id column. It will inform jqGrid to use the values from the columns as the values of id attribute of the rows (id of <td> elements). The jsonReader can be removed or you can use jsonReader: { repeatitems: false } or jsonReader: { repeatitems: false, root: function (obj) { return obj; } }. If you use recent version of jqGrid then no jsonReader will be required.
I mentioned above multiple times about versions which you use. I would recommend you to update jQuery 1.9.1 which you use currently to jQuery 1.11.3 or 2.1.4. Moreover I would recommend you to use the latest version of free jqGrid which you can get either from NuGet (see here), used URLs from CDN (see the wiki article) or to download the latest sources from GitHub directly.
Can we change the default action of the "edit selected row" button?
Here is my code for the grid
jQuery("#detFlex62_1").jqGrid({
url: root + mod + '/detaillistview',
datatype: "clientSide",
colNames:[' ', '<?=lang("users_company_code")?>', '<?=lang("users_company_name")?>', ' ', ' '],
colModel:[
{name:'myac', width:50, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true,delOptions: {reloadAfterSubmit:false},editOptions: {reloadAfterSubmit:false}}},
{name:'company_code',index:'company_code', width:100},
{name:'company_name',index:'company_name', width:100},
{name:'company_id',index:'company_id', width:100,hidden:true},
{name:'company_access_id',index:'company_access_id', width:100,hidden:true}
],
width: $('.body').width()-40,
height: 120,
pager: '#pagerFlex62_1',
sortname: 'user_id',
sortorder: "desc",
editurl: root + mod + '/detailpost',
caption:"<?=lang("users_title")?>",
onSelectRow: function(id){
activedf = "#detFlex62_1";
}
});
jQuery("#detFlex62_1").jqGrid('navGrid','#pagerFlex62_1',{edit:false,del:false,search:false, addfunc: df_add_1});
I know I should put something in the editOptions part of the code. Right now I only put reloadAfterSubmit:false. What is the option to execute our own custom function ?
If you need just calling custom function when you press 'Edit' button in navigation bar, your navgrid should look like this:
jQuery("#detFlex62_1").jqGrid('navGrid', "#mainGridNavi", { edit: true, add: false, del: false, editfunc: function() { alert('test'); }})
Regards.
I have a jqGrid constructed as it follows in the code below:
function radio(value, options, rowObject){
var radio = '<input type="radio" value=' + value + ' name="radioid" />';
return radio;
}
function reloadOnEnter(){
jQuery(':input[name=field1]').keyup(function(e){
if(e.keyCode == 13){
var fieldValue = jQuery(':input[name=field1]').attr('value');
jQuery(':input[name=field1]').attr('value', fieldValue);
jQuery("#listTable").jqGrid().trigger("reloadGrid");
}
});
}
jQuery(function(){
jQuery("#listTable").jqGrid({
url: '$content.getURI("myURI")' + '?userId=$userId&pageNo=0&locale=' + '$locale',
datatype: 'json',
mtype: 'POST',
colNames:['column1', 'column2', 'column3', 'column4', 'column5'],
colModel :[
{name:'name', index:'field', width:'8%', search:false, align:'center', formatter: radio, editable:false, sortable: false, resizable:false},
{name:'name1', index:'field1', width:'23%', sortable: false, resizable:false},
{name:'name2', index:'field2', width:'23%', sortable: false, resizable:false},
{name:'name3', index:'field3', width:'23%', sortable: false, resizable:false},
{name:'name4', index:'field4', width:'23%', sortable: false, resizable:false}
],
width:'768',
height: 500,
pager: '#pagerDiv',
gridview: true,
rowNum: $rowNr,
rowTotal: 500,
sortorder: 'desc',
viewrecords: true,
loadComplete: loadCompleteHandler,
ignoreCase: true
});
});
jQuery(function(){
jQuery("#listTable").jqGrid('filterToolbar',{
stringResult: true,
searchOnEnter: false });
});
I start typing 'he' and the autocomplete window shows me 'hello' (because I previously typed hello). I select 'hello' and hit enter, and still 'he' is submitted in the ajax request.
My reloadOnEnter function is called by the loadCompleteHandler. The interesting thing is that when I query the search field (field1) value is the selected value, but only the typed value is being sent in the request. I would like to send the selected value. How can i achieve this?
EDIT:
The loadCompleteHandler looks like this:
function loadCompleteHandler(){
reloadOnEnter();
jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
}
(I use Apache Velocity as a template engine! That is why I have variables like $variable in the javascript code!)
To your main question: you should use jQuery.val function instead of jQuery.attr('value').
Many other things in your code seams me strange or unclear. It is not clear for me how you use reloadOnEnter in the loadCompleteHandler. If would be good if you include the corresponding code fragment. The value for the url seems me also very strange. You use additionally searchOnEnter: false option of filterToolbar but in the reloadOnEnter you wait for the 'Enter' key. Inside of the body of if(e.keyCode == 13) you get jQuery(':input[name=field1]').attr('value') and then set the same value back. Why?
Probably you could describe in the text of your question a little more what you want to archive with the code?
I have a visualforce page and I am using jqgrid to display data on this page. The url that the jqgrid points to is a visualforce page(https://test.visual.force.com/apex/GridResults) which outputs only JSON data. This page does not have any header or html information.
The problem is that when I run this page, the grid renders with column names but no data.
When I run the url it outputs JSON data. I have pasted below the code.
jQuery("#list").jqGrid({
url:"https://test.visual.force.com/apex/GridResults",
datatype: "json",
colNames: [{!fieldNames}], -- property in controller which outputs fieldnames
colModel: [{!colModel}], -- property in controller which outputs column definition
rowNum: 10,
rowTotal:10,
rowList: [20, 40, 60],
loadonce:true,
mtype:"GET",
gridView:true,
pager: '#pager',
sortname: 'Record ID',
sortorder: "desc",
width: 1200,
height: 400,
caption: "Accounts"
});
jQuery("#list").jqGrid('navGrid', "#pager", { edit: true, add: true, del: false })
};
Any ideas on why the data from the page is not consumed by the jqgrid? Help much appreciated.
Have you look into Visualforce remoting?
I want to add a button to each row in my grid that will bring up a new window. Do not see this feature in this very rich control. Must be missing something
Here's one example, from the jqGrid demos page:
jQuery("#rowed2").jqGrid({
url:'server.php?q=3',
datatype: "json",
colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'act', index:'act', width:75,sortable:false},
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:true},
{name:'name',index:'name', width:100,editable:true},
{name:'amount',index:'amount', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'total',index:'total', width:80,align:"right",editable:true},
{name:'note',index:'note', width:150, sortable:false,editable:true}
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#prowed2'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
gridComplete: function(){
var ids = jQuery("#rowed2").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#rowed2').editRow("+cl+"); ></ids>";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=jQuery('#rowed2').saveRow("+cl+"); />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=jQuery('#rowed2').restoreRow("+cl+"); />";
jQuery("#rowed2").setRowData(ids[i],{act:be+se+ce})
}
},
editurl: "server.php",
caption:"Custom edit " }
).navGrid("#prowed2",{edit:false,add:false,del:false});
You can also do it with a custom formatter.
the current highest answer places the custom button code within loadComplete. it shoudl be gridComplete. The API has likely been changed since the question was answered.
in colModel , you can format using formatter by following code
formatter:function (cellvalue, options, rowObject) {
return "<input type='button' value='somevalue' onclick='some_function'\>";
}
This example might be helpful. See this wiki page and this answer from Oleg.
I am using a jqgrid to display a list of contacts. I have a column named 'Role' with a button that says 'Define', such that you can click on it and redefine that contact's role as primary, secondary, sales, or other.
Originally, the button element was being sent to the grid cell via XML, where $rowid was the id of the row (PHP):
<cell><![CDATA[<button data-idx='{$rowid}' class='contact_role_button btn' title='Define Role...'>Define</button>]]></cell>
This worked fine until I set autoencode: true on the grid. With this option set to true, the column was simply displaying the html.
Craig's answer displayed similar behavior, but a slight variation of it did the trick. I thought I'd share:
gridcomplete: function() {
var ids = $grid.getDataIDs();
for (var i=0;i<ids.length;i++){
var cl = ids[i],
button = '<button data-idx="'+cl+'" class="contact_role_button btn" title="Define Role...">Define</button>';
if (cl.substr(0,2) !== "jq") {
$('#'+cl).find('td[aria-describedby="list_role"]').html(button);
}
}
}
In other words, the setRowData method didn't work with autoencode set to true, but the DOM can be manipulated as desired within the gridcomplete event.