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?
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,**
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>
i have a php running a sql server query, the results from the query are shown on a table in my html page, but i need to make some filters on the query comming from the client side, as example, the date and a category, but i haven´t realized how to do it and it gives to me this error (at this moment I only tried to put the data from the combobox on the query, because I give up with the date).
Maybe I could call a default value for the query when the html is loaded (for example, x category and date = yesterday... but even when i input the info by hand the query doesn´t work.
The date output format of que database is "YYYY-DD-MM HH:MM:SS"
This is my php:
<?php
function getArraySQL(){
$dsn = "prueba";
$connect = odbc_connect( $dsn, '', '' );
$field_value = $_POST["call"];
$query = "SELECT hist_eqmtlist.unit,
hist_statusevents.eqmt,
hist_exproot.shiftdate,
round (sum(case when hist_statusevents.category =1 then (hist_statusevents.duration/3600) else 0 end),2) as 'uno',
round (sum(case when hist_statusevents.category =2 then (hist_statusevents.duration/3600) else 0 end),2) as 'dos',
round (sum(case when hist_statusevents.category =3 then (hist_statusevents.duration/3600) else 0 end),2) as 'tres',
round (sum(case when hist_statusevents.category =4 then (hist_statusevents.duration/3600) else 0 end),2) as 'cuatro',
round (sum(case when hist_statusevents.category =5 then (hist_statusevents.duration/3600) else 0 end),2) as 'cinco',
round (sum(case when hist_statusevents.category =6 then (hist_statusevents.duration/3600) else 0 end),2) as 'seis'
FROM hist_eqmtlist,hist_exproot,hist_statusevents
WHERE hist_exproot.shiftindex = hist_statusevents.shiftindex And hist_statusevents.shiftindex = hist_eqmtlist.shiftindex And hist_statusevents.eqmt = hist_eqmtlist.eqmtid And hist_eqmtlist.unit= '$field_value'
order by hist_exproot.shiftdate,hist_statusevents.eqmt";
if(!$rs = odbc_exec($connect, $query)) die();
$rawdata = array();
$i=0;
while($row = odbc_fetch_array($rs))
{
$rawdata[$i] = $row;
$i++;
}
odbc_close( $connect );
return $rawdata;
}
$myarray = getArraySQL();
echo json_encode($myarray);
On the other side, my html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Report Monitor</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src='js/jquery.js'></script>
<script src='js/bootstrap.js'></script>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.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/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.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="scripts/demos.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" name="gridequipment">
//call the js that bring the data
$(document).ready(function() {
var url = "report/eqmq.php";
// prepare the data
var source = {
datatype: "json",
datafields: [{
name: 'eqmt'
}, {
name: 'shiftdate'
}, {
name: 'uno'
}, {
name: 'dos'
}, {
name: 'tres'
}, {
name: 'cuatro'
}, {
name: 'cinco'
}, {
name: 'seis'
}],
id: 'id',
url: url,
root: 'data'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#datalist").jqxGrid({
width: '100%',
source: dataAdapter,
columnsresize: true,
columns: [{
text: 'Equipo',
dataField: 'eqmt',
width: '20%'
}, {
text: 'Fecha Turno',
dataField: 'shiftdate',
width: '25%'
}, {
text: 'uno',
dataField: 'uno',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'dos',
dataField: 'dos',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'tres',
dataField: 'tres',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'cuatro',
dataField: 'cuatro',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'cinco',
dataField: 'cinco',
width: '9.16%',
cellsalign: 'left'
}, {
text: 'seis',
dataField: 'seis',
width: '9.16%',
cellsalign: 'left'
}]
});
});
</script>
</head>
<body>
<p>
<script>
// The scritp to input the data from combobox into the query on eqmq.php
$(document).ready(function() {
var value = $("#callcombo").val();
$.ajax({
url: "report/eqmq.php",
type: "POST",
data: {
"call": value
},
success: function(result) {
alert(result);
}
})
});
</script>/
<!-- / a combobox with the cagories,comming from another query from the same database -->
</p>
<section name="combobox">
<div id='combobox'>
<script type="text/javascript">
$(document).ready(function() {
var url = "report/eqmlistcat.php";
var source = {
datatype: "json",
datafields: [{
name: 'unit'
}],
url: url,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#callcombo").jqxComboBox({
selectedIndex: 0,
source: dataAdapter,
displayMember: "unit",
width: 200,
height: 25
});
$("#callcombo").on('select', function(event) {
if (event.args) {
var item = event.args.item;
if (item) {
var valueelement = $("<div></div>");
valueelement.text(item.value);
$("#selectionlog").children().remove();
$("#selectionlog").append(valueelement);
}
}
});
});
</script>
<div id='callcombo'>
</div>
</div>
</section>
<div id='Datepick'>
<script type="text/javascript">
// a date picker to input the data on the query too
$(document).ready(function() {
$("#Dateinput").jqxDateTimeInput({
width: '200px',
height: '25px'
});
$("#Dateinput").jqxDateTimeInput({
format: 'yyyy-mm-dd'
});
});
</script>
<p>
<div id='Dateinput'></div>
</p>
<p></p>
<section name="Equipment List">
<h3><div id="selectionlog"></div></h3>
<div id='WidgetTable' style="font-size: 13px; font-family: Verdana; float: center;" class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4">
<div id="datalist"></div>
</div>
<p class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4"></p>
<p class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4"></p>
<p class="row col-xs-12 col-sm-6 col-lg-6 col-xl-4"></p>
</section>
<p></p>
</body>
</html>
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*/});