I'm making a table that fetches game match results.
The problem is that when I try to sort the match results (subgrids), only num and team column can be sortable, and other columns are not sortable. Am I missing something? Please help.
http://darkencraft.woobi.co.kr/DotA2Login/WinTablev2.php
Below is the subgrids that I'm having trouble sorting with:
jQuery("#"+subgrid_table_id).jqGrid({
url:"get_match_detail.php?q=1&match_id="+(jQuery("#match_list").getRowData(row_id))['match'],
datatype: "json",
colNames: ['Num','Team','Name','Steam ID #', 'Hero', 'Hero', 'Image', 'Kills','Deaths','Assists','Creep Kills','Denies','Gold-per-Minute','Experience-per-Minute'],
colModel: [
{name:"num",index:"num",width:30,key:true},
{name:"team",index:"team",width:30},
{name:"name",index:"match_id",width:80},
{name:"steamid",index:"win",width:150,align:"right"},
{name:"hero_en",index:"match_id",width:80},
.....more columns
{name:"epm",index:"match_id",width:80}
],
sortname: 'num',
pager: pager_id,
rowNum:20,
height: '100%',
sortable: true,
loadonce: true,
sortorder: "asc",});
Related
I have a grid with following options where "id" I want to set for a row need to be custom formatted.
There are two columns libCode and matCode.
Combining data of these two I want to create Id for row as follows:-
" ;libCode=[libcode];matCode=[matCode]"
But key=true option is not working with this field having its data set by custom formatter.
It returns the row no. if no xmlmap option is defined, or returns data from xmlmap element from XML response but not what custom formatter sets.
I want to know that why key option is not working and is there any other way I could implement this.
Here is my code for grid:
$(function () {
$("#list").jqGrid({
url: "./TestServlet?operation=RetrieveAll&accept=List",
datatype: "xml",
mtype: "GET",
colNames: ["Lib Code", "Mat Code", "Row Id"],
colModel: [ { name: "libCode", hidden:true, xmlmap:"libCd"},
{ name: "matCode", hidden:true, xmlmap:"matCd"},
{ name: "rowId", formatter:formatName , key:true}
],
xmlReader:{
root:"libs",
row:"lib",
repeatitems: false
},
pager: "#pager",
rowNum: 10,
rownumbers: true,
rowList: [10, 20, 30],
sortname: "libCd",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
loadonce: false,
caption: "Library"
});
});
function formatName(cellValue, options, rowObject)
{
return " ;libCd="+$(rowObject).find('libCd').text()+";matCd="+$(rowObject).find('matCd').text();
}
Set property loadonce to true instead of false i.e. loadonce: true.
After I inserted a new row using
my_table.jqGrid('addRowData', selected_rowid+1, newRow, 'after', selected_rowid);
The new row is inserted correctly on the table but when I output the grid data
my_table.getGridParam('data')
the new row is inserted in the very end of the data array. Also, when I click any row after the new row inserted, the rowid was not updated (incremented).
Is there any way to fix this?
The grid definition is this:
my_table.jqGrid({
colNames:['Id', 'Start','End', 'Duration', 'Text','Position','Alignment','Warnings','Errors'],
colModel:[
{name:'rowid',index:'myrowid',hidden: true},
{name:'start',index:'startTime', width:10, formatter: convertTime},
{name:'end',index:'endTime', width:10, formatter: convertTime},
{name:'duration',index:'duration', width:10, formatter: getDuration},
{name:'data',index:'dataText', width:40, align:"middle", sortable:false, editable:true, edittype: 'text'},
{name:'position',index:'position', width:5,editable:true, sortable: false, edittype:'text'},
{name:'alignment',index:'alignment',width:5,editable:true, sortable: false,edittype:'text'},
{name:'warnings',index:'warnings',hidden: true, formatter: warnings},
{name:'errors',index:'errors',hidden: true, formatter: errors},
],
//pager: '#packagePager',
datatype: "local",
width: 700,
height: 800,
data: my.caption_data.rows,
localReader: {
id: "rowid",
repeatitems: true
},
rowNum: length,
viewrecords: true,
cellsubmit:'clientArray',
rownumbers:true,
hoverarrows: true,
multiselect: true,
cellEdit: false,
scrollrows : true,
multiboxonly:true,
autoencode:true,
});
I read a previous post and it seems like i can pass in "undefined" as the rowid. The problem is I want to have the ids sorted correctly. So if I insert a row after rowid of 7, the new row should have rowid of 8 and the rest should all be pushed back by one. Is this possible with jqGrid?
I have a jqgrid. I need to pull the json data from jqgrid after the client sorted the grid. Pulled json data should be the sorted version and not the original. How can I do this?
Here is my jqgrid source
jQuery("#myGrid").jqGrid({
datastr: jsonData,
datatype: 'jsonstring',
jsonReader: { repeatitems: false, root: function(obj) { return obj; }},
colNames: [ 'Column 1',
'Column 2'],
colModel: [
{ name: 'prop1', index: 'prop1'},
{ name: 'prop2', index: 'prop2'},
],
headertitles: true,
sortable: true,
pginput: true,
rownumbers: true,
rowNum: 5,
rowList: [5,20, 100, 10000],
pager: '#pager',
width:'600',
height:'300',
shrinkToFit:false,
viewrecords: true,
loadonce: true
});
Currently when I alert(jsonData) in the gridComplete it shows the original json data and not the sorted one.
For those who come across this problem, you can just take the data parameter passed to the loadComplete event of jqGrid. This data is the sorted version of the grid's data source.
I have a jqgrid with inline client-side search. When the database returns 0 records I am trying to hide the grid and show a custom message. The problem is that now when I use the filters the same thing happens. I need to get the number of rows from the back-end response and none of the below lines work. When the page loads I get 5 and 5, and when I filter I get 0 and 0. How can this be achieved?
.jqGrid('getGridParam', 'records')
.jqGrid('getGridParam', 'reccount')
var contratsAC=$("#ContratsAC");
contratsAC.jqGrid({
url:'<?php echo base_url().'rest/AC_Rest/get_contrats/'?>',
mtype : "post",
datatype: "json",
colNames:['Nr dossier','Type','Nom','Statut','Date creation','Date derniere maj','Commentaires','Auteur'],
colModel:[
{name:'nr_dossier',index:'nr_dossier',search:false, align:"center"},
{name:'type',index:'type',search:false, align:"center"},
{name:'nomClient',index:'nomClient',search:false, align:"center"},
{name:'statut',index:'statut',search: true, sortable: false, width:180, stype:'select',
searchoptions:{ value:statuts}, editable: false},
{name:'date_cre',index:'date_cre',search:false, align:"center"},
{name:'dern_date_maj',index:'dern_date_maj',search:false, align:"center"},
{name:'commentaires',index:'commentaires',search:false, align:"center"},
{name:'auteur',index:'auteur',search:false, align:"center"}
],
rowNum:10,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "nr_dossier",
userdata: "userdata"
},
width: 960,
height: "100%",
rowList:[10,20,30],
pager: '#pager1',
sortname: 'nr_dossier',
viewrecords: true,
rownumbers: true,
gridview: true,
loadonce: true,
loadComplete: function(data){
alert(contratsAC.jqGrid('getGridParam', 'records'));
alert(contratsAC.jqGrid('getGridParam', 'reccount'));
if (0==contratsAC.jqGrid('getGridParam', 'records'))
{
contratsAC.jqGrid('GridUnload');
$("#contratsACNoDataMessage").html('<span>Aucun enregistrement a afficher.</span>');
}
else $("#ContratsACContainer").show();
},
pagination:true,
}).navGrid('#pager1',
{add: false,
edit:false,
del:false});
contratsAC.jqGrid('filterToolbar',{searchOnEnter:true,stringResult: true});
You may try getting the length of the data array holded by the grid:
$("#ContratsAC").jqGrid('getGridParam', 'data').length;
The below will give you all the rows - initial data source based
contratsAC.jqGrid('getGridParam', 'records');
To get the number of rows on the current page, lets say after filtering, use
contratsAC.jqGrid('getGridParam', 'reccount');
To get all the records across all pages after filtering, use below
loadComplete: function (gridData) {
var isSearchPerformed = $grid.getGridParam("postData")._search;
if (isSearchPerformed) {
$("#spanFilterTotal").text(gridData.records);
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jqgrid client side sorting with server side paging - data disappears
I have a jqGrid and trying to enable client side sorting w/ server side paging. Client side sorting will work if loadonce:true but paging will not work.
If loadonce:false and I try to sort, the data disappears from the grid. Any ideas what I am missing?
jQuery("#grid").jqGrid({
url: getUrl(), // url w/ querystring params
datatype: 'json',
mtype: "GET",
colNames: ['Name', 'Title', 'Office'],
colModel:
[
{ name: 'Employee.EmployeeName', index: 'Employee.EmployeeName', sortable: true, sorttype: 'text' },
{ name: 'Employee.EmployeeTitle', index: 'Employee.EmployeeTitle', sortable: true, sorttype: 'text'},
{ name: 'Employee.EmployeeOffice', index: 'Employee.EmployeeOffice', sortable: true, sorttype: 'text' }
],
width: 600,
height: 'auto',
scrollOffset: 0,
rowNum: 5,
pager: jQuery("#pager"),
rowList: [10, 25, 50],
sortname: 'Employee.EmployeeName',
sortorder: "asc",
loadtext: "Loading....",
emptyrecords: "No records to view",
//loadonce: true, // client side sorting works but paging doesn't work
sortable: true,
viewrecords: true,
jsonReader: {
repeatitems: false
},
loadComplete: function () {
jQuery("#grid").jqGrid('setGridParam', { datatype: 'local' });
jQuery("#grid").trigger("reloadGrid");
},
onPaging: function () {
jQuery("#grid").jqGrid('setGridParam', { datatype: 'json' });
}
});
In my experience, if you do anything server side in JQGrid using JQGrid events, you have to recreate the data on the server and rebind it to JQGrid control. The means you will have to capture the sorting information and account for that as well. The Trirand forums ( http://www.trirand.net/forum/ ) are monitored by the authors of JQGrid. You may get better help there.
Client side sorting will work if loadonce:true but also paging will work fine .
$(document).ready(function() {
$("#user-list").jqGrid({
datatype: "local",
height: "auto",
autowidth: true,
ignoreCase: true,
colNames: ['Emp Id', 'First Name', 'Last Name'],
colModel: [
{name:'emp_id', index:'emp_id', width:55, sorttype:"int"},
{name:'first_name',index:'first_name', width:160, sorttype:"text"},
{name:'last_name',index:'last_name', width:160, sorttype:"text"},
],
pager: '#user-list-pager',
rowNum:10,
rowList:[10,25,50,100],
sortname: 'first_name',
sortorder: 'asc',
viewrecords: true,
caption: 'Users',
data:<%= raw #users_jqgrid_data.to_json %>
});
jQuery("#user-list").jqGrid('navGrid','#user-list-pager',{del:false,add:false,edit:false},{},{},{},{multipleSearch:true});
} );
I just tried a smallcode an paging and sorting works fine here.hope it helps
Thanx