I am new to Kendo Chart and I want implement it in my MVC project. I am using Kendo version 2012.3.1315.340.
Controller:
public ActionResult KendoChart()
{
return View();
}
public ActionResult GetTaskAllz()
{
dbipathEntities1 objContext = new dbipathEntities1();
List<mdlChart> objLst = new List<mdlChart>();
List<tblPurchaseOrder> objLst1 = new List<tblPurchaseOrder>();
var objMdl1 = (from c in objContext.tblPurchaseOrders select c).Take(100).OrderBy(x => x.POID).ToList();
objLst1 = objMdl1.ToList<tblPurchaseOrder>();
for (int i = 0; i < objLst1.Count; i++)
{
objLst.Add(new mdlChart { JobNo = objLst1[i].JobID, SupplierID = objLst1[i].SupplierID });
}
return Json(objLst1, JsonRequestBehavior.AllowGet);
}
Model:
public class mdlChart
{
public Nullable<int> JobNo { get; set; }
public Nullable<int> SupplierID { get; set; }
}
CSHTML:
<link rel="stylesheet" href="#Url.Content("~/Kendo/kendo.common.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/kendo.rtl.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/kendo.default.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/examples-offline.css")" />
<script src="../../Kendo/Jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/kendo.web.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/kendo.aspnetmvc.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Kendo/console.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/prettify.min.js")" type="text/javascript"></script>
<script src="../../Kendo/kendo.culture.en-GB.min.js" type="text/javascript"></script>
<script type="text/javascript">
//set current to the "en-GB" culture script
kendo.culture("en-GB");
</script>
#using Kendo.Mvc.UI
#(Html.Kendo().Chart<MVCProject.Models.mdlChart>()
.Name("chart")
.Title("Pop In Accounts")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(ds => ds.Read(read => read.Action("GetTaskAllz", "Kendo")))
.Series(series =>
{
series.Column(model => model.JobNo).Name("Val2");
})
.CategoryAxis(axis => axis
.Categories(model => model.SupplierID)
.Labels(labels => labels.Rotation(-90))
)
)
But with this I am not getting Chart. It is giving a Javascript error:
Microsoft JScript runtime error: Object doesn't support this property or method
Javascript auto generated Code in which above error is coming :
jQuery(
function () {
debugger;
jQuery("#chart").kendoChart(
{ "title": { "text": "Pop In Accounts" },
"legend": { "position": "top" },
"series": [{ "name": "Val2", "type": "column", "field": "JobNo"}],
"categoryAxis": [{ "labels": { "rotation": -90 }, "field": "SupplierID"}],
"dataSource": { "transport": { "prefix": "", "read": { "url": "/Kendo/GetTaskAllz", "type": "POST"} },
"type": "aspnetmvc-ajax",
"schema":
{ "model":
{ "fields":
{ "JobNo":
{ "type": "number", "defaultValue": null },
"SupplierID": { "type": "number", "defaultValue": null }
}
}
}
}
});
});
You should include "kendo.all.min.js". The "kendo.web.min.js" doesn't include Kendo UI DataViz widgets. More info can be found in the documentation.
Solved !! Just replacing all above Scripts with below scripts.
<script src="../../Kendo/Jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="../../Kendo/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<script src="../../Kendo/kendo.dataviz.min.js" type="text/javascript"></script>
Related
I'm currently using the grid from Kendo UI version v2016.2.504 and have incorporated the pager functionality.
When clicking the "last page" button I'm looking to see how I can identify the source or sender is definitely the "last page" button when using change event in kendo's datasource. I don't see any discernible way in the "e" event or sender property. Does anyone know?
kendouipager
var dataSource = new kendo.data.DataSource({
data: $scope.datasource,
pageSize: 15,
change: function (e) {
var sender = e.sender; // help
},
});
You can add an event listener to the button and then either do the what you want to do in the callback or raise a flag and handle it in the page event handler.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var isLast = false;
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 35 },
{ id: 3, name: "John Smith", age: 40 }
],
pageSize: 1,
schema: {
model: { id: "id" }
}
},
pageable: true,
page: function(e) {
console.log("Page change", e.page);
console.log("isLast", isLast);
if (isLast) {
// You can do what you want to do here - option 2
}
isLast = false;
}
});
document.getElementsByClassName("k-pager-last")[0].addEventListener("click", (e) => {
isLast = true;
// You can do what you want to do here - option 1
});
</script>
</body>
</html>
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
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 a kendo grid with a column template. I try to pass a value from the current row as a parameter for my javascript function. My code:
{
field: "CrmTaskId",
title: "Crm ",
template: '<a href="javascript:hrefTest(#=CrmTaskId#);" ># if( CrmTaskId==null) {#<span><span># } else {#<span>#: CrmTaskId#<span>#} #</a>'
}
hrefTest is javascript function with one param. But it's not working. Any ideas?
It can be done like this
.ClientTemplate("<a href='javascript: void(0);'
onclick=\"return YourJSFunction('#= OpportunityUrl #');\">#= OpportunityName #</a>")
This is part of the column definition, so what it is saying is...Make the OpportunityName
clickable and pass in the OpportunityUrl. #= Field # is the syntax for pulling values off of the Model.
I have tried with your code but not able to reproduce this issue. Please create new HTML/CSHTML page and check it.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var movies = [
{ "CrmTaskId": 1, "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption"},
{ "CrmTaskId": 2, "rating": 9.2, "year": 1972, "title": "The Godfather"},
{ "CrmTaskId": null, "rating": 9, "year": 1974, "title": "The Godfather: Part II" },
{ "CrmTaskId": '', "rating": 9.9, "year": 1874, "title": "The Godmother: Part III" }
];
function hrefTest(CrmTaskId)
{
alert("CrmTaskId is: " + CrmTaskId);
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: movies,
pageSize: 10
},
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [{
field: "CrmTaskId",
title: "Crm"
}, {
field: "title",
title: "title"
},
{
template: '<a href="javascript:hrefTest(#=CrmTaskId#);" ># if( CrmTaskId==null) {#<span><span># } else {#<span>#: CrmTaskId#<span>#} #</a>'
}
]
});
});
</script>
</body>
</html>
Please try with the below code snippet.
Use this :
{
field: "Field",
editable: true,
title: "Title",
template: showRelatedLink,
allownull: true,
width: 100
}
and then in your function :
function showRelatedLink(container, options)
{
var yourVariable = container.YourField;
}
You can pass a field to a function like this too:
Grid:
columns: [
{ field: "ProductTypeID", title: "Type", template: "#=product_type_to_name(ProductTypeID)#" },
]
Function:
function product_type_to_name(product_type_id) {
console.log(product_type_id);
var name = "";
// convert ID to name
return name;
}
I have tried this
{
field: "DisplayChangedFrom",
title: "From",
template:"#=generateTemplate(DisplayChangedFrom)#
},
Then the function
function generateTemplate(items) {
var html = "<ul>";
if (items !== null && items.length > 0) {
for (var x = 0; x < items.length; x++) {
html += "<li>";
html += items[x];
html += "</li>";
}
}
html += "</ul>";
return html;
};
here is the HTML page which i am working with,it's not working properly.
where is the issue can any one check it once.
here issue after the filter the grid the drop down value also changing or filtering.
can Any one check this code in html page.
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<span class="nwcselection">data</span>
<input id="ddl"/></div>
<input type="button" id="btnfilter" value="Filter" onclick="Filter()" />
<div id="grid"></div>
</div>
<script type="text/javascript">
var data =new kendo.data.DataSource({
type: "odata",
transport: {
read:
"http://demos.kendoui.com/service/Northwind.svc/Products",
},
});
function createGrid()
{
var grid= $("#grid").kendoGrid({
dataSource:data,
schema: {
model: {
fields: {
ProductID: { type: "number" },
UnitPrice: { type: "number" },
ProductName: { type: "string" },
} }},
pageable: true,
columns: [
{ field: "ProductID", title:"Product ID", width:100 },
{ field: "ProductName", title:"Product Name" },
{ field: "UnitPrice", title:"Unit Price", width: 100 } ]
});
}
function dd()
{
$("#ddl").kendoDropDownList({
dataSource: data,
optionLabel: "Select category...",
dataTextField: "ProductName",
dataValueField: "ProductName"
}).data("kendoDropDownList");
}
function Filter() {
$("#btnfilter").click(function () {
$filter = new Array();
$ProductName = $("#ddl").data("kendoDropDownList").value();
if($ProductName)
{
$filter.push({ field: "ProductName",
operator: "contains", value: $ProductName });
}
var grid = $("#grid").data("kendoGrid");
grid.dataSource.filter({
logic: "and",
filters: $filter
});
});
}
$(document).ready(function () {
createGrid();
Filter();
dd();
});
</script>
</body>
The problem is that you use the same DataSource for the Grid and the DropDown: they are like pointers to the same object. Filtering one will filter the other because they are actually the same thing.
Try creating the DataSource twice:
var ds1 =new kendo.data.DataSource({
type: "odata",
transport: {
read:
"http://demos.kendoui.com/service/Northwind.svc/Products"
}
});
var ds2 =new kendo.data.DataSource({
type: "odata",
transport: {
read:
"http://demos.kendoui.com/service/Northwind.svc/Products"
}
});
and then use each of them in a different element:
var grid = $("#grid").kendoGrid({
dataSource: ds1,
schema : {
model: {
fields: {
ProductID : { type: "number" },
UnitPrice : { type: "number" },
ProductName: { type: "string" }
} }},
pageable: true,
columns : [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 100 }
]
});
$("#ddl").kendoDropDownList({
dataSource : ds2,
optionLabel : "Select category...",
dataTextField : "ProductName",
dataValueField: "ProductName"
}).data("kendoDropDownList");