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.
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 need help here.I have kendogrid, which need to have a popup.Popup is loading from template(view1.cshtml) and everything is working perfectly.But when i add search in my page, and than add following code
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
in rest of the code in grid(search results are bind here to grid),search is working, popup is not working nothing and is showing when i click on the button to show up popup.What is here wrong?Thanks
<script>
$(function() {
$("#jobs-grid").kendoGrid({
dataSource: {
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
schema: {
model: {
fields: {
JobNumber: { type: "string" },
CustomerId: { type: "number" },
JobCount: { type: "number" },
JobYear: { type: "number" },
Status: { type: "number" },
Position: { type: "number" },
Finished: { type: "boolean" },
HasInvoice: { type: "boolean" },
}
}
},
#*type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},*#
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
//dataBound: onDataBound,
columns: [
#*{
field: "Status",
title: "#T("gp.Jobs.Fields.Status")",
template: '#= Status #'
},*#
{
field: "JobNumber",
title: "#T("gp.Job.Fields.JobNumber")",
template: '#= JobNumber #'
},
{
field: "CustomerId",
title: "#T("gp.Job.Fields.Customer")",
template: '#= Customer.Name #'
},
{
field: "Id",
title: "#T("gp.Job.Fields.Name")"
},
#*{
field: "ShortDesc",
title: "#T("gp.Jobs.Fields.ShortDesc")"
},*#
{
field: "DateCompletition",
title: "#T("gp.Job.Fields.DateCompletition")"
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 130,
template: '#T("Common.Edit")'
}
],
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
// sortable: true,
// navigatable: true,
// filterable: true,
// scrollable: true,
selectable: true,
rowTemplate: kendo.template($("#jobRowTemplate").html()),
});
</script>
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 am trying to edit and save multiple rows from jqgrid. The getChangedCells is not returning any values.
The code is as below:
<style>
.hlabel{font-weight:bold;font-size:10pt;}
.hdata{font-size:10pt;}
</style>
<script>
//this is a formatter for showing images
function imageFormatter(cellvalue, options, rowObject) {
return "<img src='" + cellvalue + "'/>";
};
//this gets called on edit mode to display datepickers.
function onGridEdit(myRowID) {
$("#" + myRowID + "_booked").datepicker({ dateFormat: 'dd/mm/yy' });
$("#" + myRowID + "_vesselarrival").datepicker({ dateFormat: 'dd/mm/yy' });
$("#" + myRowID + "_vesseldock").datepicker({ dateFormat: 'dd/mm/yy' });
$("#" + myRowID + "_markdown").datepicker({ dateFormat: 'dd/mm/yy' });
// this will set focus on the Invested column so the datepicker doesn't fire
$("#" + myRowID + "_vesselname").get(0).focus();
}
$(function () {
var lastsel2
//creating the grid
$("#gditems").jqGrid({
url: 'handlers/items.ashx?id=' + PID,
datatype: "xml",
mtype: "POST",
colNames: ['Style', 'Altcode2', 'Colour', 'Group', '800', '999', 'Order', 'Received', 'Due', 'B/O', 'Image', 'Out/Full', 'Booked', 'Current', 'Slip', 'Arrival', 'Dock', 'Name', 'Freight', 'RRP', 'Mark Down', 'Sell', 'Cost'],
colModel: [
{ name: 'code1', index: 'code1', width: '50', sortable: true },
{ name: 'code2', index: 'code2', width: '30', sortable: true },
{ name: 'Due', index: 'Due', sorttype: 'integer', width: '20', sortable: false },
{ name: 'image', index: 'image', width: '30', formatter: imageFormatter, sortable: false },
{ name: 'booked', index: 'booked', width: '30', sortable: false, datefmt: "d/m/Y", editable: true, editrules: { date: true} },
{ name: 'date1', index: 'date1', width: '40' },
{ name: 'slip', index: 'slip', width: '30', sortable: false },
{ name: 'arrival', index: 'arrival', width: '30', sortable: false, datefmt: "d/m/Y", editable: true, editrules: { date: true} },
{ name: 'dock', index: 'dock', width: '30', sortable: false, datefmt: "d/m/Y", editable: true, editrules: { date: true} },
{ name: 'vname', index: 'vname', width: '30', sortable: false, editable: true },
{ name: 'price', index: 'price', sorttype: 'currency', width: '30', formatter: 'currency', formatoptions: { decimalPlaces: 2, prefix: "£"} },
{ name: 'date2', index: 'date2', width: '30', sortable: false, editable: true, datefmt: "d/m/Y", editrules: { date: true} },
{ name: 'price2', index: 'price2', sorttype: 'currency', width: '30', formatter: 'currency', formatoptions: { decimalPlaces: 2, prefix: "£"}}],
//saving into clientarray
onSelectRow: function (id) {
if (id && id !== lastsel2) {
jQuery("#gdpoitems").saveRow(lastsel2, false, 'clientArray');
jQuery('#gdpoitems').editRow(id, true, onGridEdit, null, 'clientArray');
lastsel2 = id;
}
},
editurl: "clientArray",
cellSubmit: 'clientArray',
rowNum: 20,
height: "100%",
autowidth: true,
rowList: [20, 30],
pager: jQuery('#pgitems'),
viewrecords: true,
sortorder: "asc",
caption: "",
loadonce: false
});
//adding buttons to the nav bar
jQuery("#gditems")
.navGrid('#pgitems', { edit: false, add: false, del: false, search: false }).navButtonAdd('#pgitems', {
caption: "Save",
buttonicon: "ui-icon-disk",
onClickButton: function () {
$.post("handlers/details.ashx?id=" + PID, { c1: $("#txtc1").val(), c2: $("#txtc2").val(), c3: $("#txtc3").val() }, function (data) {
//trying to get the edited data.
var ret = $("#gditems").getChangedCells('all');
var ret2 = JSON.stringify(ret);
alert(ret);
$.ajax({
type: "POST",
url: "handlers/items.ashx?edit=1&id=" + PID,
data: ret2,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (response, textStatus, xhr) {
alert("success");
},
error: function (xhr, textStatus, errorThrown) {
alert("error");
}
});
});
},
position: "last"
})
.navButtonAdd('#pgitems', {
caption: "Cancel",
buttonicon: "ui-icon-cancel",
onClickButton: function () {
$("#header").show();
$("#detail").hide();
return false;
},
position: "last"
});
</script>
<div>
<br />
<table id="gditems">
</table>
<div id="pgitems"> </div>
</div>