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>;
},
},
Related
I am trying to bind list which i am populating after receiving response from API. I can see the objects into the list but i still didn't understand why kendo grid is not binding datasource. i have code as below.
vm.getAccounts = function () {
acctSearchService.searchAccounts(null, vm.AccountSearchModel)
.then(getAccountsSuccess, getAccountsFailure);
}
vm.accountGridData = [];
function getAccountsSuccess(response) {
vm.accountGridData.push(response.model);
return vm.accountGridData;
}
i am getting result into vm.accountGridData after receiving response from API call and i am trying to bind that to datasource of kendo grid as below.
$("#grid").kendoGrid({
dataSource: { data: vm.accountGridData },
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
Do i need to do anything else to get the data ?
You need to create a directive like this:
app.directive('myDirective', function () {
return {
restrict: 'EA',
scope: {},
template: [].join(''),
controllerAs: 'vm',
controller: function () {
var vm = this;
vm.getAccounts = function () {
acctSearchService.searchAccounts(null, vm.AccountSearchModel).then(getAccountsSuccess, getAccountsFailure);
}
vm.accountGridData = [];
function getAccountsSuccess(response) {
vm.accountGridData.push(response.model);
return vm.accountGridData;
}
},
link: function () {
$("#grid").kendoGrid({
dataSource: { data: vm.accountGridData },
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
}
};
});
And in your html:
<div my-directive></div>
<div id="grid"></div>
You dont need data property in your datasource if you don't implement custom read function for it.
Datasource property should be an array or kendo-datasource object.
Try this:
$("#grid").kendoGrid({
dataSource: vm.accountGridData,
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
And checkout grid documentation: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
Finally i found the way after fighting. it's in simple one step.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.mobile.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid k-scope-field="grid" options="mainGridOptions"></kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope, $http){
$scope.data = new kendo.data.ObservableArray([]);
$http({
method: 'GET',
type:"json",
url: '//jsonplaceholder.typicode.com/posts'
}).then(function successCallback(response) {
$scope.grid.dataSource.data(response.data);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
pageSize: 5
},
sortable: true,
pageable: true,
filterable: {
mode: "row"
},
resizable: true,
columns: [{
field: "userId",
title: "userId",
width: "120px"
},{
field: "id",
title: "ID",
width: "120px"
},{
field: "title",
width: "120px"
},{
field: "body",
width: "120px"
}]
};
})
</script>
</body>
</html>
I can't get my Kendo UI grid to populate with my JSON data.
I suspect that it has to do with 'the double' data part in front of my relevant json data.
I'm not sure how I can add a double data mark in my schema. Any help would be much appreciated.
JSON:
{"dsProduct":
{"ttProduct":
[{"ProductId":"Truck","ProductType":5,"Tradeable":true},{"ProductId":"Tractor","ProductType":5,"Tradeable":false}]
}
}
JavaScript/HTML code:
<!doctype html>
<html>
<head>
<title>Kendo Grid with json</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.silver.min.css" rel="stylesheet" />
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost:8810/Kendo/rest/KendoRest",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
},
batch: true,
pageSize: 20,
schema: {
data:
"dsProduct",
model: {
id: "ProductId",
fields: {
ProductId: { type: "string" },
ProductType: { type: "number" },
Tradeable: { type: "boolean" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductId", title: "Product Name" },
{ field: "ProductType", title:"Product Type", width: "120px" },
{ field: "Tradeable", title:"Can product be traded?", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
</script>
</div>
</body>
</html>
Your definition for the shema.data isn't quite right. Looking at your json, there is a child object under the dsProduct that contains the array. Change your data to dsProduct.ttProduct and it should work.
schema: {
data:
"dsProduct.ttProduct",
model: {
See working sample http://jsbin.com/vevixa/1/edit?html,js,console,output
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 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.
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.