[sushanth009Member]

Peter,

I will double check my code again to if I am doing anything wrong.
Thank for your help..

[sushanth009Member]

I am using 6 style sheets in my page..

The first is the jqx.base.css
2.) jqx.energyblue.css
3.) jQuery UI- Redmond theme Styles
4.) jsTree Styles

5.) Styles for the Master Page..

html, body, form
{
height: 100%;
width: 100%;
min-height: 100%;
}

body
{
overflow: hidden; /*overflow: auto;*/
margin: 0;
clear: both;
}

#container
{
display:block;
/*width: 100%;*/
position: relative;
padding: 0;
margin: 0;
height: 100%; /*max-height: 900px; min-width: 800px; max-width: 1920px;*/
}

#header, #content, #footer
{
/* width: 100%;*/
clear: both;
margin:auto;
}

#header, #footer
{
left: 0;
right: 0;
}

#header
{
position: absolute;
top: 0;
height: 87px;
background-color: #d2e1f1;
}

#content
{
background-color: white;
padding: 0;
margin: 0;
top: 87px;
position:absolute; /*relative;*/
height: 100%;
width:100%;
bottom: 40px;
}

#footer
{
position: absolute;
bottom: 0;
height: 40px;
background-color: #d2e1f1;
}

#nav
{
width: 100%;
height: 46px;
margin-top: 0;
position: relative;
top: 6px;
}

#nav-menu-items
{
width: 100%;
height: 30px;
background: url("../Images/blue_nav_bar.jpg") repeat;
position: absolute;
}

#header-row-separater
{
height: 11px;/*4px;*/
width: 100%;
position: relative;
background:url("../Images/greenbar.jpg") 50% 50% repeat;
}

#nav-container, #logo-container
{
height: 80%;
position: absolute;
}

#nav-container
{
width: 80%;
float: left;
bottom: 0;
}

/**logo**/
#logo-container
{
bottom: 0;
width: 20%;
float: right;
margin-left: 80%;
}

#logo
{
float: right;
max-width: 150px;
}

#logo img
{
float: right;
margin-right: 20px;
border: 0;
}
/**End Logo**/

#nav-list
{
height: 100%;
margin: 0;
padding-left: 5px;
position: absolute;
width: 100%;
}

#nav-list > li
{
display: inline-block;
list-style-type: none;
height: 100%;
float: left;
padding-right: 5px;
}

.tabs
{
display: inline-block;
height: 30px;
padding-top: 1px; /*set 6px for chrome*/
z-index: 5000;
}

/*#nav-list li.off .tabs:hover
{
border:3px solid #b1cd48;
}*/

#nav-list li img
{
/*width: 100px; height: 30px;*/
border: 0;
}

#nav-list li ul
{
margin: 0px;
padding: 0px;
display: none;
position: absolute;
height: 100%;
max-height: 30px;
z-index: 10;
left: 20px;
width: 100%;
}

#nav-list li:hover ul
{
display: block;
width: 100%;
z-index: 10;
}

#nav-list li li
{
list-style-type: none;
display: inline;
color: white;
padding-right: 0.5em;
padding-left: 0.5em;
margin-top: 3px;
padding-bottom: 9px;
position: relative;
}

#nav-list li li a
{
text-decoration: none;
color: white;
font-size: medium;
font-weight: bold;
}

#nav-list li li span
{
position: relative;
top: 3px;
font-size: medium !important;
}

#nav-list li li:hover a
{
color: #42456b;
}

#menu-items-left
{
width: 70%;
float: left;
height: 100%;
z-index: -1;
}

#menu-items-right
{
width: 30%;
height: 100%;
float: left;
position: relative;
text-align: right;
z-index:7000;
top:-7px;
/*min-width:330px;
max-width:370px;*/
}

#menu-items-right ul
{
height: 100%;
width: 100%;
position: absolute;
right: 0;
float: right;
margin: 0;
padding-right: 1em;
}

#menu-items-right ul li
{
list-style-type: none;
display: inline;
padding-right: 5px;
color: White;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
}

.quickicons
{
padding-top: 5px;
}

#menu-items-right ul li span
{
position: relative;
bottom: 3px;
font-size: 12pt;
font-weight: bold;
}

#footer-row-separater
{
height: 3px;
width: 100%;
position: static;
top: 0;
margin: 0;
}

#footer-links, #footer-copyright
{
width: 100%;
height: 50%;
text-align: center;
font-size: small;
}

#footer-links-ul, #footer-copyright-ul
{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
padding-top: 2px;
left: 0;
}

#footer-copyright-ul
{
padding-bottom: 0;
margin-bottom: 0;
}

#footer ul li
{
list-style-type: none;
display: inline;
padding: 2px;
}

#footer a
{
color: Black;
text-decoration: none;
}

#footer a:hover
{
text-decoration: underline;
}

.bg-blue
{
background-color: #89a0bb;
}

.bg-green
{
background-color: #b1cd48;
}

.active {}
.inactive {}
.ul-inactive {}
.ul-active {}

#nav-list li.off > ul, #nav-list li.on > ul
{
display: none;
position: absolute;
top: 30px;
height: 25px;
padding-top: 7px;
left: 10px;
width: 95%;
}

#nav-list li.on > ul > a, #nav-list li.off > ul > a, #nav-list li.on > ul > span, #nav-list li.off > ul > span
{
float: left;
width: auto;
margin-right: 15px;
}

#nav-list li.on > ul
{
display: block;
z-index: 5000;
}

#nav-list li.off:hover > ul
{
display: block; /*background-color:#89a0bb;*/
top: 30px;
padding-top: 7px;
z-index: 5000 !important; /*border-top:4px solid #b1cd48;*/
}

.z-raise
{
z-index: 4000 !important;
}

.z-down
{
z-index: -1 !important;
}

a.current, a.over
{
color: #42456b !important;
}

.loginStyle
{
display: inline;
position: static !important;
}

a.nolink
{
text-decoration: none;
color: White;
}

ul#synergy-links ul
{
display: none !important;
background-color: #42456b !important;
border: 1px solid gray !important;
width: 180px !important;
height: auto !important;
position: absolute;
top: 27px;
left: 0px;
max-height: none !important;
clear: left;
}

ul#synergy-links ul li
{
list-style-type: none !important;
float: none !important;
display: list-item;
height: 100%;
margin: 0 !important;
}

ul#synergy-links li:hover ul
{
display: block !important;
}

ul#synergy-links ul li:hover
{
background-color: #b1cd48 !important;
z-index: -1 !important;
}

ul#synergy-links ul li a
{
width: 100%;
height: 100%;
display: block;
padding: 5px;
color: white !important;
text-decoration: none;
}

ul#synergy-links ul li:hover a
{
z-index: 5000;
}

/*Billing tab css begin*/
div#left-content, div#right-content
{
/*border: 1px solid #89a0bb;*/ /*margin: 1px;*/
padding: 0.4em;
display:block; /*newly added*/
height: 100%;
overflow: auto;
position: absolute; /*relative;*/
}

div#left-content
{
float: left;
width: 300px;
}

div#right-content
{
margin-left: 300px;
margin-right: 0;
background: white;
width: 100%;
position: absolute;
}

/*billing tab css end*/
/**jquery plugin css Begin**/
.ui-layout-resizer
{
/*background-color: #89a0bb !important;*/
background: url("../Images/blue_vbar_o.png") repeat-y !important;
}

.ui-layout-resizer-closed
{
/*background-color: #89a0bb !important;*/
background: url("../Images/blue_vbar_c.png") repeat-y !important;
}

.ui-layout-resizer-open-hover, .ui-layout-resizer-dragging
{
background-color: #b1cd48;
}

.ui-layout-toggler-west-open
{
background: url("../Images/toggle-lt.gif") no-repeat scroll right center transparent !important;
}

.ui-layout-toggler-west-closed
{
background: url("../Images/toggle-rt-big.png") no-repeat scroll right center transparent !important;
}

.ui-layout-resizer-west:hover
{
background-color: #b1cd48 !important;
}

.jstree li, .jstree li a, .jstree-hovered
{
padding: 2px 0 !important;
font-size: 0.9em !important;
}

.jstree-hovered
{
background: #d2e1f1 !important;
}

#tree-tabs
{
display: none;
}

#tree-tabs > ul
{
border-bottom: 1px solid #d2e1f1;
}

#no-tree, #setup-ctree
{
text-decoration: none !important;
font-size: small;
padding-left: 5px;
}

#setup-ctree
{
color: #0000FF !important;
}

#setup-ctree:hover
{
text-decoration: underline !important;
}

#cust-tree
{
padding: 2px;
}

/*
.ui-helper-reset
{
font-size: x-small !important;
}

.ui-widget-content
{
border: none !important;
}

.ui-tabs .ui-tabs-panel
{
padding: 2px 0 0 0 !important;

}
*/

/**Jquery plugin css End**/

/**ContactUs popop css**/
.contactusleftdiv
{
position: absolute;
top: 50%;
left: 0;
height: 42px;
margin-left: 34px;
margin-top: -24px;
}

.contactusrightdiv
{
position: absolute;
top: 50%;
right: 0;
height: 54px;
text-align: right;
margin-right: 44px;
margin-top: -27px;
}

.contactusbold
{
font-size: 18px;
font-weight: bold;
color: #42456B;
}

.contactusunderline
{
font-size: 18px;
color: #42456B;
text-decoration: underline;
}

.contactusregular
{
font-size: 16px;
color: #42456b;
}

.modalBackground
{
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
background-color: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

.pnlContactUsPopup
{
/*display: none;*/
border: solid 2px black;
background-color: White;
}

.contactUsPopupHeader
{
height: 50px;
background-color: #d2e1f1;
position: relative;
}

.lblHeader
{
position: absolute;
font-size: 24px;
font-weight: bold;
color: #42456B;
height: 30px;
top: 50%;
margin-top: -15px;
margin-left: 17px;
}

.greenstripe
{
height: 4px;
background-color: #b1cd48;
}

.bluestripe
{
height: 19px;
background-color: #89a0bb;
}

.contactUsContentDiv
{
width: 469px;
}

.managerDiv
{
height: 70px;
position: relative;
}

.greyline
{
height: 2px;
background-color: Gray;
margin-left: 9px;
margin-right: 9px;
}

.greenline
{
height: 9px;
background-color: #b1cd48;
}

.conserviceInfoDiv
{
height: 115px;
position: relative;
}

.conserviceInfoDivLeft
{
position: absolute;
left: 0px;
top: 50%;
height: 72px;
margin-top: -36px;
margin-left: 34px;
}

.conserviceInfoDivRight
{
position: absolute;
right: 0px;
text-align: right;
top: 50%;
height: 95px;
margin-top: -47.5px;
margin-right: 44px;
}

.lblConservicePhone
{
font-size: 20px;
color: #42456b;
}

.pnlTrainingPopup
{
border: solid 2px black;
background-color: White;
}

.lblTrainingHeader
{
position: absolute;
font-size: 36px;
font-weight: bold;
color: #42456B;
height: 43px;
top: 50%;
margin-top: -21.5px;
margin-left: 10px;
}

.trainingPopupHeaderDiv
{
height: 50px;
background-color: #d2e1f1;
position: relative;
}

.trainingPopupDiv
{
width: 469px;
}

.trainingtxtbox
{
background-color: #d3d3d3;
border: none;
width: 265px;
}

.divTrainingBody
{
height: 224px;
}

.divTrainingBodyHeader
{
height: 45px;
margin-left: 24px;
margin-right: 50px;
margin-top: 16px;
}

.lblTrainingBody
{
font-size: 18px;
color: #42456b;
}

.divTrainingForm
{
text-align: right;
margin-right: 99px;
}

.divTrainingBottom
{
position: relative;
}

.divTrainingValidationSummary
{
position: absolute;
top: -10px;
left: 0;
width: 234px;
}

.divTrainingSubmit
{
text-align: right;
margin-right: 40px;
margin-top: 5px;
position: absolute;
right: 0;
top: 0;
}

.btnTrainingSubmit
{
text-align: center;
width: 84px;
color: #42456b;
font-size: 16px;
}

.pnlFeedback
{
border: solid 0px black;
}

.divFeedback
{
border: solid 2px black;
background-color: White;
z-index: 100;
}

.divFeedbackHeader
{
height: 50px;
background-color: #d2e1f1;
position: relative;
}

.lblFeedback
{
position: absolute;
font-size: 24px;
font-weight: bold;
color: #42456B;
height: 30px;
top: 50%;
margin-top: -15px;
margin-left: 17px;
}

#imgHome
{
cursor: pointer;
}

#tooltips
{
display: none;
}

#billing-content, #synergy-content, #construct-content
{
position: absolute;
width: 99%;
height: 99%;
}

.float-left
{
float: left;
}

.clear-left
{
clear: left;
}

.clear
{
clear: both;
}

.float-right
{
float: right;
}

#settings-content
{
height: 100%;
width: 100%;
}

.roundCorners
{
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-khtml-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-khtml-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}

6.) And the last is the Page specific CSS..

#syn-costusage-content
{
position : absolute;
width: 100%;
height : 100%;
/* background : green ; */
}

#syn-costusage-error
{
width: 100%;
height : 40%;
margin-top: 10%;
text-align:center;
color:#41456b;
font-weight : bold;
position : absolute;
}

#cu-caption
{
height: 20px;
width: 100%;
margin-bottom: 5px;
}

#cu-caption img
{
width: 15px;
height: 15px;
}
.cu-title-main
{
color: #b1cd48;
font-size: larger;
font-weight: bolder;
font-family: "myriad-pro-bold" ,sans-serif;
}

#cu-dropdowns
{
height : 24px;
padding: 6px 7% 6px 7%;
background-color: #d1e1f1;
}

#cu-dropdowns div
{
width : 28%;
text-align:center;
}

#cu-dropdowns select
{
min-width : 160px;
max-width : 165px;
}

#cu-dropdowns label
{
font-weight : bold;
}

.select-center
{
margin-left: 8%;
margin-right : 5%;
}

#cu-divider
{
margin : 5px 0 5px 0;
height: 4px;
width: 100%;
}

.maindata
{
width : 100%;
}

#cu-loader
{
display:none;
text-align:center;
position:absolute;
height: 30%;
top:200px;
width : 100%;
}

#cu-grd-title
{
height : 4%;
min-height :20px;
max-height:30px;
background-color:#41456b;
vertical-align:middle;
color:White;
font-weight:bold;
}

#cu-grd-title div
{
text-align:center;
padding : 1% auto 1% auto;
}
#cu-grd
{
/* min-height : 300px;
max-height :400px;
background-color:yellow; */
}
#cu-chart
{
/* height : 46%; */
/*background-color:Green;*/
}
.innergrid
{
margin-top: 10px !important;
margin-bottom : 10px !important;
/* background: blue !important; */
overflow: auto;
}
.innergridloader
{
top: 45%;
left : 45%;
position: absolute;
width: 10%;
text-align : center;
}

I tried removing all the style sheets from my page except the jqx.css files..
But even that was of no help.. Hope you find something

Thanks
Sushanth

[sushanth009Member]

Hello Peter,

I tried rechecking the code that was written.. For some reason the chart seems to be rendering fine on a different page. But on the page I am currently working it is still the same. I tried removing all the styles that were applicable on the page but was still not able to pin point the error. I am not knowing how to debug this scenario,.

[sushanth009Member]

Sorry about the duplicate posts.. I was trying to upload the Image but it would not go thru. You can have a look at the image here..

http://imageshack.us/photo/my-images/196/chart1d.jpg/

[sushanth009Member]

This is the chart Image that was rendered

[sushanth009Member]

Thanks .. it works

[sushanth009Member]

Thanks for the reply. The page size seems to change but when the grid is populated it seems to be having 500 rows instead of the 5 . i do not know where I am going wrong. It would be helpful if you can point out the mistake I am committing. Here is my code

$(grid).bind('bindingcomplete', function() {
if (detailDataAdapter.records.length > 5) {
$(grid).jqxGrid({ pageable: true, pagesize: '5', autoheight: false, height: 220 });
$(grid).jqxGrid({ pagesizeoptions: ['5'] });
}
});

[sushanth009Member]

Thanks for making such a wonderful plugin. It is really easy to use it. Also will that be implemented in a future version or will it always stay in the first column.. Can you suggest a way so that I can open a nested grid near column 3.. I am out of ideas.. Thanks

[sushanth009Member]

Got it.. I thought I can bind it after the grid is initialized.. Once i moved the event before the Initialization it is working fine.. thanks..

[sushanth009Member]

sure.. I tried the ‘columnclick’ event and it works fine.. Thanks for your response.

[sushanth009Member]

Sorry for the multiple posts when I am trying to return the html string it seems to be rendering it directly to the browser. So I had to break up the html tag for the renderer function.

The Html tag was displayed as a Inline image .. The code in the renderer is

// Set the Column cell as a Checkbox Image
var columncheckboxRenderer = function(row, column, value) {
var dummyClass = ‘image-unchecked’
var html = ‘span style=”margin:4px;float:left”‘;
html = html + ‘img class=”‘ + dummyClass + ‘” src=”../../Images/checkbox_off.png” / /span’;
return html;
}

// Function to Set the Header text at run time
var dummyClass = ‘image-unchecked’
var html = ‘span style=”margin:4px;float:left”‘;
html = html + ‘ img class=”‘ + dummyClass + ‘” src=”../../Images/checkbox_off.png” / /span’;
return html;
}

Removed the tags to display the code..

[sushanth009Member]

The Html tag was displayed as a Inline image .. The code in the renderer is


// Set the Column cell as a Checkbox Image
var columncheckboxRenderer = function(row, column, value) {
return // ''
}

// Function to Set the Header text at run time
var headercheckboxRenderer = function(value) {
return // ''
}

The added // after the return for dispaly purpose.. It does not appear in my code..

[sushanth009Member]

Thanks for the reply. I have not tried the ‘columnclick’ event. Is it a default evnet or does it come with jqxGrid. I am anot sure how that is done . It will be helpful if you can provide me with an example.

What I have tried is set the column initially.

columns: [ // Column names

{text: '', datafield: 'Check', editable: false, width: colWidth * 0.4, cellsrenderer: columncheckboxRenderer, renderer: headercheckboxRenderer },
.......
]

Next is the cellsrenderr event and the renderer event


// Set the Column cell as a Checkbox Image
var columncheckboxRenderer = function(row, column, value) {
return ""
}

// Function to Set the Header text at run time
var headercheckboxRenderer = function(value) {
return ''
}


The Click Image function changes the image based on the class assigned to the Image.. It is working for the columns but not the Column Header..

// Click Event handler associated with the Column cell Checkbox Image
function clickImage(v) {
var image = $(v).find('img');
if ($(image).length) {
if ($(image).hasClass('image-unchecked')) {
$(image).attr({ 'src': '../../Images/checkbox_on.png', 'class': 'image-checked' }).removeClass('image-unchecked');
} else {
$(image).attr({ 'src': '../../Images/checkbox_off.png', 'class': 'image-unchecked' }).removeClass('image-checked');
}
}
}


It would be helpful if you can give me an input as where I am going wrong.. Thanks

[Author]

Posts