I wrote a table with JqGrid, but I found every row`s property of table is "tr id = 0" Following is my code and screenshot. What caused this error? Any help will be appreciated.
jQuery(grid_selector).jqGrid({
datatype: "json",
url:"getAllUserInfo.do",
mtype: 'POST',
height: 250,
colNames: ['Operation', 'userID', 'UserName', 'FullName', 'Department', 'Role', 'Telephone', 'MobilePhone', 'Mail', 'Status'],
colModel: [
{name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,search:false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback},
onSuccess:function(respone){
var msg=respone.responseText;
if(msg=='success')
return true;
else
{
alert(msg);
return [false,msg];
}
},
editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback,}
}
},
{name: 'userID', index: 'userID', width: 60, sorttype: "int", editable:false, sortable:false, search:false, align:'center' },
{name: 'userName', index: 'userName', width: 100, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true},align:'center'},
{name: 'fullName', index: 'fullName', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"}},
{name: 'department', index: 'department', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"},editrules:{required:true}},
{name: 'role', index: 'role', width: 70, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']}, editrules:{required:true}},
{name: 'telephone', index: 'telephone', width: 70, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true,number:true}},
{name: 'mobilePhone', index: 'mobilePhone', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'mail', index: 'mail', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'status', index: 'status', width: 60, editable:true, edittype:"text", searchoptions:{sopt:['eq','ne']}}
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
multiselect: true,
multiboxonly: true,
onCellSelect:function(rowid, e){
},
gridComplete:function (){
$("#grid-table").closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-titlebar")
.css("text-align", "center").css("line-height","40px")
.children("span.ui-jqgrid-title")
.css("float", "none");
},
loadComplete: function () {
var table = this;
setTimeout(function () {
var msg= $("#grid-table").getGridParam('userData');
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
var re_records = $("#grid-table").getGridParam('records');
if(re_records == 0 || re_records == null){
if($(".norecords").html() == null){
$("#grid-table").parent().append("<div class=\"norecords\">No Records</div>");
}
$(".norecords").show();
}
else
{
$(".norecords").hide();
}
},
editurl:"userInfoOperate.do",
caption: "UserList",
autowidth: true,
});
Check it whether rows data has column with "id" as the name, just like the picture shows below. JqGrid will use the value of "id" column in rows data as the id value of tr tags, if it does have an id column in rows data.
Related
Hello as title above I have a problem that when I checked my checkedbox name ( $("#divLeaveIsHalfDay").click(function () ) that call the dialog box to open and contains my JQgrid name LeaveHalfDay.
function LeaveHalfDay() {
var url1 = URL;
$("#LeaveHalfDayDataEntryList").jqGrid({
url: url1,
datatype: 'json',
mtype: 'POST',
colNames: ['RowId', 'With Halfday <br /> Morning', 'With Halfday <br /> Afternoon', 'Date', 'Day'],
colModel: [
{ name: 'rowId', index: 'rowId', hidden: true, editable: true, sortable: false, width: 80, align: 'left' },
{name: 'cbox_leave_half', index: 'cbox_leave_half', editable: true, formatter: cboxFormatterLeaveHalfDay, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
{ name: 'cbox_leave_halfPM', index: 'cbox_leave_halfPM', editable: true, formatter: cboxFormatterLeaveHalfDayPM, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
{ name: 'LStartDate', index: 'LStartDate', editable: false, sortable: false, width: 70, align: 'left' },
{ name: 'LDate', index: 'LDate', editable: false, sortable: false, width: 55, align: 'left' }
],
pager: $('#LeaveHalfDayDataEntryPager'),
rowNum: 5,
rowList: [5, 10, 20],
sortname: '',
sortorder: '',
viewrecords: true,
imgpath: '/Content/themes/redmond/images/',
height: '100%',
loadComplete: function (result, rowid) {
var ids = jQuery("#LeaveHalfDayDataEntryList").getDataIDs();
var len = ids.length, newLine;
if (len < 5) {
AddNewRowToGrid(len, "#LeaveHalfDayDataEntryList");
}
}
});
return false;
}
I want to unchecked all checked, checked boxes upon showing of my dialog box.
This are my checked boxes cbox_leave_half and cbox_leave_halfPM in my grid. Thanks.
I'm using jQgrid to display data from database.
When click my button, I am getting this error :
length of colNmaes <>colModel or 0!
Here is my code:
$(document).ready(function () {
$('#btndist').click(function () {
$.ajax({
url:"default.aspx/loaddata",
datatype:"json",
data: "{}",
contentType: "application/json;charset=utf-8",
method:"POST",
success: function (result) {
result=result.d;
jQuery("#Distable").jqGrid({
datatype: "local",
colModel: [
{ name:"EmpID", index:"EmpID",width:80},
{ name:"EmpFisrtName", index:"EmpFisrtName", width: 80 },
{ name:"EmpLastName", index:"EmpLastName", width: 80 },
{ name:"EmailAddress", index:"EmailAddress", width: 80 },
{ name:"MobileNo", index:"MobileNo", width: 80 },
{ name:"CityName", index:"CityName", width: 80 }
],
data: JSON.parse(result),
rowNum: 10,
loadonce: true,
rowList: [5, 10, 20],
pager: '#DistPager',
viewrecords: true,
sortorder: 'asc',
gridview: true,
autowidth:true,
sortname: 'EmpName',
height:'auto',
altRows: true,
hoverrows: true,
caption:"List Employee Details"
});
},
error: function (error) {
alert("Oops an error");
}
});
});
});
Can any one tell me why I'm getting that error?
You have to add colNames like following.
colNames: ['Emp ID', 'Fisrt Name', 'Last Name', 'Email', 'Mobile No', 'City']
Which will show as column header.
Update: Remove ajax call, jqGrid can load data from url itself.
$(document).ready(function() {
$('#btndist').click(function() {
jQuery("#Distable").jqGrid({
url: "default.aspx/loaddata",
datatype: "json",
colNames: ['Emp ID', 'Fisrt Name', 'Last Name', 'Email', 'Mobile No', 'City'],
colModel: [
{ name: "EmpID", index: "EmpID", width: 80 },
{ name: "EmpFisrtName", index: "EmpFisrtName", width: 80 },
{ name: "EmpLastName", index: "EmpLastName", width: 80 },
{ name: "EmailAddress", index: "EmailAddress", width: 80 },
{ name: "MobileNo", index: "MobileNo", width: 80 },
{ name: "CityName", index: "CityName", width: 80 }
],
rowNum: 10,
loadonce: true,
rowList: [5, 10, 20],
pager: '#DistPager',
viewrecords: true,
sortorder: 'asc',
gridview: true,
autowidth: true,
sortname: 'EmpName',
height: 'auto',
altRows: true,
hoverrows: true,
caption: "List Employee Details"
});
});
});
That is because you have not added the colNames.
It is mandatory to match the count of columns with the entries in the colModel.
Following error is prompted majorly if the columns count is not equal to number of entries inside the colModel.
So in your case it should be like this.
colNames: ['Emp ID', 'Emp First Name', 'Emp Last Name', 'Email Address', 'Mobile No', 'City Name'],
colModel: [
{ name: "EmpID", index: "EmpID", width: 80 },
{ name: "EmpFisrtName", index: "EmpFisrtName", width: 80 },
{ name: "EmpLastName", index: "EmpLastName", width: 80 },
{ name: "EmailAddress", index: "EmailAddress", width: 80 },
{ name: "MobileNo", index: "MobileNo", width: 80 },
{ name: "CityName", index: "CityName", width: 80 }
],
I am working with JqGrid.
I have some JSON from server
[{"Id":1,"Name":"product1","Price":234,"Size":"Small"},{"Id":18,"Name":"product2","Price":3242,"Size":"Large"}]
and Jquery code
$("#table").jqGrid({
url: '#Url.Action("GetProductsAtJSON", "Product")',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Name', 'Price', 'Size'],
colModel: [
{ name: 'Id', index: 'Id', width: 55, key: true, editable: true, editoptions: { readonly: true }, sortable: true, search:true },
{ name: 'Name', index: 'Name', width: 150, editable: true, editoptions: { size: 25 }, editrules: { required: true }, search: true },
{ name: 'Price', index: 'Price', width: 100, align: 'center', editable: true, editoptions: { size: 25 }, editrules: { required: true, number: true, minValue: 1, maxValue: 10000 } },
{ name: 'Size', index: 'Size', width: 150, editable: true, edittype: "select", editoptions: { value: "0:Large;1:Medium;2:Small" } }
],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'Id',
sortorder: "asc",
viewrecords: true,
caption: 'All product',
height: '400',
jsonReader: {
repeatitems: false,
loadonce: true,
id: "Id",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
});
I have read the documentation and a lot of forums, but I don't understand why sorting and search doesn't work. Maybe my JSON format is incorrect and I must write total page records, but that's not working either. I use key: true from rows id, but it's not working.
What am I doing wrong?
There are some small errors in your code:
loadonce: true is jqGrid option and not the property of jsonReader
You should use sorttype property for columns which content should be interpreted not as a text. For example you should add sorttype: "integer" to the definition of 'Id' and 'Price' columns
I recommend you to consider whether the value editoptions: {value: "0:Large;1:Medium;2:Small"} is what you need. It will be important for edition only.
I recommend you additionally to use gridview: true to improve performance of the grid, use autoencode: true to interpret the values in JSON input as textes instead of HTML fragments and use height: 'auto' to have better look of the grid.
To have local searching of data you need either use navGrid or filterToolbar.
The demo is an example of fixing of your code.
I am using jqGrid plugin 4.6.0 with jQuery 1.11.0 to generate a report that needs the total in the summary. I was only able to generate the total grouped by column. jqGrid has a property called footerrow that is supposed to be the summary of the grid.
I need to place the total of the whole report in the FooterRow, but I was not able to do it.
$("#respostaRelatorio").jqGrid({
url: urlRelatorio + "?" + dadosRelatorio,
colModel: modeloColunas,
mtype: "POST",
altRows: true,
datatype: "json",
loadonce: true,
height: "auto",
width: 1130,
rowNum: 10,
rowList: [ 10, 20, 30, 40, 50 ],
viewrecords: true,
pager: "#paginacao",
sortorder: "asc",
shrinkToFit: false,
headertitles: true,
loadui: "disable",
rownumbers: true,
autoencode: true,
caption: "Resultados encontrados",
deselectAfterSort: true,
gridview: true,
idPrefix: "id",
rowTotal: 4000,
sortable: true,
toppager: true,
resizable: true,
grouping: true,
groupingView: {
groupField: [ 'loginMedico' ],
groupCollapse: false,
groupOrder: [ 'asc' ],
groupSummary: [ true ],
groupDataSorted: true
},
footerrow: true,
userDataOnFooter: true
});
var modeloColunas = [
{ name: "loginMedico", index: "loginMedico", jsonmap: "loginMedico", label: "Login Médico", sortable: true, sorttype: "text", summaryType: "count", summaryTpl: "total" },
{ name: "nomeMedico", index: "nomeMedico", jsonmap: "nomeMedico", label: "Nome do Médico", sortable: true, sorttype: "text" },
{ name: "perfilMedico", index: "perfilMedico", jsonmap: "perfilMedico", label: "Perfil Médico", sortable: true, sorttype: "text"},
{ name: "tipoSolicitacao", index: "tipoSolicitacao", jsonmap: "tipoSolicitacao", label: "Tipo da Solicitação", sortable: true, sorttype: "text" },
{ name: "cancelada", index: "cancelada", jsonmap: "cancelada", label: "Cancelada", sortable: true, sorttype: "int" },
{ name: "liberada", index: "liberada", jsonmap: "liberada", label: "Liberada", sortable: true, sorttype: "int", summaryType: "sum" },
{ name: "negada", index: "negada", jsonmap: "negada", label: "Negada", sortable: true, sorttype: "int", summaryType: "sum" },
{ name: "pendente", index: "pendente", jsonmap: "pendente", label: "Pendente", sortable: true, sorttype: "int", summaryType: "sum" },
{ name: "total", index: "total", jsonmap: "total", label: "Total", sortable: true, sorttype: "int", summaryTpl: "total"} ];
Crossposting (and translating) my answer on SO-PT (written in Portuguese):
Check out this example.
Basically, you need to add an loadComplete function to your jqGrid, it will be used to build the footerData:
loadComplete: function () {
var $self = $(this);
var sumCanceled = $self.jqGrid("getCol", "cancelada", false, "sum");
var sumReleased = $self.jqGrid("getCol", "liberada", false, "sum");
var sumDenied = $self.jqGrid("getCol", "negada", false, "sum");
var sumPending = $self.jqGrid("getCol", "pendente", false, "sum");
$self.jqGrid("footerData", "set", {
loginMedico: "Total:",
cancelada: sumCanceled,
liberada: sumReleased,
negada: sumDenied,
pendente: sumPending
});
}
Source: getting the sum using footerdata on jqgrid
i'm using jqgrid for listing data .now when ever i click search button i want to dynamically assign data to jqgrid which come from a controller action using ajax.but data still remains as the first load.any ideas?
$('#listatt').jqGrid({
datatype: 'local',
viewrecords: true,
sortname: 'RowNumber',
sortorder: 'desc',
cellsubmit: 'clientArray',
editurl: 'clientArray',
cellEdit: true,
data: mydata,
colNames: ['Sl.#', 'id', 'empid', 'Name', 'Code', 'Time', 'Status', 'Type', 'Reason'],
//columns model
colModel: [
{ name: 'RowNumber', index: 'RowNumber', align: 'left', editable: true, edittype: 'text', width: '35px' },
{ name: 'sl_No', index: 'sl_No', align: 'left', search: false, stype: 'text', searchoptions: { sopt: ['eq'] }, width: '10px', hidden: true },
{ name: 'emp_ID', index: 'emp_ID', align: 'left', editable: true, edittype: 'text', width: '35px', hidden: true },
{ name: 'emp_Name', index: 'emp_Name', align: 'left', search: false, stype: 'text', editable: false, searchoptions: { sopt: ['eq'] }, width: '200px' },
{ name: 'emp_Code', index: 'emp_Code', align: 'left', search: false, stype: 'text', editable: false, searchoptions: { sopt: ['eq'] }, width: '250px' },
{ name: 'attTime', index: 'attTime', template: dateTemplate
},
{ name: 'inOut', index: 'inOut', width: 100, editable: true, edittype: 'select', editoptions: { value: "0:Select;1:In;2:Out" }, hidden: true },
{ name: 'attType_ID', index: 'attType_ID', width: 100, formatter: "select", editable: true, edittype: 'select', editoptions: { value: "0:Absent;1:Present;2:Half Day"} },
{ name: 'attReasons', index: 'attReasons', width: 200, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10"} }
],
//pager for grid
pager: $('#pager'),
//number of rows per page
rowNum: 20,
rowList: [10, 20, 40, 80, 100],
viewrecords: true,
//grid height
height: '380px',
height: '500px',
shrinkToFit: true
});
--ajax call
$.ajax({
url: '#Url.Action("GetGridDataSequence")',
data: { branchID: $("#branchID").val(), divisionID: $("#divisionID").val(), shiftID: $("#shiftID").val(), chkout: $("#chkout").is(':checked'), attdate: $("#attdate").val() },
dataType: "json",
type: "POST",
error: function () {
alert("An error occurred.");
},
success: function (data) {
$('#listatt').jqGrid('setGridParam',
{
datatype: 'local',
data: data
})
.trigger("reloadGrid");
}
});
--controller
public string GetGridDataSequence(int branchID, int divisionID, int shiftID, Boolean chkout,DateTime attdate)
{
Attendence Attendence = new Attendence();
AttendenceInfo AttendenceInfo = new AttendenceInfo();
var dt = Attendence.AttendenceSelectAll(Convert.ToInt32(this.Session["CompanyID"]), branchID, divisionID, shiftID, attdate, chkout);
var jason = JsonConvert.SerializeObject(dt);
return jason;
}
Instead you can try something like this,
function loadGrid(data){
$('#listatt').jqGrid({
datatype: 'local',
data: data,
....
});
}
And in your ajax success function,
success: function (data) {
$("#listatt").jqGrid('GridUnload');
loadGrid(data);
}
I think you need change datatype of Grid from 'local' to 'json' and add property "url"
in my project (for example):
url: 'Home/ExpensesGet?DateFrom=' + getToday(-1),
//type of data
datatype: 'json',
//url access method type
mtype: 'GET',
....