I am facing some issues with the formatting of the y-axis with jqplot. The labels of the y-axis go behind the chart. I tried already a lot of things (adapting the css file but nothing really helped). I hope you can help me.
My html and java script code:
<html>
<head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.json2.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.cursor.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="./js/jquery.jqplot.css"/>
<script type="text/javascript">
$(document).ready(function(){
var sineRenderer = function() {
var data = [[]];
var jsonData = $.ajax({
url: "http://127.0.0.1/beaglemeter/getData.php",
dataType:"json",
async: false
}).responseText;
data = JSON.parse(jsonData);
return [data]; //brackets have to be added in order to fulfill the required data format
};
// we have an empty data array here, but use the "dataRenderer"
// option to tell the plot to get data from our renderer.
var plot1 = $.jqplot('chart_div',[],{
title: 'BeagleMeter',
gridPadding:{left:75,right:25,top:35,bottom:35},
axes:{
xaxis:{
label:'Date/Time',
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{angle: -40, fontFamily: 'Arial', fontSize: '11pt',labelPosition:'middle'},
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
yaxis:{
label:'Power in W',
tickOptions:{fontFamily: 'Arial', fontSize: '11pt'},
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
}
},
cursor:{
show:true,
zoom:true,
showTooltip:false
},
dataRenderer: sineRenderer,
series:[{lineWidth:2, showMarker:false}]
});
});
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<center>
<div id="chart_div" style="height:400px;width:80%"></div>
</center>
</body>
</html>
This is how it looks:
https://drive.google.com/file/d/0B6Nf7EU4lCsNLThESGJXVEZjQjA/edit?usp=sharing
Thanks,
Christoph
I figured it out (actually by a coincidence;-). The code line referring to the css file has a typo: hrf instead of href. Here the correct one:
<link rel="stylesheet" type="text/css" href="./js/jquery.jqplot.css"/>
Additionally I added here the getData.php file so someone else could recycle the code as a full working example:
<?php
header('Content-Type: application/json');
date_default_timezone_set('Europe/Berlin');
$channel = $_GET["channel"];
$period = $_GET["period"];
$begin = $_GET["begin"];
$beginUTS = strtotime($begin);
$endUTS = $beginUTS + 86400;
if ($db = new SQLite3('NameOfDatabaseFile')) {
$result = $db->query("SELECT * FROM 'table' LIMIT 0, 10000");
$rows = array();
while($row = $result->fetchArray(SQLITE3_ASSOC)) {
//$rows[] = array($row['timestamp'], $row['value']);
$rows[] = array(date("Y-m-d H:i", $row['timestamp']), $row['value']);
//date("H:i:s - m.d.y", $timestamp));
//$rows[] = $row;
}
} else {
die($sqliteerror);
}
print json_encode($rows);
?>
Related
this is my code and csv file.
The c3js chart is not displaying properly when I have a date field in a CSV file. I have set the x axis as type timeseries. There are only two columns in CSV file. "Data" and "count",
html>
<head>
<link rel="stylesheet" type="text/css" href="c3.css">
</head>
<body>
<div id="chart"></div>
<script src="d3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
<script>
var chart = c3.generate({
data: {
url: 'dates.csv'
}
});
</script>
</body>
</html>
data,count
120,80
140,50
170,100
150,70
180,120
<html>
<head>
<link rel="stylesheet" type="text/css" href="c3.css">
</head>
<body>
<div id="chart"></div>
<script src="d3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'Date',
x_Format: '%Y-%m-%d',
url: 'dates.csv',
},
axis: {
x: {
type: 'timeseries',
}
}
});
</script>
</body>
</html>
this code is working now..
I have a kendo date picker in which only months are shown.Now i want to disable previous months of current month to disable so user will not be able to enter previous month.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="date"></div>
<script>
$(document).ready(function () {
var myDatePicker = $("#date").kendoDatePicker().data("kendoDatePicker");
myDatePicker.min(new Date()); //This code line will hide previous date from date picker
});
</script>
</body>
</html>
Update 1:
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<style>
.disabledDay {
display: block;
overflow: hidden;
min-height: 22px;
line-height: 22px;
padding: 0 .45em 0 .1em;
cursor: default;
opacity: 0.5;
}
</style>
</head>
<body>
<input id="datepicker" style="width: 150px;" />
<script>
disabledDaysBefore = [
+new Date("10/20/2015")
];
$(document).ready(function () {
var p = $("#datepicker").kendoDatePicker({
value: new Date(),
dates: disabledDaysBefore,
change: onChange,
month: {
content: '# if (data.date < data.dates) { #' +
'<div class="disabledDay">#= data.value #</div>' +
'# } else { #' +
'#= data.value #' +
'# } #'
},
open: function (e) {
$(".disabledDay").parent().removeClass("k-link")
$(".disabledDay").parent().removeAttr("href")
},
}).data("kendoDatePicker");
});
function onChange() {
var tillDate = new Date(disabledDaysBefore[0]);
var selectedDate = new Date(kendo.toString(this.value(), 'd'));
if (tillDate > selectedDate) {
tillDate = tillDate + parseInt(1);
$("#datepicker").data("kendoDatePicker").value(tillDate);
}
}
</script>
</body>
</html>
Let me know if any concern.
You can use the disableDates property and specify a function to check the date is before the current date, roughly along these lines:
$("#monthpicker").kendoDatePicker({
start: "year",
depth: "year",
format: "MMMM yyyy",
disableDates: function (date) {
var currentDate = new Date();
if (date.getFullYear() <= currentDate.getFullYear() && date.getMonth() < currentDate.getMonth()) {
return true;
} else {
return false;
}
}
});
I'm looking at the PDF.js project on github and looking at their basic demos I've come up with this (the whole view):
#{
ViewBag.Title = "GetPDFLetter";
Layout = null;
}
<!doctype html>
<html>
<head>
<title>PDF.JS TEST</title>
<!-- PDF.js-specific -->
<script src="#Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/pdf.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/core.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/util.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/api.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/canvas.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/obj.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/function.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/charsets.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/cidmaps.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/colorspace.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/crypto.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/evaluator.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/fonts.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/glyphlist.js")"> </script>>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/image.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/metrics.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/parser.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/pattern.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/stream.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/worker.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/jpg.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/jpx.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/jbig2.js")"> </script>
<script type="text/javascript">
// Specify the main script used to create a new PDF.JS web worker.
// In production, change this to point to the combined `pdf.js` file.
var url = '#Url.Content("~/PDFScripts/worker_loader.js")';
PDFJS.workerSrc = url;
</script>
</head>
<div>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
<script type="text/javascript">
$(document).ready(function () {
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
//
// See README for overview
//
'use strict';
//
// Fetch the PDF document from the URL using promices
//
PDFJS.getDocument('helloworld.pdf').then(function (pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
});
</script>
</html>
The File helloworld.pdf is in the same folder as the view, but when I run the project nothing gets rendered, just a small rectangle. Have I missed something? Any special considerations? Thanks for any help.
Figured it out eventually. What an awesome library PDF.js is.
I've taken the liberty of creating a sample MVC3 project using PDF.js. It follows 90% of the PDF.js demo on github, except a tiny, self explanatory (explained in the comments in the code) change in assigning PDF file paths to the viewer.
my json file looks like
{"items":[
{"date":"2012-03-12","scoreMin":"9","scoreMax":"25","scoreAverage":"20.39","scoreSTD":"3.86","scoreCount":"133","count20":"73","count25":"46"},
{"date":"2012-03-13","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-03-14","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-03-15","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-09-15","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"},
{"date":"2012-09-16","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"},
{"date":"2012-09-17","scoreMin":"5","scoreMax":"24","scoreAverage":"18.59","scoreSTD":"5.67","scoreCount":"99","count20":"45","count25":"0"},
{"date":"2012-09-18","scoreMin":"5","scoreMax":"24","scoreAverage":"18.64","scoreSTD":"5.67","scoreCount":"100","count20":"46","count25":"0"}
]}
and my script is
<!DOCTYPE html>
<html>
<head>
<title>Date Axes</title>
<script language="javascript" type="text/javascript" src="jqplot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
</head>
<body>
<h2>
Some Statistics</h2>
<div id="chartCanvas" style="height: 400px; width: 1000px; align">
</div>
<br />
<script type="text/javascript">
$(function(){
$(document).ready(function(){
alert('Document ready');
var objArrayData=[];
var objArray = [];
$.getJSON("data.json",function(data){
$.each(data.items, function(i,data){
objArrayData[i] =("['" + data.date + "'," + data.scoreAverage + "]");
});
alert( 'Fetched ' + objArrayData.length + ' items!');
console.log('object Data ' + objArrayData);
objArray = ("[" + objArrayData + "]");
console.log('object Array' + objArray);
var plot = $.jqplot('chartCanvas', [objArray], {
title:'Rubric Average Scores',
gridPadding:{right:35},
axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%#m/%y'},
//tickOptions:{formatString:'%b-%y'},
min:'March 30, 2012',
tickInterval:'1 month',
angle: -30,
}},
yaxis:{label:'Average Score',
},
series:[{lineWidth:3, markerOptions:{style:'square'}}]
});
});
});
return false;
});
</script>
</body>
</html>
I am getting uncaught exception- No data error
Before plotting the chart, I am printing the array and there are all the values that I need.
What is missing? Where am I doing wrong?
Thanks for your help.
I don't understand why you are feeding data to the objArrayData array in the way you are doing here. The data doesn't become an array just because there are square brackets surrounding them (it will only appear pretty and satisfying and confusing in the cosole.log).
Use array.push() instead of the way you are doing it here.
And also make sure you make the data.scoreAverage a number before parsing it to the array.
You can do it using parseFloat() function.
So finally you can feed the data to the array like this.
objArrayData.push([data.date,parseFloat(data.scoreAverage)]);
Here's the modified working code.
<!DOCTYPE html>
<html>
<head>
<title>Date Axes</title>
<script language="javascript" type="text/javascript" src="../jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
</head>
<body>
<h2>
Some Statistics</h2>
<div id="chartCanvas" style="height: 400px; width: 1000px; align">
</div>
<br />
<script type="text/javascript">
$(function(){
$(document).ready(function(){
var objArrayData=[];
var objArray = [];
$.getJSON("data.json",function(data){
$.each(data.items, function(i,data){
objArrayData.push([data.date,parseFloat(data.scoreAverage)]);
});
console.log('object Data ' + objArrayData);
var plot = $.jqplot('chartCanvas', [objArrayData], {
title:'Rubric Average Scores',
gridPadding:{right:35},
axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%Y-%m-%d'},
//tickOptions:{formatString:'%b-%y'},
min:'March 30, 2012',
tickInterval:'1 month',
angle: -30,
}},
yaxis:{label:'Average Score',
},
series:[{lineWidth:3, markerOptions:{style:'square'}}]
});
});
});
return false;
});
</script>
</body>
</html>
Hope this helps.
PS: Make sure you learn about arrays a little more.
I am new to jQuery & jgrid. I am trying to use columnchooser to both to let user remove columns and change column order. Removing and adding columns are working fine. But changing the column order is not working. Below is what I have in the code.
<head>
<link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/jqgrid/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/edi/standard.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/xxxx/resources/css/jquery/ui-multiselect/ui.multiselect.css" />
<script type="text/javascript" src="/xxxx/resources/js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/xxxx/resources/js/jquery/jquery-ui-1.8.6.custom.min.js"></script>
<!-- <script type="text/javascript" src="/xxxx/resources/js/jquery/jquery-ui-1.8.11.custom.js"></script>-->
<script type="text/javascript" src="/xxxx/resources/js/jqgrid/grid.locale-en.js"></script>
<script type="text/javascript" src="/xxxx/resources/js/jquery/ui.multiselect.js"></script>
<script type="text/javascript" src="/xxxx/resources/js/jqgrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq.jgrid.no_legacy_api = false;
</script>
<script type="text/javascript" src="/xxxx/resources/js/jqgrid/jquery.jqGrid.min.js"></script> <!-- 3.8.2 version-->
<!--<script type="text/javascript" src="/xxxx/resources/js/jqgrid/jquery.searchFilter.js"></script>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XXXX</title>
</head>
ui.multiselect.js file contains the suggested fix already.
$.widget("ui.multiselect", {
options: {
sortable: true,
searchable: true,
doubleClickable: true,
animated: 'fast',
show: 'slideDown',
hide: 'slideUp',
dividerLocation: 0.6,
nodeComparator: function(node1,node2) {
var text1 = node1.text(),
text2 = node2.text();
return text1 == text2 ? 0 : (text1 < text2 ? -1 : 1);
}
}},
destroy: function() {
this.element.show();
this.container.remove();
// Modified to work with jquery.ui.1.8
if ($.Widget === undefined)
$.widget.prototype.destroy.apply(this, arguments);
else {
$.Widget.prototype.destroy.apply(this, arguments);
return this;
}}
And I am using the columnchooser as below.
jq("#grid").jqGrid('navButtonAdd','#pager',
{ caption: "Columns",
title: "Reorder Columns",
onClickButton : function (perm){
jq("#grid").jqGrid('columnChooser');
}
});
Below is what I have tried so far.
When I add {"msel_opts": $.ui.multiselect.defaults} as an option, I am getting ui undefined JS error.
When I tried to include grid.jqueryui.js, got object or method not supported.
I am stuck # this. Would somebody help please?
It is difficult to find the error in your code, because you posted only one code fragment. Probably you try to add the button in the navigator toolbar with respect of 'navButtonAdd' before you created the navigator toolbar with respect of 'navGrid'.
In any way one small working example here could help you to find your error.
For others who are in the same requirement, you may consider my columnchooser implementation.
My Dialog Form Declaration. (Dialog box which will be shown when columnchooser button is clicked.
All required fields will not be allowed to remove.
Creating the ColumnChooser Button for my Grid.
jq("#grid").jqGrid('navButtonAdd','#pager',{
caption: "Columns",
title: "Customize Columns",
onClickButton : function (){
/*jq("#grid").jqGrid('columnChooser',{
height:columnChooserHt
});*/
createDialogDiv();
jq( "#dialog-form" ).dialog('open');
}
});
Adding Save(OK) and Cancel Buttons to my Div.
jq(function(){
jq( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"OK": function() {
changeColView();
jq( "#dialog-form" ).dialog('close');
},
Cancel: function() {
jq( "#dialog-form" ).dialog('close');
}
},
close: function() {
}
});
});
Function which inserts the column names with the select boxes which needed to be displayed on the ColumnChooser Dialog Box.
function createDialogDiv(){
var colModelDiv = jq("#grid").jqGrid('getGridParam','colModel');
var colNamesDiv = jq("#grid").jqGrid('getGridParam','colNames');
//alert(JSON.stringify(colModelDiv));
//alert(JSON.stringify(colNameDiv));
var container = document.getElementById('dialog-form');
//alert(colNamesDiv.length);
var chckBox="";
for(i=0;i<colNamesDiv.length;i++){
if(colModelDiv[i].hidden && colModelDiv[i].hidden == true ){
chckBox+="<input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"'>"+colNamesDiv[i]+"</input><br/>";
}else{
if(colModelDiv[i].editrules && colModelDiv[i].editrules.required){
chckBox+="<input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"' disabled>"+colNamesDiv[i]+"</input><br/>";
}
else
chckBox+="<input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"' checked>"+colNamesDiv[i]+"</input><br/>";
}
}
container.innerHTML=chckBox;
}
Finally the actual method which changes the Columns chosen from Columnchooser.
function changeColView(){
var colModelDiv = jq("#grid").jqGrid('getGridParam','colModel');
var colNamesDiv = jq("#grid").jqGrid('getGridParam','colNames');
for(i=0;i<colNamesDiv.length;i++){
var chckBox=document.getElementById(colNamesDiv[i]);
if(chckBox && chckBox.value && (!(chckBox.checked || chckBox.disabled))){
jq("#grid").jqGrid('hideCol',chckBox.value);
}
if(chckBox && chckBox.checked){
jq("#grid").jqGrid('showCol',chckBox.value);
}
}
jq("#grid").trigger('reloadGrid');
}
Plz let me know your thoughts on this one.