I am using the code below, which I got from a jsFiddle example. Seems to work there but not locally in either IE or Chrome. I only get a blank page.
I pulled the config.php from GitHub and updated it with my attributes. I also pulled the createdb.sql file and created a MySQL database (it created the tables 'countries' and 'clients').
Finally, I data entered all the information for both 'countries' and 'clients' thinking they needed to be there, but I'm not sure why.
What am I doing wrong?
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.css"</script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div id="jsGrid">
</div>
<script>
window.db = {};
db.countries = [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 },
{ Name: "France", Id: 4 },
{ Name: "Brazil", Id: 5 },
{ Name: "China", Id: 6 },
{ Name: "Russia", Id: 7 }
];
db.clients = [
{
"Name": "Otto Clay",
"Age": 61,
"Country": 6,
"Address": "Ap #897-1459 Quam Avenue",
"Married": false
},
{
"Name": "Connor Johnston",
"Age": 73,
"Country": 7,
"Address": "Ap #370-4647 Dis Av.",
"Married": false
},
{
"Name": "Lacey Hess",
"Age": 29,
"Country": 7,
"Address": "Ap #365-8835 Integer St.",
"Married": false
},
{
"Name": "Timothy Henson",
"Age": 78,
"Country": 1,
"Address": "911-5143 Luctus Ave",
"Married": false
},
{
"Name": "Ramona Benton",
"Age": 43,
"Country": 5,
"Address": "Ap #614-689 Vehicula Street",
"Married": true
},
{
"Name": "Ezra Tillman",
"Age": 51,
"Country": 1,
"Address": "P.O. Box 738, 7583 Quisque St.",
"Married": true
},
{
"Name": "Dante Carter",
"Age": 59,
"Country": 1,
"Address": "P.O. Box 976, 6316 Lorem, St.",
"Married": false
},
{
"Name": "Christopher Mcclure",
"Age": 58,
"Country": 1,
"Address": "847-4303 Dictum Av.",
"Married": true
},
{
"Name": "Ruby Rocha",
"Age": 62,
"Country": 2,
"Address": "5212 Sagittis Ave",
"Married": false
},
{
"Name": "Imelda Hardin",
"Age": 39,
"Country": 5,
"Address": "719-7009 Auctor Av.",
"Married": false
},
{
"Name": "Jonah Johns",
"Age": 28,
"Country": 5,
"Address": "P.O. Box 939, 9310 A Ave",
"Married": false
},
{
"Name": "Herman Rosa",
"Age": 49,
"Country": 7,
"Address": "718-7162 Molestie Av.",
"Married": true
},
{
"Name": "Arthur Gay",
"Age": 20,
"Country": 7,
"Address": "5497 Neque Street",
"Married": false
},
{
"Name": "Xena Wilkerson",
"Age": 63,
"Country": 1,
"Address": "Ap #303-6974 Proin Street",
"Married": true
},
{
"Name": "Lilah Atkins",
"Age": 33,
"Country": 5,
"Address": "622-8602 Gravida Ave",
"Married": true
},
{
"Name": "Malik Shepard",
"Age": 59,
"Country": 1,
"Address": "967-5176 Tincidunt Av.",
"Married": false
},
{
"Name": "Keely Silva",
"Age": 24,
"Country": 1,
"Address": "P.O. Box 153, 8995 Praesent Ave",
"Married": false
},
{
"Name": "Hunter Pate",
"Age": 73,
"Country": 7,
"Address": "P.O. Box 771, 7599 Ante, Road",
"Married": false
},
{
"Name": "Mikayla Roach",
"Age": 55,
"Country": 5,
"Address": "Ap #438-9886 Donec Rd.",
"Married": true
},
{
"Name": "Upton Joseph",
"Age": 48,
"Country": 4,
"Address": "Ap #896-7592 Habitant St.",
"Married": true
},
{
"Name": "Jeanette Pate",
"Age": 59,
"Country": 2,
"Address": "P.O. Box 177, 7584 Amet, St.",
"Married": false
}
];
jsGrid.loadStrategies.PageLoadingStrategy.prototype.sort = function() {
this._grid._sortData();
this._grid.refresh();
return $.Deferred().resolve().promise();
}
$("#jsGrid").jsGrid({
height: "300px",
width: "100%",
autoload: true,
paging: true,
pageLoading: true,
filtering: true,
sorting: true,
pageSize: 15,
pageIndex: 2,
controller: {
loadData: function(filter) {
console.log(filter);
var startIndex = (filter.pageIndex - 1) * filter.pageSize;
return {
data: db.clients.slice(startIndex, startIndex + filter.pageSize),
itemsCount: db.clients.length
};
}
},
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married" }
]
});
</script>
</body>
</html>
p.s. - At this point, I don't care WHERE the data comes from -- JSON, MySQL, CSV, text file, tea leaves, etc. -- I just want to be able to see the grid.
You just need to change the import order inside the head
jsgrid relies on the existence of jquery, so I put jquery first.
Working code below:
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" </script>
< script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.css"
</script>
</head>
<body>
<div id="jsGrid">
</div>
<script>
window.db = {};
db.countries = [{
Name: "",
Id: 0
},
{
Name: "United States",
Id: 1
},
{
Name: "Canada",
Id: 2
},
{
Name: "United Kingdom",
Id: 3
},
{
Name: "France",
Id: 4
},
{
Name: "Brazil",
Id: 5
},
{
Name: "China",
Id: 6
},
{
Name: "Russia",
Id: 7
}
];
db.clients = [{
"Name": "Otto Clay",
"Age": 61,
"Country": 6,
"Address": "Ap #897-1459 Quam Avenue",
"Married": false
},
{
"Name": "Connor Johnston",
"Age": 73,
"Country": 7,
"Address": "Ap #370-4647 Dis Av.",
"Married": false
},
{
"Name": "Lacey Hess",
"Age": 29,
"Country": 7,
"Address": "Ap #365-8835 Integer St.",
"Married": false
},
{
"Name": "Timothy Henson",
"Age": 78,
"Country": 1,
"Address": "911-5143 Luctus Ave",
"Married": false
},
{
"Name": "Ramona Benton",
"Age": 43,
"Country": 5,
"Address": "Ap #614-689 Vehicula Street",
"Married": true
},
{
"Name": "Ezra Tillman",
"Age": 51,
"Country": 1,
"Address": "P.O. Box 738, 7583 Quisque St.",
"Married": true
},
{
"Name": "Dante Carter",
"Age": 59,
"Country": 1,
"Address": "P.O. Box 976, 6316 Lorem, St.",
"Married": false
},
{
"Name": "Christopher Mcclure",
"Age": 58,
"Country": 1,
"Address": "847-4303 Dictum Av.",
"Married": true
},
{
"Name": "Ruby Rocha",
"Age": 62,
"Country": 2,
"Address": "5212 Sagittis Ave",
"Married": false
},
{
"Name": "Imelda Hardin",
"Age": 39,
"Country": 5,
"Address": "719-7009 Auctor Av.",
"Married": false
},
{
"Name": "Jonah Johns",
"Age": 28,
"Country": 5,
"Address": "P.O. Box 939, 9310 A Ave",
"Married": false
},
{
"Name": "Herman Rosa",
"Age": 49,
"Country": 7,
"Address": "718-7162 Molestie Av.",
"Married": true
},
{
"Name": "Arthur Gay",
"Age": 20,
"Country": 7,
"Address": "5497 Neque Street",
"Married": false
},
{
"Name": "Xena Wilkerson",
"Age": 63,
"Country": 1,
"Address": "Ap #303-6974 Proin Street",
"Married": true
},
{
"Name": "Lilah Atkins",
"Age": 33,
"Country": 5,
"Address": "622-8602 Gravida Ave",
"Married": true
},
{
"Name": "Malik Shepard",
"Age": 59,
"Country": 1,
"Address": "967-5176 Tincidunt Av.",
"Married": false
},
{
"Name": "Keely Silva",
"Age": 24,
"Country": 1,
"Address": "P.O. Box 153, 8995 Praesent Ave",
"Married": false
},
{
"Name": "Hunter Pate",
"Age": 73,
"Country": 7,
"Address": "P.O. Box 771, 7599 Ante, Road",
"Married": false
},
{
"Name": "Mikayla Roach",
"Age": 55,
"Country": 5,
"Address": "Ap #438-9886 Donec Rd.",
"Married": true
},
{
"Name": "Upton Joseph",
"Age": 48,
"Country": 4,
"Address": "Ap #896-7592 Habitant St.",
"Married": true
},
{
"Name": "Jeanette Pate",
"Age": 59,
"Country": 2,
"Address": "P.O. Box 177, 7584 Amet, St.",
"Married": false
}
];
jsGrid.loadStrategies.PageLoadingStrategy.prototype.sort = function() {
this._grid._sortData();
this._grid.refresh();
return $.Deferred().resolve().promise();
}
$("#jsGrid").jsGrid({
height: "300px",
width: "100%",
autoload: true,
paging: true,
pageLoading: true,
filtering: true,
sorting: true,
pageSize: 15,
pageIndex: 2,
controller: {
loadData: function(filter) {
console.log(filter);
var startIndex = (filter.pageIndex - 1) * filter.pageSize;
return {
data: db.clients.slice(startIndex, startIndex + filter.pageSize),
itemsCount: db.clients.length
};
}
},
fields: [{
name: "Name",
type: "text",
width: 150
},
{
name: "Age",
type: "number",
width: 50
},
{
name: "Address",
type: "text",
width: 200
},
{
name: "Country",
type: "select",
items: db.countries,
valueField: "Id",
textField: "Name"
},
{
name: "Married",
type: "checkbox",
title: "Is Married"
}
]
});
</script>
</body>
</html>
Related
I am trying to persist some objects that have a composite id. If I am only sending an array with one element it works fine, but it the array has more than one it throws an exception when saving the first one. public boolean
addParamsToChart(List<ChartParams> chartParams, Long chartId) {
List<ChartParams> chartParamsList = new ArrayList<>();
for(ChartParams chartParam: chartParams) {
ChartParamsId id = new ChartParamsId();
// id.setChartId(chartId);
id.setChartId(chartParam.getChart().getId());
id.setParamId(chartParam.getParam().getId());
id.setContextSourceId(chartParam.getContextSource().getId());
chartParam.setChartParamsId(id);
if(chartParamsRepository.save(chartParams) !=null) {
chartParamsList.add(chartParam);
}
}
if(chartParamsList.size()!=chartParams.size()) {
// something went wrong, delete previous inserted
deleteChartParams(chartParamsList);
chartRepository.delete(chartId);
return false;
}
return true;
}
[{
"chart": {
"id": 49,
"cv": {
"id": 1,
"name": "Money",
"category": {
"id": 1,
"name": "Euros"
},
"definition": "\"European curreny.\" [EU:euro]",
"enabled": true,
"cvid": "CC:1010"
},
"accountType": {
"id": 1,
"name": "saving"
},
"name": "Euro saving charts"
},
"param": {
"id": 8,
"name": "Totals",
"isFor": "Currency"
},
"contextSource": {
"id": 3,
"name": "euro",
"internal": "eu",
"abbreviatedName": "eu"
} }]
But for this having two objects inside instead of one is not working, throwing an exception at the first save.
[{
"chart": {
"id": 52,
"cv": {
"id": 55,
"name": "Stocks",
"category": {
"id": 1,
"name": "Stocks"
},
"definition": "\"General stocks.\" [GS:ST]",
"enabled": true,
"cvid": "ST:0111"
},
"accountType": {
"id": 1,
"name": "saving"
},
"name": "Stock saving chart"
},
"param": {
"id": 8,
"name": "Totals",
"isFor": "Currency"
},
"contextSource": {
"id": 6,
"name": "stock",
"internal": "st",
"abbreviatedName": "st"
} }, {
"chart": {
"id": 52,
"cv": {
"id": 55,
"name": "Stocks",
"category": {
"id": 1,
"name": "Stocks"
},
"definition": "\"General stocks.\" [GS:ST]",
"enabled": true,
"cvid": "ST:0111"
},
"accountType": {
"id": 1,
"name": "saving"
},
"name": "Stock saving chart"
},
"param": {
"id": 8,
"name": "Totals",
"isFor": "Currency"
},
"contextSource": {
"id": 7,
"name": "Sold stock",
"internal": "st_sold",
"abbreviatedSequence": "st_sold"
} }]
The exception I got is:
org.hibernate.id.IdentifierGenerationException: null id generated for:class eu.stocks.chart.chartParams.ChartParams
I want to set a hidden ID for each segment in an am-charts gantt chart. So when the user double clicks a segment i want to retrieve data using that ID and show in a popup window.
"dataProvider": [ {
"category": "John",
"segments": [ {
"start": "2018-01-01",
"end": "2018-01-10",
"color": "#f00",
"task": "Task #1",
"key": "1000"
}, {
"start": "2018-01-12",
"end": "2018-01-20",
"color": "#00f",
"task": "Task #2",
"key": "1001"
}, {
"start": "2018-01-25",
"end": "2018-02-10",
"color": "33800F",
"task": "Task #3",
"key": "1002"
} ]
} ]
I am able to get the Category value but don't know how to get Segments values.
Any example would be a great help
If you're using clickGraphItem for your double-click functionality, you can access the segment information through the graph's segmentData property in the event object:
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
alert(e.graph.segmentData.key)
}
}]
Demo below:
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "gantt",
"theme": "light",
"marginRight": 70,
"period": "hh",
"dataDateFormat": "YYYY-MM-DD",
"balloonDateFormat": "JJ:NN",
"columnWidth": 0.5,
"valueAxis": {
"type": "date",
"minimum": 7,
"maximum": 31
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "<b>[[task]]</b>: [[open]] [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2015-01-01",
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataProvider": [{
"category": "John",
"segments": [{
"start": 7,
"duration": 2,
"color": "#46615e",
"task": "Task #1",
"key": "1001"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1002"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3",
"key": "1003"
}]
}, {
"category": "Smith",
"segments": [{
"start": 10,
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1004"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3",
"key": "1005"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1",
"key": "1006"
}]
}, {
"category": "Ben",
"segments": [{
"start": 12,
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1007"
}, {
"start": 16,
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4",
"key": "1008"
}]
}],
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
alert("key: " + e.graph.segmentData.key)
}
}]
});
body,
html {
width: 100%;
height: 100%;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/gantt.js"></script>
<div id="chartdiv"></div>
I have the following json:
{
"release": {
"genres": {
"genre": "Electronic"
},
"identifiers": {
"identifier": [
{
"description": "Text",
"value": "5 709498 101026",
"type": "Barcode"
},
{
"description": "String",
"value": 5709498101026,
"type": "Barcode"
}
]
},
"status": "Accepted",
"videos": {
"video": [
{
"title": "Future 3 - Renaldo",
"duration": 446,
"description": "Future 3 - Renaldo",
"src": "http://www.youtube.com/watch?v=hpc9aQpnUjc",
"embed": true
},
{
"title": "Future 3 - Silver M from album We are the Future / 1995 Denmark / Archivos de Kraftwerkmusik",
"duration": 461,
"description": "Future 3 - Silver M from album We are the Future / 1995 Denmark / Archivos de Kraftwerkmusik",
"src": "http://www.youtube.com/watch?v=nlcHRI8iV4g",
"embed": true
},
{
"title": "Future 3 - Bubbles At Dawn",
"duration": 710,
"description": "Future 3 - Bubbles At Dawn",
"src": "http://www.youtube.com/watch?v=ABBCyvGMOFw",
"embed": true
}
]
},
"labels": {
"label": {
"catno": "APR 010CD",
"name": "April Records"
}
},
"companies": {
"company": {
"id": 26184,
"catno": "",
"name": "Voices Of Wonder",
"entity_type_name": "Published By",
"resource_url": "http://api.discogs.com/labels/26184",
"entity_type": 21
}
},
"styles": {
"style": [
"Abstract",
"IDM",
"Downtempo"
]
},
"formats": {
"format": {
"text": "",
"name": "CD",
"qty": 1,
"descriptions": {
"description": "Album"
}
}
},
"country": "Denmark",
"id": 5375,
"released": "1995-00-00",
"artists": {
"artist": {
"id": 5139,
"anv": "",
"name": "Future 3",
"role": "",
"tracks": "",
"join": ""
}
},
"title": "We Are The Future 3",
"master_id": 638422,
"tracklist": {
"track": [
{
"position": 1,
"duration": "8:04",
"title": "Future 3"
},
{
"position": 2,
"duration": "7:38",
"title": "Silver M"
},
{
"position": 3,
"duration": "7:27",
"title": "Renaldo"
},
{
"position": 4,
"duration": "6:04",
"title": "B.O.Y.D."
},
{
"position": 5,
"duration": "6:12",
"title": "Fumble"
},
{
"position": 6,
"duration": "6:12",
"title": "Dawn"
},
{
"position": 7,
"duration": "11:54",
"title": "Bubbles At Dawn"
},
{
"position": 8,
"duration": "6:03",
"title": "D.A.W.N. At 6"
},
{
"position": 9,
"duration": "8:50",
"title": 4684351684651
}
]
},
"data_quality": "Needs Vote",
"extraartists": {
"artist": [
{
"id": 2647642,
"anv": "",
"name": "Danesadwork",
"role": "Cover",
"tracks": "",
"join": ""
},
{
"id": 2647647,
"anv": "",
"name": "Djon Edvard Petersen",
"role": "Photography By",
"tracks": "",
"join": ""
},
{
"id": 114164,
"anv": "",
"name": "Anders Remmer",
"role": "Written-By",
"tracks": "",
"join": ""
},
{
"id": 435979,
"anv": "",
"name": "Jesper Skaaning",
"role": "Written-By",
"tracks": "",
"join": ""
},
{
"id": 15691,
"anv": "",
"name": "Thomas Knak",
"role": "Written-By",
"tracks": "",
"join": ""
}
]
},
"notes": "© 1995 April Records APS ℗ 1995 April Records APS"
}
}
I am trying to get those titles which end with 'At Dawn'.
I am using the following command
r.db("discogs1").table("releases").filter(function(doc){ return doc('release')('title').match('At Dawn$')})
But I get errors as follows:
RqlRuntimeError: Expected type STRING but found NUMBER in:r.db("discogs1").table("releases").filter(function(var_24) { return var_24("release")("title").match("At Dawn$"); })
I tried different combinations but I can't seem to get it to work
It seems that some of your documents don't have a row('release')('title') property that is a string. Some of them are numbers, so when you try to call .match on them, they throw an error because .match only works on strings.
To see if this is true, try the following:
r.db("discogs1").table("releases")
.filter(r.row('release')('title').typeOf().ne('STRING'))
.count()
Ideally, the result of this should be 0, since no document should have a title property that's not a string. If it's higher than 0, that's why you're getting an error.
If you want to only get documents where the title is a string, you can do the following:
r.db("discogs1").table("releases")
.filter(r.row('release')('title').typeOf().eq('STRING'))
.filter(function(doc){ return doc('release')('title').match('At Dawn$')})
This query will work, because it will filter our all documents where the title is not a string.
If you want to coerce all title into strings, you can do the following:
r.db("discogs1").table("releases")
.filter(r.row('release')('title').typeOf().ne('STRING'))
.merge(function (row) {
return {
'title': row('title').coerceTo('string')
}
})
If you want to delete all documents where the title is not a string, you can do this:
r.db("discogs1").table("releases")
.filter(r.row('release')('title').typeOf().ne('STRING'))
.delete()
I want to fill a grid with a complex json returned from a webservice.
My json contains two things:
data: array with the records that will fill the grid
columns: array with the config(layout) of the grid
I have successfully filled the grid with the "data" by specifying the schema.data.
My problem is that i how to get the "columns" (from the JSON) from the datasource so i can set the grid properties in my gridOptions.
Is there a way to do it?
Here is my JSON
{
"data": [
{
"id": 0,
"firstname": "Dalton",
"lastname": "Holden",
"gender": "male",
"email": "daltonholden#tellifly.com",
"phone": "871-407-2973",
"address": "22 National Drive, Brenton, Louisiana",
"birthday": "21/04/1965",
"currency": "GBP"
},
{
"id": 1,
"firstname": "Allyson",
"lastname": "Odom",
"gender": "female",
"email": "allysonodom#tellifly.com",
"phone": "922-548-2725",
"address": "44 Quincy Street, Thynedale, Georgia",
"birthday": "28/08/1961",
"currency": "CHF"
},
{
"id": 2,
"firstname": "Sweet",
"lastname": "Branch",
"gender": "male",
"email": "sweetbranch#tellifly.com",
"phone": "880-593-2244",
"address": "81 Fenimore Street, Veguita, Missouri",
"birthday": "08/08/1953",
"currency": "AUD"
}
],
"columns": [
{
"field": "firstname",
"title": "Frist Name",
"width": 200,
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "lastname",
"title": "Last Name",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "gender",
"title": "Gender",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "email",
"title": "e-mail",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "phone",
"title": "Phone Number",
"attributes": {
"class": "",
"style": "text-align: right;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: right;"
}
},
{
"field": "address",
"title": "Address",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "birthday",
"title": "Birthday",
"attributes": {
"class": "",
"style": "text-align: center;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: center;"
}
},
{
"field": "currency",
"title": "Currency",
"attributes": {
"class": "",
"style": "text-align: center;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: center;"
}
}
]
}
And here is my code:
var customersSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://....",
dataType: "json"
}
},
schema: {
data: "data"
}
});
$scope.mainGridOptions = {
dataSource: customersSource,
//columns: Here it should be something like --> customersSource.columns,
height: 500,
scrollable: true,
selectable: true
};
The schema will only take care of fetching and parsing the data that your DataSource needs in order to create views, filter, sort, etc.
There is no built in way of handling "hybrid" content coming from one Ajax-request.
You make a workaround, though. Use the requestEnd event, access the missing data, and save it for later.
var customersSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://....",
dataType: "json"
}
},
schema: {
data: "data"
},
requestEnd: function(e) {
// According to the documentation, this gives you a reference to the datasource instance itself.
this.whatever = e.response.columns;
}
});
Now you can use this thing for later.
$scope.mainGridOptions = {
dataSource: customersSource,
columns: customersSource.whatever,
height: 500,
scrollable: true,
selectable: true
};
I've managed to get the Kendo UI scheduler to work as far as adding resources creating new events and saving new events. However I'm unable to get data from an asp.net web api and display it. Can someone provide an example of how to bind it to the following data:
[{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":7,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"sdfsdf","Description":"","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":8,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"Test","Description":"Thee","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":9,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"yrtyr","Description":"dfg","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null},{"Name":"Jim Smith","ID":3,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1},{"ID":3,"Description":"Vacuum 26","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":10,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"","Description":"","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1},{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":11,"StartDateTime":"2014-04-14T11:30:00","EndDateTime":"2014-04-14T12:00:00","Title":"fgdfg","Description":"dfg","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3},{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":1008,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"sdfsd","Description":"sdf","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1},{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":1009,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"sdfsd","Description":"sdf","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3},{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]}]
Please try with the below code snippet.
<div id="scheduler">
</div>
<script>
var test = '[{ "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 7, "StartDateTime": "2014-04-15T11:00:00", "EndDateTime": "2014-04-15T11:30:00", "Title": "First Meeting", "Description": "", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 8, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "Test", "Description": "Thee", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 9, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "yrtyr", "Description": "dfg", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null }, { "Name": "Jim Smith", "ID": 3, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1 }, { "ID": 3, "Description": "Vacuum 26", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 10, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "", "Description": "", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1 }, { "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 11, "StartDateTime": "2014-04-14T11:30:00", "EndDateTime": "2014-04-14T12:00:00", "Title": "fgdfg", "Description": "dfg", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3 }, { "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 1008, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "sdfsd", "Description": "sdf", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1 }, { "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 1009, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "sdfsd", "Description": "sdf", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3 }, { "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}]}]';
$(function () {
$("#scheduler").kendoScheduler({
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda"
],
timezone: "Etc/UTC",
dataSource: {
data: eval(test),
schema: {
model: {
id: "ID",
fields: {
taskId: { from: "ID", type: "number" },
title: { from: "Title" },
start: { type: "date", from: "StartDateTime" },
end: { type: "date", from: "EndDateTime" },
//startTimezone: { from: "StartTimezone" },
//endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
//recurrenceId: { from: "RecurrenceID" },
//recurrenceRule: { from: "RecurrenceRule" },
//recurrenceException: { from: "RecurrenceException" },
//ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
}
});
});
</script>
Demo
Let me know if any concern.