$( document ).ready(function() {
console.log( "ready!" );
var records = [];
var record1 = {
recid: 1,
strategy: "high/low",
backtest: "v1",
num_trades: 273,
num_winners: 70,
num_losers: 203
};
records.push(record1);
var record2 = Object.assign({},record1);
record2['recid']=2;
record2['backtest']="v2";
records.push(record2);
addStrategiesTable(records);
});
function addStrategiesTable(records) {
$('#grid2').w2grid({
name: 'grid2',
header: 'Strategies',
sortData: [
{ field: 'strategy', direction: 'desc' },
{ field: 'backtest', direction: 'desc' },
{ field: 'num_trades', direction: 'desc' },
{ field: 'num_winners', direction: 'desc' },
],
columns: [
{
field: 'strategy',
caption: 'Strategy',
size: '100px',
sortable: true
},
{
field: 'backtest',
caption: 'Backtest',
sortable: true
},
{
field: 'num_trades',
caption: 'Num Trades',
sortable: true
},
{
field: 'num_winners',
caption: 'Num Winners',
sortable: true
},
{
field: 'num_losers',
caption: 'Num Losers',
sortable: true
}
],
records: records
});
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
<div id="grid2" style="height: 300px;"></div>
I have a w2ui grid that is not behaving on initialization. It has 20 columns. When I refresh the browser, this is what I see:
It shows only 2 columns and 1 row, plus the table header only goes about half way, even though the table is set to almost 100%. I can see the border of the table stretching to that distance, but not the content. The two columns it does show are squashed together.
If I click on one of the column headers, then everything shows up correctly!
Here is the html:
<div id="grid2" style="position:absolute; left:8px; right:8px; height: 400px;"></div>
The grid columns are set in javascript like this:
columns: [
{
field: 'strategy',
caption: 'Strategy',
sortable: true
},
plus 19 more
Any suggestions to fix this?
I tried to create a code snippet (above) that shows the issue but it just shows a barebones table with none of the w2ui functionality.
I did according to Notice
column.caption property is deprecated, please use column.text
so
caption replace with text
refer the snippet
$(document).ready(function () {
console.log("ready!");
var records = [];
var record1 = {
recid: 1,
strategy: "high/low",
backtest: "v1",
num_trades: 273,
num_winners: 70,
num_losers: 203
};
records.push(record1);
var record2 = Object.assign({}, record1);
record2['recid'] = 2;
record2['backtest'] = "v2";
records.push(record2);
addStrategiesTable(records);
});
function addStrategiesTable(records) {
$('#grid2').w2grid({
name: 'grid2',
header: 'Strategies',
sortData: [
{ field: 'strategy', direction: 'desc' },
{ field: 'backtest', direction: 'desc' },
{ field: 'num_trades', direction: 'desc' },
{ field: 'num_winners', direction: 'desc' },
],
columns: [
{
field: 'strategy',
text: 'Strategy',
size: '100px',
sortable: true
},
{
field: 'backtest',
text: 'Backtest',
sortable: true
},
{
field: 'num_trades',
text: 'Num Trades',
sortable: true
},
{
field: 'num_winners',
text: 'Num Winners',
sortable: true
},
{
field: 'num_losers',
text: 'Num Losers',
sortable: true
}
],
records: records
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
<div id="grid2" style="height: 300px;"></div>
</body>
</html>
This is you exact code add there is only an error Just add your link to html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
Put this in your html file.
$( document ).ready(function() {
console.log( "ready!" );
var records = [];
var record1 = {
recid: 1,
strategy: "high/low",
backtest: "v1",
num_trades: 273,
num_winners: 70,
num_losers: 203
};
records.push(record1);
var record2 = Object.assign({},record1);
record2['recid']=2;
record2['backtest']="v2";
records.push(record2);
addStrategiesTable(records);
});
function addStrategiesTable(records) {
$('#grid2').w2grid({
name: 'grid2',
header: 'Strategies',
sortData: [
{ field: 'strategy', direction: 'desc' },
{ field: 'backtest', direction: 'desc' },
{ field: 'num_trades', direction: 'desc' },
{ field: 'num_winners', direction: 'desc' },
],
columns: [
{
field: 'strategy',
caption: 'Strategy',
size: '100px',
sortable: true
},
{
field: 'backtest',
caption: 'Backtest',
sortable: true
},
{
field: 'num_trades',
caption: 'Num Trades',
sortable: true
},
{
field: 'num_winners',
caption: 'Num Winners',
sortable: true
},
{
field: 'num_losers',
caption: 'Num Losers',
sortable: true
}
],
records: records
});
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
<div id="grid2" style="height: 300px;"></div>
Related
I face some problems with export to excel in Kendo Grid. The problem is that the headers are encoded in the excel. I use Kendo UI with JQuery
The headers are fine in the grid, if the data is fine in the grid and in the exported file, but the headers in the exported file are encoded.
My Grid:
My Expxorted file:
Very Thanks,
Boris
Try this
You can find some documentation here
var grid = $("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
},
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
},
sortable: true,
pageable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{ width: 300, locked: true, field: "ProductName", title: "Şehir"},
{ width: 300, field: "UnitPrice", title: "Statù", },
]
}).getKendoGrid();
//set the test values
grid.one("dataBound", function(){
this.dataSource.at(0).set("ProductName", "statù 'this is \" a test");
})
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/excel-export">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.default.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
</div>
</body>
</html>
im trying to get the Text value of the metric_nme column and if this was equal to 'Accounts Audit' hiding the Update button...
does anyone knows how can i get the value of the column in kendo grid?
here if me code...
$("#assessmentGrid").kendoGrid({
dataSource: gridDS,
navigatable: true,
noRecords: {
template: "No assessments were found"
},
filterable: true,
sortable: {
mode: 'single',
allowUnsort: false
},
columns: [
{ field: 'assessment_pk', hidden: true },
{ field: 'role_fk', hidden: true },
{ field: 'role_nme', title: 'Role', width: 120 },
{ field: 'metric_fk', hidden: true },
{ field: 'assess_dte', hidden: true },
{
field: 'metric_nme', title: 'Metric', width: 150,
validation: {
metric_nme_validation: function (input) {
if (dataItem[metric_nme] = 'Accounts Audit') {
// attributes: { 'class': 'k-grid-update' }.
$("#k-grid-update").data("kendoGrid").visible = false;
}
}
}
},
{ field: 'assess_val', title: 'Score', width: 80, template: "#= (returnUnitMetricID(metric_fk) == 2) ? parseInteger(assess_val, 10) : assess_val #", attributes: { 'style': 'text-align: right' } },
{ field: 'adjust_val', title: 'Manager Score', width: 100, template: "#= (returnUnitMetricID(metric_fk) == 2) ? parseInteger(adjust_val, 10) : adjust_val #", attributes: { 'style': 'text-align: right' } },
{ field: 'adjust_by', title: 'Adjusted By', width: 120 },
{ field: 'comment_txt', title: 'Comment', hidden: true },
{ field: 'rating_cde', title: 'Rating', width: 95 },
{ field: 'adjusted_fk', hidden: true },
{ field: 'pct_to_goal', title: '% to Goal', width: 100, template: '#=kendo.format("{0:p}", pct_to_goal / 100)#', attributes: { 'style': 'text-align: right' } },
{ field: 'lastupdate_by', title: 'Last Update By', width: 100 },
{ field: 'lastupdate_on', title: 'Last Update On', width: 130, template: "#= (lastupdate_on == null) ? '' : kendo.toString(kendo.parseDate(lastupdate_on, 'yyyy-MM-dd'), 'MM/dd/yyyy H:mm:ss') #" },
{
command: {
text: "Update",
click: updateScore,
}, title: " ", width: "60",
attributes: { 'class': 'k-grid-update' }
}
],
}).find("table").on("keydown", onGridKeydown);
function updateScore(e) {
e.preventDefault(e);
clearWindowPopUpFields();
$(".k-window").css('height', '420px');
$(".alert").hide();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var assestmentDate = new Date(dataItem.assess_dte);
$("#lbAssessmentDateRO").text($("#txtPeriod").val());
$('#lblMetric').text(dataItem.metric_nme);
$('#lblRole').text(dataItem.role_nme);
metricFk = dataItem.metric_fk;
$('#txtAssociate').text($('#cbAssociate').data("kendoComboBox").text());
switchScoreTypeControl(returnUnitMetricID(dataItem.metric_fk));
if (dataItem.assessment_pk == null) {
addScorePopUp(dataItem);
} else {
updateScorePopUp(dataItem);
}
}
You can use visible parameter:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command.visible
Here is an example:
http://dojo.telerik.com/ACopA
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/custom-command">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>
<div id="details"></div>
<script>
var wnd,
detailsTemplate;
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [{
field: "FirstName",
title: "First Name",
width: "140px"
},
{
field: "LastName",
title: "Last Name",
width: "140px"
},
{
field: "Title"
},
{
command: [{
text: "View Details",
click: showDetails,
visible: function(dataItem) {
return dataItem.LastName.charAt(0) !== "D"
}
}]
}
]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
<style type="text/css">
#details-container {
padding: 10px;
}
#details-container h2 {
margin: 0;
}
#details-container em {
color: #8c8c8c;
}
#details-container dt {
margin: 0;
display: inline;
}
</style>
</div>
</body>
</html>
After filtering being done, I have to select a second page/do something. How can I detect it?
Thank you!
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/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/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
dataBinding: onDataBinding,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
function onDataBinding(arg) {
if ($("#grid").data("kendoGrid").dataSource.filter()) {
alert("Filter has been applied to grid");
}
else {
alert("Filter has NOT been applied to gridNo filter");
}
}
</script>
</body>
</html>
Let me know if any concern.
It says the javascript cant be found. I tried using other code for script src but still it doesnt work.Whenever I try to run this it says "Failed to load resource 404 the blah/blah/*js can`t be found.
http://localhost:51835/Scripts/ui.jqgrid.css
I tried googling everything but it still can`t find the script
#using System.Web.Script.Services`enter code here`
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<script src="#Url.Content("~/Scripts/jquery.jqGrid.js")"></script>
<script src="#Url.Content("~/Scripts/ui.jqgrid.css")"></script>
<meta name="viewport" content="width=device-width" />
<title>viewTry</title>
</head>
<body>
<div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
url: '',
datatype: "json",
colNames: ['Id','First Name', 'Last Name', 'Last 4 SSN', 'Department',
'Age', 'Salary', "Address",'Marital Status'],
colModel: [
{ name: '_id', index: '_id', width: 20, stype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 150 },
{ name: 'LastName', index: 'LastName', width: 150 },
{ name: 'LastSSN', index: 'LastSSN', width: 100 },
{ name: 'Department', index: 'Department', width: 80, align: "right" },
{ name: 'Age', index: 'Salary', width: 80, align: "right" },
{ name: 'Salary', index: 'Salary', width: 80, align: "right" },
{ name: 'Address', index: 'Address', width: 150, sortable: false },
{ name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
],
rowNum: 10,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details"
});
</script>
<table id="JQGridDemo"></table>
</div>
</body>
</html>
I'm new on jqGrid, just got started on it last week. I'm a bit stump on why is the Column Chooser not visible. I tried 3 different Column Chooser scripts w/ no luck. Then I downloaded the latest jqGrid version this am w/ no luck. :-( It seems I do not have enough knowledge of jquery and jqgrid for it to work. Thanks...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- This force IE to use the latest version of HTML, CSS and JavaScript instead of being forced to use 1 specific IE version only -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Blah</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-v1.10.3.themes/base/minified/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/jqgrid-v4.5.0/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="css/jqgrid-v4.5.0/ui.multiselect.css" />
<script type="text/javascript" src="scripts/jquery-v2.0.0.min.js"></script>
<script src="scripts/jquery-ui-v1.10.3/minified/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jqgrid-v4.5.0/i18n/grid.locale-en.js" type="text/javascript"></script>
<!--<script src="scripts/jqgrid-v4.5.0/jquery.jqGrid.min.js" type="text/javascript"></script>-->
<script src="scripts/jqgrid-v4.5.0/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="scripts/jqgrid-v4.5.0/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var jqgridSpreadsheetId = $('#MyInventoryJqgrid_Spreadsheet');
var jqgridPagerId = $('#MyInventoryJqgrid_Pager');
////jqGrid Column Chooser / JQuery Multiselect Plugin...
////http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods&s[]=column&s[]=chooser...
//jqgridSpreadsheetId.extend({
// columnChooser: function (opts) {
// opts = $.extended({
// "title": 'Select columns',
// "width": 200,
// "height": 400,
// //classname: '',
// "done": function (parm) { if (perm) { self.jqgrid("remapColumns", perm, true); } },
// "msel": "multiselect"//,
// //dlog: '',
// //dlog_opts: '',
// //cleanup: function () { }
// });
// }
//});
//jqGrid Plugin...
//http://www.trirand.com...
jqgridSpreadsheetId.jqGrid({
url: '../websrvc/JqGrid.ashx',
datatype: 'json',
mtype: 'POST',
postData: { WhichJqgridTemplate: '<%=JqqridTools.Template.MyInventory%>', WhichAction: '<%=JqqridTools.Action.Display%>' },
colNames: ['Id','Stock Number','VIN','Year','Make','Model','Trim','Mileage','Purchase Price','Stock Date','Repair Cost','Total Cost','Days In Inventory'], //Display Text in Column Header...
colModel: [
//In this case, use "sorttype" property in "colModel" for it to work when "loadonce" is set to true...
{ name: 'Id', index: 'Id', hidden: true, sorttype: 'int', width: 0, align: 'left' },
{ name: 'StockNumber', index: 'StockNumber', sorttype: 'text', width: 100, align: 'left' },
{ name: 'Vin', index: 'Vin', sorttype: 'text', width: 140, align: 'left' },
{ name: 'Year', index: 'Year', sorttype: 'int', width: 50, align: 'left' },
{ name: 'Make', index: 'Make', sorttype: 'text', width: 80, align: 'left' },
{ name: 'Model', index: 'Model', sorttype: 'text', width: 80, align: 'left' },
{ name: 'Trim', index: 'Trim', sorttype: 'text', width: 100, align: 'left' },
{ name: 'Mileage', index: 'Mileage', sorttype: 'int', width: 60, align: 'left' },
{ name: 'PurchasePrice', index: 'PurchasePrice', sorttype: 'currency', width: 60, align: 'left' },
{ name: 'StockDate', index: 'StockDate', sorttype: 'date', width: 80, align: 'left', formatter: 'date', formatoptions: { newformat: 'm/d/Y' } }, //"formatter" and "formatoptions" is required for date sorting to works properly...
{ name: 'RepairCost', index: 'RepairCost', sorttype: 'currency', width: 60, align: 'left' },
{ name: 'TotalCost', index: 'TotalCost', sorttype: 'currency', width: 60, align: 'left' },
{ name: 'DaysInInventory', index: 'DaysInInventory', sorttype: 'int', width: 65, align: 'left' }
],
pager: jqgridPagerId,
rowNum: 10,
rowList: [5, 10, 20, 50], //Drop-down selection in footer - To show how many rows per page...
//sortname: 'StockDate',
//sortorder: 'desc',
sortname: 'Vin',
sortorder: 'desc',
viewrecords: true,
//gridview: true,
imgpath: '',
caption: 'My Inventory',
width: 1022,
shrinkToFit: false,
height: 200,
sortable: true, /* This allows both 1) Moving columns sideway to other location fields and 2) for jqGrid Column Chooser Plugin / JQuery Multiselect Plugin to work... */
loadonce: true, //In this case, use "sorttype" property in "colModel" for it to work when "loadonce" is set to true...
loadError: function (xhr, st, err) {
//alert("Type: " + st + "; Response: " + xhr.state + "; Status: " + xhr.statusTeext + "; Error: " + err);
alert("An error had occurred, please try again or notify webmaster of this error");
}
}).jqGrid('navButtonAdd', jqgridPagerId, {
caption: 'ddd',
buttonicon: 'ui-icon-calculator',
title: 'choose columns',
onClickButton: function () {
jqgridSpreadsheetId.jqGrid('columnChooser');
}
});
//Navigation Buttons...
/*
$('#' + jqgridSpreadsheetId).jqGrid('navButtonAdd', '#' + jqgridPagerId, {
caption: "dd",
buttonicon: "ui-icon-calculator",
title: "choose columns",
onclickButton: function () {
$(this).jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
this.jqGrid("remapColumns", perm, true);
saveColumnState.call(this.perm);
}
}
});
}
});
*/
});
</script>
</head>
<body>
<table id="MyInventoryJqgrid_Spreadsheet" class="scroll"></table>
<div id="MyInventoryJqgrid_Pager" class="scroll" style="text-align:center;"></div>
</body>
</html>
navButtonAdd can add button in existing navigator bar. So you have to call navGrid before (see the documentation). For example
$("#MyInventoryJqgrid_Spreadsheet").jqGrid({
url: "../websrvc/JqGrid.ashx",
datatype: "json",
pager: "#MyInventoryJqgrid_Pager",
...
}).jqGrid("navGrid", "#MyInventoryJqgrid_Pager",
{add: false, edit: false, del: false, search: false, refresh: false})
.jqGrid("navButtonAdd", "#MyInventoryJqgrid_Pager", {
caption: "ddd",
buttonicon: "ui-icon-calculator",
title: "choose columns",
onClickButton: function () {
$(this).jqGrid("columnChooser");
}
});