I am using Kendo UI Library.
Trying to bind the data to Grid. But the grid is not getting populated with data.
I have referred required js libraries and styles as well.
<head>
Referred necessary Styles and Scripts are in order
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
<div id="courses"></div>
<script type="text/javascript">
$(document).ready(function () {
var Courses = [
{Name: "Theory of computation", Credit: 10},
{Name: "Probability and Statistics", Credit: 20},
{Name: "Discrete Maths", Credit: 10},
{Name: "Modern Physics", Credit: 25},
{Name: "Management Information System", Credit: 15 },
{Name: "Game Theory", Credit: 5 }
];
var courseDataSource = new kendo.data.DataSource({datasource: Courses, PageSize: 5});
courseDataSource.read();
$("#courses").kendoGrid({
dataSource: courseDataSource,
columns : [
{ field: "Name", title: "Course Name"} ,
{ field: "Credit", title: "Credits" }
],
scrollable: false,
pageable : true
});
});
</script>
</body>
Could you please help me in fixing the code.
Please change datasource to data and PageSize to pageSize
var courseDataSource =
new kendo.data.DataSource({datasource: Courses, PageSize: 5});
The correct implementation is
var courseDataSource =
new kendo.data.DataSource({data: Courses, pageSize: 5});
Thanks.
Related
How can i download the output from this code automatically when accessing the page, not by clicking any button in the page like I need to automate the download process.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = [50,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues
}]
},
options: {
legend: {display: false},
scales: {
yAxes: [{ticks: {min: 6, max:16}}],
}
}
});
</script>
</body>
</html>
Is there any way to display a label other than the value in the Value Axis in Kendo Chart?
What I want is the right image's labels instead of the left one's (the original).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/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/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
// these are the labels I want to replace for the number values.
const yAxisLabels = ["A", "B", "C", "D", "E"];
$("#chart").kendoChart({
series: [
{
type: "line",
data: [2, 3, 4]
}
],
valueAxis: {
min: 1,
max: 5,
majorUnit: 1
}
});
</script>
</body>
</html>
There is - templates are what you are looking for. However, from your question there is no way to help with exactly how to accomplish what you want since there is no code/or explanation of where your alternate values come from. That said, the following is one way to customize those labels.
Dojo example: https://dojo.telerik.com/OsuWirih
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [ [1, 2] ]
}
],
yAxis: {
labels: {
template: "X: #: value #"
}
}
});
</script>
More info here: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/yaxis.labels#yaxislabelstemplate
EDIT:
From your comment, I'm still not sure what is driving the A,B,C to replace values. Here is one way to accomplish it if the underlying values line up with the A, B, C... labels you want:
<script>
let dict = {0:'A',0.5:'B',1:'C',1.5:'D',2:'E',2.5:'F'};
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [ [1, 2] ]
}
],
yAxis: {
labels: {
template: "#: dict[value] #"
}
}
});
</script>
and in a dojo: https://dojo.telerik.com/EpElOFAy/2
I have a grid that has a grid in the detailInit and when I add a new row to the grid in the detailInit the detailInit collapses.
How can I stop it from collapsing when a new record is added? I have tried using e.preventDefault() on the button click event of adding a new row but that didn't work out.
You cannot prevent it from collapsing because every time you change something to the data it automatically rebinds and redraw the table.
What you can do however is to capture the rebinding, find the opened details and after the binding finish reopen them:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
let data = [{id: 1, FirstName: "Nancy", LastName: "Davolio", orders: [{title: 1}, {title: 2}]}];
$(document).ready(function () {
let expanded = [];
var element = $("#grid").kendoGrid({
dataSource: data,
toolbar: [{name: "create"}],
height: 600,
detailInit: detailInit,
editable: true,
columns: [
{
field: "id",
title: "id",
},
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{command: ["destroy"]},
],
dataBinding: function (e) {
expanded = $.map(this.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
return $(row).data("uid");
});
},
dataBound: function (e) {
this.expandRow(this.tbody.children().filter(function (idx, row) {
return $.inArray($(row).data("uid"), expanded) >= 0;
}));
},
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: function (options) {
options.success(e.data.orders);
},
}
},
});
}
</script>
</div>
</body>
</html>
I have created a kendo grid for 10 number of products in my project. I want the kendo window containing the details of the product to popup when I click on the productname displayed in the kendo grid.
I have looked into the demos of the kendo grid but I don't want the details of the product selected to be edited and also I don't want to use a separate column for details button as shown in the examples and demo.
I also looked into the music store demo of kendo ui but I couldn't understand its code as its in jQuery and I am using asp.net mvc with razor syntax for my project
Note:
I want window to appear only when I click on the name of the product and display its details.
You can use:
$('#grid').on("click", "tr.k-state-selected", function (e) {
// open window here
// you have i.e. Id here $('#grid').dataItem($('#grid').select()).Id
});
For this you must set option selectable: "row" in grid configuration.
Otherwise you can use just:
$('#grid').on("click", "tr", function (e) { ... }
You can make use of the detailTemplate for achieving it.
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
Go to this fiddle for a working demo
[UPDATE]
Here's the code snippet for showing the window while clicking on the Product Name
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px",attributes: { "class": "FirstName"} },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
$('#grid').on("click", ".FirstName", function (e) {
e.preventDefault();
var dataItem = $("#grid").getKendoGrid().dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
});
});
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
Working demo is here
I'm new in jqgrid. I try to use jqgrid in my mvc project. I'm using the following code for mapping the data to grid. But its not working. The function GetJqGridData is loading first in my MVC project.
Below is code for Controler.
public ActionResult GetJqGridData()
{
var jqGridData = new JqGridObject()
{
Data = GetSomeSampleData(),
Page = "1",
PageSize = 3, // u can change this !
SortColumn = "1",
SortOrder = "asc"
};
return Json(jqGridData, JsonRequestBehavior.AllowGet);
}
Below is code for VIEW.
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#myGrid").jqGrid({
url: '#Url.Action("GetJqGridData")',
datatype: 'json',
myType: 'POST',
colNames: ['Id', 'Name'],
colModel: [
{ name: 'Id', index: 'Id' },
{ name: 'Name', index: 'Name' }
],
jsonReader: {
root: 'Data',
id: 'id',
repeatitems: false
},
pager: $('#myPager'),
rowNum: 5,
rowList: [2, 5, 10],
width: 600,
viewrecords: true,
caption: 'Jqgrid MVC Tutorial'
});
});
</script>
<table id="myGrid"></table>
<div id="myPager"></div>
This is result i'm getting
Thanks
Bobbin
Try using the following json format:
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
for more informations about the format, take a look in this link : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data