I have implemented the autocomplete filter functionality in my jqGrid.
However this is not working, I believe there are 2 issues.
I have a column which uses a formatter. With this column included, the filtering will not trigger a load at all. Without this column, the filtering will trigger a load, however will not filter the results.
I have read that the index or jsonmap must be the same as the name in the colModel in order for filtering to work. I have ensured that these match, still with no luck.
Code:
loadData: function (someData) {
$(model.table).GridUnload();
$(model.table).jqGrid({
url: $(model.tableURL).val(),
datatype: 'JSON',
mtype: 'POST',
postData: {
someData: someData
},
emptyrecords: 'No Wholesalers',
viewrecords: true,
autowidth: true,
shirnkToFit: false,
rowNum: -1,
loadtext: 'Loading...',
multiselect: false,
width: "100%",
height: "100%",
colModel: [
{ label: 'Wholesaler', name: 'WholesalerName', jsonmap: 'WholesalerName', sortable: false, align: 'center', width: '250' },
{
label: 'Amount Complete', name: 'PercentageComplete', jsonmap:'PercentageComplete', search: false, sortable: false, align: 'center',
formatter: function (cellvalue, options, rowObj) {
return '<div class="progress progress-striped pos-rel" data-percent="' + rowObj.PercentageComplete + '%">' +
'<div class="progress-bar progress-bar-success" style="width:' + rowObj.PercentageComplete + '%;"></div></div>';
}
},
{ label: 'No of Customers', name: 'NoOfCustomers', jsonmap: 'NoOfCustomers', search: false, sortable: false, align: 'center' },
{ label: 'Last Updated', name: 'LastUpdated', jsonmap: 'LastUpdated', search: false, sortable: false, align: 'center' },
{ label: 'Last Update By', name: 'LastUpdateBy', jsonmap: 'LastUpdateBy', search: false, sortable: false, align: 'center' },
],
altrows: true,
loadComplete: function () {
var table = this;
//model.update()
},
loadError: function (xhr, st, err) {
alert(err);
}
}
).jqGrid('filterToolbar', {
stringResult: true, searchOnEnter: false, ignoreCase: true,
})
},
Turns out I didn't have loadonce: true set.
Therefore when filtering on keypress, the grid was being reloaded and re populated with data from the server.
Related
I'm trying to call a function from code behind in script. That function i just returning list of employee
i'm just trying not to use grid view.
I just copy the code in at the same project and changes the names of function and the name inside the colModel: []
here's my script:
function loadMoretha60grid() {
$('#timesheetgrid').jqGrid("GridUnload");
getmoreThan60(function (data) { loadTimesheetTableMoeretha60(data); });
}
function loadTimesheetTableMoeretha60(timelog) {
var lastsel;
var startpage = 1;
$('#timesheetgrid').jqGrid({
datatype: 'local',
data: timelog,
editurl: 'clientArray',
colNames: ['CompanyID', 'EMPName', 'START_DATE', 'END_DATE',
'TOTALHOURS'],
colModel: [
{ name: 'CompanyID', index: 'CompanyID', editable: 'false', align: 'center', width: '150', sortable: false, },
{ name: 'EMPName', index: 'EMPName', editable: 'false', align: 'center', width: '275', resizable: false },
{ name: 'START_DATE', index: 'START_DATE', editable: 'false', align: 'center', width: '175', resizable: false },
{ name: 'END_DATE', index: 'END_DATE', editable: 'false', align: 'center', width: '175', resizable: false },
{ name: 'TOTALHOURS', index: 'TOTALHOURS', editable: 'false', align: 'center', width: '175', resizable: false },
],
pager: '#timesheetgridpager',
viewrecords: true,
forceFit: false,
shrinkToFit: false,
width: '1000',
emptyrecords: "No Record/s found",
loadtext: "Loading",
rowList: [5, 10, 20, 50],
height: 'auto',
caption: 'Timesheet Listing'
});
$('#timesheetgrid').jqGrid('navGrid', '#timesheetgridpager', {
edit: false,
save: false,
add: false,
cancel: false,
del: false,
search: false,
refresh: false
});
$('#timesheetgrid').jqGrid('inlineNav', '#timesheetgridpager', {
add: false,
edit: false,
save: false,
cancel: false,
restoreAfterSelect: false
});
}
function getmoreThan60(callback) {
var timelog = [],
params = {
name: $('#empnamebox').val(),
dateStart: '2019-09-01',
dateEnd: '2019-09-29'
};
showLoadingGif();
$.ajax({
async: true,
type: 'POST',
contentType: 'application/json',
url: baseUrl + 'Timesheet.aspx/getMore60hrs',
data: JSON.stringify(params),
dataType: 'json',
success: function (data) {
timelog = data.d;
hideLoadingGif();
if (typeof callback != 'undefined')
callback(timelog);
},
error: function (xhr, status, error) {
console.log(xhr, status, error);
hideLoadingGif();
}
});
}
here's my method
[WebMethod]
public static void getMore60hrs(string name,string dateStart,string dateEnd) {
TDKDataAccessLayer dataAcc = new TDKDataAccessLayer();
List<morethan> records = new List<morethan>();
dataAcc.DepartID = Convert.ToInt32(DeptID);
dataAcc.Name = name;
dataAcc.DateStart = dateStart;
dataAcc.DateEnd = dateEnd;
records = dataAcc.MoreThan60hrs();
}
By the way
I don't know what to do about this because i came from windows form c#
I have a jqGrid that loads fine and the drop down loads fine as well but I'm not sure hot to go about updating(loading) the second dropdown based on the first dropdown's onchange event.
Here is my grid. As you can see I load countries but now I would like to load the available currencies based on the selected country.
$("#jqgrid").jqGrid
({
url: '#Url.Action("GetSupplierData", "Maintenance")',
datatype: 'json',
mtype: 'Get',
//table header name
colNames: [
'Id', 'Code', 'Name', 'Account Number', 'Contact Person', 'Contact Number',
'Email', 'Address', 'Country', 'Currency', 'InsertUserId',
'InsertDateTime', 'InsertUserName', 'UpdateUserId', 'UpdateDateTime', 'UpdateUserName'
],
//colModel takes the data from controller and binds to grid
colModel: [
{
key: true,
hidden: true,
name: 'id',
index: 'id',
editable: true
}, {
key: false,
name: 'code',
index: 'code',
editable: true
}, {
key: false,
name: 'name',
index: 'name',
editable: true
}, {
key: false,
name: 'accountnumber',
index: 'accountnumber',
editable: true
}, {
key: false,
name: 'contactperson',
index: 'contactperson',
editable: true
}, {
key: false,
name: 'contactnumber',
index: 'contactnumber',
editable: true
}, {
key: false,
name: 'email',
index: 'email',
editable: true
}, {
key: false,
name: 'address',
index: 'address',
editable: true
}, {
key: false,
name: 'countryId',
index: 'countryId',
editable: true,
edittype: 'select',
editoptions: {
dataInit: function(element) {
$.ajax({
url: '#Url.Action("GetCountries", "Maintenance")',
dataType: 'json',
type: 'POST',
success: function(response) {
var array = response;
if (array != null) {
var i;
for (i in array) {
if (array.hasOwnProperty(i)) {
if (ctyId == array[i].id) {
$(element).append("<option value=" + array[i].id +" selected>" + array[i].name +"</option>");
} else {
$(element).append("<option value=" + array[i].id + ">" + array[i].name + "</option>");
}
}
}
}
}
});
},
dataEvents:
{
type: 'change',
fn: function (e) {
}
}
},
editrules: { required: true, integer: true }
}, {
key: false,
name: 'currencyId',
index: 'currencyId',
editable: true
}, {
key: false,
hidden: true,
name: 'insertUserId',
index: 'insertUserId',
editable: true
}, {
key: false,
hidden: true,
name: 'insertDateTime',
index: 'insertDateTime',
editable: true
}, {
key: false,
hidden: true,
name: 'insertUserName',
index: 'insertUserName',
editable: true
}, {
key: false,
hidden: true,
name: 'updateUserId',
index: 'updateUserId',
editable: true
}, {
key: false,
hidden: true,
name: 'updateDateTime',
index: 'updateDateTime',
editable: true
}, {
key: false,
hidden: true,
name: 'updateUserName',
index: 'updateUserName',
editable: true
}
],
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
caption: 'Suppliers',
emptyrecords: 'No records to display',
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
pager: '#pjqgrid',
sortname: 'id',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
autowidth: true,
multiselect: false,
onSelectRow: function(id) {
var selRowId = $("#jqgrid").jqGrid('getGridParam', 'selrow');
ctyId = $("#jqgrid").jqGrid('getCell', selRowId, 'currencyId');
}
//pager-you have to choose here what icons should appear at the bottom
//like edit,create,delete icons
}).navGrid('#pjqgrid',
{
edit: true,
add: false,
del: true,
search: true,
refresh: true
},
{
// edit options
zIndex: 1000,
url: '#Url.Action("EditSupplier", "Maintenance")',
dataType: "html",
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function(response) {
$('#alerts').html(response.responseText);
}
},
{
// add options
},
{
// delete options
zIndex: 1000,
url: '#Url.Action("DeleteSupplier", "Maintenance")',
type: "POST",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this?",
afterComplete: function(response) {
$('#alerts').html(response.responseText);
}
});
This Guriddo of jqGrid example will point you in the right direction.
I have written a JQGrid which was working fine but I need to fill the sub grid based on the selected row of main grid. How can I get the selected row cell value to pass in the url of subgrid.
columns in the main grid ---- Id,Firstname,Lastname,Gender.
I need to get selected row of "Id" value.
Here is my script
$(document).ready(function () {
jQuery("#EmpTable").jqGrid({
datatype: 'json',
url: "Default1.aspx?x=getGridData",
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },
colNames: ['PID', 'First Name', 'Last Name', 'Gender'],
colModel: [
{ name: 'PID', width: 60, align: "center", hidden: true, searchtype: "integer", editable: true },
{ name: 'FirstName', width: 180, sortable: true, hidden: false, editable: true, sorttype: 'string', searchoptions: { sopt: ['eq', 'bw']} },
{ name: 'LastName', width: 180, sortable: false, hidden: false, editable: true },
{ name: 'Gender', width: 180, sortable: false, hidden: false, editable: true, cellEdit: true, edittype: "select", formater: 'select', editrules: { required: true, edithidden: true }, editoptions: { value: getAllSelectOptions()}}],
loadonce: true,
pager: jQuery('#EmpPager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true,
sortname: 'PID',
sortorder: "asc",
height: "100%",
editurl: 'Default1.aspx?x=EditRow',
subGrid: true,
// subGridUrl: 'Default1.aspx?x=bindsubgrid',
subGridRowExpanded: function (subgrid_id, row_id) {
// var celValue = jQuery('#EmpTable').jqGrid('getCell', rowId, 'PID');
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("");
jQuery("#" + subgrid_table_id).jqGrid({
url: "Default1.aspx?x=bindsubgrid&PID=" + row_id + "",
datatype: "json",
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },
colNames: ['PID', 'First Name', 'Last Name', 'Gender'],
colModel: [
{ name: 'PID', width: 60, align: "center", hidden: true, searchtype: "integer", editable: true },
{ name: 'FirstName', width: 180, sortable: true, hidden: false, editable: true, sorttype: 'string', searchoptions: { sopt: ['eq', 'bw']} },
{ name: 'LastName', width: 180, sortable: false, hidden: false, editable: true },
{ name: 'Gender', width: 180, sortable: false, hidden: false, editable: true, cellEdit: true, edittype: "select", formater: 'select', editrules: { required: true, edithidden: true }, editoptions: { value: getAllSelectOptions()}}],
loadonce: true,
rowNum: 5,
rowList: [5, 10, 20, 50],
pager: pager_id,
sortname: 'PID',
sortorder: "asc",
height: '100%'
});
jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
}
})
Please help to find the cell value.
Thanks
purna
If 'PID' column contains unique value which can be used as the rowid then you should add key: true in the definition of the 'PID' column in colModel. jqGrid will assign id attribute of <tr> elements (the rows of the grid) to the value from 'PID' column. After that row_id parameter of subGridRowExpanded will contain the value which you need and you will don't need to make any additional getCell call.
Additional remark: I strictly recommend you to use idPrefix parameter for subgrids and probably for the grids. In the case jqGrid will use the value of id attribute which have the specified prefix. If will allow to solve conflicts (id duplicates in HTML page). Currently you can have the same rowids for the rows of subgrids and to the rows of the main grid. See here more my old answers on the subject.
I'm loading the JQgrid from the external Ajax call. I'm expecting my JQgrid to set the values with the edit fields once i pass my Array object.
I have tried all the ways which i found in google, but no luck.
Can someone point me where i'm making mistake ?
var grid = $("#JobGrid").jqGrid({
datatype: "json",
colNames: ['Product Name', 'Product ID', 'ProdTypeAvail', 'Piece/Sheet', 'Type', 'Pages', 'Copies', 'ExtraCharges', '', ''],
colModel: [
{ name: 'strProductName', index: 'strProductName', editable: true, edittype: 'text' },
{ name: 'strProductID', index: 'strProductID', editable: true, hidden: true, editrules: { edithidden: true } },
{ name: 'strProdTypeAvail', index: 'strProdTypeAvail', editable: true, hidden: true, editrules: { edithidden: true } },
{ name: 'iPiecesPerSheet', index: 'ipieces', editable: true, edittype: 'text', formatter: TrimZero },
{ name: 'strProductType', index: 'strProducttype', editable: true, edittype: 'select' },
{ name: 'iPages', index: 'iPages', editable: true, edittype: 'text', formatter: TrimZero },
{ name: 'iCopies', index: 'iCopies', editable: true, edittype: 'text', formatter: TrimZero },
{ name: 'dExtraCharge', index: 'dExtraCharge', editable: true, edittype: 'text', formatter: TrimZero },
{
name: 'Delete', label: 'Delete', title: 'Delete', width: 25, index: 'Delete', sortable: false,
formatter: function () {
return "<input type='button' value='del' />"
//return "<div><img src='http://icons.iconarchive.com/icons/hopstarter/button/16/Button-Delete-icon.png'/></div>"
}
},
{
name: 'Duplicate', width: 25, index: 'Duplicate', sortable: false,
formatter: function () {
return "<input type='button' value='dup' />"
//return "<div><img src='http://icons.iconarchive.com/icons/hopstarter/soft-scraps/16/File-New-icon.png'/></div>"
}
}
],
hidegrid: false,
autowidth: true,
shrinkToFit: true,
height: '100%',
scrollOffset: 0,
rowNum: -1,
jsonReader: { repeatitems: false},
rownumbers: true,
caption: "Job Details",
cellEdit: true,
cellsubmit: 'clientArray',
editurl: 'clientArray',
pager: '#JobGridpager',
localReader: { id: 'iRowID' },
....
My AJAX Call to load JQgrid
$j("#txtJobID").change(function () {
....
$j.ajax({
type: 'GET',
url: "http:/localhost:20/api/Job/GetFullJobDetails?Ary=" + JSON.stringify(obj),
dataType: 'json',
success: function (oJobdata) {
var oData = oJobdata.lstJobChildInfo;
grid.jqGrid('clearGridData');
grid.setGridParam({ data: oData });
grid[0].refreshIndex();
grid.trigger("reloadGrid");
...
My "oData" which I'm passing to my JQgrid...
[object1, object2]
Object1 :
dExtraCharge: 10
dJobDate: "0001-01-01T00:00:00"
iAddCopy: 0
iCopies: 4
iFirstCopy: 0
iPages: 1
iPiecesPerSheet: 0
iRowID: 1
iTotalCopy: 0
lstJobChildInfo: null
strAction: null
strCompanyID: "C01"
strCustomerID: null
strCustomerName: null
strJobID: null
strJobchdid: null
strMobile: null
strProdTypeAvail: "PT01-PT02-PT03"
strProductID: "P005"
strProductName: "Art 130 +3"
strProductType: "One Side"
strProductTypeID: "PT01"
strStatus: null
strUserName: null
proto: Object
Object2 :
dExtraCharge: 0
dJobDate: "0001-01-01T00:00:00"
iAddCopy: 0
iCopies: 4
iFirstCopy: 0
iPages: 2
iPiecesPerSheet: 2
iRowID: 2
iTotalCopy: 0
lstJobChildInfo: null
strAction: null
strCompanyID: "C01"
strCustomerID: null
strCustomerName: null
strJobID: null
strJobchdid: null
strMobile: null
strProdTypeAvail: "PT01-PT02-PT03"
strProductID: "P023"
strProductName: "Synthetic 125 Micron"
strProductType: "Diff Front And Back"
strProductTypeID: "PT02"
strStatus: null
strUserName: null
proto: Object
I have try setting,
iRowID as ID
jsonReader: { repeatitems: false},
grid[0].refreshIndex();
but still grid remains empty without any data :-(
I'd like to append data to jqgrid so when the user hits See more button, it loads additional data retrieved via JSON request.
Html
<div id="SeeMoreSearchResultsDiv" class="scroll" style="text-align: center;">
<div id="ancSearchResultsSeeMore" class="grayButton" style="float: left; left: 350px;"> <ul>
<li class="ltImg"></li>
<li>See more</li>
<li class="rtImg"></li>
</ul> </div>
</div>
Here's my Grid
jQuery("#SearchResultDataGrid").jqGrid({
url: updatedURL,
datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
jsonReader: {
id: "CTSID",
cell: "",
root: function (obj) { return obj.Results; },
page: function () { return 1; },
total: function (obj) { return obj.Count; },
records: function (obj) { return obj.length; },
repeatitems: false
},
colNames: ['CTS ID', 'Name', 'City', 'Type', 'Status', 'Platinum ID', 'RSM Group Code'],
colModel: [{ name: 'CTSID', index: 'CTSID', width: 40, align: "center" },{ name: 'CustomerName', index: 'CustomerName', width: 150, align: "center" }, { name: 'CityAndState', index: 'CityAndState', width: 90, align: "center" }, { name: 'CustomerTypeName', index: 'CustomerTypeName', width: 50, align: "center" }, { name: 'CustomerStatusName', index: 'CustomerStatusName', width: 50, align: "center" }, { name: 'PlatinumID', index: 'PlatinumID', width: 50, align: "center" },{ name: 'RSMGroupCode', index: 'RSMGroupCode', width: 100, align: "center" }],
pager: false,
rowNum: -1,
// rowList:[25,50,75,100],
sortorder: "asc",
autowidth: true,
viewrecords: true,
shrinkToFit: true,
rownumbers: false,
clearGridriData: false,
gridview: true,
caption: false});
and here's how I'm calling it
function seeMoreFunction() {
page = page + 1; updatedURL = updateSearchString(" "); refreshGrid();
}
function refreshGrid()
{ $('#SearchResultDataGrid').setGridParam({ url: null }); $('#SearchResultDataGrid').setGridParam({ url: updatedURL }); $('#SearchResultDataGrid').trigger('reloadGrid');
}
I verified JSON requests and they are correct but the problem is I'm not able to append to existing data. I've disabled clearGridData.
Any help would be appreciated.