Related
Filling the Total Column with the jqxgrid Multiplier.
Hi there;
I want to multiply ItemQty and SinglePrice columns and write to TotalPrice column.
How can I do that.
I tried to use the code in this link but it didn't work.
The other columns show the data in the database.
var initFBListGrid=function(){
source =
{
dataType: 'json',
datafields: [
{ name: 'Id' },
{ name: 'OrderNumber' },
{ name: 'LineNumber' },
{ name: 'ItemNumber' },
{ name: 'ItemDescription' },
{ name: 'ItemQty' },
{ name: 'SinglePrice' },
{ name: 'Ixitem' },
{ name: 'IsUrgentHTML' },
{ name: 'StatusHTML' },
{ name: 'IsApproved' },
{ name: 'IsRejected' },
{ name: 'LatestPurchasePrice' },
{ name: 'PriceLevel' },
{ name: 'DeliveryDate' },
{ name: 'SupplierID' },
{ name: 'SupplierName' },
{ name: 'ProjectNumber' },
{ name: 'ProjectName' },
{ name: 'BuyerName' },
{ name: 'PendingApproverName' },
{ name: 'Company' },
{ name: 'Currency' },
{ name: 'HasAttachmentHTML' },
{ name: 'Glco' },
{ name: 'RequesterName' },
{ name: 'ApproverName' },
{
name: 'TotalPrice',
formatter: function (cellvalue, options, rowObject) {
var ItemQty = parseInt(rowObject.ItemQty, 10),
SinglePrice = parseInt(rowObject.SinglePrice,10);
return $.fmatter.util.NumberFormat(ItemQty * SinglePrice, $.jgrid.formatter.currency);
}
}
],
id: 'Id'
};
after create or edit the grid is not getting dynamically updated.Please suggest any solution, below my script.I have enabled refresh : true , but still the grid is not getting refreshed.
//load grid
$(function () {
$("#grid").jqGrid({
url: "/MVC/GetGrid",
datatype: 'json',
mtype: 'Get',
colNames: ['Id', 'Task Name', 'Task Description', 'Target Date', 'Severity', 'Task Status'],
colModel: [
{ key: true, hidden: true, name: 'Id', index: 'Id' },
{ key: false, name: 'TaskName', index: 'TaskName', editable: true },
{ key: false, name: 'TaskDescription', index: 'TaskDescription', editable: true },
{ key: false, name: 'TargetDate', index: 'TargetDate', editable: true, formatter: 'date', formatoptions: { newformat: 'd/M/y' }, datefmt: 'd-M-Y', editrules: { required: true }, editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker(); }, 200); } } },
{ key: false, name: 'Severity', index: 'Severity', editable: true, edittype: 'select', editoptions: { value: { 'L': 'Low', 'M': 'Medium', 'H': 'High' } } },
{ key: false, name: 'TaskStatus', index: 'TaskStatus', editable: true, edittype: 'select', editoptions: { value: { 'A': 'Active', 'I': 'InActive' } } },
],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
loadonce: true,
caption: 'Error Grid',
emptyrecords: 'No records to display!',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false
}).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true },
//Edit
{
zindex: 100,
url: '/MVC/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
//Add
{
zindex: 100,
url: '/MVC/Create',
closeOnEscape: true,
closeAfterAdd: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alret(response.responseText);
}
}
},
//Delete
{
zindex: 100,
url: '/MVC/Delete',
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this hierarchy..?",
afterComplete: function (response) {
if (response.responseText) {
alret(response.responseText);
}
}
}).navButtonAdd('#pager', {
caption: "Excel", onClickButton: function () {
DataGrid.jqGrid('excelExport', { url: '/MVC/ExportToExcel' });
},
position: "last",
buttonicon: "ui-icon-extlink"
});
});
I want to set filetype according to click on export menu on the right in the given url. For example if click on pdf then filetype should be set as application/pdf.
var defaultTitle = "Kalar";
var drilldownTitle = "";
var ydrillupTitle = "# of Kalar";
var ydrilldownTitle = "";
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'upendra',
events: {
drilldown: function(e) {
chart.setTitle({ text: drilldownTitle + e.point.title });
chart.yAxis[0].axisTitle.attr({
text: ydrilldownTitle
});
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
chart.yAxis[0].axisTitle.attr({
text: ydrillupTitle
});
},
click: function(e) {
chart.exportChart({
filename: chart.options.title.text
});
}
}
},
title: {
text: defaultTitle
},
subtitle: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
categories: ['one', 'two']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ydrillupTitle
}
},
plotOptions: {
column: {
stacking: 'normal',
showInLegend: true
}
},
series:[
{
name:'A',
color:'#E9ECEE',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Bookings (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "A",
title: "A by Company",
x:0, y:2
}, {
name: "",
x:1, y:0
}
]
},
{
name:'Arrived',
color:'#B3E5C4',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Bookings (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "Arrived",
title: "Planned Bookings by Goods Type",
x:0, y:10
}, {
name: "",
x:1, y:0
}
]
},
{
name:'Unscheduled',
color:'#A9ABAD',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "",
x:0, y:0
},
{
name: "Unscheduled",
title: "Unscheduled Deliveries by Company",
x:1, y:8
}
]
},
{
name:'Rejected',
color:'#FF838F',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "",
x:0, y:0
},
{
name: "Rejected",
title: "Rejected Deliveries Reasons",
x:1, y:7
}
]
},
{
name:'Complete',
color:'#B3E5C4',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "",
x:0, y:0
},
{
name: "Complete",
title: "Actual Deliveries by Goods Type",
x:1, y:6
}
]
}
]
});
});
You can edit menuItems in exporting options and then set filename, extracting that information from title.
exporting: {
buttons: {
contextButton: {
menuItems: [{
textKey: 'printChart',
onclick: function () {
this.print();
}
}, {
separator: true
}, {
textKey: 'downloadPNG',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'image/png',
filename: title
});
}
}, {
textKey: 'downloadJPEG',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'image/jpeg',
filename: title
});
}
}, {
textKey: 'downloadPDF',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'application/pdf',
filename: title
});
}
}, {
textKey: 'downloadSVG',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'image/svg+xml',
filename: title
});
}
}]
}
}
},
Example: http://jsfiddle.net/bmp6Leh5/4/
i m using jqGrid along with asp.net mvc2... the problem is that i m calling a grid on button click event.. now evertime if i click the button the grid is getting reloaded but the edit and refresh buttons are displayed more than once.. how to solve this problem?
here is the image
function BindGrid() {
if (!firstClick) {
$("#list").trigger("reloadGrid");
}
firstClick = false;
/* Refreshes the grid */
$("#list").jqGrid({
url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
datatype: 'json',
mtype: 'GET',
postData: { StartDate: $('#StartDate').val(), EndDate: $('#EndDate').val(),
siteId: $('#ListFacility') ? $('#ListFacility').val() : -1 },
colNames: ['SiteID', 'Cal Date', 'Store Open', 'Start Time', 'End Time',
'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM',
'TouchLimit AM', 'Total Touches', 'Total Mileage', 'IsWeekend'],
colModel: [
{ name: 'SiteID', index: 'SiteID', width: 40, align: 'left',
/* key: true,*/editable: false, editrules: { edithidden: false },
hidedlg: true, hidden: false },
{ name: 'CalDate', index: 'CalDate', width: 100, align: 'left',
formatter: 'date', datefmt: 'm/d/Y', editable: true, edittype: 'text',
editrules: { required: true, date: true },
formoptions: { elmsuffix: ' *'} },
{ name: 'StoreOpen', index: 'StoreOpen', width: 40, align: 'left',
editable: true, edittype: 'select', formatter: 'select',
editrules: { required: true }, formoptions: { elmsuffix: ' *' },
editoptions: { dataInit: function (elem) {
$(elem).empty()
.append("<option value='1'>o</option>")
.append("<option value='2'>c</option>");
}
} },
{ name: 'StartTime', index: 'StartTime', width: 100, align: 'left',
formatter: 'date', datefmt: 'g:i A', editable: true, edittype: 'text',
editrules: { required: true, date: true },
formoptions: { elmsuffix: ' *'} },
{ name: 'EndTime', index: 'EndTime', width: 100, align: 'left',
formatter: 'date', datefmt: 'g:i A', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalTouches', index: 'TotalTouches', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalMileage', index: 'TotalMileage', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'IsWeekend', index: 'IsWeekend', width: 200,
align: 'left', editable: false, hidden: false}
],
pager: $('#listPager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CalDate',
sortorder: "desc",
viewrecords: true,
caption: 'Schedule Calendar',
autowidth: true,
afterInsertRow: function (rowid, rowdata) {
if (rowdata.IsWeekend)
$(this).jqGrid('setRowData', rowid, false, { color: 'blue' });
}
}).navGrid('#listPager',
{ edit:true, add:false, del:false, search:false, refresh:true });
}
You should create the grid with $("#list").jqGrid({...}) and add the navigator buttons with navGrid only once. I suppose that your BindGrid function will be called twice in your program, so you have all buttons two times. You can easy verify this adding an additional alert("in BindGrid"); somewhere inside of BindGrid function.
UPDATED: I read your code and here is my suggestion:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$("#StartDate").datepicker({
changeMonth: false,
changeYear: false
});
$("#EndDate").datepicker();
var checkMileageLimit = function(value, colname) {
alert($("#TotalMileage").val());
if (value > $("#TotalMileage").val()) {
alert(false);
return ["false", "value shuld be less"];
} else {
alert(true);
return ["true",""];
}
};
$("#list").jqGrid({
url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
datatype: 'json',
mtype: 'GET',
postData: {
StartDate: function() { return $('#StartDate').val(); },
EndDate: function() { return $('#EndDate').val(); },
siteId: function() { return $('#ListFacility') ? $('#ListFacility').val() : -1; }
},
colNames: ['SiteID', 'Cal Date', 'Store Open', 'Start Time', 'End Time',
'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM',
'TouchLimit AM', 'Total Touches', 'Total Mileage', 'WeekDay'],
colModel: [
{ name: 'SiteID', index: 'SiteID', width: 40, /* key: true,*/editable: false, editrules: { edithidden: false }, hidedlg: true, hidden: false },
{ name: 'CalDate', index: 'CalDate', width: 100, formatter: 'date', datefmt: 'm/d/Y', editable: true, edittype: 'text', editrules: { required: true, date: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'StoreOpen', index: 'StoreOpen', width: 40, editable: true, edittype: 'select', formatter: 'select', editrules: { required: true }, formoptions: { elmsuffix: ' *' }, editoptions: { value: { o: 'Open', c: 'closed'}} },
{ name: 'StartTime', index: 'StartTime', width: 100, editable: true, formatter: 'date', masks: 'ShortTime', edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'EndTime', index: 'EndTime', width: 100, editable: true, edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50, editable: true,
edittype: 'text', editrules: { custom: true, custom_func: checkMileageLimit,
required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalTouches', index: 'TotalTouches', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalMileage', index: 'TotalMileage', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'WeekDay', index: 'WeekDay', width: 200, editable: false, hidden: false}
],
pager: $('#listPager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CalDate',
sortorder: "desc",
viewrecords: true,
caption: 'Schedule Calendar',
autowidth: false,
afterInsertRow: function (rowid, rowdata) {
if (rowdata.IsWeekend) {
$(this).jqGrid('setRowData', rowid, false, { color: 'blue' });
}
}
}).navGrid('#listPager',
{ edit: true, add: false, del: false, search: false, refresh: true }
);
$('#btnSubmit').click(function () {
$("#list").trigger("reloadGrid");
});
});
//]]>
</script>
I recommend you to use postData with properties as functions, then at every refresh will be called the function and you can get actual values from the corresponding HTML controls. You can read more about the technique in my old answer. Other small changes you will probably find yourself.
Moreover the statement
$('#ListFacility') ? $('#ListFacility').val() : -1;
seems incorrect for me because $('#ListFacility') will be always an object. Because you don't post and HTML code I could not fix it. You should do this yourself.
Moreover it can be that you will have better performance in your grid if you will use gridview:true and set the color inside of loadComplete function instead of the usage of afterInsertRow function. See this old answer as an example and description of the gridview option.
Thanks for your answer... it worked i have placed an if else in the button click to check if its a first click or subsequent clicks and then it worked... but when i call reloadgrid i still see the same old parmaeters are passed to the controller.. ther are textboxes and dropdowns whose values changes and then i click the submit button which reloads the grid.. i m using postData parameter to pass additional values to the controller
<script type="text/javascript">
var firstClick = true;
$(document).ready(function () {
$("#StartDate").datepicker({
changeMonth: false,
changeYear: false
});
$("#EndDate").datepicker();
var updateDialog = {
url: '<%= Url.Action("UpdateGrid", "TouchSchedule") %>'
, closeAfterAdd: true
, closeAfterEdit: true
};
$('#btnSubmit').click(function () {
$("#list").clearGridData();
if (!firstClick) {
alert($('#ListFacility').val());
$("#list").trigger("reloadGrid");
}
else {
firstClick = false;
/* Refreshes the grid */
$("#list").jqGrid({
url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
datatype: 'json',
mtype: 'GET',
postData: { StartDate: $('#StartDate').val(), EndDate: $('#EndDate').val(), siteId: $('#ListFacility') ? $('#ListFacility').val() : -1 },
colNames: ['SiteID', 'Cal Date', 'Store Open', 'Start Time', 'End Time', 'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM', 'TouchLimit AM', 'Total Touches', 'Total Mileage', 'WeekDay'],
colModel: [
{ name: 'SiteID', index: 'SiteID', width: 40, align: 'left', /* key: true,*/editable: false, editrules: { edithidden: false }, hidedlg: true, hidden: false },
{ name: 'CalDate', index: 'CalDate', width: 100, align: 'left', formatter: 'date', datefmt: 'm/d/Y', editable: true, edittype: 'text', editrules: { required: true, date: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'StoreOpen', index: 'StoreOpen', width: 40, align: 'left', editable: true, edittype: 'select', formatter: 'select', editrules: { required: true }, formoptions: { elmsuffix: ' *' }, editoptions: { value: { o: 'Open', c: 'closed'}} },
{ name: 'StartTime', index: 'StartTime', width: 100, align: 'left', editable: true, formatter: 'date', masks: 'ShortTime', edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'EndTime', index: 'EndTime', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { custom: true, custom_func: CheckMileageLimit, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalTouches', index: 'TotalTouches', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalMileage', index: 'TotalMileage', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'WeekDay', index: 'WeekDay', width: 200, align: 'left', editable: false, hidden: false}],
pager: $('#listPager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CalDate',
sortorder: "desc",
viewrecords: true,
caption: 'Schedule Calendar',
autowidth: false,
afterInsertRow: function (rowid, rowdata) {
if (rowdata.IsWeekend)
$(this).jqGrid('setRowData', rowid, false, { color: 'blue' });
}
}).navGrid('#listPager',
{
edit: true, add: false, del: false, search: false, refresh: true
}
);
}
});
});
function CheckMileageLimit(value, colname)
{
alert($("#TotalMileage").val());
if (value > $("#TotalMileage").val())
{
alert(false);
return ["false", "value shuld be less"];
}
else
{
alert(true);
return ["true",""];}
}
</script>
This has got to be a stupid mistake but for the life of me I can't figure it out. I am trying to use the search feature from the navigator of jqgrid. When I click the search icon the form displays above the grid but then the entire area (grid and search form above it) are covered by a transparent search modal window. I am stuck at this point without the search feature or the ability to get out of the modal overlay.
I am using a grid with 2 detail grids the same behavior is in all three grids. Here is my definition. Any suggestions much appreciated.
jQuery(document).ready(function() {
jQuery("#equipgrid").jqGrid({
url: '/EquipTrack/GridData/',
editurl: '/EquipTrack/Edit/',
datatype: 'json',
mtype: 'GET',
height: 255,
width: 755,
rowNum: 5000,
colNames: ['ID', 'Type', 'Make', 'Model', 'Year', 'Location', 'Insp Due', 'Serv Due', 'Miles/Hrs', 'Milage Dt', 'Reg By', 'Mngd By', 'Mngd By Dt', 'Tag Exp', '', '', '', '', 'Vin Num', 'Title Num', 'GVW', 'Unlaiden Wt', 'Tag Num', 'Tag State', 'Fuel', 'Cost', 'Inspect Rmndr(wks)', 'Tag Rmndr(wks)', 'Stolen', 'Sold', 'Lojack', 'In Repair', 'Totaled', 'Hut Sticker', 'Apportioned', 'IFTA Sticker', 'Comment'],
colModel: [
{ name: 'equip_id', index: 'equip_id', width: 65, editable: true, search: true },
{ name: 'type_desc', index: 'type_desc', width: 130, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetTypes'} },
{ name: 'make_descr', index: 'make_descr', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetMakes'} },
{ name: 'model_descr', index: 'model_descr', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetModels'} },
{ name: 'equip_year', index: 'equip_year', width: 60, editable: true },
{ name: 'work_loc', index: 'work_loc', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetLocations'} },
{ name: 'insp_due_dt', index: 'insp_due_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'service_due_num', index: 'service_due_num', width: 80, editable: true },
{ name: 'miles_hours', index: 'miles_hours', width: 80, editable: true },
{ name: 'miles_dt', index: 'miles_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'registered_by', index: 'registered_by', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetDivisions'} },
{ name: 'managed_by', index: 'managed_by', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetDivisions'} },
{ name: 'managed_by_dt', hidden: true, editable: true, editrules: { edithidden: true },
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'tag_expire_dt', index: 'tag_expire_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'inspection_warn', hidden: true },
{ name: 'service_warn', hidden: true },
{ name: 'tag_warn', hidden: true },
{ name: 'equip_color', hidden: true },
{ name: 'vin_num', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'title_num', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'gross_v_wt', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'unlaiden_wt', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'tag_num', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'tag_state', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'fuel_descr', index: 'fuel_descr', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetFuels'} },
{ name: 'cost', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'insp_rmdr_wks', hidden: true, editable: true, edittype: "select", editoptions: { value: ":;1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9;10:10;11:11;12:12;13:13;14:14;15:15;16:16;17:17;18:18;19:19;20:20;21:21;22:22;23:23;24:24" }, editrules: { edithidden: true} },
{ name: 'tag_expire_rmdr_wks', editable: true, hidden: true, edittype: "select", editoptions: { value: ":;1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9;10:10;11:11;12:12;13:13;14:14;15:15;16:16;17:17;18:18;19:19;20:20;21:21;22:22;23:23;24:24" }, editrules: { edithidden: true} },
{ name: 'stolen', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'sold', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'lojack', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'in_repair', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'totaled', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'hut_sticker', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'apportioned', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'ifta_sticker', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'comment', hidden: true, editable: true, editoptions: { value: "True:False" }, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} }
],
sortname: 'equip_id',
sortorder: "asc",
afterInsertRow: function(rowid, rowdata, rowelem) {
if (rowelem[14] == 'SET_RED') {
jQuery("#equipgrid").setCell(rowid, 'insp_due_dt', '', { color: 'red' })
}
if (rowelem[15] == 'SET_RED') {
jQuery("#equipgrid").setCell(rowid, 'service_due_num', '', { color: 'red' })
}
if (rowelem[16] == 'SET_RED') {
jQuery("#equipgrid").setCell(rowid, 'tag_expire_dt', '', { color: 'red' })
}
if (rowelem[17] == 'SET_GREEN') {
jQuery("#equipgrid").setCell(rowid, 'equip_id', '', { color: 'green' })
}
if (rowelem[17] == 'SET_PURPLE') {
jQuery("#equipgrid").setCell(rowid, 'equip_id', '', { color: 'purple' })
}
if (rowelem[17] == 'SET_BLUE') {
jQuery("#equipgrid").setCell(rowid, 'equip_id', '', { color: 'blue' })
}
// if (rowelem[12] == '01/01/3000') {
// jQuery("#equipgrid").setCell(rowid, 'tag_expire_dt','', '')
// }
},
viewrecords: true,
pager: jQuery('#equipgridp'),
caption: 'Inventory for <%= ViewData["division"] %>',
ondblClickRow: function(rowid) { $("#equipgrid").editGridRow(rowid, editprm); },
onSelectRow: function(ids) {
if (ids != null) {
var data = $("#equipgrid").getRowData(ids);
jQuery("#equip_svc").setGridParam({ url: "/EquipTrack/GetServiceGridData/" + data.equip_id, page: 1 })
.trigger('reloadGrid');
jQuery("#equip_asgn").setGridParam({ url: "/EquipTrack/GetAssignGridData/" + data.equip_id, page: 1 })
.trigger('reloadGrid');
}
}
}).navGrid('#equipgridp', {edit:true, add:true, del:true, search:true}, //options
{reloadAfterSubmit: false, jqModal: false, closeOnEscape: true, closeAfterEdit: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Equipment successfully updated");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
}, // edit options
{reloadAfterSubmit: false,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Equipment successfully added");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
}, // add options
{reloadAfterSubmit: false, closeOnEscape: true, closeAfterAdd: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Equipment successfully deleted");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
}, // del options
{}, // search options
{} // view options
);
$('#equipgridp_center').remove();
$('#equipgridp_right').remove();
jQuery("#equip_svc").jqGrid({
editurl: '/EquipTrack/EditService/',
datatype: 'json',
mtype: 'GET',
height: 100,
width: 755,
rowNum: 5000,
colNames: ['ID', 'Service Date', 'Type', 'Mechanic', 'Miles', 'Hours', 'Labor Cost', 'Parts Cost', 'Total Cost', 'Update Next Svc Due', 'Service Requested', 'Service Performed', 'Parts Required', 'Comments'],
colModel: [
{ name: 'equip_id', index: 'equip_id', width: 65, editable: true },
{ name: 'service_dt', index: 'service_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'serv_descr', index: 'serv_descr', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetServiceTypes'} },
{ name: 'mechanic', index: 'mechanic', width: 80, editable: true },
{ name: 'mileage', index: 'mileage', width: 60, editable: true },
{ name: 'hours', index: 'hours', width: 60, editable: true },
{ name: 'labor_cost', index: 'labor_cost', width: 60, editable: true },
{ name: 'parts_cost', index: 'parts_cost', width: 60, editable: true },
{ name: 'total_cost', index: 'total_cost', width: 60, editable: true },
{ name: 'calc_next_svc', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
{ name: 'serv_reqstd', hidden: true, editable: true, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} },
{ name: 'serv_perf_descr', hidden: true, editable: true, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} },
{ name: 'parts_reqrd', hidden: true, editable: true, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} },
{ name: 'comments', hidden: true, editable: true, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} }
],
sortname: 'service_dt',
sortorder: "desc",
viewrecords: true,
pager: jQuery('#equipsvcp'),
caption: 'Services'
}).navGrid('#equipsvcp', {}, //options
{reloadAfterSubmit: false, jqModal: false, closeOnEscape: true, closeAfterEdit: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Service successfully updated");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
},
beforeShowForm: function(eparams) {
document.getElementById('equip_id').disabled = true;
document.getElementById('service_dt').disabled = true;
// document.getElementById('serv_descr').disabled = true;
document.getElementById('calc_next_svc').checked = 'true';
}
}, // edit options
{reloadAfterSubmit: false,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Service successfully added");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
},
beforeShowForm: function(eparams) {
var rowid = jQuery("#equipgrid").getGridParam("selrow");
var cellData = jQuery("#equipgrid").getCell(rowid, "equip_id");
document.getElementById('equip_id').value = cellData;
document.getElementById('equip_id').disabled = true;
document.getElementById('calc_next_svc').checked = 'true';
// jQuery("#equip_svc").setCell(1, 'calc_next_svc', 'True', {});
}
}, // add options
{reloadAfterSubmit: false, closeOnEscape: true, closeAfterAdd: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Service successfully deleted");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
}, // del options
{}, // search options
{} // view options
);
$('#equipsvcp_center').remove();
$('#equipsvcp_right').remove();
jQuery("#equip_asgn").jqGrid({
editurl: '/EquipTrack/EditAssign/',
datatype: 'json',
mtype: 'GET',
height: 100,
width: 755,
rowNum: 5000,
colNames: ['ID', 'Assign To', 'Date Assigned', 'Return Date', 'Assign Condition', 'Return Condition', 'Assign Miles', 'Return Miles', 'Assign Hours', 'Return Hours', 'Comments'],
colModel: [
{ name: 'equip_id', index: 'equip_id', width: 65, editable: true },
{ name: 'assigned_to', index: 'assigned_to', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetAssignTo'} },
{ name: 'assigned_dt', index: 'assigned_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'return_dt', index: 'return_dt', width: 100, editable: true,
editoptions: { size: 12, dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm/dd/yy' });
}
}
},
{ name: 'asgn_condition_id', index: 'asgn_condition_id', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetConditions'} },
{ name: 'ret_condition_id', index: 'ret_condition_id', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetConditions'} },
{ name: 'asgn_miles', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'ret_miles', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'asgn_hours', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'ret_hours', hidden: true, editable: true, editrules: { edithidden: true} },
{ name: 'comments', hidden: true, editable: true, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} }
],
sortname: 'assigned_dt',
sortorder: "desc",
viewrecords: true,
pager: jQuery('#equipasgnp'),
caption: 'Assignments'
}).navGrid('#equipasgnp', {}, //options
{reloadAfterSubmit: false, jqModal: false, closeOnEscape: true, closeAfterEdit: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Assignment successfully updated");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
},
beforeShowForm: function(eparams) {
document.getElementById('equip_id').disabled = true;
document.getElementById('assigned_dt').disabled = true;
// document.getElementById('serv_descr').disabled = true;
}
}, // edit options
{reloadAfterSubmit: false,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Assignment successfully added");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
},
beforeShowForm: function(eparams) {
var rowid = jQuery("#equipgrid").getGridParam("selrow");
var cellData = jQuery("#equipgrid").getCell(rowid, "equip_id");
document.getElementById('equip_id').value = cellData;
document.getElementById('equip_id').disabled = true;
}
}, // add options
{reloadAfterSubmit: false, closeOnEscape: true, closeAfterAdd: true,
afterSubmit: function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Assignment successfully deleted");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
}, // del options
{}, // search options
{} // view options
);
$('#equipasgnp_center').remove();
$('#equipasgnp_right').remove();
});
$(function() {
$("#tabs").tabs();
});
Equipment
Tools
Small Tools
Tools
Small Tools
Found it. I was missing the jquery.searchFilter.css file from my project.