javascript loading MVC 4 razor - javascript

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>

Related

Facing issue with JQ grid

I am trying JqGrid for our application with asp.Net MVC.
I am not able to get the data display.I am not sure what is the issue.
Here is my View Code:
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
#{
ViewBag.Title = "SearchEmployee";
}
<h2>SearchEmployee</h2>
<table id="list2"></table>
<div id="pager2"></div>
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: 'Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
colModel: [
{ name: 'EMPLOYEEID', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
{ name: 'FIRSTNAME', index: 'FIRSTNAME', width: 90 },
{ name: 'LASTNAME', index: 'LASTNAME', width: 100 },
{ name: 'DOB', index: 'DOB', width: 100 },
{ name: 'AGE', index: 'AGE', width: 100 },
{ name: 'SSN', index: 'SSN', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
{ name: 'ADDRESS1', index: 'ADDRESS1', width: 80 },
{ name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
{ name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
{ name: 'STATE', index: 'STATE', width: 80 },
{ name: 'CITYNAME', index: 'CITYNAME', width: 80 },
{ name: 'PINCODE', index: 'PINCODE', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
//sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
My Controller Code:
public ActionResult Employees()
{
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
The issue is when i tried to get to display Employee list.
In IE,when I tried to run the application,its prompting to download Json file.
Please let me know whats the issue.
I have tried with the source code from the below Link:
http://www.techstrikers.com/Articles/jqgrid-in-mvc5-with-razor-view-and-entity-framework6.php

I agree with Abdul Hadi.You need to put a forward slash before the controller name so that your url is - url: '/Employee/Employees', And the column names need to match those in the Employee object(they should be the same case).
In addition to those two changes you have a whole bunch of columns defined that don't have a corresponsing property in the Employee class, so they can be removed. And be careful if you have a _Layout.cshtml page in your MVC application, sometimes this page has script references which will prevent you from using jqGrid.To prevent this from happenening try setting Layout = null; in your view.Here's a complete working example:
Controller:
public class EmployeeController
{
public ActionResult Index()
{
//This will return your Employee page.This should be set as the default action
return View();
}
public ActionResult Employees()
{
//This will return the data to bind to jqGrid
//DON'T CALL THIS DIRECTLY - otherwise you will get a situation where IE prompts you to download the .json file
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
}
View:
#{
ViewBag.Title = "Index";
Layout = null;
}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
<link href="https://cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function () {
$("#list2").jqGrid({
url: '/Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'AGE', 'GENDER', 'STATUS', 'ADDRESS1', 'CITYNAME'],
colModel: [
{ name: 'EmployeeId', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
{ name: 'FirstName', index: 'FIRSTNAME', width: 90 },
{ name: 'Age', index: 'AGE', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'Status', index: 'STATUS', width: 80, align: "right" },
{ name: 'Address1', index: 'ADDRESS1', width: 80 },
{ name: 'CityName', index: 'CITYNAME', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
<table id="list2" border="1"></table>
<div id="pager2"></div>
Output:

JavaScript is Case Sensitive and you forget to add slash at beginning of url so your code will be like below:
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: '/Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
colModel: [
{ name: 'EmployeeId', index: 'EmployeeId', width: 55, sorttype: "int" },
{ name: 'FirstName', index: 'FirstName', width: 90 },
{ name: 'LASTNAME', index: 'LASTNAME', width: 100 },
{ name: 'DOB', index: 'DOB', width: 100 },
{ name: 'Age', index: 'Age', width: 100 },
{ name: 'SSN', index: 'SSN', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
{ name: 'Address1', index: 'Address1', width: 80 },
{ name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
{ name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
{ name: 'Status', index: 'Status', width: 80 },
{ name: 'CityName', index: 'CityName', width: 80 },
{ name: 'PINCODE', index: 'PINCODE', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
sortname: 'EmployeeId',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>

On top of the comments by the other answers.
See the The answer for how you should format your json for jqgrid
public ActionResult Employees()
{
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
var jsonData = new
{
total = employeeList.Count,
page = 1,
records = 10,
rows = employeeList.ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}

JQuery get data from url

I want to add JQgrid to my project, but when I put the url with a method it doesn't return any data!
<script type="text/javascript">
$("#JQueryDemo").jqGrid({
url: 'JqGrid.aspx/GetStudent',
datatype: "JSON",
colName: ['ID', 'FirstName', 'LastName', 'Gender', 'Age', 'Mark'],
colModel: [
{ name: 'id', index: 'id', stype: 'int', width: 200 },
{ name: 'firstName', index: 'firstname', width: 200 },
{ name: 'lastName', index: 'lastname', width: 200 },
{ name: 'gender', index: 'gender', width: 200 },
{ name: 'age', index: 'age', width: 200 },
{ name: 'mark', index: 'mark', width: 200 }],
rowNum: 10,
sortname: 'id',
viewrecords: true,
// sortorder: "desc",
GridView: true,
caption: "List Students Detail"
});
How can I make it return data ?
I am working with asp.net and using n-tier style!

JQgrid set ondblclick to navigation to new page?

I have a very simple jQgrid i am using for a website
<div id="catalogueSearchList" class="dataGrid">
<script type="text/javascript">
var catalogueSearchListConfig = {
id: 'catalogueSearchList',
action: 'List',
controller: 'Catalogue',
//href: '/Jobs/Adverts/',
onDblClick: function (id) { HERE!!! }) },
colNames: ['Name', 'CatalogueType'],
colModel: [
{ name: 'Name', index: 'Name', width: 400, align: 'left' },
{ name: 'Catalogue type', index: 'CatalogueType', width: 175, align: 'left' },
],
sortName: 'Name',
sortOrder: 'asc'
};
</script>
</div>
Where it displays "HERE!!!" what can I put here to allow when a viewer double clicks a value in the jqgrid it will navigate them to another page?

Its ok, the answer is
<div id="catalogueSearchList" class="dataGrid">
<script type="text/javascript">
var catalogueSearchListConfig = {
id: 'catalogueSearchList',
action: 'List',
controller: 'Catalogue',
//href: '/Jobs/Adverts/',
onDblClick: function (id) { window.location.href = "/Catalogue/Category/" + id },
colNames: ['Name', 'CatalogueType'],
colModel: [
{ name: 'Name', index: 'Name', width: 400, align: 'left' },
{ name: 'Catalogue type', index: 'CatalogueType', width: 175, align: 'left' },
],
sortName: 'Name',
sortOrder: 'asc'
};
</script>
</div>
Using javascript you can just select the window and set it's location to what you like :)

JQX Grid Not working in chrome

I used JQX grid widget.And through a javascript i'm populating cell values.This works good for Firefox.But not working in Chrome.Here is the code i have used.
var objCredit = jQuery.parseJSON(returnText);
document.getElementById('txtCustNumber').value = objCredit.CustomerId;
$('[id$=txtCustNumber]').text(objCredit.CustomerId);
getCustomerDetails();
document.getElementById('cmbDocType').value = '3';
***documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', objCredit.Amount);***
Here is my Grid Definition.
var source1 = { totalrecords: 5, unboundmode: true, datatype: "json",
datafields: [
{ name: 'LineId' },
{ name: 'DistCode' },
{ name: 'distFinder' },
{ name: 'DistCodeDesc' },
{ name: 'RevAccount' },
{ name: 'revAccountFinder' },
{ name: 'RevAccDesc' },
{ name: 'Amount', type: 'float' },
{ name: 'PrintComment' },
{ name: 'Comment' },
{ name: 'Discountable', type: 'string' },
{ name: 'OptionalField' },
{ name: 'optionalFieldFinder' }
],
localdata: data
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
documentGridContainer.jqxGrid(
{
width: 975,
source: dataAdapter1,
theme: '',
editable: true,
enabletooltips: true,
columnsresize: true,
autoheight: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false },
{ text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 },
{ text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentDistFinder(editrow);
}
},
{ text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 },
{ text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentRevenueFinder(editrow);
}
},
{ text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: setAmountEditable() },
//{ text: 'Print Comment', datafield: 'PrintComment', width: 150 },
{text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Comment', datafield: 'Comment', width: 250 },
//{ text: 'Discountable', datafield: 'Discountable', width: 100 }
{text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Optional Field', datafield: 'OptionalField', width: 100 },
{ text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
createDocumentOptionalFields(editrow);
$('#model-documentOptionField').modal('show');
}
}
]
});
Thanks in advance

Your initialization is incorrect. datatype: "json" in unbound mode does not make sense. You should remove that. Below is a working sample:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source1 = {
totalrecords: 5, unboundmode: true,
datafields: [
{ name: 'LineId' },
{ name: 'DistCode' },
{ name: 'distFinder' },
{ name: 'DistCodeDesc' },
{ name: 'RevAccount' },
{ name: 'revAccountFinder' },
{ name: 'RevAccDesc' },
{ name: 'Amount', type: 'float' },
{ name: 'PrintComment' },
{ name: 'Comment' },
{ name: 'Discountable', type: 'string' },
{ name: 'OptionalField' },
{ name: 'optionalFieldFinder' }
]
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
var documentGridContainer = $("#jqxgrid");
documentGridContainer.jqxGrid(
{
width: 975,
source: dataAdapter1,
theme: '',
editable: true,
enabletooltips: true,
columnsresize: true,
ready: function()
{
documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', 50);
},
autoheight: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false },
{ text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 },
{
text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentDistFinder(editrow);
}
},
{ text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 },
{
text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
//showDocumentRevenueFinder(editrow);
}
},
{ text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: true },
//{ text: 'Print Comment', datafield: 'PrintComment', width: 150 },
{
text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Comment', datafield: 'Comment', width: 250 },
//{ text: 'Discountable', datafield: 'Discountable', width: 100 }
{
text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Optional Field', datafield: 'OptionalField', width: 100 },
{
text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
createDocumentOptionalFields(editrow);
$('#model-documentOptionField').modal('show');
}
}
]
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid">
</div>
</div>
</body>
</html>

Why does the "Column Chooser" icon in footer (navGrid) not visible? (jqGrid)

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

Categories