Bug onSelectRow in free-jqgrid - asp.net-mvc

I use free-jqGrid v4.14.0. I have a table, when I click on a row in this table, I execute a stored procedure and in another table I enter the result.
The problem is that when you first click on a row in the table, the data does not load into the second table, and when the second button is clicked, the data appears, and this problem occurs only once, the following clicks immediately load the data into the second table.
When you first click in the browser console, you can see that the url stored procedure is loading: '# Url.Action ("GetAccident")',
$(document).ready(function () {
$("#jqg").jqGrid({
url: '#Url.Action("GetAccident")',
datatype: "json",
colNames: ['id_Accident', .......],
colModel: [
{ name: 'id_Accident', index: 'id_Accident', autowidth: true, sortable: false },
.....................
.....................
],
guiStyle: "bootstrap",
iconSet: "fontAwesome",
pager: "#pager",
rowList: [10, 20, 30],
rowNum: 10,
loadonce: false,
onSelectRow:
function (idRow) {
celValue = $('#jqg').jqGrid('getCell', idRow, 'id_Accident');
jQuery("#jqg1").jqGrid('setGridParam', { url: '#Url.Action("GetOrganizationCulpritByIdAccident")?celValue=' + celValue, page: 1 }).trigger('reloadGrid');
}
});
jQuery("#jqg1").jqGrid({
url: '#Url.Action("GetOrganizationCulpritByIdAccident")?celValue=' + 0,
datatype: "json",
colNames: ['id_Accident', 'Name Organization'],
colModel: [
{ name: 'id_Accident', index: 'id_Accident', autowidth: true, stype: 'text', sortable: true },
{ name: 'Name', index: 'Name', autowidth: true, sortable: true }
],
guiStyle: "bootstrap",
pager: "#pager1",
rowList: [10, 20, 30],
rowNum: 10,
});

I can't reproduce the problem. You can examine Network traffic of the demo https://jsfiddle.net/OlegKi/ed0yLkce/1/. I uses
datatype: "local"
in the second grid as initial option to prevent unneeded Ajax requests. I use additionally idPrefix with different values in both grids to be sure that one will have no conflicts with duplicates of ids. You will see in Network tab of Developer Tools that the request to for example https://fiddle.jshell.net/echo/json?celValue=test2 will be send it the second row is selected.

Related

How to apply Custom Paging in JQGRID

I have a Jqgrid, In my MVC view, there is no problem in displaying the data in the grid. But I want to apply the custom paging in the grid, so i have created the method in my controller which takes two parameters (pageNumber and rowSize) and returns the data based on the these two parameters.
Now my question is that how can i send these two property of grid to the controller and get the changes reflected on the grid.
Note: i also tried to send the value of rowSize using ajax on the button click but after executing the code in the server there is no changes in the grid(as i expected).
View:
<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
datatype: "json",
colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department',
'Age', 'Salary', "Address", 'Marital Status'],
colModel: [
{ name: 'ID', index: '_id', width: 20, stype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 150 },
{ name: 'LastName', index: 'LastName', width: 150 },
{ name: 'LastSSN', index: 'LastSSN', width: 100 },
{ name: 'Department', index: 'Department', width: 80, align: "right" },
{ name: 'Age', index: 'Salary', width: 80, align: "right" },
{ name: 'Salary', index: 'Salary', width: 80, align: "right" },
{ name: 'Address', index: 'Address', width: 150, sortable: false },
{ name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
],
rowNum: 10,
loadonce: false,
rowList: [5, 10, 20, 50],
pager: "#jQGridDemoPager",
height: "100%",
sortname: 'ID',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
url: '/Home/Records'
});
$(".ui-pg-input").click(function () {
alert(this.value);
$.ajax({
type: 'POST',
url: window.location + "Home/Records",
data: {
pageNumber: this.value
},
success: function (data) {
alert("ajax call completed");
},
error: function () {
alert("Something went Wrong");
}
});
})
</script>
Controller
public JsonResult Records(int pageNumber=3, int rowSize = 5)
{
// code for custom paging
return json;
}
JSON Returned from Server:
[{"ID":1,"FirstName":"Alan","LastName":"Donald","LastSSN":"123","Department":"Bowler","Age":"44 ","Salary":"1000000 ","Address":"South Africa","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":1}],"IsTemporary":false}},{"ID":2,"FirstName":"Donald","LastName":"Duck","LastSSN":"345","Department":"Actor","Age":"98 ","Salary":"2000000 ","Address":"USA","MaritalStatus":null,"EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":2}],"IsTemporary":false}},{"ID":3,"FirstName":"Virat","LastName":"Kohli","LastSSN":"111","Department":"Batsman","Age":"28 ","Salary":"1000000 ","Address":"India","MaritalStatus":"Unknown ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":3}],"IsTemporary":false}},{"ID":4,"FirstName":"MS","LastName":"Dhoni","LastSSN":"112","Department":"Captain","Age":"31 ","Salary":"9000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":4}],"IsTemporary":false}},{"ID":5,"FirstName":"Sachin","LastName":"Tendulkar","LastSSN":"113","Department":"Superman","Age":"40 ","Salary":"90000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":5}],"IsTemporary":false}},{"ID":6,"FirstName":"Virendra","LastName":"Sehwag","LastSSN":"114","Department":"Batsman","Age":"36 ","Salary":"8000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":6}],"IsTemporary":false}},{"ID":7,"FirstName":"Zaheer","LastName":"Khan","LastSSN":"115","Department":"Bowler","Age":"36 ","Salary":"3000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":7}],"IsTemporary":false}},{"ID":8,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":8}],"IsTemporary":false}},{"ID":9,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":9}],"IsTemporary":false}},{"ID":10,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":10}],"IsTemporary":false}}]
I think there are misunderstanding how jqGrid works. If you don't use loadonce: true option jqGrid send automatically request to url with additional parameters which specify the page size and the requested page. So you don't need to many any $.ajax and you don't need to bind $(".ui-pg-input").click. Default names of 1-based "page number" parameter is page and the name of "row size" parameter is rows. So you need just rename parameters of Records actions.
Alternatively you can use prmNames option of jqGrid (see the documentation) to inform jqGrid to use other parameter names as default page and rows. For example you can add the option
prmNames: {page: "pageNumber", rows: "rowSize"}
to solve your problem.

jqgrid TreeGrid unable to see content of expanded column

I have problem while rendering expanded column text while using jQuery jqgrid's treegrid type. Here's my treegrid definition and the response from server, I'll be happy if someone can help me?
Thanks in advance.
Javascript
menuGrid.jqGrid({
url:'kullanici/loadMenu.ajax',
//enable TreeGrid
treeGrid: true,
//set TreeGrid model
treeGridModel: 'adjacency', //'nested', //'adjacency',
//set expand column
ExpandColumn: 'Text',
width: 550,
datatype: 'json',
viewrecords: true,
loadonce: true,
colNames: ['ID', 'Text'],
colModel: [
{ name: 'id', index: 'id', width: 20, align: 'left', editable: false, key: true, sorttype:'int', hidden: false },
{ name: 'Text', index: 'menuName', width: 120, sortable: true, align: 'left' }
],
jsonReader: {
repeatitems : false,
id: 'id'
},
sortname: 'id',
sortorder: 'asc',
height: 200,
sortable: true,
enabletooltips: true,
caption: 'Menü Ağacı'
});
menuGrid.jqGrid('navGrid','#paddtree');
The JSON response from server
{"rows":[{"expanded":true,"id":1,"isLeaf":false,"level":0,"loaded":true,"text":"Kullanici Islemleri"},{"expanded":false,"id":2,"isLeaf":true,"level":1,"loaded":true,"parent":1,"text":"Kullanici Ekle"},{"expanded":false,"id":3,"isLeaf":true,"level":1,"loaded":true,"parent":1,"text":"Kullanici Duzenle"},{"expanded":false,"id":4,"isLeaf":true,"level":1,"loaded":true,"parent":1,"text":"Kullanici Sil"},{"expanded":true,"id":5,"isLeaf":false,"level":0,"loaded":true,"text":"Fatura ??lemleri"},{"expanded":false,"id":6,"isLeaf":true,"level":1,"loaded":true,"parent":5,"text":"Fatura Goruntule"}],"records":6,"success":true}
Your Json response must be as follows :
{"rows":[
{
"id":1,
"text":"Kullanici Islemleri"
"level":0,
"isLeaf":false,
"parent" : "null" //If the row is at 0-lvl
"expanded":true,
"loaded":true,
},
],"records":6,"success":true}
You have to respect the order of the grid cols.
First, your data cols, then, level,isLeaf, parent,expanded. I'm not sure about the loaded field, try with and without.
OK,I have found the solution, colNames, colModel and ExpandColumn configs should match(case-sensitive). As I said above the order of config isn't important.

jqGrid: pass selected IDs as HTML form parameters

I have an HTML form (Razor) with jqGrid to select entities (please assume customers, for example).
The customers jqGrid looks like:
jQuery("#ajaxGrid").jqGrid({
url: '#Url.Action("CustomersData")',
datatype: 'json',
mtype: 'GET',
jsonReader: { repeatitems: false, id: "Id" },
colNames: ['Id', 'Name'],
colModel: [
{ name: 'Id', editable: true, sortable: false, hidden: false },
{ name: 'Name', editable: true, sortable: false, hidden: false }
],
multiselect: true,
viewrecords: true,
rowNum: 5,
width: '850',
height: '15em'
});
So, the grid allows multiple selection.
The question is: how to pass selected customer IDs (as IEnumerable) to the controller on submit (to the appropriate submit action)?
I guess it can be done by setting all selected IDs as form parameter. I don't know how to copy the data from the array:
var ids = jQuery("#ajaxGrid").getGridParam('selarrrow');
to HTML form hidden value.
If I understand you correct you can for example create string with comma-separated ids of selected rows with respect of ids.join(','). Then you can use the jQuery.val(newValue) to set the new halue to the hidden field: $("#hiddenFieldId").val(ids.join(','));.

Jqgrid - send parameters on setup of grid

I have following setup. I have a view, in asp.net MVC, which loads without any data. On click of a button, we setup a jqgrid (call (#grid).jqGrid) which retrieves data from a server. But, we also want to send some parameters. These parameters will be used as filters on the server side before returning json data for jqgrid. How to do this?
`$('#getrecords').click(function (e) {
e.preventDefault();
debugger;
jQuery("#records").jqGrid({
url: '/Test/Data/',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: "application/json" },
colNames: ['Id', 'Name'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'left' },
{ name: 'Name', index: 'Name', width: 300, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 50],
viewrecords: true,
caption: 'My first grid',
postData: {
myname: function () { $('#myname').val(); },
childname: function () { $('#child').val(); }
}
});
});
`
You can use the grid's postData option to define parameters that should be passed to the server on each request:
postData: { param1: 'value1', param2: 'value2', etc... }
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

How to implement search on jqgrid?

So I've got basic example of jqgrid working in ASP.NET MVC, the javascript looks like this:
$(document).ready(function() {
$("#list").jqGrid({
url: '../../Home/Example',
datatype: 'json',
myType: 'GET',
colNames: ['Id', 'Action', 'Parameters'],
colModel: [
{ name: 'id', index: 'id', width: 55, resizable: true },
{ name: 'action', index: 'action', width: 90, resizable: true },
{ name: 'paramters', index: 'parameters', width: 120, resizable: true}],
pager: $('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
multikey: "ctrlKey",
imgpath: '../../themes/basic/images',
caption: 'Messages'
});
Now I am trying to implement the search button that they have in the jqgrid examples (click on Manipulating/Grid Data). But I don't see how they implement it. I'm expecting e.g. a "search:true" and a method to implement it.
Has anyone implemented search on jqgrid or know of examples that show explicitly how to do it?
I recently implemented this myself (yesterday actually) for the first time. The biggest hurdle for me was figuring out how to write the controller function. The function signature is what took me the longest to figure out (notice the _search, searchField, searchOper, and searchString parameters as those are missing from most of asp.net mvc examples I've seen). The javascript posts to the controller for both the initial load and for the search call. You'll see in the code that I'm checking whether the _search parameter is true or not.
Below is the controller and the javascript code. My apologies for any formatting issues as this is my first time posting on here.
public ActionResult GetAppGroups(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString)
{
List<AppGroup> groups = service.GetAppGroups();
List<AppGroup> results;
if (_search)
results = groups.Where(x => x.Name.Contains(searchString)).ToList();
else
results = groups.Skip(page * rows).Take(rows).ToList();
int i = 1;
var jsonData = new
{
total = groups.Count / 20,
page = page,
records = groups.Count,
rows = (
from appgroup in results
select new
{
i = i++,
cell = new string[] {
appgroup.Name,
appgroup.Description
}
}).ToArray()
};
return Json(jsonData);
}
And here is my HTML/Javascript:
$(document).ready(function() {
$("#listGroups").jqGrid({
url: '<%= ResolveUrl("~/JSON/GetAppGroups/") %>',
datatype: 'json',
mtype: 'GET',
caption: 'App Groups',
colNames: ['Name', 'Description'],
colModel: [
{ name: 'Name', index: 'Name', width: 250, resizable: true, editable: false},
{ name: 'Description', index: 'Description', width: 650, resizable: true, editable: false},
],
loadtext: 'Loading Unix App Groups...',
multiselect: true,
pager: $("#pager"),
rowNum: 10,
rowList: [5,10,20,50],
sortname: 'ID',
sortorder: 'desc',
viewrecords: true,
imgpath: '../scripts/jqgrid/themes/basic/images'
//});
}).navGrid('#pager', {search:true, edit: false, add:false, del:false, searchtext:"Search"});
See my article on codeproject, which explains how we can do multiple search in jqgrid:
Using jqGrid’s search toolbar with multiple filters in ASP.NET MVC
I use IModelBinder for grid's settings binding, expression trees for sorting and filtering data.
In case you're still wondering about dealing with optional parameters, just declare them as nullables by adding a ? after the type name.
Now you'll be able to compare them with null to check if they are absent.
Note that you don't need to do this with strings, as they are already nullable.
#Alan - ok, I used your method and extended my webservice to expect those additional three parameters and check for "_search" is true/false. But, in order to make this work, I had to add this to my ajax call in the JavaScript:
if (!postdata._search) {
jQuery("#mygrid").appendPostData( {searchField:'', searchOper:'', searchString:''});
}
Just follow this link. It has all implementations explained...
You can create a button searchBtn and can invoke search form on click
$("#searchBtn").click(function(){
jQuery("#list4").searchGrid(
{options}
)});

Resources