JqGrid NavGrid refresh not working - asp.net-mvc

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"
});
});

Related

Highstock Range Selector Buttons to PDF Export Dropdown

I have been able to convert my range selector buttons in to a dropdown rather than displaying as a list. And seperately, adding the export to PDF/Image dropdown.
What i am now trying to achieve is integrate the range selector dropdown buttons in to the same dropdown as the Export, or vice versa.
Export:
exporting: {
enabled: true,
allowHtml: true,
accessibility: {
enabled: true,
},
buttons: {
contextButtons: {
enabled: true
}
}
}
Range selector:
exporting: {
buttons: {
contextButton: {
enabled: false
},
toggle: {
text: 'Select range',
align: 'left',
height: 20,
y: -3,
theme: {
'stroke-width': 0.5,
stroke: '#000000',
r: 2
},
menuItems: [{
text: '1M',
onclick: function() {
this.rangeSelector.clickButton(0, true);
}
}, {
text: '3M',
onclick: function() {
this.rangeSelector.clickButton(1, true);
}
}, {
text: '6M',
onclick: function() {
this.rangeSelector.clickButton(2, true);
}
}, {
text: 'YTD',
onclick: function() {
this.rangeSelector.clickButton(3, true);
}
}, {
text: '1Y',
onclick: function() {
this.rangeSelector.clickButton(4, true);
}
}, {
text: 'All',
onclick: function() {
this.rangeSelector.clickButton(5, true);
}
}]
}
}
},
Example:
http://jsfiddle.net/8rrotg5a/
Add default items to menuItems array:
exporting: {
buttons: {
contextButton: {
enabled: false
},
toggle: {
...,
menuItems: [..., {
text: 'All',
onclick: function() {
this.rangeSelector.clickButton(5, true);
}
},
'separator',
'viewFullscreen',
'printChart',
'separator',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG'
]
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/j7s8xgtr/
API Reference: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems

how to get all data without paging in jqGrid

I work with jqGrid 4.6.0, ASP.Net MVC5, anything well don. But i have one problem bellow.
When i remove paging from page. I want load all data for jqGrid without paging. But data has just only displayed 20 record in jqGrid page. Although return data from server 36 record.
My JQGrid:
var Pattern_Grid = $("#Pattern_Grid");
Pattern_Grid.jqGrid({
datatype: "json",
height: 250,
shrinkToFit: false,
width: null,
rownumbers: true,
multiselect: true,
pgbuttons: false,
viewrecords: false,
pgtext: "",
pginput: false,
//==========================================
url: "/CusURL/GetBom",
caption: "Patterns Linking",
postData: {
styleCode: styleCode, size: styleSize, serial: styleColorSerial, revNo: revNo
},
//mtype: 'POST',
colModel: [
{
name: "MainItemCode", index: "MainItemCode",
label: arrPatternCollName.MainItemCode,
search: false, sort: false
},
{
name: "ItemCode", index: "ItemCode",
label: arrPatternCollName.ItemCode,
search: false, sort: false
},
{
name: "ItemName", index: "ItemName",
label: arrPatternCollName.ItemName,
search: false, sort: false
},
{
name: "ItemColorWays", index: "ItemColorWays",
label: arrPatternCollName.MainItemColorSerial
},
{ name: "StyleColorSerial", index: "StyleColorSerial", hidden: false },
{ name: "UnitConSumTion", index: "UnitConSumTion", hidden: false },
{ name: "Consumpunit", index: "Consumpunit", hidden: false },
{ name: "Qty", index: "Qty", hidden: false },
{ name: "CurrCode", index: "CurrCode", hidden: false },
{ name: "RegistryDate", index: "RegistryDate", hidden: false },
{ name: "StyleCode", index: "StyleCode", hidden: true },
{ name: "StyleSize", index: "StyleSize", hidden: true },
{ name: "ItemColorSerial", index: "ItemColorSerial", hidden: true },
{ name: "RevNo", index: "RevNo", hidden: true },
{ name: "MainItemColorSerial", index: "MainItemColorSerial", hidden: true },
{ name: "PatternCode", index: "PatternCode", hidden: true }
});
My data return more than 36 record data has just only displays 20 record in jqGrid page:
url: "/CusURL/GetBom",
public JsonResult GetBom(string styleCode, string styleSize, string styleColorSerial, string revNo)
{
try
{
var bom = _bom.GetBom(styleCode, styleSize, styleColorSerial, revNo);
return Json(bom.ToArray(), JsonRequestBehavior.AllowGet);
}
catch
{
return Json(new List<Bomt>().ToArray(), JsonRequestBehavior.AllowGet);
}
}
Is it possible to to display all data in jqGrid without paging?
rowNum default value is set to 20
you can set rowNum = 10000 or use 'jsonp' result for load all of datas with lazy load.

Highcharts (scatter) tooltip notworking

chart: {
renderTo: 'chart-selection',
backgroundColor: null,
type: 'scatter'
},
title: {
text: txt + ' (' + title + ')'
},
plotOptions: {
tooltip: {
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: title
},
height: 200,
lineWidth: 2
},
series: [{
color: 'rgba(100, 100, 200, .5)',
data: datax
}]
datax = [{x:1381942800000,y:23.000,price:26.00,change:0.00},{x:1382029200000,y:45.000,price:23.000,change:0.00}];
this code not show the tooltip
tooltip: {
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
The tooltip property is not meant to be directly under plotOptions, but inside the series(or scatter) sub property of the plotOptions
Any of the following changes should work
plotOptions.series.tooltip
plotOptions: {
series: {
tooltip: {
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
}
}
plotOptions.scatter.tooltip
plotOptions: {
scatter: {
tooltip: {
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
}
}
series[i].tooltip
series: [{
data: datax,
tooltip: {
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
}]
#jsFiddle
You need to use tooltip in general cofnigruation so you can remove plotOptions, and leave tooltip object like this:
xAxis: {
},
tooltip:{
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
I was in the same situation and what I missed was a config call on my index.js file which is
Highcharts.setOptions({
plotOptions: {
area: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
arearange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areaspline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areasplinerange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
boxplot: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bubble: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
column: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
columnrange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
errorbar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
funnel: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
gauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
heatmap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
//line: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pie: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
polygon: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pyramid: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
scatter: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
//series: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
solidgauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
spline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
treemap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
waterfall: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
},
chart: {
reflow: false,
events: {
redraw: function () {
}
},
animation: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
},
tooltip: {
yDecimals: 2 // If you want to add 2 decimals
}
,
colors: ['rgb(124, 181, 236)']
});
And finally I found this after 2 days :) ...
I am really sorry to make here busy about this stupid issue .After I deleted this config call on my index.js all my charts' tooltips are fixed .
I hope I can help anybody having the same problem .

multiple edit and delete buttons on jqGrid reload

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>

JQGrid Search form behind the transparent modal overlay window

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.

Resources