<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Bin</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link rel="stylesheet" href="jqgrid.theme.css" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="ui.jqgrid.css" />
<link rel="stylesheet" href="custom.jqgrid.css" />
</head>
<body>
<div class="customjqgrid">
<table id="customTable" style="background-color:red;"></table>
</div>
<script data-require="json3@3.2.4" data-semver="3.2.4" src="//cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.js"></script>
<script data-require="jquery@1.10.2" data-semver="1.10.2" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script data-require="jquery@*" data-semver="1.10.3" src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script data-require="jqgrid@*" data-semver="4.5.4" src="//cdn.jsdelivr.net/jqgrid/4.5.4/i18n/grid.locale-en.js"></script>
<script data-require="jqgrid@*" data-semver="4.5.4" src="//cdn.jsdelivr.net/jqgrid/4.5.4/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jquery.CustomjQGrid.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
$(document).ready(function($) {
var $grid = $("#customTable").jqGrid({
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id' ,index:'id' ,sortable:false ,sorttype:"int" ,classes:'custom-jqgrid-dinamic-width' ,search: false ,stype: 'text' ,resizable:true ,key:true},
{name:'invdate',index:'invdate' ,sortable:true ,sorttype:"date" ,classes:'custom-jqgrid-dinamic-width' ,search: false ,stype: 'text' ,resizable:true},
{name:'name' ,index:'name' ,sortable:true ,sorttype:'text' ,classes:'custom-jqgrid-dinamic-width' ,search: false ,stype: 'text' ,resizable:true},
{name:'amount' ,index:'amount' ,sortable:true ,sorttype:"float" ,classes:'custom-jqgrid-dinamic-width' ,search: false ,stype: 'text' ,resizable:true},
{name:'tax' ,index:'tax' ,sortable:true ,sorttype:"float" ,classes:'custom-jqgrid-dinamic-width' ,search: false ,stype: 'text' ,resizable:true},
{name:'total' ,index:'total' ,sortable:true ,sorttype:"float" ,classes:'custom-jqgrid-dinamic-width' ,search: false ,stype: 'text' ,resizable:true},
{name:'note' ,index:'note' ,sortable:false ,classes:'custom-jqgrid-dinamic-width' ,search: false ,stype: 'text' ,resizable:true}
],
gridComplete: function() {
var $this = $(this);
$this.find('> tbody > tr').removeClass('jqGridDefaultRow jqGridAlternateRow jqGridRowDetails');
$this.find('> tbody > tr:nth-child(even)').addClass('jqGridDefaultRow jqGridRowDetails');
$this.find('> tbody > tr:nth-child(odd)').addClass('jqGridAlternateRow jqGridRowDetails');
$this.jqGrid('handleNoRecordsMessageDisplay');
$this.jqGrid('resizeAllColumnsBasedOnContent')
.jqGrid('resizeLastColumnOnGridResize')
.jqGrid('resizeColumnBasedOnContentOnjqGridColumnResizerDbClick');
},
resizeStart: function(event, colIdx){
var $this = $(this),
curWidth = this.grid.width,
beforeResizeWidth = $this.prop("beforeResizeWidth") || 0;
if(beforeResizeWidth < curWidth)
$this.prop("beforeResizeWidth", curWidth);
},
resizeStop: function (newWidth, colIdx) {
var $this = $(this),
newGridWidth = this.grid.newWidth,
beforeResizeWidth = $this.prop("beforeResizeWidth") || 0;
if(newGridWidth > $this.prop("beforeResizeWidth"))
$this.jqGrid('setGridWidth', newGridWidth, false);
this.p.colModel[colIdx]._resized = true;
},
sortable:{
options: {
items: ">th:not(:has(#jqgh_customTable_id),:hidden)"
}
},
datatype: "local",
gridview:true,
width:'100%',
ignoreCase:false,
height:'auto',
rowNum:-1,
multiSort: false,
data: tableData || []
});
$grid.on("mousedown", ".ui-jqgrid-htable > thead > tr > th", function(){
$(":focus").focusout();
});
});
/*! jQuery UI - v1.10.3 - 2013-08-29
* http://jqueryui.com
* Includes: jquery.customjqgrid .ui.core.css, jquery.customjqgrid .ui.resizable.css, jquery.customjqgrid .ui.selectable.css, jquery.customjqgrid .ui.accordion.css, jquery.customjqgrid .ui.autocomplete.css, jquery.customjqgrid .ui.button.css, jquery.customjqgrid .ui.datepicker.css, jquery.customjqgrid .ui.dialog.css, jquery.customjqgrid .ui.menu.css, jquery.customjqgrid .ui.progressbar.css, jquery.customjqgrid .ui.slider.css, jquery.customjqgrid .ui.spinner.css, jquery.customjqgrid .ui.tabs.css, jquery.customjqgrid .ui.tooltip.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2C%20Helvetica%2C%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=%23FFFFFF&bgTextureHeader=flat&bgImgOpacityHeader=0&borderColorHeader=%23FFFFFF&fcHeader=%232747cd&iconColorHeader=%23ffffff&bgColorContent=%23FFFFFF&bgTextureContent=flat&bgImgOpacityContent=25&borderColorContent=%23FFFFFF&fcContent=%23666666&iconColorContent=%23cccccc&bgColorDefault=%23FFFFFF&bgTextureDefault=flat&bgImgOpacityDefault=35&borderColorDefault=%23FFFFFF&fcDefault=%232747cd&iconColorDefault=%23000000&bgColorHover=%23FFFFFF&bgTextureHover=flat&bgImgOpacityHover=33&borderColorHover=%23FFFFFF&fcHover=%232747cd&iconColorHover=%23000000&bgColorActive=%23FFFFFF&bgTextureActive=flat&bgImgOpacityActive=20&borderColorActive=%23FFFFFF&fcActive=%232747cd&iconColorActive=%23000000&bgColorHighlight=%23FFFFFF&bgTextureHighlight=flat&bgImgOpacityHighlight=80&borderColorHighlight=%23FFFFFF&fcHighlight=%232e7db2&iconColorHighlight=%234b8e0b&bgColorError=%23ffc73d&bgTextureError=flat&bgImgOpacityError=40&borderColorError=%23ffb73d&fcError=%23111111&iconColorError=%23a83300&bgColorOverlay=%235c5c5c&bgTextureOverlay=flat&bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=%23cccccc&bgTextureShadow=flat&bgImgOpacityShadow=30&opacityShadow=60&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px
* Copyright 2013 jQuery Foundation and other contributors Licensed MIT */
/* Layout helpers
----------------------------------*/
.customjqgrid .ui-helper-hidden {
display: none;
}
.customjqgrid .ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.customjqgrid .ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.customjqgrid .ui-helper-clearfix: before, .customjqgrid .ui-helper-clearfix: after {
content: "";
display: table;
border-collapse: collapse;
}
.customjqgrid .ui-helper-clearfix: after {
clear: both;
}
.customjqgrid .ui-helper-clearfix {
min-height: 0;
/* support: IE7 */
}
.customjqgrid .ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter: Alpha(Opacity=0);
}
.customjqgrid .ui-front {
z-index: 100;
}
/* Interaction Cues
----------------------------------*/
.customjqgrid .ui-state-disabled {
cursor: default !important;
}
/* Icons
----------------------------------*/
/* states and images */
.customjqgrid .ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
/* Misc visuals
----------------------------------*/
/* Overlays */
.customjqgrid .ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.customjqgrid .ui-resizable {
position: relative;
}
.customjqgrid .ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
}
.customjqgrid .ui-resizable-disabled .ui-resizable-handle,
.customjqgrid .ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.customjqgrid .ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.customjqgrid .ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.customjqgrid .ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.customjqgrid .ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.customjqgrid .ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.customjqgrid .ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.customjqgrid .ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.customjqgrid .ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.customjqgrid .ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
.customjqgrid .ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin-top: 2px;
padding: .5em .5em .5em .7em;
min-height: 0;
/* support: IE7 */
}
.customjqgrid .ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
}
.customjqgrid .ui-accordion .ui-accordion-noicons {
padding-left: .7em;
}
.customjqgrid .ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em;
}
.customjqgrid .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.customjqgrid .ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}
.customjqgrid .ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}
.customjqgrid .ui-button {
display: inline-block;
position: relative;
padding: 0;
line-height: normal;
margin-right: .1em;
cursor: pointer;
vertical-align: middle;
text-align: center;
overflow: visible;
/* removes extra width in IE */
}
.customjqgrid .ui-button,
.customjqgrid .ui-button: link, .customjqgrid .ui-button: visited, .customjqgrid .ui-button: hover, .customjqgrid .ui-button: active {
text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.customjqgrid .ui-button-icon-only {
width: 2.2em;
}
/* button elements seem to need a little more width */
button.customjqgrid .ui-button-icon-only {
width: 2.4em;
}
.customjqgrid .ui-button-icons-only {
width: 3.4em;
}
button.customjqgrid .ui-button-icons-only {
width: 3.7em;
}
/* button text element */
.customjqgrid .ui-button .ui-button-text {
display: block;
line-height: normal;
}
.customjqgrid .ui-button-text-only .ui-button-text {
padding: .4em 1em;
}
.customjqgrid .ui-button-icon-only .ui-button-text,
.customjqgrid .ui-button-icons-only .ui-button-text {
padding: .4em;
text-indent: -9999999px;
}
.customjqgrid .ui-button-text-icon-primary .ui-button-text,
.customjqgrid .ui-button-text-icons .ui-button-text {
padding: .4em 1em .4em 2.1em;
}
.customjqgrid .ui-button-text-icon-secondary .ui-button-text,
.customjqgrid .ui-button-text-icons .ui-button-text {
padding: .4em 2.1em .4em 1em;
}
.customjqgrid .ui-button-text-icons .ui-button-text {
padding-left: 2.1em;
padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.customjqgrid .ui-button {
padding: .4em 1em;
}
/* button icon element(s) */
.customjqgrid .ui-button-icon-only .ui-icon,
.customjqgrid .ui-button-text-icon-primary .ui-icon,
.customjqgrid .ui-button-text-icon-secondary .ui-icon,
.customjqgrid .ui-button-text-icons .ui-icon,
.customjqgrid .ui-button-icons-only .ui-icon {
position: absolute;
top: 50%;
margin-top: -8px;
}
.customjqgrid .ui-button-icon-only .ui-icon {
left: 50%;
margin-left: -8px;
}
.customjqgrid .ui-button-text-icon-primary .ui-button-icon-primary,
.customjqgrid .ui-button-text-icons .ui-button-icon-primary,
.customjqgrid .ui-button-icons-only .ui-button-icon-primary {
left: .5em;
}
.customjqgrid .ui-button-text-icon-secondary .ui-button-icon-secondary,
.customjqgrid .ui-button-text-icons .ui-button-icon-secondary,
.customjqgrid .ui-button-icons-only .ui-button-icon-secondary {
right: .5em;
}
/* button sets */
.customjqgrid .ui-buttonset {
margin-right: 7px;
}
.customjqgrid .ui-buttonset .ui-button {
margin-left: 0;
margin-right: -.3em;
}
/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.customjqgrid .ui-button: : -moz-focus-inner, button.customjqgrid .ui-button: : -moz-focus-inner {
border: 0;
padding: 0;
}
.customjqgrid .ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
}
.customjqgrid .ui-datepicker .ui-datepicker-header {
position: relative;
padding: .2em 0;
}
.customjqgrid .ui-datepicker .ui-datepicker-prev,
.customjqgrid .ui-datepicker .ui-datepicker-next {
position: absolute;
top: 2px;
width: 1.8em;
height: 1.8em;
}
.customjqgrid .ui-datepicker .ui-datepicker-prev-hover,
.customjqgrid .ui-datepicker .ui-datepicker-next-hover {
top: 1px;
}
.customjqgrid .ui-datepicker .ui-datepicker-prev {
left: 2px;
}
.customjqgrid .ui-datepicker .ui-datepicker-next {
right: 2px;
}
.customjqgrid .ui-datepicker .ui-datepicker-prev-hover {
left: 1px;
}
.customjqgrid .ui-datepicker .ui-datepicker-next-hover {
right: 1px;
}
.customjqgrid .ui-datepicker .ui-datepicker-prev span,
.customjqgrid .ui-datepicker .ui-datepicker-next span {
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
top: 50%;
margin-top: -8px;
}
.customjqgrid .ui-datepicker .ui-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center;
}
.customjqgrid .ui-datepicker .ui-datepicker-title select {
font-size: 1em;
margin: 1px 0;
}
.customjqgrid .ui-datepicker select.ui-datepicker-month-year {
width: 100%;
}
.customjqgrid .ui-datepicker select.ui-datepicker-month,
.customjqgrid .ui-datepicker select.ui-datepicker-year {
width: 49%;
}
.customjqgrid .ui-datepicker table {
width: 100%;
font-size: .9em;
border-collapse: collapse;
margin: 0 0 .4em;
}
.customjqgrid .ui-datepicker th {
padding: .7em .3em;
text-align: center;
font-weight: bold;
border: 0;
}
.customjqgrid .ui-datepicker td {
border: 0;
padding: 1px;
}
.customjqgrid .ui-datepicker td span,
.customjqgrid .ui-datepicker td a {
display: block;
padding: .2em;
text-align: right;
text-decoration: none;
}
.customjqgrid .ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
margin: .7em 0 0 0;
padding: 0 .2em;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.customjqgrid .ui-datepicker .ui-datepicker-buttonpane button {
float: right;
margin: .5em .2em .4em;
cursor: pointer;
padding: .2em .6em .3em .6em;
width: auto;
overflow: visible;
}
.customjqgrid .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
float: left;
}
/* with multiple calendars */
.customjqgrid .ui-datepicker.ui-datepicker-multi {
width: auto;
}
.customjqgrid .ui-datepicker-multi .ui-datepicker-group {
float: left;
}
.customjqgrid .ui-datepicker-multi .ui-datepicker-group table {
width: 95%;
margin: 0 auto .4em;
}
.customjqgrid .ui-datepicker-multi-2 .ui-datepicker-group {
width: 50%;
}
.customjqgrid .ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%;
}
.customjqgrid .ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%;
}
.customjqgrid .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.customjqgrid .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
border-left-width: 0;
}
.customjqgrid .ui-datepicker-multi .ui-datepicker-buttonpane {
clear: left;
}
.customjqgrid .ui-datepicker-row-break {
clear: both;
width: 100%;
font-size: 0;
}
/* RTL support */
.customjqgrid .ui-datepicker-rtl {
direction: rtl;
}
.customjqgrid .ui-datepicker-rtl .ui-datepicker-prev {
right: 2px;
left: auto;
}
.customjqgrid .ui-datepicker-rtl .ui-datepicker-next {
left: 2px;
right: auto;
}
.customjqgrid .ui-datepicker-rtl .ui-datepicker-prev: hover {
right: 1px;
left: auto;
}
.customjqgrid .ui-datepicker-rtl .ui-datepicker-next: hover {
left: 1px;
right: auto;
}
.customjqgrid .ui-datepicker-rtl .ui-datepicker-buttonpane {
clear: right;
}
.customjqgrid .ui-datepicker-rtl .ui-datepicker-buttonpane button {
float: left;
}
.customjqgrid .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.customjqgrid .ui-datepicker-rtl .ui-datepicker-group {
float: right;
}
.customjqgrid .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.customjqgrid .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
border-right-width: 0;
border-left-width: 1px;
}
.customjqgrid .ui-dialog {
position: absolute;
top: 0;
left: 0;
padding: .2em;
outline: 0;
}
.customjqgrid .ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
position: relative;
}
.customjqgrid .ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.customjqgrid .ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 21px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
.customjqgrid .ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
}
.customjqgrid .ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin-top: .5em;
padding: .3em 1em .5em .4em;
}
.customjqgrid .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
.customjqgrid .ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0;
cursor: pointer;
}
.customjqgrid .ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
}
.customjqgrid .ui-draggable .ui-dialog-titlebar {
cursor: move;
}
.customjqgrid .ui-menu {
list-style: none;
padding: 2px;
margin: 0;
display: block;
outline: none;
}
.customjqgrid .ui-menu .ui-menu {
margin-top: -3px;
position: absolute;
}
.customjqgrid .ui-menu .ui-menu-item {
margin: 0;
padding: 0;
width: 100%;
/* support: IE10, see #8844 */
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.customjqgrid .ui-menu .ui-menu-divider {
margin: 5px -2px 5px -2px;
height: 0;
font-size: 0;
line-height: 0;
border-width: 1px 0 0 0;
}
.customjqgrid .ui-menu .ui-menu-item a {
text-decoration: none;
display: block;
padding: 2px .4em;
line-height: 1.5;
min-height: 0;
/* support: IE7 */
font-weight: normal;
}
.customjqgrid .ui-menu .ui-menu-item a.ui-state-focus,
.customjqgrid .ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
.customjqgrid .ui-menu .ui-state-disabled {
font-weight: normal;
margin: .4em 0 .2em;
line-height: 1.5;
}
.customjqgrid .ui-menu .ui-state-disabled a {
cursor: default;
}
/* icon support */
.customjqgrid .ui-menu-icons {
position: relative;
}
.customjqgrid .ui-menu-icons .ui-menu-item a {
position: relative;
padding-left: 2em;
}
/* left-aligned */
.customjqgrid .ui-menu .ui-icon {
position: absolute;
top: .2em;
left: .2em;
}
/* right-aligned */
.customjqgrid .ui-menu .ui-menu-icon {
position: static;
float: right;
}
.customjqgrid .ui-progressbar {
height: 2em;
text-align: left;
overflow: hidden;
}
.customjqgrid .ui-progressbar .ui-progressbar-value {
margin: -1px;
height: 100%;
}
.customjqgrid .ui-progressbar .ui-progressbar-overlay {
background: url("images/animated-overlay.gif");
height: 100%;
filter: alpha(opacity=25);
opacity: 0.25;
}
.customjqgrid .ui-progressbar-indeterminate .ui-progressbar-value {
background-image: none;
}
.customjqgrid .ui-slider {
position: relative;
text-align: left;
}
.customjqgrid .ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
}
.customjqgrid .ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
/* For IE8 - See #6727 */
.customjqgrid .ui-slider.ui-state-disabled .ui-slider-handle,
.customjqgrid .ui-slider.ui-state-disabled .ui-slider-range {
filter: inherit;
}
.customjqgrid .ui-slider-horizontal {
height: .8em;
}
.customjqgrid .ui-slider-horizontal .ui-slider-handle {
top: -.3em;
margin-left: -.6em;
}
.customjqgrid .ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.customjqgrid .ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.customjqgrid .ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.customjqgrid .ui-slider-vertical {
width: .8em;
height: 100px;
}
.customjqgrid .ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.customjqgrid .ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.customjqgrid .ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.customjqgrid .ui-slider-vertical .ui-slider-range-max {
top: 0;
}
.customjqgrid .ui-spinner {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
vertical-align: middle;
}
.customjqgrid .ui-spinner-input {
border: none;
background: none;
color: inherit;
padding: 0;
margin: .2em 0;
vertical-align: middle;
margin-left: .4em;
margin-right: 22px;
}
.customjqgrid .ui-spinner-button {
width: 16px;
height: 50%;
font-size: .5em;
padding: 0;
margin: 0;
text-align: center;
position: absolute;
cursor: default;
display: block;
overflow: hidden;
right: 0;
}
/* more specificity required here to overide default borders */
.customjqgrid .ui-spinner a.ui-spinner-button {
border-top: none;
border-bottom: none;
border-right: none;
}
/* vertical centre icon */
.customjqgrid .ui-spinner .ui-icon {
position: absolute;
margin-top: -8px;
top: 50%;
left: 0;
}
.customjqgrid .ui-spinner-up {
top: 0;
}
.customjqgrid .ui-spinner-down {
bottom: 0;
}
/* TR overrides */
.customjqgrid .ui-spinner .ui-icon-triangle-1-s {
/* need to fix icons sprite */
background-position: -65px -16px;
}
.customjqgrid .ui-tabs {
position: relative;
/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em;
}
.customjqgrid .ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
}
.customjqgrid .ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
}
.customjqgrid .ui-tabs .ui-tabs-nav li a {
float: left;
padding: .5em 1em;
text-decoration: none;
}
.customjqgrid .ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.customjqgrid .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.customjqgrid .ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.customjqgrid .ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
cursor: text;
}
.customjqgrid .ui-tabs .ui-tabs-nav li a,
/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.customjqgrid .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
cursor: pointer;
}
.customjqgrid .ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
}
.customjqgrid .ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .customjqgrid .ui-tooltip {
border-width: 2px;
}
/* Component containers
----------------------------------*/
.customjqgrid .ui-widget {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
.customjqgrid .ui-widget .ui-widget {
font-size: 1em;
}
.customjqgrid .ui-widget input,
.customjqgrid .ui-widget select,
.customjqgrid .ui-widget textarea,
.customjqgrid .ui-widget button {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
.customjqgrid .ui-widget-content {
border: 1px solid #FFFFFF;
background: #FFFFFF url(images/ui-bg_flat_25_FFFFFF_40x100.png) 50% 50% repeat-x;
color: #666666;
}
.customjqgrid .ui-widget-content a {
color: #666666;
}
.customjqgrid .ui-widget-header {
border: 1px solid #FFFFFF;
background: #FFFFFF url(images/ui-bg_flat_0_FFFFFF_40x100.png) 50% 50% repeat-x;
color: #2747cd;
font-weight: bold;
}
.customjqgrid .ui-widget-header a {
color: #2747cd;
}
/* Interaction states
----------------------------------*/
.customjqgrid .ui-state-default,
.customjqgrid .ui-widget-content .ui-state-default,
.customjqgrid .ui-widget-header .ui-state-default {
border: 1px solid #FFFFFF;
background: #FFFFFF url(images/ui-bg_flat_35_FFFFFF_40x100.png) 50% 50% repeat-x;
font-weight: bold;
color: #2747cd;
}
.customjqgrid .ui-state-default a,
.customjqgrid .ui-state-default a: link, .customjqgrid .ui-state-default a: visited {
color: #2747cd;
text-decoration: none;
}
.customjqgrid .ui-state-hover,
.customjqgrid .ui-widget-content .ui-state-hover,
.customjqgrid .ui-widget-header .ui-state-hover,
.customjqgrid .ui-state-focus,
.customjqgrid .ui-widget-content .ui-state-focus,
.customjqgrid .ui-widget-header .ui-state-focus {
border: 1px solid #FFFFFF;
background: #FFFFFF url(images/ui-bg_flat_33_FFFFFF_40x100.png) 50% 50% repeat-x;
font-weight: bold;
color: #2747cd;
}
.customjqgrid .ui-state-hover a,
.customjqgrid .ui-state-hover a: hover, .customjqgrid .ui-state-hover a: link, .customjqgrid .ui-state-hover a: visited {
color: #2747cd;
text-decoration: none;
}
.customjqgrid .ui-state-active,
.customjqgrid .ui-widget-content .ui-state-active,
.customjqgrid .ui-widget-header .ui-state-active {
border: 1px solid #FFFFFF;
background: #FFFFFF url(images/ui-bg_flat_20_FFFFFF_40x100.png) 50% 50% repeat-x;
font-weight: bold;
color: #2747cd;
}
.customjqgrid .ui-state-active a,
.customjqgrid .ui-state-active a: link, .customjqgrid .ui-state-active a: visited {
color: #2747cd;
text-decoration: none;
}
/* Interaction Cues
----------------------------------*/
.customjqgrid .ui-state-highlight,
.customjqgrid .ui-widget-content .ui-state-highlight,
.customjqgrid .ui-widget-header .ui-state-highlight {
border: 1px solid #FFFFFF;
background: #FFFFFF url(images/ui-bg_flat_80_FFFFFF_40x100.png) 50% 50% repeat-x;
color: #2e7db2;
}
.customjqgrid .ui-state-highlight a,
.customjqgrid .ui-widget-content .ui-state-highlight a,
.customjqgrid .ui-widget-header .ui-state-highlight a {
color: #2e7db2;
}
.customjqgrid .ui-state-error,
.customjqgrid .ui-widget-content .ui-state-error,
.customjqgrid .ui-widget-header .ui-state-error {
border: 1px solid #ffb73d;
background: #ffc73d url(images/ui-bg_flat_40_ffc73d_40x100.png) 50% 50% repeat-x;
color: #111111;
}
.customjqgrid .ui-state-error a,
.customjqgrid .ui-widget-content .ui-state-error a,
.customjqgrid .ui-widget-header .ui-state-error a {
color: #111111;
}
.customjqgrid .ui-state-error-text,
.customjqgrid .ui-widget-content .ui-state-error-text,
.customjqgrid .ui-widget-header .ui-state-error-text {
color: #111111;
}
.customjqgrid .ui-priority-primary,
.customjqgrid .ui-widget-content .ui-priority-primary,
.customjqgrid .ui-widget-header .ui-priority-primary {
font-weight: bold;
}
.customjqgrid .ui-priority-secondary,
.customjqgrid .ui-widget-content .ui-priority-secondary,
.customjqgrid .ui-widget-header .ui-priority-secondary {
opacity: .7;
filter: Alpha(Opacity=70);
font-weight: normal;
}
.customjqgrid .ui-state-disabled,
.customjqgrid .ui-widget-content .ui-state-disabled,
.customjqgrid .ui-widget-header .ui-state-disabled {
opacity: .35;
filter: Alpha(Opacity=35);
background-image: none;
}
.customjqgrid .ui-state-disabled .ui-icon {
filter: Alpha(Opacity=35);
/* For IE8 - See #6059 */
}
/* Icons
----------------------------------*/
/* states and images */
.customjqgrid .ui-icon {
width: 16px;
height: 16px;
}
.customjqgrid .ui-icon,
.customjqgrid .ui-widget-content .ui-icon {
background-image: url(images/ui-icons_cccccc_256x240.png);
}
.customjqgrid .ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ffffff_256x240.png);
}
.customjqgrid .ui-state-default .ui-icon {
background-image: url(images/ui-icons_000000_256x240.png);
}
.customjqgrid .ui-state-hover .ui-icon,
.customjqgrid .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_000000_256x240.png);
}
.customjqgrid .ui-state-active .ui-icon {
background-image: url(images/ui-icons_000000_256x240.png);
}
.customjqgrid .ui-state-highlight .ui-icon {
background-image: url(images/ui-icons_4b8e0b_256x240.png);
}
.customjqgrid .ui-state-error .ui-icon,
.customjqgrid .ui-state-error-text .ui-icon {
background-image: url(images/ui-icons_a83300_256x240.png);
}
/* positioning */
.customjqgrid .ui-icon-blank {
background-position: 16px 16px;
}
.customjqgrid .ui-icon-carat-1-n {
background-position: 0 0;
}
.customjqgrid .ui-icon-carat-1-ne {
background-position: -16px 0;
}
.customjqgrid .ui-icon-carat-1-e {
background-position: -32px 0;
}
.customjqgrid .ui-icon-carat-1-se {
background-position: -48px 0;
}
.customjqgrid .ui-icon-carat-1-s {
background-position: -64px 0;
}
.customjqgrid .ui-icon-carat-1-sw {
background-position: -80px 0;
}
.customjqgrid .ui-icon-carat-1-w {
background-position: -96px 0;
}
.customjqgrid .ui-icon-carat-1-nw {
background-position: -112px 0;
}
.customjqgrid .ui-icon-carat-2-n-s {
background-position: -128px 0;
}
.customjqgrid .ui-icon-carat-2-e-w {
background-position: -144px 0;
}
.customjqgrid .ui-icon-triangle-1-n {
background-position: 0 -16px;
}
.customjqgrid .ui-icon-triangle-1-ne {
background-position: -16px -16px;
}
.customjqgrid .ui-icon-triangle-1-e {
background-position: -32px -16px;
}
.customjqgrid .ui-icon-triangle-1-se {
background-position: -48px -16px;
}
.customjqgrid .ui-icon-triangle-1-s {
background-position: -64px -16px;
}
.customjqgrid .ui-icon-triangle-1-sw {
background-position: -80px -16px;
}
.customjqgrid .ui-icon-triangle-1-w {
background-position: -96px -16px;
}
.customjqgrid .ui-icon-triangle-1-nw {
background-position: -112px -16px;
}
.customjqgrid .ui-icon-triangle-2-n-s {
background-position: -128px -16px;
}
.customjqgrid .ui-icon-triangle-2-e-w {
background-position: -144px -16px;
}
.customjqgrid .ui-icon-arrow-1-n {
background-position: 0 -32px;
}
.customjqgrid .ui-icon-arrow-1-ne {
background-position: -16px -32px;
}
.customjqgrid .ui-icon-arrow-1-e {
background-position: -32px -32px;
}
.customjqgrid .ui-icon-arrow-1-se {
background-position: -48px -32px;
}
.customjqgrid .ui-icon-arrow-1-s {
background-position: -64px -32px;
}
.customjqgrid .ui-icon-arrow-1-sw {
background-position: -80px -32px;
}
.customjqgrid .ui-icon-arrow-1-w {
background-position: -96px -32px;
}
.customjqgrid .ui-icon-arrow-1-nw {
background-position: -112px -32px;
}
.customjqgrid .ui-icon-arrow-2-n-s {
background-position: -128px -32px;
}
.customjqgrid .ui-icon-arrow-2-ne-sw {
background-position: -144px -32px;
}
.customjqgrid .ui-icon-arrow-2-e-w {
background-position: -160px -32px;
}
.customjqgrid .ui-icon-arrow-2-se-nw {
background-position: -176px -32px;
}
.customjqgrid .ui-icon-arrowstop-1-n {
background-position: -192px -32px;
}
.customjqgrid .ui-icon-arrowstop-1-e {
background-position: -208px -32px;
}
.customjqgrid .ui-icon-arrowstop-1-s {
background-position: -224px -32px;
}
.customjqgrid .ui-icon-arrowstop-1-w {
background-position: -240px -32px;
}
.customjqgrid .ui-icon-arrowthick-1-n {
background-position: 0 -48px;
}
.customjqgrid .ui-icon-arrowthick-1-ne {
background-position: -16px -48px;
}
.customjqgrid .ui-icon-arrowthick-1-e {
background-position: -32px -48px;
}
.customjqgrid .ui-icon-arrowthick-1-se {
background-position: -48px -48px;
}
.customjqgrid .ui-icon-arrowthick-1-s {
background-position: -64px -48px;
}
.customjqgrid .ui-icon-arrowthick-1-sw {
background-position: -80px -48px;
}
.customjqgrid .ui-icon-arrowthick-1-w {
background-position: -96px -48px;
}
.customjqgrid .ui-icon-arrowthick-1-nw {
background-position: -112px -48px;
}
.customjqgrid .ui-icon-arrowthick-2-n-s {
background-position: -128px -48px;
}
.customjqgrid .ui-icon-arrowthick-2-ne-sw {
background-position: -144px -48px;
}
.customjqgrid .ui-icon-arrowthick-2-e-w {
background-position: -160px -48px;
}
.customjqgrid .ui-icon-arrowthick-2-se-nw {
background-position: -176px -48px;
}
.customjqgrid .ui-icon-arrowthickstop-1-n {
background-position: -192px -48px;
}
.customjqgrid .ui-icon-arrowthickstop-1-e {
background-position: -208px -48px;
}
.customjqgrid .ui-icon-arrowthickstop-1-s {
background-position: -224px -48px;
}
.customjqgrid .ui-icon-arrowthickstop-1-w {
background-position: -240px -48px;
}
.customjqgrid .ui-icon-arrowreturnthick-1-w {
background-position: 0 -64px;
}
.customjqgrid .ui-icon-arrowreturnthick-1-n {
background-position: -16px -64px;
}
.customjqgrid .ui-icon-arrowreturnthick-1-e {
background-position: -32px -64px;
}
.customjqgrid .ui-icon-arrowreturnthick-1-s {
background-position: -48px -64px;
}
.customjqgrid .ui-icon-arrowreturn-1-w {
background-position: -64px -64px;
}
.customjqgrid .ui-icon-arrowreturn-1-n {
background-position: -80px -64px;
}
.customjqgrid .ui-icon-arrowreturn-1-e {
background-position: -96px -64px;
}
.customjqgrid .ui-icon-arrowreturn-1-s {
background-position: -112px -64px;
}
.customjqgrid .ui-icon-arrowrefresh-1-w {
background-position: -128px -64px;
}
.customjqgrid .ui-icon-arrowrefresh-1-n {
background-position: -144px -64px;
}
.customjqgrid .ui-icon-arrowrefresh-1-e {
background-position: -160px -64px;
}
.customjqgrid .ui-icon-arrowrefresh-1-s {
background-position: -176px -64px;
}
.customjqgrid .ui-icon-arrow-4 {
background-position: 0 -80px;
}
.customjqgrid .ui-icon-arrow-4-diag {
background-position: -16px -80px;
}
.customjqgrid .ui-icon-extlink {
background-position: -32px -80px;
}
.customjqgrid .ui-icon-newwin {
background-position: -48px -80px;
}
.customjqgrid .ui-icon-refresh {
background-position: -64px -80px;
}
.customjqgrid .ui-icon-shuffle {
background-position: -80px -80px;
}
.customjqgrid .ui-icon-transfer-e-w {
background-position: -96px -80px;
}
.customjqgrid .ui-icon-transferthick-e-w {
background-position: -112px -80px;
}
.customjqgrid .ui-icon-folder-collapsed {
background-position: 0 -96px;
}
.customjqgrid .ui-icon-folder-open {
background-position: -16px -96px;
}
.customjqgrid .ui-icon-document {
background-position: -32px -96px;
}
.customjqgrid .ui-icon-document-b {
background-position: -48px -96px;
}
.customjqgrid .ui-icon-note {
background-position: -64px -96px;
}
.customjqgrid .ui-icon-mail-closed {
background-position: -80px -96px;
}
.customjqgrid .ui-icon-mail-open {
background-position: -96px -96px;
}
.customjqgrid .ui-icon-suitcase {
background-position: -112px -96px;
}
.customjqgrid .ui-icon-comment {
background-position: -128px -96px;
}
.customjqgrid .ui-icon-person {
background-position: -144px -96px;
}
.customjqgrid .ui-icon-print {
background-position: -160px -96px;
}
.customjqgrid .ui-icon-trash {
background-position: -176px -96px;
}
.customjqgrid .ui-icon-locked {
background-position: -192px -96px;
}
.customjqgrid .ui-icon-unlocked {
background-position: -208px -96px;
}
.customjqgrid .ui-icon-bookmark {
background-position: -224px -96px;
}
.customjqgrid .ui-icon-tag {
background-position: -240px -96px;
}
.customjqgrid .ui-icon-home {
background-position: 0 -112px;
}
.customjqgrid .ui-icon-flag {
background-position: -16px -112px;
}
.customjqgrid .ui-icon-calendar {
background-position: -32px -112px;
}
.customjqgrid .ui-icon-cart {
background-position: -48px -112px;
}
.customjqgrid .ui-icon-pencil {
background-position: -64px -112px;
}
.customjqgrid .ui-icon-clock {
background-position: -80px -112px;
}
.customjqgrid .ui-icon-disk {
background-position: -96px -112px;
}
.customjqgrid .ui-icon-calculator {
background-position: -112px -112px;
}
.customjqgrid .ui-icon-zoomin {
background-position: -128px -112px;
}
.customjqgrid .ui-icon-zoomout {
background-position: -144px -112px;
}
.customjqgrid .ui-icon-search {
background-position: -160px -112px;
}
.customjqgrid .ui-icon-wrench {
background-position: -176px -112px;
}
.customjqgrid .ui-icon-gear {
background-position: -192px -112px;
}
.customjqgrid .ui-icon-heart {
background-position: -208px -112px;
}
.customjqgrid .ui-icon-star {
background-position: -224px -112px;
}
.customjqgrid .ui-icon-link {
background-position: -240px -112px;
}
.customjqgrid .ui-icon-cancel {
background-position: 0 -128px;
}
.customjqgrid .ui-icon-plus {
background-position: -16px -128px;
}
.customjqgrid .ui-icon-plusthick {
background-position: -32px -128px;
}
.customjqgrid .ui-icon-minus {
background-position: -48px -128px;
}
.customjqgrid .ui-icon-minusthick {
background-position: -64px -128px;
}
.customjqgrid .ui-icon-close {
background-position: -80px -128px;
}
.customjqgrid .ui-icon-closethick {
background-position: -96px -128px;
}
.customjqgrid .ui-icon-key {
background-position: -112px -128px;
}
.customjqgrid .ui-icon-lightbulb {
background-position: -128px -128px;
}
.customjqgrid .ui-icon-scissors {
background-position: -144px -128px;
}
.customjqgrid .ui-icon-clipboard {
background-position: -160px -128px;
}
.customjqgrid .ui-icon-copy {
background-position: -176px -128px;
}
.customjqgrid .ui-icon-contact {
background-position: -192px -128px;
}
.customjqgrid .ui-icon-image {
background-position: -208px -128px;
}
.customjqgrid .ui-icon-video {
background-position: -224px -128px;
}
.customjqgrid .ui-icon-script {
background-position: -240px -128px;
}
.customjqgrid .ui-icon-alert {
background-position: 0 -144px;
}
.customjqgrid .ui-icon-info {
background-position: -16px -144px;
}
.customjqgrid .ui-icon-notice {
background-position: -32px -144px;
}
.customjqgrid .ui-icon-help {
background-position: -48px -144px;
}
.customjqgrid .ui-icon-check {
background-position: -64px -144px;
}
.customjqgrid .ui-icon-bullet {
background-position: -80px -144px;
}
.customjqgrid .ui-icon-radio-on {
background-position: -96px -144px;
}
.customjqgrid .ui-icon-radio-off {
background-position: -112px -144px;
}
.customjqgrid .ui-icon-pin-w {
background-position: -128px -144px;
}
.customjqgrid .ui-icon-pin-s {
background-position: -144px -144px;
}
.customjqgrid .ui-icon-play {
background-position: 0 -160px;
}
.customjqgrid .ui-icon-pause {
background-position: -16px -160px;
}
.customjqgrid .ui-icon-seek-next {
background-position: -32px -160px;
}
.customjqgrid .ui-icon-seek-prev {
background-position: -48px -160px;
}
.customjqgrid .ui-icon-seek-end {
background-position: -64px -160px;
}
.customjqgrid .ui-icon-seek-start {
background-position: -80px -160px;
}
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.customjqgrid .ui-icon-seek-first {
background-position: -80px -160px;
}
.customjqgrid .ui-icon-stop {
background-position: -96px -160px;
}
.customjqgrid .ui-icon-eject {
background-position: -112px -160px;
}
.customjqgrid .ui-icon-volume-off {
background-position: -128px -160px;
}
.customjqgrid .ui-icon-volume-on {
background-position: -144px -160px;
}
.customjqgrid .ui-icon-power {
background-position: 0 -176px;
}
.customjqgrid .ui-icon-signal-diag {
background-position: -16px -176px;
}
.customjqgrid .ui-icon-signal {
background-position: -32px -176px;
}
.customjqgrid .ui-icon-battery-0 {
background-position: -48px -176px;
}
.customjqgrid .ui-icon-battery-1 {
background-position: -64px -176px;
}
.customjqgrid .ui-icon-battery-2 {
background-position: -80px -176px;
}
.customjqgrid .ui-icon-battery-3 {
background-position: -96px -176px;
}
.customjqgrid .ui-icon-circle-plus {
background-position: 0 -192px;
}
.customjqgrid .ui-icon-circle-minus {
background-position: -16px -192px;
}
.customjqgrid .ui-icon-circle-close {
background-position: -32px -192px;
}
.customjqgrid .ui-icon-circle-triangle-e {
background-position: -48px -192px;
}
.customjqgrid .ui-icon-circle-triangle-s {
background-position: -64px -192px;
}
.customjqgrid .ui-icon-circle-triangle-w {
background-position: -80px -192px;
}
.customjqgrid .ui-icon-circle-triangle-n {
background-position: -96px -192px;
}
.customjqgrid .ui-icon-circle-arrow-e {
background-position: -112px -192px;
}
.customjqgrid .ui-icon-circle-arrow-s {
background-position: -128px -192px;
}
.customjqgrid .ui-icon-circle-arrow-w {
background-position: -144px -192px;
}
.customjqgrid .ui-icon-circle-arrow-n {
background-position: -160px -192px;
}
.customjqgrid .ui-icon-circle-zoomin {
background-position: -176px -192px;
}
.customjqgrid .ui-icon-circle-zoomout {
background-position: -192px -192px;
}
.customjqgrid .ui-icon-circle-check {
background-position: -208px -192px;
}
.customjqgrid .ui-icon-circlesmall-plus {
background-position: 0 -208px;
}
.customjqgrid .ui-icon-circlesmall-minus {
background-position: -16px -208px;
}
.customjqgrid .ui-icon-circlesmall-close {
background-position: -32px -208px;
}
.customjqgrid .ui-icon-squaresmall-plus {
background-position: -48px -208px;
}
.customjqgrid .ui-icon-squaresmall-minus {
background-position: -64px -208px;
}
.customjqgrid .ui-icon-squaresmall-close {
background-position: -80px -208px;
}
.customjqgrid .ui-icon-grip-dotted-vertical {
background-position: 0 -224px;
}
.customjqgrid .ui-icon-grip-dotted-horizontal {
background-position: -16px -224px;
}
.customjqgrid .ui-icon-grip-solid-vertical {
background-position: -32px -224px;
}
.customjqgrid .ui-icon-grip-solid-horizontal {
background-position: -48px -224px;
}
.customjqgrid .ui-icon-gripsmall-diagonal-se {
background-position: -64px -224px;
}
.customjqgrid .ui-icon-grip-diagonal-se {
background-position: -80px -224px;
}
/* Misc visuals
----------------------------------*/
/* Corner radius */
.customjqgrid .ui-corner-all,
.customjqgrid .ui-corner-top,
.customjqgrid .ui-corner-left,
.customjqgrid .ui-corner-tl {
border-top-left-radius: 6px;
}
.customjqgrid .ui-corner-all,
.customjqgrid .ui-corner-top,
.customjqgrid .ui-corner-right,
.customjqgrid .ui-corner-tr {
border-top-right-radius: 6px;
}
.customjqgrid .ui-corner-all,
.customjqgrid .ui-corner-bottom,
.customjqgrid .ui-corner-left,
.customjqgrid .ui-corner-bl {
border-bottom-left-radius: 6px;
}
.customjqgrid .ui-corner-all,
.customjqgrid .ui-corner-bottom,
.customjqgrid .ui-corner-right,
.customjqgrid .ui-corner-br {
border-bottom-right-radius: 6px;
}
/* Overlays */
.customjqgrid .ui-widget-overlay {
background: #5c5c5c url(images/ui-bg_flat_50_5c5c5c_40x100.png) 50% 50% repeat-x;
opacity: .8;
filter: Alpha(Opacity=80);
}
.customjqgrid .ui-widget-shadow {
margin: -7px 0 0 -7px;
padding: 7px;
background: #cccccc url(images/ui-bg_flat_30_cccccc_40x100.png) 50% 50% repeat-x;
opacity: .6;
filter: Alpha(Opacity=60);
border-radius: 8px;
}
(function ($, jQuery, window, document) {
"use strict";
var resetCssWidthToBrowserDefault = { 'width': 'auto', 'white-space': 'nowrap', 'word-wrap': 'normal', 'zoom':'1' },
initGridVariables = function (grid, option) {
if (!grid) { return; }
var o = $.extend({}, {cacheCells: false}, option)
//header
grid.$hDiv = grid.$hDiv || $(grid.hDiv);
grid.$hTable = grid.$hTable || grid.$hDiv.find("table:first");
grid.$hCells = o.cacheCells
? (grid.$hCells || $($.map(grid.headers, function (item) { return item.el; })))
: $($.map(grid.headers, function (item) { return item.el; }));
//body
grid.$bDiv = grid.$bDiv || $(grid.bDiv);
grid.$bTable = grid.$bTable || grid.$bDiv.find("table:first");
grid.$bCells = o.cacheCells
? grid.$bCells || $(grid.cols)
: $(grid.cols);
};
// add new functions to jqGrid instance
$.jgrid.extend({
base_setGridWidth: $.fn.jqGrid.setGridWidth,
setGridWidth: function (nwidth, shrink) {
var pagerWidthForGrids = [];
this.each(function () {
if (!this.grid || !this.p ) { return; }
pagerWidthForGrids.push($(this).jqGrid('getPagerWidth'));
});
this.jqGrid("base_setGridWidth", nwidth, shrink);
this.each(function (index) {
if (!this.grid || !this.p) { return; }
if ((pagerWidthForGrids[index] - this.p.tblwidth) > 0)
$(this).jqGrid('setPagerWidth', pagerWidthForGrids[index]);
});
return this;
},
setColumnWidth: function (colIdx, newWidth) {
return this.each(function () {
colIdx = parseInt(colIdx, 10);
if (isNaN(colIdx) || !this.grid || !this.p) { return; }
var columnCount = this.p.colModel.length;
if (colIdx < columnCount && colIdx >= columnCount) { return; }
this.p.colModel[colIdx].width = newWidth;
this.grid.headers[colIdx].width = newWidth;
this.grid.headers[colIdx].el.style.width = newWidth + "px";
this.grid.cols[colIdx].style.width = newWidth + "px";
if (this.grid.footers.length > 0) {
this.grid.footers[colIdx].style.width = newWidth + "px";
}
});
},
getPagerWidth: function () {
var table = this.get(0);
if (!table.grid || !table.p || !(table.p.toppager || table.p.pager)) {
return 0;
}
var $pagerTable = $(table.p.toppager).add(table.p.pager).find("table.ui-pg-table:first"),
pagerWidth;
// reset css
$pagerTable.parentsUntil(".customjqgrid").css(resetCssWidthToBrowserDefault);
$pagerTable.css("table-layout", "auto").css(resetCssWidthToBrowserDefault);
pagerWidth = $pagerTable.outerWidth();
$pagerTable.css("table-layout", "fixed");
return pagerWidth;
},
setPagerWidth: function (newWidth) {
return this.each(function () {
if (!this.grid || !this.p || !(this.p.toppager || this.p.pager)) { return; }
$(this.p.toppager).add(this.p.pager).width(newWidth);
});
},
resizeColumnBasedOnContent: function (colIdx, options) {
var SORT_ARROWS_WIDTH = 14,
settings = $.extend({}, {
resetCss: true,
resizeGrid: true
}, options);
return this.each(function () {
colIdx = parseInt(colIdx, 10);
if (isNaN(colIdx) || !this.grid || !this.p) { return; }
var $this = $(this)
, grid = this.grid
, col = this.p.colModel[colIdx]
, $cellH, $cellB
, headerCellWidth, bodyCellWidth;
initGridVariables(grid);
if (settings.resetCss) {
//reset css
grid.$hTable.add(grid.$bTable).css({ 'table-layout': 'auto' });
grid.$hDiv.add(grid.$bDiv)
.add(grid.$hTable).add(grid.$bTable)
.css(resetCssWidthToBrowserDefault);
}
//calculate the header cells width
$cellH = grid.$hCells.eq(colIdx).css(resetCssWidthToBrowserDefault);
headerCellWidth = $cellH.outerWidth(true) + (col.sortable ? SORT_ARROWS_WIDTH : 0);
//calculate the body cells width
$cellB = grid.$bCells.eq(colIdx).css(resetCssWidthToBrowserDefault);
bodyCellWidth = $cellB.outerWidth(true);
//apply the width
$this.jqGrid('setColumnWidth', colIdx, Math.max(headerCellWidth, bodyCellWidth));
if (settings.resetCss) {
// reset some properties of the css back to the original valueand add some more
grid.$hTable.add(grid.$bTable).css({ 'table-layout': 'fixed' });
}
if (settings.resizeGrid) {
this.p.tblwidth = $this.outerWidth(true);
$this.jqGrid('setGridWidth', this.p.tblwidth, false);
}
});
},
resizeAllColumnsBasedOnContent: function () {
var DINAMIC_WIDTH_COLUMN_CLASS = "custom-jqgrid-dinamic-width",
dinamicWidthRegex = new RegExp("\\b" + DINAMIC_WIDTH_COLUMN_CLASS + "\\b", "i");
return this.each(function () {
if (!this.grid || !this.p) { return; }
var $this = $(this),
grid = this.grid,
colModel = this.p.colModel,
colColectionCount = colModel.length;
initGridVariables(grid);
//reset css
grid.$hTable.add(grid.$bTable).css({ 'table-layout': 'auto' });
grid.$hDiv.add(grid.$bDiv).add(grid.$hTable).add(grid.$bTable).css(resetCssWidthToBrowserDefault);
for (var i = 0; i < colColectionCount; i++) {
var col = colModel[i];
if (dinamicWidthRegex.test(col.classes) && !col._resized) {
$this.jqGrid('resizeColumnBasedOnContent', i, {
resetCss: false,
resizeGrid: false
});
}
}
// reset some properties of the css back to the original value add some more
grid.$hTable.add(grid.$bTable).css({ 'table-layout': 'fixed' });
this.p.tblwidth = $this.outerWidth(true);
$this.jqGrid('setGridWidth', this.p.tblwidth, false);
});
},
resizeColumnBasedOnContentOnjqGridColumnResizerDbClick: function () {
return this.each(function () {
if (!this.grid || !this.p) { return; }
var $this = $(this)
, grid = this.grid
, p = this.p;
// the bind should happen only once
if (grid._dbClickBind) return;
grid._dbClickBind = true;
$(grid.hDiv).find("span.ui-jqgrid-resize").on('dblclick', function () {
$("#rs_m" + $.jgrid.jqID(p.id)).css("display", "none");
var idx = $.jgrid.getCellIndex($(this).parent());
$this.jqGrid('resizeColumnBasedOnContent', idx);
p.colModel[idx]._resized = false;
});
});
},
resizeLastColumnOnGridResize: function(){
return this.each(function(){
if (!this.grid || !this.p || this.isGridResizeEventBound) { return; }
this.isGridResizeEventBound = true;
var $this = $(this),
grid = this.grid;
$this.jqGrid('gridResize',{
shrinkToFit: false,
handles: "e",
resize: function( event, ui ) {
initGridVariables(grid, {cacheCells: true});
var $lastColumn = $hCells.last().add(grid.$bCells.last()),
newSize = event.pageX - $lastColumn.offset().left;
$lastColumn.width(newSize);
},
stop: function() {
var $lastColumn = grid.$hCells.last().add(grid.$bCells.last()),
newSize = event.pageX - $lastColumn.offset().left;
$this.jqGrid("setColumnWidth", this.p.colModel.length-1, newSize);
//
grid.$hCells = grid.$bCells = null;
}
});
});
},
handleNoRecordsMessageDisplay: function() {
return this.each(function() {
if (!this.grid || !this.p) {
return;
}
var $this = $(this),
props = this.p;
//actual divs containing the message in the pager(s)
var $pagingInfos = $(props.pager).add(props.toppager)
.find(".ui-paging-info");
//build a div with a prominent 'no data' message.
var $noRecordsDiv = $this.siblings('#emptyRecords');
if ($noRecordsDiv.length === 0) {
$noRecordsDiv = $("<div/>", {
text: props.emptyrecords,
id: 'emptyRecords'
}).css({
"text-align": "center",
"font-weight":"bold",
"font-size":"1.2em",
"padding" : "10px 0"
}).hide();
//add the message after the jqgrid data table
$this.after($noRecordsDiv);
}
if (props.viewrecords && props.reccount === 0) {
$pagingInfos.hide();
$noRecordsDiv.show();
} else {
$pagingInfos.show(); // same divs used to show 'Records 100 to 200'
$noRecordsDiv.hide();
}
});
}
});
}(jQuery, jQuery, window, window.document));
/*jQGrid Styles*/
.customjqgrid .ui-jqgrid .ui-jqgrid-btable > tbody > tr.jqgrow,
.customjqgrid .ui-jqgrid .ui-jqgrid-btable > tbody > tr.jqgrow.ui-state-highlight {
height: 2.7em;
border: none;
background-image: none;
}
/*necjqgrid default cell style*/
.customjqgrid .ui-jqgrid .ui-jqgrid-btable > tbody > tr.jqgrow > td {
font-size: 11px;
border-width: 0px;
background-image: none;
border: none;
}
/*necjqgrid default row style*/
.customjqgrid TR.jqGridDefaultRow,
.customjqgrid TR.jqGridDefaultRow: hover, .customjqgrid TR.jqGridDefaultRow.ui-state-highlight {
color: #666666;
background-color: #eef2f9;
background-image: none;
}
/*necjqgrid alternate row style*/
.customjqgrid TR.jqGridAlternateRow,
.customjqgrid TR.jqGridAlternateRow: hover, .customjqgrid TR.jqGridAlternateRow.ui-state-highlight {
color: #666666;
background-color: white;
background-image: none;
}
.customjqgrid .ui-widget-content tr.jqGridDefaultRow {
color: #666666;
background-color: #eef2f9;
background-image: none;
}
.customjqgrid .ui-widget-content tr.jqGridAlternateRow {
color: #666666;
background-color: #FFFFFF;
background-image: none;
}
.customjqgrid .ui-widget-content tr.jqGridGrayRow {
color: #B0B0B0;
}
.customjqgrid tr.jqGridDefaultRow > td.edit-cell.ui-state-highlight {
color: #666666;
background-color: #eef2f9;
background-image: none;
}
.customjqgrid tr.jqGridAlternateRow > td.edit-cell.ui-state-highlight {
color: #666666;
background-color: #FFFFFF;
background-image: none;
}
.customjqgrid .SingleSelectMode TR.jqGridDefaultRow.ui-state-highlight,
.customjqgrid .SingleSelectMode TR.jqGridAlternateRow.ui-state-highlight {
color: #666666;
background-color: #fad42e;
}
.customjqgrid .ui-jqgrid .ui-jqgrid-btable.SingleSelectMode TR.ui-state-highlight>TD.RowSingleSelector {
background-image: url(../../Protected/Images/StormFront/jq_grid_Tri.gif);
background-repeat: no-repeat;
background-position: center;
color: #666666;
background-color: #fad42e;
}
/*necjqgrid header*/
.customjqgrid .ui-jqgrid .ui-jqgrid-btable {
border-top: 1px solid #DEDCDC;
}
.customjqgrid th > div {
text-align: left;
padding-left: 0.75em;
padding-right: 0.75em;
}
/*select all cb*/
.customjqgrid th.ui-th-column > div[id$=_cb] {
padding: 0;
width: 25px !important;
}
/*necjqgrid header hover*/
.customjqgrid th.ui-state-hover > div {
-webkit-text-shadow: 1px 1px 1px #CCCCCC;
text-shadow: 1px 1px 1px #CCCCCC;
}
/*necjqgrid header icons display*/
.customjqgrid TH>DIV SPAN.ui-icon {
display: inline-block;
}
/*necjqgrid wrap text and padding*/
.customjqgrid .ui-jqgrid tr.jqgrow > td {
overflow: hidden;
height: auto;
vertical-align: middle;
padding: 0.25em 0.75em;
}
/*cb from the select all column*/
.customjqgrid div.ui-jqgrid-bdiv tr > td[aria-describedby$=_cb] {
padding: 0.25em;
}
/*necjqgrid links*/
.customjqgrid TR a.jQGridLink,
.customjqgrid TR.ui-state-highlight a.jQGridLink,
.customjqgrid TR: hover a.jQGridLink {
color: #eb2931;
text-decoration: underline;
cursor: pointer;
}
.customjqgrid TR a.jQGridLinkDisabled,
.customjqgrid TR.ui-state-highlight a.jQGridLinkDisabled,
.customjqgrid TR: hover a.jQGridLinkDisabled {
pointer-events: none;
color: #A0A0A0;
}
/*necjqgrid pager*/
.customjqgrid .ui-jqgrid div.ui-jqgrid-pager {
border-top: 1px solid #DEDCDC;
color: #666666;
}
.customjqgrid table[aria-multiselectable="true"] {
cursor: pointer;
}
.customjqgrid .ui-jqgrid div.ui-jqgrid-toppager {
/*border-bottom: 1px solid #DEDCDC;*/
color: #666666;
}
.customjqgrid tr.jqGridRowDetails>td.jqGridTextAlignRight {
text-align: right;
}
.customjqgrid tr.jqGridRowDetails>td.jqGridTextAlignLeft {
text-align: left;
}
.customjqgrid .ui-jqgrid .ui-jqgrid-hbox {
padding-right: 0;
}
/* DEBUG */
.customjqgrid .ui-jqgrid.ui-widget.ui-widget-content {
background-color:red;
}
/*Grid*/
.ui-jqgrid {position: relative;}
.ui-jqgrid .ui-jqgrid-view {position: relative;left:0; top: 0; padding: 0; font-size:11px;}
/* caption*/
.ui-jqgrid .ui-jqgrid-titlebar {padding: .3em .2em .2em .3em; position: relative; border-left: 0 none;border-right: 0 none; border-top: 0 none;}
.ui-jqgrid .ui-jqgrid-title { float: left; margin: .1em 0 .2em; }
.ui-jqgrid .ui-jqgrid-titlebar-close { position: absolute;top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height:18px; cursor:pointer;}
.ui-jqgrid .ui-jqgrid-titlebar-close span { display: block; margin: 1px; }
.ui-jqgrid .ui-jqgrid-titlebar-close:hover { padding: 0; }
/* header*/
.ui-jqgrid .ui-jqgrid-hdiv {position: relative; margin: 0;padding: 0; overflow-x: hidden; border-left: 0 none !important; border-top : 0 none !important; border-right : 0 none !important;}
.ui-jqgrid .ui-jqgrid-hbox {float: left; padding-right: 20px;}
.ui-jqgrid .ui-jqgrid-htable {table-layout:fixed;margin:0;}
.ui-jqgrid .ui-jqgrid-htable th {height:22px;padding: 0 2px 0 2px;}
.ui-jqgrid .ui-jqgrid-htable th div {overflow: hidden; position:relative; height:17px;}
.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {overflow: hidden;white-space: nowrap;text-align:center;border-top : 0 none;border-bottom : 0 none;}
.ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {border-left : 0 none;}
.ui-th-rtl, .ui-jqgrid .ui-jqgrid-htable th.ui-th-rtl {border-right : 0 none;}
.ui-first-th-ltr {border-right: 1px solid; }
.ui-first-th-rtl {border-left: 1px solid; }
.ui-jqgrid .ui-th-div-ie {white-space: nowrap; zoom :1; height:17px;}
.ui-jqgrid .ui-jqgrid-resize {height:20px !important;position: relative; cursor :e-resize;display: inline;overflow: hidden;}
.ui-jqgrid .ui-grid-ico-sort {overflow:hidden;position:absolute;display:inline; cursor: pointer !important;}
.ui-jqgrid .ui-icon-asc {margin-top:-3px; height:12px;}
.ui-jqgrid .ui-icon-desc {margin-top:3px;height:12px;}
.ui-jqgrid .ui-i-asc {margin-top:0;height:16px;}
.ui-jqgrid .ui-i-desc {margin-top:0;margin-left:13px;height:16px;}
.ui-jqgrid .ui-jqgrid-sortable {cursor:pointer;}
.ui-jqgrid tr.ui-search-toolbar th { border-top-width: 1px !important; border-top-color: inherit !important; border-top-style: ridge !important }
tr.ui-search-toolbar input {margin: 1px 0 0 0}
tr.ui-search-toolbar select {margin: 1px 0 0 0}
/* body */
.ui-jqgrid .ui-jqgrid-bdiv {position: relative; margin: 0; padding:0; overflow: auto; text-align:left;}
.ui-jqgrid .ui-jqgrid-btable {table-layout:fixed; margin:0; outline-style: none; }
.ui-jqgrid tr.jqgrow { outline-style: none; }
.ui-jqgrid tr.jqgroup { outline-style: none; }
.ui-jqgrid tr.jqgrow td {font-weight: normal; overflow: hidden; white-space: pre; height: 22px;padding: 0 2px 0 2px;border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: solid;}
.ui-jqgrid tr.jqgfirstrow td {padding: 0 2px 0 2px;border-right-width: 1px; border-right-style: solid;}
.ui-jqgrid tr.jqgroup td {font-weight: normal; overflow: hidden; white-space: pre; height: 22px;padding: 0 2px 0 2px;border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: solid;}
.ui-jqgrid tr.jqfoot td {font-weight: bold; overflow: hidden; white-space: pre; height: 22px;padding: 0 2px 0 2px;border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: solid;}
.ui-jqgrid tr.ui-row-ltr td {text-align:left;border-right-width: 1px; border-right-color: inherit; border-right-style: solid;}
.ui-jqgrid tr.ui-row-rtl td {text-align:right;border-left-width: 1px; border-left-color: inherit; border-left-style: solid;}
.ui-jqgrid td.jqgrid-rownum { padding: 0 2px 0 2px; margin: 0; border: 0 none;}
.ui-jqgrid .ui-jqgrid-resize-mark { width:2px; left:0; background-color:#777; cursor: e-resize; cursor: col-resize; position:absolute; top:0; height:100px; overflow:hidden; display:none; border:0 none; z-index: 99999;}
/* footer */
.ui-jqgrid .ui-jqgrid-sdiv {position: relative; margin: 0;padding: 0; overflow: hidden; border-left: 0 none !important; border-top : 0 none !important; border-right : 0 none !important;}
.ui-jqgrid .ui-jqgrid-ftable {table-layout:fixed; margin-bottom:0;}
.ui-jqgrid tr.footrow td {font-weight: bold; overflow: hidden; white-space:nowrap; height: 21px;padding: 0 2px 0 2px;border-top-width: 1px; border-top-color: inherit; border-top-style: solid;}
.ui-jqgrid tr.footrow-ltr td {text-align:left;border-right-width: 1px; border-right-color: inherit; border-right-style: solid;}
.ui-jqgrid tr.footrow-rtl td {text-align:right;border-left-width: 1px; border-left-color: inherit; border-left-style: solid;}
/* Pager*/
.ui-jqgrid .ui-jqgrid-pager { border-left: 0 none !important;border-right: 0 none !important; border-bottom: 0 none !important; margin: 0 !important; padding: 0 !important; position: relative; height: 25px;white-space: nowrap;overflow: hidden;font-size:11px;}
.ui-jqgrid .ui-pager-control {position: relative;}
.ui-jqgrid .ui-pg-table {position: relative; padding-bottom:2px; width:auto; margin: 0;}
.ui-jqgrid .ui-pg-table td {font-weight:normal; vertical-align:middle; padding:1px;}
.ui-jqgrid .ui-pg-button { height:19px !important;}
.ui-jqgrid .ui-pg-button span { display: block; margin: 1px; float:left;}
.ui-jqgrid .ui-pg-button:hover { padding: 0; }
.ui-jqgrid .ui-state-disabled:hover {padding:1px;}
.ui-jqgrid .ui-pg-input { height:13px;font-size:.8em; margin: 0;}
.ui-jqgrid .ui-pg-selbox {font-size:.8em; line-height:18px; display:block; height:18px; margin: 0;}
.ui-jqgrid .ui-separator {height: 18px; border-left: 1px solid #ccc ; border-right: 1px solid #ccc ; margin: 1px; float: right;}
.ui-jqgrid .ui-paging-info {font-weight: normal;height:19px; margin-top:3px;margin-right:4px;}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div {padding:1px 0;float:left;position:relative;}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-button { cursor:pointer; }
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon {float:left;margin:0 2px;}
.ui-jqgrid td input, .ui-jqgrid td select .ui-jqgrid td textarea { margin: 0;}
.ui-jqgrid td textarea {width:auto;height:auto;}
.ui-jqgrid .ui-jqgrid-toppager {border-left: 0 none !important;border-right: 0 none !important; border-top: 0 none !important; margin: 0 !important; padding: 0 !important; position: relative; height: 25px !important;white-space: nowrap;overflow: hidden;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div {padding:1px 0;float:left;position:relative;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-button { cursor:pointer; }
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {float:left;margin:0 2px;}
/*subgrid*/
.ui-jqgrid .ui-jqgrid-btable .ui-sgcollapsed span {display: block;}
.ui-jqgrid .ui-subgrid {margin:0;padding:0; width:100%;}
.ui-jqgrid .ui-subgrid table {table-layout: fixed;}
.ui-jqgrid .ui-subgrid tr.ui-subtblcell td {height:18px;border-right-width: 1px; border-right-color: inherit; border-right-style: solid;border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: solid;}
.ui-jqgrid .ui-subgrid td.subgrid-data {border-top: 0 none !important;}
.ui-jqgrid .ui-subgrid td.subgrid-cell {border-width: 0 0 1px 0;}
.ui-jqgrid .ui-th-subgrid {height:20px;}
/* loading */
.ui-jqgrid .loading {position: absolute; top: 45%;left: 45%;width: auto;z-index:101;padding: 6px; margin: 5px;text-align: center;font-weight: bold;display: none;border-width: 2px !important; font-size:11px;}
.ui-jqgrid .jqgrid-overlay {display:none;z-index:100;}
* html .jqgrid-overlay {width: expression(this.parentNode.offsetWidth+'px');height: expression(this.parentNode.offsetHeight+'px');}
* .jqgrid-overlay iframe {position:absolute;top:0;left:0;z-index:-1;width: expression(this.parentNode.offsetWidth+'px');height: expression(this.parentNode.offsetHeight+'px');}
/* end loading div */
/* toolbar */
.ui-jqgrid .ui-userdata {border-left: 0 none; border-right: 0 none; height : 21px;overflow: hidden; }
/*Modal Window */
.ui-jqdialog { display: none; width: 300px; position: absolute; padding: .2em; font-size:11px; overflow:visible;}
.ui-jqdialog .ui-jqdialog-titlebar { padding: .3em .2em; position: relative; }
.ui-jqdialog .ui-jqdialog-title { margin: .1em 0 .2em; }
.ui-jqdialog .ui-jqdialog-titlebar-close { position: absolute; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; cursor:pointer;}
.ui-jqdialog .ui-jqdialog-titlebar-close span { display: block; margin: 1px; }
.ui-jqdialog .ui-jqdialog-titlebar-close:hover, .ui-jqdialog .ui-jqdialog-titlebar-close:focus { padding: 0; }
.ui-jqdialog-content, .ui-jqdialog .ui-jqdialog-content { border: 0; padding: .3em .2em; background: none; height:auto;}
.ui-jqdialog .ui-jqconfirm {padding: .4em 1em; border-width:3px;position:absolute;bottom:10px;right:10px;overflow:visible;display:none;height:80px;width:220px;text-align:center;}
.ui-jqdialog>.ui-resizable-se { bottom: -3px; right: -3px}
.ui-jqgrid>.ui-resizable-se { bottom: -3px; right: -3px }
/* end Modal window*/
/* Form edit */
.ui-jqdialog-content .FormGrid {margin: 0;}
.ui-jqdialog-content .EditTable { width: 100%; margin-bottom:0;}
.ui-jqdialog-content .DelTable { width: 100%; margin-bottom:0;}
.EditTable td input, .EditTable td select, .EditTable td textarea {margin: 0;}
.EditTable td textarea { width:auto; height:auto;}
.ui-jqdialog-content td.EditButton {text-align: right;border-top: 0 none;border-left: 0 none;border-right: 0 none; padding-bottom:5px; padding-top:5px;}
.ui-jqdialog-content td.navButton {text-align: center; border-left: 0 none;border-top: 0 none;border-right: 0 none; padding-bottom:5px; padding-top:5px;}
.ui-jqdialog-content input.FormElement {padding:.3em}
.ui-jqdialog-content select.FormElement {padding:.3em}
.ui-jqdialog-content .data-line {padding-top:.1em;border: 0 none;}
.ui-jqdialog-content .CaptionTD {vertical-align: middle;border: 0 none; padding: 2px;white-space: nowrap;}
.ui-jqdialog-content .DataTD {padding: 2px; border: 0 none; vertical-align: top;}
.ui-jqdialog-content .form-view-data {white-space:pre}
.fm-button { display: inline-block; margin:0 4px 0 0; padding: .4em .5em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
.fm-button-icon-left { padding-left: 1.9em; }
.fm-button-icon-right { padding-right: 1.9em; }
.fm-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; position: absolute; top: 50%; margin-top: -8px; }
.fm-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; position: absolute; top: 50%; margin-top: -8px;}
#nData, #pData { float: left; margin:3px;padding: 0; width: 15px; }
/* End Eorm edit */
/*.ui-jqgrid .edit-cell {}*/
.ui-jqgrid .selected-row, div.ui-jqgrid .selected-row td {font-style : normal;border-left: 0 none;}
/* inline edit actions button*/
.ui-inline-del.ui-state-hover span, .ui-inline-edit.ui-state-hover span,
.ui-inline-save.ui-state-hover span, .ui-inline-cancel.ui-state-hover span {
margin: -1px;
}
/* Tree Grid */
.ui-jqgrid .tree-wrap {float: left; position: relative;height: 18px;white-space: nowrap;overflow: hidden;}
.ui-jqgrid .tree-minus {position: absolute; height: 18px; width: 18px; overflow: hidden;}
.ui-jqgrid .tree-plus {position: absolute; height: 18px; width: 18px; overflow: hidden;}
.ui-jqgrid .tree-leaf {position: absolute; height: 18px; width: 18px;overflow: hidden;}
.ui-jqgrid .treeclick {cursor: pointer;}
/* moda dialog */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;width: expression(this.parentNode.offsetWidth+'px');height: expression(this.parentNode.offsetHeight+'px');}
.ui-jqgrid-dnd tr td {border-right-width: 1px; border-right-color: inherit; border-right-style: solid; height:20px}
/* RTL Support */
.ui-jqgrid .ui-jqgrid-title-rtl {float:right;margin: .1em 0 .2em; }
.ui-jqgrid .ui-jqgrid-hbox-rtl {float: right; padding-left: 20px;}
.ui-jqgrid .ui-jqgrid-resize-ltr {float: right;margin: -2px -2px -2px 0;}
.ui-jqgrid .ui-jqgrid-resize-rtl {float: left;margin: -2px 0 -1px -3px;}
.ui-jqgrid .ui-sort-rtl {left:0;}
.ui-jqgrid .tree-wrap-ltr {float: left;}
.ui-jqgrid .tree-wrap-rtl {float: right;}
.ui-jqgrid .ui-ellipsis {text-overflow:ellipsis;}
/* Toolbar Search Menu */
.ui-search-menu { position: absolute; padding: 2px 5px;}
.ui-jqgrid .ui-search-table { padding: 0px 0px; border: 0px none; height:20px; width:100%;}
.ui-jqgrid .ui-search-table .ui-search-oper { width:20px; }
a.g-menu-item, a.soptclass, a.clearsearchclass { cursor: pointer; }
.ui-jqgrid .ui-search-table .ui-search-input>input,
.ui-jqgrid .ui-search-table .ui-search-input>select
{
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* This file contains overides of grid related to structure*/
/*Reposition the sort arrows*/
.ui-jqgrid .ui-jqgrid-htable .ui-th-column div.ui-jqgrid-sortable { position:relative; padding-right: 12px; }
.ui-jqgrid .ui-jqgrid-htable .ui-th-column div.ui-jqgrid-sortable span.s-ico { position: absolute; top: 0px; right: 12px; zoom: 1 }
.ui-jqgrid .ui-jqgrid-htable .ui-th-column div.ui-jqgrid-sortable,
.ui-jqgrid .ui-jqgrid-btable tr.jqgrow > td { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis }
/*Don't show borders for interior tds */
.ui-jqgrid tr.jqgrow > td td {border: 0; }
/*Style toolbar search items */
ul.ui-search-menu { background : white; }
ul.ui-search-menu > li.ui-menu-item { list-style-image:none; border: 0px; width: auto; }
ul.ui-search-menu > li.ui-menu-item > a { color: black; cursor: pointer;}
ul.ui-search-menu > li.ui-menu-item:hover { background: #d0e5f5; }
ul.ui-search-menu > li.ui-menu-item > a.ui-state-hover { background: #d0e5f5; border: 0px; }
ul.ui-search-menu > li.ui-state-highlight { background : #fff8dc; }
/*Set mouse hand pointer when hovering filters*/
.ui-jqgrid .ui-jqgrid-htable .ui-th-column .ui-search-table td.ui-search-oper > a { cursor: pointer; }
.ui-jqgrid .ui-jqgrid-htable th div { height:auto;}
.ui-jqgrid .ui-th-div-ie { height:auto;}
td.ui-search-input input[type=text]::-ms-clear {display:none; }
.ui-jqgrid .ui-jqgrid-bdiv{ overflow: hidden;}
var tableData = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];