I have the following code, which work fine locally. Iwas trying to change the bootstrap theme to one of the jqgrid themes. I looked online for theme changing and it didnt seem to work .
Here is my code below and fiddle link:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../js/i18n/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../js/jquery.jqGrid.min.js"></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid-bootstrap.css" />
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title>jLp data </title>
</head>
<body>
<div style="margin-left:20px">
<table id="nplGrid"></table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#nplGrid").jqGrid({
url: 'json/data-bcp.json',
datatype: "json",
colModel: [
{ label: 'Id', name: 'Id', width: 45 },
{ label: 'Symbol', name: 'Symbol', width: 90 },
{ label: 'Quantity', name: 'Quantity', width: 100 },
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{ label: 'Price', name: 'Price', width: 80, sorttype: 'integer' },
{ label: 'Value', name: 'Value', width: 80, sorttype: 'integer' },
{ label: 'Pledged', name: 'Pledged', width: 80, sorttype: 'integer' }
],
loadonce: true,
viewrecords: true,
footerrow: true,
caption: "<b>Brokerage Client Portfolio</b>",
hidegrid:false,
userDataOnFooter: true, // use the userData parameter of the JSON response to display data on footer
height: 170,
altRows: true,
rowNum: 150
});
});
</script>
</body>
</html>
Related
I am using .timepicker inside .jqGrid with filterToolbar. I want to add an image next to filter bar where the user should see a time when they click an image.
If I just use $(element).timepicker(); then I see the time when I click on filter bar but When I do following, timepicker is not working at all.
$(element).timepicker({
showOn: "button",
buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
});
The same options work with datepicker. What am I missing here? Is this due to jquery.timepicker.js version?
Working Demo
$(function() {
"use strict";
$("#grid").jqGrid({
colModel: [{
name: "StartRunTime",
label: "Start Run Time",
align: "center",
sorttype: "time",
formatter: "time",
searchoptions: {
dataInit: function(element) {
$(element).timepicker();
}
}
}],
data: [{
StartRunTime: "12:00"
}],
caption: ".jqGrid Test"
}).jqGrid('filterToolbar', {
autoSearch: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.css">
<table id="grid"></table>
Not Working Demo
$(function() {
"use strict";
$("#grid").jqGrid({
colModel: [{
name: "StartRunTime",
label: "Start Run Time",
align: "center",
sorttype: "time",
formatter: "time",
searchoptions: {
dataInit: function(element) {
$(element).timepicker({
showOn: "button",
buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
});
}
}
}],
data: [{
StartRunTime: "12:00"
}],
caption: ".jqGrid Test"
}).jqGrid('filterToolbar', {
autoSearch: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.css">
<table id="grid"></table>
thats not valid option, but you can insert image and listener like this
$(document).on("click", ".showCalendar", function(){
$("#gs_grid_StartRunTime").timepicker('show');
});
$('#gs_grid_StartRunTime').parent()
.after('<td><img class="showCalendar" src="https://jqueryui.com/resources/demos/datepicker/images/calendar.gif"></td>');
Demo:
$(function() {
"use strict";
$("#grid").jqGrid({
colModel: [{
name: "StartRunTime",
label: "Start Run Time",
align: "center",
sorttype: "time",
formatter: "time",
searchoptions: {
dataInit: function(element) {
$(element).timepicker();
}
}
},
{
label: "Concept Name",
name: "ConceptName",
key: true,
width: 100,
align: "center"
}],
data: [{
StartRunTime: "12:00",
ConceptName: "ABC"
}],
caption: ".jqGrid Test"
}).jqGrid('filterToolbar', {
autoSearch: true
});
$(document).on("click", ".showCalendar", function(){
$("#gs_grid_StartRunTime").timepicker('show');
});
$('#gs_grid_StartRunTime').parent().after('<td><img class="showCalendar" src="https://jqueryui.com/resources/demos/datepicker/images/calendar.gif"></td>');
});
.showCalendar {
margin: 0px 2px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.css">
<table id="grid"></table>
Hi i have the following trirand jqgrid (4.6) loaded with values
as you can see there is grouped Column header with textbox. the following code should respond to mouse click event on the text box and display an alert but it does not and why it displays the string {this.state.TextDate} instead of its value?
here is my code :
var DEMOCOMPONENT = React.createClass({
getInitialState:function(){
return{
TextDate:''
}
},
componentDidMount:function(){
this.getData();
},
showDTPicker:function(){
alert('date picker hit');
},
setTextDate:function(){
var newV = ReactDOM.findDOMNode(this.refs.reftxt).value;
this.setState({TextDate:newV},function(){
});
},
render: function () {
return (<div><table id="list4"></table><div id="plist483"></div></div>)
},
getData:function(){
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data",
rowNum:10,
width:700,
rowList:[10,20,30],
pager: '#plist483',
sortname: 'invdate',
height: '100%'
});
//setting groupcolumn headers
jQuery("#list4").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'amount',
numberOfColumns: 3,
titleText: '<span><div style="text-align: left"><input type="text" id="txt" style="width: 50%" ref="reftxt" onClick={this.showDTPicker} onChange={this.setTextDate} value={this.state.TextDate} />'
},
{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
]});
var mydata = [
{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"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
}
});
ReactDOM.render(<DEMOCOMPONENT />,document.getElementById('divdemo'));
Here is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" />-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
</head>
<body>
<div id="divdemo">
</div>
<script src="react-15.0.0.js"></script>
<script src="react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/babel" src="demo.js"></script>
</body>
</html>
Give editable option in jq Grid Column properties as true ,eg
name : 'ABC',
index : 'ABC',
align : "center",
formatter : 'select',
edittype : 'select',
width : 174,
**editable : true,**
My objective is to create a simple component using EXTJS 6 (grid for example) and show it in an HTML div, but I do not know which resources I need for that. This is my code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict- thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" th:href="#{/js/ext-6/classic/theme-triton/resources/theme-triton-all.css}" />
<link rel="stylesheet" type="text/css" th:href="#{/js/ext-6/packages/charts/classic/triton/resources/charts-all.css}" />
<link rel="stylesheet" type="text/css" th:href="#{/js/ext-6/packages/ux/classic/triton/resources/ux-all.css}" />
<script type="text/javascript" th:src="#{/js/ext-6/ext-all.js}" src="../../../js/ext-6/ext-all.js" > </script>
<script type="text/javascript" th:src="#{/js/ext-6/classic/theme-triton/theme-triton.js}" src="../../../js/ext-6/classic/theme-triton/theme-triton.js"></script>
<script type="text/javascript" th:src="#{/js/ext-6/packages/charts/classic/charts.js}" src="../../../js/ext-6/packages/charts/classic/charts.js"></script>
<script type="text/javascript" th:src="#{/js/ext-6/packages/ux/classic/ux.js}" src="../../../js/ext-6/packages/ux/classic/ux.js"></script>
<title>Ext6 </title>
</head>
<body>
<script th:inline="javascript">
/*<![CDATA[*/
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
renderTo : Ext.get("grid"),
store: store,
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 250 },
{ text: 'Phone', dataIndex: 'phone', width: 120 }
],
height: 200,
layout: 'fit',
fullscreen: true
});
});
/*]]>*/
</script>
<div id="grid">
</div>
</body>
</html>
This simple example will help me to upgrade my old application created by Extjs 4.
Ext.grid.Grid is not a valid class in ExtJS. The correct class for a grid is Ext.grid.Panel.
Try the following:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
renderTo : Ext.get("grid"),
store: store,
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 250 },
{ text: 'Phone', dataIndex: 'phone', width: 120 }
],
height: 200,
layout: 'fit',
fullscreen: true
});
Does it work now?
I have a very curious bug or error with JQuery with JqGrid. The error is when I try to show the data in JSON in the table, if you show me the data, if the table does not show more than 20 columns and have more than 200 data, the code is presented like this:
The Header is:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/ecmascript" src="jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/ecmascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
<!-- Continuacion de JqGrid-->
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid-bootstrap.css" />
The JS is:
<script>
$.jgrid.defaults.width = 780;
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<div style="margin-left:20px">
<table id="jqGrid4"></table>
<div id="jqGridPager4"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid4").jqGrid({
url: 'http://localhost/fileupload/api/Proveedor',
mtype: "GET",
styleUI : 'Bootstrap',
datatype: "JSON",
colModel: [
{ label: 'id', name: 'id', key: true, width: 75 },
{ label: 'Name', name: 'Name', width: 150 },
{ label: 'RFC', name: 'RFC', width: 150 },
{ label: 'Company Name', name: 'CompanyName', width: 150 },
{ label:'DateCreation', name: 'DateCreation', width: 150 }
],
viewrecords: true,
height: 250,
rowNum: 20,
pager: "#jqGridPager4",
sortable: true
});
});
</script>
In the image you can see that the table only shows 20 rows, but I have 207 rows. I need the arrows to move and show more rows, but I can't. Any ideas? I don't want to put rowNum: +20 or more because I don't like that, I need to move with the arrows but I can't.
Do you implemented server-side paging on the server or the server returnes all 207 rows at once and you want to use client-side paging? In the last case you should add loadonce: true option. 207 rows is not much and thus I would recommend you to use loadonce: true option in the scenario. You will don't need to write long code on the server side and can directly use sorting, paging and filtering/searching (see filterToolbar or advanced searching) of local data.
My jqGrid works fine, loads data properly. Even sorting and pagination are working fine.
But, when filterToolBar is used to search data, it doesn't search any data...just keeps showing 'Loading...'.
Below are script taggings included in HEAD part:
<script src="~/Scripts/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="~/Scripts/js/src/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/js/jquery.jqGrid.min.js" type="text/javascript"></script>
HTML:
<table id="jqGrid" ></table>
<div id="pager"></div>
<script type="text/javascript">
$("#jqGrid").jqGrid({
url: "GetData.asmx/LoadData",
datatype: "xml",
xmlReader: {
repeatitems: false,
root: "Rowset",
row: "Row"
},
colNames: ["Id","Contact Name", "City", "Country"],
colModel: [
{ name: 'id', index: 'id', width: 40, stype: 'text',sortable:true },
{ name: "ContactName", index: "ContactName", sortable: true, width: 300, search: true, stype: 'text' },
{ name: "City", index: "City", sortable: true, width: 300, search: true, stype: 'text' },
{ name: "Country", index: "Country", sortable: true, width: 300, search: true, stype: 'text' }
],
rowNum: 10,
rowList: [10, 20, 50, 100],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto",
loadonce: true,
sortorder: "desc",
caption: "List of Employees",
ignoreCase: true
}).jqGrid("filterToolbar", { searchOnEnter: false, stringResult: true, defaultSearch: "cn" });
</script>
Please look into this code and guide me, where it is getting wrong.
Thanks in advance,
Dipti Sheth
UPDATED:
Following is the xml response:
<Rowsets DateCreated="2013-05-02T09:18:07" EndDate="2013-05-02T09:18:07" StartDate="2013-05-02T08:18:07" Version="12.0.6 Build(13)">
<Rowset>
<Columns>
<Column Description="Id" MaxRange="1" MinRange="0" Name="Id" SQLDataType="12" SourceColumn="Id"/>
<Column Description="ContactName" MaxRange="1" MinRange="0" Name="ContactName" SQLDataType="12" SourceColumn="ContactName"/>
<Column Description="City" MaxRange="1" MinRange="0" Name="City" SQLDataType="12" SourceColumn="City"/>
<Column Description="Country" MaxRange="1" MinRange="0" Name="Country" SQLDataType="12" SourceColumn="Country"/>
</Columns>
<Row>
<id>1</id>
<ContactName>Maria Anders</ContactName>
<City>Berlin</City>
<Country>Germany</Country>
</Row>
<Row>
<id>2</id>
<ContactName>Ana Trujillo</ContactName>
<City>México D.F.</City>
<Country>Mexico</Country>
</Row>
<Row>
<id>3</id>
<ContactName>Antonio Moreno</ContactName>
<City>México D.F.</City>
<Country>Mexico</Country>
</Row>
<Row>
<id>4</id>
<ContactName>Thomas Hardy</ContactName>
<City>London</City>
<Country>UK</Country>
</Row>
<Row>
<id>5</id>
<ContactName>Christina Berglund</ContactName>
<City>Luleå</City>
<Country>Sweden</Country>
</Row>
<Row>
<id>6</id>
<ContactName>Hanna Moos</ContactName>
<City>Mannheim</City>
<Country>Germany</Country>
</Row>
</Rowset>
</Rowsets>
RESPONSE HEADER: in Network tab of debugger of Chrome
Cache-Control:private, max-age=0
Content-Encoding:gzip
Content-Length:636
Content-Type:text/xml; charset=utf-8
Date:Wed, 09 Jul 2014 12:34:15 GMT
Server:Microsoft-IIS/8.0
Vary:Accept-Encoding
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcanFHcmlkU2FtcGxlXGpxR3JpZFNhbXBsZVxHZXREYXRhLmFzbXhcTG9hZERhdGE=?=
ConsoleSearchEmulationRendering
Thanks,
Dipti Sheth
EDITED:
_Layout.cshtml page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.theme.css" rel="stylesheet" media="screen" type="text/css" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="~/Scripts/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.min.js" type="text/javascript"></script>
<script src="~/Scripts/js/src/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="~/Scripts/js/jquery.jqGrid.src.js" type="text/javascript"></script>
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Index.cshtml page:
#{
ViewBag.Title = "Home Page";
}
<table id="jqGrid" ></table>
<div id="pager"></div>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint browser: true */
// $(function () {
// "use strict";
$("#jqGrid").jqGrid({
url: "GetData.asmx/GetData/LoadData",
datatype: "xml",
xmlReader: {
repeatitems: false,
root: "Rowset",
row: "Row"
},
colNames: ["Id","Contact Name", "City", "Country"],
colModel: [
{ name: 'id', index: 'id', width: 40, stype: 'text',sortable:true },
{ name: "ContactName", index: "ContactName", sortable: true, width: 300, search: true, stype: 'text' },
{ name: "City", index: "City", sortable: true, width: 300, search: true, stype: 'text' },
{ name: "Country", index: "Country", sortable: true, width: 300, search: true, stype: 'text' }
],
rowNum: 10,
rowList: [10, 20, 50, 100],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto",
loadonce: true,
sortorder: "desc",
caption: "List of Employees",
ignoreCase: true
}).jqGrid("filterToolbar", { searchOnEnter: false, stringResult: true, defaultSearch: "cn" });
// });
//]]>
</script>
It shows blank page if $(function () {}) is there. If I comment this part, then it shows grid and data on the web-page. But still, toolbar searching does not work.
Please guide me where it's going wrong.
Probably you included jQuery JavaScripts files twice. At the first time you include there in <head> by
<script src="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.min.js"
type="text/javascript"></script>
<script src="~/Scripts/js/src/i18n/grid.locale-en.js"
type="text/javascript"></script>
later you placed JavaScripts files of jqGrid and other. The problem is that you use
#Scripts.Render("~/bundles/jquery")
near to the end of <body>. The second including of jQuery definitions can overwrite some previously set extensions of jQuery or reset / overwrite some previously initialized internal structures of jQuery.
The simple rule is: you have to include every JavaScript file only once on every HTML page.
Additionally I personally prefer to place JavaScript code inside of <head>. In the case you should place the code which creates the grid inside of $(function () {/*here*/});