This is just a simple datatable that gets data from an Web api. I am
new to datatables and all I get in the ouput is that "No data is
available" I have tried every script part and the cdn from the
datatable website but nothing works
`<head>
<title>DataTable</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function () {
jQuery('#tblEmployee').DataTable(
{
ajax: {
"url": "http://localhost:57507/api/Employee/Get",
"dataSrc": ""
}
,
columns : [
{ data: 'Employee_Id' },
{ data: 'Project_Id' },
{ data: 'Grade_Id' },
{ data: 'Site_Id' },
{ data: 'Location_Id' },
{ data: 'StartDate' },
{ data: 'EndDate' },
{ data: 'BillRate' },
{ data: 'Role' },
]
}
);
console.log('End');
});
</script>'
</head>
This is the output window
Related
I am working on kendo TreeView control and trying to display tree structure in the grid. I am getting the json data from controller Action Method but control always display an error message "No records to display"
Could any one please help me to identify my mistake.
Below is my javascript code.
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var modelId = $("#hdnModelId").val();
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: "/EntityData/GetEntities",
dataType: "json",
data: { modelId: modelId }
}
},
schema: {
model: {
id: "EntityId",
parentId: "ParentEntityId",
fields:
{
Name: { field: "Name", type: "string" },
EntityId: { type: "number", editable: false, nullable: false },
ParentEntityId: { field: "ParentEntityId", nullable: true}
},
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
columns: [{ field: "Name" }]
});
});
</script>
.
Below is my Action Method.
[HttpGet]
public ActionResult GetEntities(int modelId)
{
var entities = metaDataService.GetEntitiesByModelId(modelId).ToList();
return Json(new { Data = entities }, JsonRequestBehavior.AllowGet);
}
Below is the Json data which I am getting from my Action Method.
{"Data":[{"EntityId":1,"ApplicationId":2,"Name":"Car","Description":"This entity describes a car.!","IsPublished":true,"IsDeleted":false,"ParentEntityId":null,"HasChildren":false},{"EntityId":20,"ApplicationId":2,"Name":"Test 567","Description":"Test 567!","IsPublished":true,"IsDeleted":false,"ParentEntityId":null,"HasChildren":false},{"EntityId":21,"ApplicationId":2,"Name":"Test Tst Entity","Description":"Test Tst Entity1234","IsPublished":true,"IsDeleted":false,"ParentEntityId":1,"HasChildren":true},{"EntityId":23,"ApplicationId":2,"Name":"Test New Entity","Description":"Test New Entity","IsPublished":true,"IsDeleted":false,"ParentEntityId":null,"HasChildren":false},{"EntityId":46,"ApplicationId":2,"Name":"Kendo Entity Test","Description":"Kendo Entity Test","IsPublished":true,"IsDeleted":false,"ParentEntityId":null,"HasChildren":false},{"EntityId":63,"ApplicationId":2,"Name":"Test new Entity","Description":"Test New Entity","IsPublished":true,"IsDeleted":false,"ParentEntityId":20,"HasChildren":true}]}
Any help is highly appreciated
Thanks in advance
Try addind this to your schema:
schema: {
data: "Data"
You have to tell the DataSource which property in your json the array is.
I have a scheduler (timeline view) set up that produces an interface that looks like the attached image.
[![scheduler_screenshot][1]][1]
The resources part of the scheduler code looks like this:
, resources: [
{
field: "loca_ky"
, name: "Locations"
, dataSource: [
{text:"CHAR above entrance doors", value:1},
{text:"BELLIARD Passerelle", value:2},
{text:"BERL Schuman", value:3}
]
, title: "Location"
}
]
I want the users to be able to find out more about the locations (eg. 'CHAR above entrance doors', etc) and therefore want to provide either a hyperlink around the text, or maybe add an icon with a hyperlink.
How do I do this?
Response to answers
Hi Jayesh
Re. Method 1. Adding the new function afterthe script fails to work because I am already using the 'databound' node of the scheduler as a function. See code below:
, dataBound: function(e) {
// hide the times row from the date/time header:
var view = this.view();
view.datesHeader.find("tr:last").prev().hide();
view.timesHeader.find("tr:last").prev().hide();
// Switch the colour of the reservation depending on stat_ky
$('div.k-event').removeClass('special-event'); // Remove the widget default colour.
$('div.k-event').addClass('eventRequested'); // Add back the eventRequested colour, which we use for every stage up to BOOKED.
e.sender._data.forEach(function(eventDetails) {
if (eventDetails['stat_ky'] == 5) {
// Switch the colour to eventAccepted for BOOKED requests (stat_ky=5).
$('div.k-event[data-uid="'+eventDetails['uid']+'"]').addClass('eventAccepted');
}
});
}
Should I place your code inside this function?
Response to answers, 2
Hi Jayesh
Yes, this works well indeed!
One final snag. In your example here is the datasource of the resource:
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
And you get the 'text' using element.html() like this:
element.html("<a href='http://google.com/" + element.html() + "'>" + element.html() + "</a>");
How do I reference the 'value' of the resource?
You can achieve this thing by using below two different methods.
Method 1: Manually converting resources text into hyperlink
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script>
$(function () {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda",
"timeline"
],
timezone: "Etc/UTC",
dataBound: scheduler_dataBound,
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms", "Attendees"],
orientation: "vertical"
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
}
]
});
});
// Below function is converting text into hyperlink
function scheduler_dataBound(e) {
$("#scheduler").find(".k-slot-cell").each(function () {
var element = $(this);
if (element != null) {
if (element.context.textContent.length > 2) {
element.html("<a href='http://google.com/" + element.html() + "'>" + element.html() + "</a>");
}
}
});
}
</script>
</body>
</html>
Method 2: By using template
Demo
Let me know if any concern.
I'm not able to run the minimal indentedTree example from here:
http://nvd3.org/examples/indentedtree.html
I'm using the latest versions of d3 (3.5.15) and nvd3 (1.8.1).
My folder looks as follows.
I do not understand why the following code does not show anything in my browser, since it's basically a copy-paste of the minimal example mentioned and linked above. Any ideas?
mychart.html
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<link href="nv.d3.min.css" rel="stylesheet" type="text/css">
<script src="d3.min.js"></script>
<script src="nv.d3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script src="mychart.js"></script>
</body>
</html>
mychart.js
function testData() {
return [{
key: 'NVD3',
url: 'http://novus.github.com/nvd3',
values: [
{
key: "Charts",
_values: [
{
key: "Simple Line",
type: "Historical",
url: "http://novus.github.com/nvd3/ghpages/line.html"
},
{
key: "Scatter / Bubble",
type: "Snapshot",
url: "http://novus.github.com/nvd3/ghpages/scatter.html"
},
{
key: "Stacked / Stream / Expanded Area",
type: "Historical",
url: "http://novus.github.com/nvd3/ghpages/stackedArea.html"
},
{
key: "Discrete Bar",
type: "Snapshot",
url: "http://novus.github.com/nvd3/ghpages/discreteBar.html"
},
{
key: "Grouped / Stacked Multi-Bar",
type: "Snapshot / Historical",
url: "http://novus.github.com/nvd3/ghpages/multiBar.html"
},
{
key: "Horizontal Grouped Bar",
type: "Snapshot",
url: "http://novus.github.com/nvd3/ghpages/multiBarHorizontal.html"
},
{
key: "Line and Bar Combo",
type: "Historical",
url: "http://novus.github.com/nvd3/ghpages/linePlusBar.html"
},
{
key: "Cumulative Line",
type: "Historical",
url: "http://novus.github.com/nvd3/ghpages/cumulativeLine.html"
},
{
key: "Line with View Finder",
type: "Historical",
url: "http://novus.github.com/nvd3/ghpages/lineWithFocus.html"
}
]
},
{
key: "Chart Components",
_values: [
{
key: "Legend",
type: "Universal",
url: "http://novus.github.com/nvd3/examples/legend.html"
}
]
}
]
}];
}
nv.addGraph(function() {
var chart = nv.models.indentedTree()
.columns([
{
key: 'key',
label: 'Name',
width: '75%',
type: 'text',
classes: function(d) { return d.url ? 'clickable name' : 'name' },
click: function(d) {
if (d.url) window.location.href = d.url;
}
},
{
key: 'type',
label: 'Type',
width: '25%',
type: 'text'
}
])
;
d3.select('#chart')
.datum(testData())
.call(chart)
;
return chart;
});
Yea the latest on the cdn for NVD3(1.8.1) does not have support for nv.models.indentedTree
So pick up the nv.d3 from here
http://nvd3.org/assets/js/nv.d3.js and css from http://nvd3.org/assets/css/nv.d3.css
working code here
I have a grid with editable fields. If I add a new record I see the selected entry as [object Object]. But what I want is the "text" of the entry. How to achieve this?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<h3>Kendo UI Grid DropDown-Editor: How to access the selected text/value?</h3>
<div id="grid"></div>
<script>
function nameDropDownEditor(container, options) {
$('<input data-text-field="nameText" data-value-field="nameValue" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: [
{ nameText: "Jane", nameValue: 100 },
{ nameText: "Mike", nameValue: 200 },
{ nameText: "Harry", nameValue: 300 }
],
});
}
$("#grid").kendoGrid({
toolbar: ["create"],
columns: [
{ field: "id" },
{ field: "name", editor: nameDropDownEditor },
{ field: "age" }
],
dataSource: [
{ id: 3030, name: "Jane", age: 30 },
{ id: 5353, name: "Harry", age: 53 }
],
editable: "popup"
});
</script>
</body>
</html>
This screenshot shows the result after a selection:
http://i.imgur.com/PEhRt47.png
Have you tried giving the dropdown an id and binding to the save event:
...grid markup
.Events(events => events.Save("Grid_Save")
and in the save event
function Grid_Save(e) {
var nameValue = $("#dropdownName").data().kendoDropDownList.value();
//do something with the value
}
I have used this code to generate search box for every fields. But it is showing syntax error at the line .columnFilter({. how to solve this problem
<script type="text/javascript" charset="utf-8">
//initialisation code
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers",
.columnFilter({
sPlaceHolder: "head:before",
aoColumns: [ {
type: "select",
values: [ 'Gecko', 'Trident', 'KHTML',
'Misc', 'Presto', 'Webkit', 'Tasman']
},
{ type: "text" },
{ type: "number" },
{ type: "date-range" },
{ type: "number-range" }
]
} );
} );
</script>
looks like a javascript syntax problem. Try changing to this:
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
})
.columnFilter({
sPlaceHolder: "head:before",
aoColumns: [ {
type: "select",
values: [ 'Gecko', 'Trident', 'KHTML',
'Misc', 'Presto', 'Webkit', 'Tasman']
},
{ type: "text" },
{ type: "number" },
{ type: "date-range" },
{ type: "number-range" }
]
} );
} );
$(document).ready(function(){
$('#example').dataTable().columnFilter();
})
make usure you have closed the dataTable() brackets before .columnFilter.
Hope it works.