I am trying out the samples for jqGrid from http://www.trirand.com/blog/jqgrid/jqgrid.html. The grid comes up with the data, but the default style (font size, height of the different blocks/rows etc) is not applied. By default style, I mean the one I see in the examples used in the trirand site.
How do I fix this?
Thanks
Vivek Ragunathan
The code I used:
<html>
<head>
<title>JQGrid</title>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css' />
<link rel='stylesheet' type='text/css' href='http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css' />
<script type='text/javascript' src='http://localhost:82/testbed/resources/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js'></script>
<script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js'></script>
<script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.js'></script>
<script type="text/javascript">
var lastsel2;
$(function () {
$("#list1").jqGrid({
caption: "Trying out jqGrid for Points",
url: <url>,
editurl: <edit url>,
mtype : "get",
datatype: "json",
colNames: ['id', 'Name', 'Age', 'Address'],
colModel: [
{ name:'id', index: 'id', width: 35, align:"left", editable: true, sorttype: 'int', editrules: { edithidden: true }, hidden: true },
{ name: 'name', index: 'name', width: 35, align:"left", editable: true, editoptions: { size: '20', maxlength: '255'} },
{ name: 'age', index: 'name', width: 35, align:"left", editable: true, editoptions: { size: '20', maxlength: '255'} },
{ name: 'address', index: 'address', width: 35, align:"left", editable: true, editoptions: { size: '20', maxlength: '255'} },
],
rowNum: 10,
autowidth: true,
height: 150,
rowList: [10, 20, 30, 50, 80, 100],
pager: '#pager1',
toolbar: [true,"top"],
sortname: 'created',
viewrecords: true,
altRows: true
});
$("#list1").jqGrid('navGrid', '#pager1', { edit: true, add: true, del: false });
});
}
</script>
</head>
<body>
<table id="list1"></table>
<div id="pager1"></div>
</body>
I suppose that the reason of described problem can be missing <!DOCTYPE html ...> line before <html>. It's important to gives web browser clear information which version and which dialect of HTML/XHTML language you use on your page. You use <link ... /> on your page. So you tried probably to write the code in XHTML language. In the case you can use something like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
instead of <html>.
Moreover I would recommend you include the lines
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
at the beginning of <head> (like in example from the documentation). If you loads other JavaScript files from the internet then you can load jQuery also from http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js or http://code.jquery.com/jquery-1.10.1.min.js for example.
You don't wrote which version of jqGrid you use. You should use the most resent version (currently it's 4.5.2) and includes jquery.jqGrid.min.js or jquery.jqGrid.src.js instead of jquery.jqGrid.js.
I would recommend you to use gridview: true and autoencode: true options in all your grids. Usage of height: "auto" seems me good too. I think that the option sortname: 'created' was an copy&pased error. You should use the name of some existing column of the grid.
Related
I am using JTable(JQuery) for displaying certain records from database, (database is MySQL)
I am also inserting data using createAction of JTable. I have 3 field which displays date in JTable. The problem that i am facing is when add Type: 'date' for the field which displays date, jtable stops displaying records from database. but when i remove type: 'data' in field it again starts displaying data using listAction. I am not getting why this is happening?
I want create form to show datepicker and also want dates to get displayed in listAction.
Note: I am using yyyy-mm-dd format for date. the following code list record from database when type: 'date' is removed from dateApplied, startDate and endDate fields. but when type: 'date' is present in the code in these field it fails to display records.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="java.util.ArrayList"%>
<%# page import="daobject.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../css/metro/red/jtable.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="../js/jquery.jtable.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="../css/calenderStyle.css" type="text/css">
<title>Leave Applications</title>
<script type="text/javascript">
$(document).ready(function () {
$('#StudentLeaveTableContainer').jtable({
title: 'Leave Applications',
actions: {
listAction: '/Final_Notebook/StudentLeaveCancelController?action=list',
createAction: '/Final_Notebook/StudentLeaveCancelController?action=create',
deleteAction: '/Final_Notebook/StudentLeaveCancelController?action=delete'
},
fields: {
To:{
title:'Application To',
create: true,
options: '/Final_Notebook/StudentLeaveCancelController?options=ApplicationTo',
list: false
},
leaveId:{
key: true,
create: false,
edit: true,
sorting: false,
list: false
},
name: {
title:'Name',
list: true,
create:false,
},
rollNo: {
title: 'Roll No',
width: '20%',
list: true,
edit:true,
create: false
},
leaveType: {
title: 'Type',
width: '20%',
options:{'personal':'personal','medical':'medical','other':'other'},
edit:false,
create: true,
list: true
},
leaveReason: {
title: 'Reason',
width: '30%',
type: 'textarea',
edit: false,
list: true,
create: true
},
dateApplied: {
title: 'Applied On',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd'
},
startDate: {
title: 'From Date',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd'
},
endDate: {
title: 'To Date',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd'
},
days: {
title: 'Total Days',
width: '20%',
edit: false,
create: true,
list: true
},
status: {
title: 'Status',
width: '20%',
list: true,
edit: false,
create: false,
options: {'0':'pending', '1':'Apprtoved', '2':'Rejected'}
}
}
});
$('#StudentLeaveTableContainer').jtable('load');
});
</script>
</head>
<body>
<div style="width:70%;margin-right:20%;margin-left:20%;text-align:center;">
<h1>Leave Applications</h1>
<div id="StudentLeaveTableContainer"></div>
</div>
</body>
</html>
to display records try following:
dateApplied: {
title: 'Applied On',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd',
display: function (data) {
return data.record.<your-field-name>;
},
},
I have three files: form.html, report.html, console.html. I am facing two problems with console.html page.
I am trying to load 'report.html' but only static content is loaded,
extJs components are not loaded or say script is not executed.
I am trying to load 'form.html'. In this code, i am able to load form.html along with extJs components successfully. But the problem is that once tab2 is loaded, i am not able to activate/see tab1.
Appreciate any help. Any example of autoLoad without any error will do.
Console.html is as below:
<head>
<title>Sample Console</title>
<link rel="stylesheet" type="text/css" href="../ExtJs/resources/css/ext-all.css" />
<script type="text/javascript" src="../ExtJs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: 'frmSampleConsole',
split: true,
height : '100%',
width : '100%',
layout:'border',
defaults: {
collapsible: true,
split: true
//bodyStyle: 'padding:15px'
},
items:
[
{
title: 'Report',
region : 'west',
width : 280,
autoLoad : 'report.html',
contentType: 'html',
scripts : true
}
,
{
id :'tabpanel',
xtype:'tabpanel',
title: 'Main Content',
collapsible: false,
region:'center',
items : [
{
id : 'tab1',
title: 'Tab1',
collapsible: false,
margins: '5 0 0 0',
activeTab:0,
items: [
{
html : 'Sample html content'
}
]
},
{
id :'tab2',
title : 'Tab2',
layout : 'fit',
closable: true,
loader: {
url: 'form.html',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
render: function(tab) {
tab.loader.load();
}
}
}
]
}
]
});
});
</script>
</head>
<body>
<div id = 'frmSampleConsole'></div>
</body>
</html>
your need to set "scripts: true," then your extjs script are work.
I am having difficulties getting a jqgrid to display in my MVC 4 web application view. I have tested the exact same view code in a standard html document and the grid displays, however only the h2 tag shows up in my Index view. I've even managed to get the model information to display in html document, so I'm really confused as to why the grid won't even load in my MVC view.
My controller code for my grid data is as follows:
public ActionResult GridData()
{
var query = (from u in db.Users
join ur in db.User_Relationship on u.User_ID equals ur.Child_ID
join lu in db.Lookups on u.First_LanguageID equals lu.LookupID
join ut in db.User_Tests on u.User_ID equals ut.User_ID into ps
from ut in ps.DefaultIfEmpty()
where ur.Parent_ID == 45875
group new { u, lu } by new
{
u.User_ID, u.Forename, u.Surname, u.Client_Code,
u.User_Name, u.Password, u.Email, u.Gender,
u.Report_date, u.EmailDate, u.Job_Function,
lu.LookupValue
} into g
select new UserViewModel
{
User_ID = g.Key.User_ID,
Forename = g.Key.Forename,
Surname = g.Key.Surname,
Client_Code = g.Key.Client_Code,
User_Name = g.Key.User_Name,
Password = g.Key.Password,
Email = g.Key.Email,
Gender = g.Key.Gender,
Report_Date = g.Key.Report_date,
Email_Date = g.Key.EmailDate,
Job_Function = g.Key.Job_Function,
Lookup_Value = g.Key.LookupValue
});
var jsonData = new
{
total = 10,
page = 1,
records = 50,
rows = query.Select(x => new
{
x.User_ID, x.Forename, x.Surname, x.Client_Code, x.User_Name,
x.Password, x.Email, x.Gender, x.Report_Date, x.Email_Date,
x.Job_Function, x.Lookup_Value
}).ToList().Select(x => new
{
id = x.User_ID,
cell = new string[]
{
x.User_ID.ToString(),
x.Forename,
x.Surname,
x.Client_Code.ToString(),
x.User_Name,
x.Password,
x.Email,
x.Gender,
x.Report_Date.ToString(),
x.Email_Date.ToString(),
x.Job_Function,
x.Lookup_Value
}}).ToArray(),
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
The method for Index is as follows:
public ActionResult Index()
{
return View();
}
My view code for Index.cshtml is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function ()
{
jQuery("#list").jqGrid(
{
url: '/WebFormUserList/GridData',
datatype: 'json',
mtype: 'GET',
colNames:
[
'User_ID', 'Forename', 'Surname', 'Client_Code', 'User_Name',
'Password', 'Email', 'Gender', 'Report_Date', 'Email_Date',
'Job_Function', 'Lookup_Value'
],
colModel:
[
{ name: 'User_ID', index: 'User_ID', width: '50', align: 'centre' },
{ name: 'Forename', index: 'Forename', width: '50', align: 'centre' },
{ name: 'Surname', index: 'Surname', width: '50', align: 'centre' },
{ name: 'Client_Code', index: 'Client_Code', width: '50', align: 'centre' },
{ name: 'User_Name', index: 'User_Name', width: '50', align: 'centre' },
{ name: 'Password', index: 'Password', width: '50', align: 'centre' },
{ name: 'Email', index: 'Email', width: '50', align: 'centre' },
{ name: 'Gender', index: 'Gender', width: '50', align: 'centre' },
{ name: 'Report_Date', index: 'Report_Date', width: '50', align: 'centre' },
{ name: 'Email_Date', index: 'Email_Date', width: '50', align: 'centre' },
//{ name: 'Test_Count', index: 'Test_Count', width: '50', align: 'centre' },
//{ name: 'Test_Completed', index: 'Test_Completed', width: '50', align: 'centre' },
{ name: 'Job_Function', index: 'Job_Function', width: '50', align: 'centre' },
{ name: 'Lookup_Value', index: 'Lookup_Value', width: '50', align: 'centre' },
],
pager: jQuery('#pager'),
height: 'auto',
width: '1000',
rowNum: 10,
jsonReader: { repeatitems: false },
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/css/ui-lightness/images',
caption: 'My first grid'
});
});
</script>
</head>
<body>
<h2>My Grid Data</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>
Any help would be greatly appreciated as I'm not exactly sure what is going wrong. I'm fairly certain the json returned is in the correct format as the html document happily accepts it.
My only thoughts is that because the grid won't even load, that something is happening to interrupt its creation within the _layout.html of MVC4.
Again, thanks in advance.
I have problem with items order in legend, when I using Google Chrome browser and when I have more than 10 items. In all other browsers items are displayed in appropriate order, but in Chrome - not.
version: Highcharts JS v2.1.6 (2011-07-08)
Chrome versions: 19.0.1084.56 and 20.0.1132.47
The chart looks like below:
Please see following code:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
</head>
<body>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
plotOptions: {
pie: {
size: '80%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
color: '#000000',
connectorColor: '#000000',
distance: 10
},
showInLegend: true
}
},
legend: {
itemWidth: 100
},
series: [{
type: 'pie',
data: [
['label1', 10],
['label2', 20],
['label3', 30],
['label4', 40],
['label5', 155.89],
['label6', 50],
['label7', 60],
['label8', 70],
['label9', 80],
['label10', 90],
['label11', 65.70],
['label12', 100],
]
}]
});
});
</script>
<div id="chart" style="width: 460px; height: 290px; margin: 0 auto">
</div>
</body>
</html>
Solution: update highcharts library to 2.2.5.
I'm trying to follow this example on Phil haak's blog using the razor viewengine.
Except my view renders the json as text instead of displaying the grid.
Here is the code for my view :
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Votes', 'Title'],
colModel: [
{ name: 'Id', index: 'Id', width: 40, align: 'left' },
{ name: 'Votes', index: 'Votes', width: 40, align: 'left' },
{ name: 'Title', index: 'Title', width: 400, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'My first grid'
});
});
</script>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
The rendered page looks like this :
{"total":3,"page":1,"records":22,"rows":[{"i":37,"cell":["37","1","What does AcceptVerbs do?"]},{"i":36,"cell":["36","1","Can I change the default model binder?"]},{"i":35,"cell":["35","1","How do I do custom paging?"]},{"i":34,"cell":["34","1","Writing a custom ControllerFactory"]},{"i":33,"cell":["33","65","How do I defend against CSRF attacks?"]},{"i":32,"cell":["32","2","If there was a random question generator, would you use it?"]},{"i":30,"cell":["30","51","Is there a random question generator?"]},{"i":29,"cell":["29","2","How many questions are in this table?"]},{"i":28,"cell":["28","7","How do I use the SelectList?"]},{"i":27,"cell":["27","50","How do I use jQuery grid with MVC"]}]}