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#
Related
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 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.
$j(document).ready(function () {
$j.ajax({
type: "GET",
url: "http://localhost:9611/api/Master/GetBackendUsersList",
contentType: "json",
dataType: "json",
success: function (data) {
var dataList;
var StatusList = '';
$j('#list2').jqGrid({
caption: "Users Details",
data: data,
datatype: "local",
height: '100%',
width: '100%',
colNames: ["UserName", "RoleId", "Name", "RoleName", "LoginId"],
colModel: [
{ name: "UserName", index: 'UserName', editable: true },
{ name: 'RoleId', index: "RoleId", hidden: true, width: 150, editable: true },
{ name: "Name", index: "Name", editable: true },
{
name: "RoleName", index: "RoleName", editable: true, edittype: 'select', editoptions: {
dataInit: function (element)
{
$j.ajax({
type: "GET",
url: "http://localhost:9611/api/Master/GetRoles",
contentType: "json",
dataType: "json",
success: function (mydata) {
dataList = mydata;
for (var i = 0; i < dataList.length; i++) {
//if (StatusList == "")
// StatusList = dataList[i].RoleId + ":" + dataList[i].RoleName;
//else
StatusList = StatusList + dataList[i].RoleId + ":" + dataList[i].RoleName+ ';' ;
}
}
});
},
value: "0:Select;" + StatusList,
}
},
{ name: 'LoginId', index: "LoginId", hidden: true, width: 150 }
],
gridview: true,
rowNum: 5,
rowList: [5, 10, 15],
pager: '#jQGridDemoPager',
sortname: "UserName",
viewrecords: true,
sortorder: "desc",
//width: '100%',
//height: '100%',
shrinkToFit: false,
editurl: SiteUrl + "api/Master/UpdateBackendUserDetails/" ,
});
$j.extend(true, $j.jgrid.edit, {
recreateForm: true,
beforeShowForm: function ($jform) {
$jform.closest(".ui-jqdialog").position({
of: window, // or any other element
my: "center center",
at: "center center"
});
}
});
$j('#list2').jqGrid('navGrid', '#jQGridDemoPager',
{
add: false,
search: false,
recreateForm: true,
beforeShowForm: function ($jform) {
$jform.find(".FormElement[readonly]")
.prop("disabled", true)
.addClass("ui-state-disabled")
.closest("LoginId")
.prev(".CaptionTD")
.prop("disabled", true)
.addClass("ui-state-disabled");
},
},
{ recreateForm: true }
);
}
});
});
Dropdown data from api is like:
[{"RoleId":1,"RoleName":"Administrator"},{"RoleId":2,"RoleName":"Sales"},{"RoleId":3,"RoleName":"Secretory/President"},{"RoleId":4,"RoleName":"Apartment Owner"},{"RoleId":5,"RoleName":"Apartment User"}]
Use this way :
editoptions:{value: getData()}
and then create one method
function getData(){
var states = [{"RoleId":1,"RoleName":"Administrator"},{"RoleId":2,"RoleName":"Sales"},{"RoleId":3,"RoleName":"Secretory/President"},{"RoleId":4,"RoleName":"Apartment Owner"},{"RoleId":5,"RoleName":"Apartment User"}];
return states;
}
In your case you need to add ajax call in getData() and return values/array which has been created by the result.
I am new to jqGrid and need some help on form add/edit/delete functionality. Havent found any relevant resources so far. My grid is displaying pop up on add/edit, also populating data on clicking edit, however I am not sure what should be javascript code to invoke the Web api to POST/PUT/DELETE the data.
Details below:
JSON data:
[{"Id":1,"BankId":2,"BankName":"State bank","EmployeeId":2539,"EmployeeName":"John C.","JoiningDate":"2005-07-05T00:00:00","SalaryAmount":50000.0,"Comments":""},
{"Id":2,"BankId":2,"BankName":"State bank","EmployeeId":2232,"EmployeeName":"xxx","JoiningDate":"2001-12-23T00:00:00","SalaryAmount":30000.0,"Comments":"test"},
{"Id":3,"BankId":4,"BankName":"National bank","EmployeeId":2322,"EmployeeName":"yyyy","JoiningDate":"2002-09-23T00:00:00","SalaryAmount":90000.0,"Comments":""},
{"Id":4,"BankId":3,"BankName":"Punjab bank","EmployeeId":2432,"EmployeeName":"ppp","JoiningDate":"2003-01-31T00:00:00","SalaryAmount":60000.0,"Comments":" "},
{"Id":5,"BankId":1,"BankName":"Bank of Maharashtra","EmployeeId":2892,"EmployeeName":"zzz y.","JoiningDate":"2000-10-11T00:00:00","SalaryAmount":80000.0,"Comments":"test 2"}
]
Javascript for jqGrid:
jQuery(document).ready(function () {
jQuery("#employeeSalarysGrid").jqGrid({
height: 250,
url: 'http://localhost:50570/api/Test/GetEmployeeSalaries',
mtype: "GET",
contentType: "application/json; charset=utf-8",
datatype: "json",
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; },
id: "0",
cell: "",
repeatitems: false
},
datatype: "json",
colNames: ['Id', 'Bank Name', 'Employee name', 'Joining date', 'Salary amount', 'Comments'],
colModel: [
{ name: 'Id', align: "center", hidden:true},
{ name: 'BankName', align: "center", editable: true },
{ name: 'EmployeeName', align: "center", editable: true },
{ name: 'JoiningDate', align: "center", editable: true },
{ name: 'SalaryAmount', align: "center", editable: true },
{ name: 'Comments ', align: "center", editable: true }
],
gridview: true,
autoencode: true,
ignorecase: true,
loadonce: true,
sortname: "InstallmentDate",
sortorder: "asc",
viewrecords: true,
rowNum: 10,
rowList: [10, 15, 20],
pager: '#employeeSalarysPager',
caption: "Employee Salary list"
});
$("#employeeSalarysGrid").jqGrid('navGrid', '#employeeSalarysPager',
{
add: true,
edit: true,
del: true
},
editOption,
addOption,
delOption);
var editOption =
{
width: 400, height: 290, left: 20, top: 30,
reloadAfterSubmit: false, jqModal: false, editCaption: "Edit Record",
bSubmit: "Submit", bCancel: "Cancel", closeAfterEdit: true,
mtype: "POST",
url: 'http://localhost:50570/api/Test/'
};
var addOption = {
width: 400, height: 290, left: 20, top: 30,
reloadAfterSubmit: false, jqModal: false, addCaption: "Add Record",
bSubmit: "Submit", bCancel: "Cancel",
closeAfterAdd: true,
mtype: "PUT",
url: 'http://localhost:50570/api/Test/'
};
var delOption = {
caption: "Delete",
msg: "Delete selected record(s)?",
bSubmit: "Delete", bCancel: "Cancel",
mtype: "DELETE",
url: 'http://localhost:50570/api/Test/'
};
});
Server side API signatures:
public HttpResponseMessage Post(int id, DTOTest value)
public HttpResponseMessage Put(DTOTest value)
public HttpResponseMessage Delete(int id)
Please let me know what is wrong with the code. Methods are not getting invoked. Am i missing anything in html code for jqGrid, OR are the signatures on server code needs to be modified?
Looking forward for some pointers.
Many thanks,
Abhilash
`var URL = 'rest/book';`
...
var delOptions = {
onclickSubmit: function(params, postdata) {
params.url = URL + '/' + postdata;
}
};
you mean this?
it might need "editurl" in your grid instead of "url" in the del(add/edit)Option,like this:
...
height: 250,
editurl: 'http://localhost:50570/api/Test/',
url: 'http://localhost:50570/api/Test/GetEmployeeSalaries',
mtype: "GET",
contentType: "application/json; charset=utf-8",
...
Have a try ?
You need to add URL parameter in your editOption, addOption, deleteOption
var editOption = {
width:400,
height:290,
left:20,
top:30,
reloadAfterSubmit:false,
jqModal:false,
editCaption: "Edit Record",
bSubmit: "Submit",
bCancel: "Cancel",
closeAfterEdit:true,
url:'http://localhost:50570/api/Test/EditEmployee'
};
var addOption = {
width:400,
height:290,
left:20,
top:30,
reloadAfterSubmit:false,
jqModal:false,
addCaption: "Add Record",
bSubmit: "Submit",
bCancel: "Cancel",
closeAfterAdd:true,
url:'http://localhost:50570/api/Test/AddEmployee'
};
var delOption = {
caption: "Delete",
msg: "Delete selected record(s)?",
bSubmit: "Delete",
bCancel: "Cancel",
url:'http://localhost:50570/api/Test/DeleteEmployee'
};
I created a grid and one of my column has a custom button in each row. When I click the button my click event is not invoked.
My jqgrid:
$('#QuoteLineTable').jqGrid({
url: $('#url').val(),
datatype: 'json',
type: 'POST',
postData: { Id: $("#Id").val() },
colNames: ['Id', 'Quote Number', 'Valid Until Date','View Line Item'],
colModel: [
{ name: "QuoteLineId", index: "QuoteLineId", hidden: false, hidedlg: true },
{ name: 'QuoteNumber', index: "QuoteNumber" },
{ name: 'ValidUntil', formatter: "date", formatoptions: { newformat: "d/m/Y" }, width: '100px' },
{ name: 'View Line Item', formatter: viewLineBtn }
],
multiselect: true,
emptyrecords: "No Quote Line to view",
gridview: true,
autoencode: true,
loadtext: "Loading...",
loadonce: true,
rowNum: 3,
rowList: [10, 20, 30],
pager: '#LinePager',
height: '100%',
caption: "Quote List",
autowidth: true,
sortname: 'QuoteNumber',
ajaxGridOptions: { type: 'POST', contentType: "application/json; charset=utf-8" },
jsonReader: {
repeatitems: false,
root: "rows",
page: "page",
total: "totalPages",
records: "totalRecords",
id: "QuoteLineId"
},
serializeGridData: function(postData) {
return JSON.stringify(postData);
},
onCellSelect: function(rowid,e) {
alert("rowid=" + rowid );
},
ondblClickRow: function(rowid) {
var $model = $('#LineItemMyModal');
$.ajax({
type: "GET",
url: $('#urlItemDetails').val(),
data: { LineId: rowid },
success: function(r) {
$model.html(r);
$model.modal('show');
}
});
}
}).navGrid('#QuoteLinePager', { edit: false, add: false, del: false, search: true });
function viewLineBtn(cellvalue, options, rowObject) {
return "<button class=\"viewLineItem\">View Line Item</button>"
};
$('.viewLineItem').click(function (rowId) {
alert("hi");
alert(rowId);
});
Basically I am not sure how to call the click event for button class= viewLineItem.
I tried to use onCellSelect or beforeSelectRow event but I also need to use ondblClickRow to populate a modal. So I am looking for other options without using oncellSelect.
Try something like this.
$('#QuoteLineTable').jqGrid({
url: $('#url').val(),
datatype: 'json',
type: 'POST',
postData: { Id: $("#Id").val() },
colNames: ['Id', 'Quote Number', 'Valid Until Date','View Line Item'],
colModel: [
{ name: "QuoteLineId", index: "QuoteLineId", hidden: false, hidedlg: true },
{ name: 'QuoteNumber', index: "QuoteNumber" },
{ name: 'ValidUntil', formatter: "date", formatoptions: { newformat: "d/m/Y" }, width: '100px' },
{ name: 'View Line Item', formatter: viewLineBtn }
],
multiselect: true,
emptyrecords: "No Quote Line to view",
gridview: true,
autoencode: true,
loadtext: "Loading...",
loadonce: true,
rowNum: 3,
rowList: [10, 20, 30],
pager: '#LinePager',
height: '100%',
caption: "Quote List",
autowidth: true,
sortname: 'QuoteNumber',
ajaxGridOptions: { type: 'POST', contentType: "application/json; charset=utf-8" },
jsonReader: {
repeatitems: false,
root: "rows",
page: "page",
total: "totalPages",
records: "totalRecords",
id: "QuoteLineId"
},
serializeGridData: function(postData) {
return JSON.stringify(postData);
},
onCellSelect: function(rowid,e) {
alert("rowid=" + rowid );
},
ondblClickRow: function(rowid) {
var $model = $('#LineItemMyModal');
$.ajax({
type: "GET",
url: $('#urlItemDetails').val(),
data: { LineId: rowid },
success: function(r) {
$model.html(r);
$model.modal('show');
}
});
}
}).navGrid('#QuoteLinePager', { edit: false, add: false, del: false, search: true });
function viewLineBtn(cellvalue, options, rowObject) {
var rowid= options.rowid;
var button = "<button class=\"viewLineItem\" id="+ rowid+">View Line Item</button>"
$('#' + rowid).die();
$('#' + rowid).live('click', function (rowId) {
alert("hi");
alert(rowId);
});
};
It works for me:
$('#QuoteLineTable').jqGrid({
....
colModel: [
...
{ name: 'View Line Item', formatter: viewLineBtn }
]
loadComplete: function (data) {
console.log(data); // You can view the object
let rowDataArray = data.rows;
for (let i = 0, j = rowDataArray.length; i < j; i++)
{
let temp = rowDataArray[i];
$("#btn_" + temp.id).click(() => {
m_alert(temp.content);
});
}
}
});
function viewLineBtn(cellvalue, options, rowObject)
{
return "<button id='btn_" + rowObject.id + "'>View Line Item</button>"
}