or
1 answer
1.0K+ views
In demo Pie Chart From kendo https://demos.telerik.com/kendo-ui/pie-charts/index
data: is created manual, but I want to read data from a url of type Json.
Help me. Thanks.
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}] <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
},
series: [{
type: "pie",
startAngle: 150,
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}]
}],
tooltip: {
visible: true,
format: "{0}%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
Georgi Denchev
Telerik team
answered
on
11 May 2021
1 answer
131 views
Hi, I've been trying for quite some time now to expand the newly created row. So basically when I hit "add new" and hit update after it updates and inserts, then expand that new row.
Georgi Denchev
Telerik team
answered
on
11 May 2021
1 answer
361 views
This is demo code about filemanage: https://demos.telerik.com/kendo-ui/filemanager/index
<script>
$("#filemanager").kendoFileManager({
dataSource: {
schema: kendo.data.schemas.filemanager,
transport: {
read: {
url: "/kendo-ui/service/FileManager/Read",
method: "POST"
},
create: {
url: "/kendo-ui/service/FileManager/Create",
method: "POST"
},
update: {
url: "/kendo-ui/service/FileManager/Update",
method: "POST"
},
destroy: {
url: "/kendo-ui/service/FileManager/Destroy",
method: "POST"
}
}
},
uploadUrl: "/kendo-ui/service/FileManager/Upload",
toolbar: {
items: [
{ name: "createFolder" },
{ name: "upload" },
{ name: "sortDirection" },
{ name: "sortField" },
{ name: "changeView" },
{ name: "spacer" },
{ name: "details" },
{ name: "search" }
]
},
contextMenu: {
items: [
{ name: "rename" },
{ name: "delete" }
]
},
draggable: true,
resizable: true
});
$(document).ready(function () {
var filemanager = $("#filemanager").getKendoFileManager();
filemanager.executeCommand({ command: "TogglePaneCommand", options: { type: "preview" } });
filemanager.toolbar.fileManagerDetailsToggle.switchInstance.toggle();
})
</script>I still don't understand, right at the items position there is nothing related to "tranport: read" but still can read the data of the items. So where is that data retrieved through?
This is link read data but it only of Folder: https://demos.telerik.com/kendo-ui/service/FileManager/Read
Can Admins explain in depth for me??
I am working on a project using filemanager and I am currently spending a lot of time. Hope Admins can help me.
THis is my Project code:
$("#filemanager").kendoFileManager({
dataSource: {
transport: {
read: function (options) {
var that = this;
$.ajax({
url: "/_layouts/15/xxx/API/ApiHandler.ashx?tbl=like&func=getalllibrary",
cache: false,
scriptCharset: "utf8",
dataType: "json",
method: "POST",
data: that.parameterMap ? that.parameterMap(options.data, "read") : options.data,
success: function (result) {
options.success(result);
}
});
},
destroy: function (options) {
console.log("Here Hello"); //[error] not show log when click delete => cannot call function destroy
}
},
schema: {
data: 'data',
}
},
toolbar: {
items: [
{ name: "custom", type: "button", text: "Create", command: "MyCustomCommandCreate" },
{ name: "custom", type: "button", text: "Upload", command: "MyCustomCommandUpload" },
{ name: "sortDirection" },
{ name: "sortField" },
{ name: "changeView" },
{ name: "spacer" },
{ name: "details" },
{ name: "search" }
]
},
contextMenu: {
items: [
{ name: "rename" },
{ name: "delete" },
{ name: "custom", text: "Detect", command: "MyCustomCommandDetect", spriteCssClass: "k-icon k-i-info" }
]
},
draggable: true,
resizable: true
});
var filemanager = $("#filemanager").getKendoFileManager();
filemanager.executeCommand({ command: "TogglePaneCommand", options: { type: "preview" } });
filemanager.toolbar.fileManagerDetailsToggle.switchInstance.toggle();
var filemanagerNS = kendo.ui.filemanager;
filemanagerNS.commands.MyCustomCommandUpload = filemanagerNS.FileManagerCommand.extend({
exec: function () {
myWindow.data("kendoWindow").open();
}
});
filemanagerNS.commands.MyCustomCommandCreate = filemanagerNS.FileManagerCommand.extend({
exec: function () {
myWindowAddLibrary.data("kendoWindow").open();
}
});Click Folder not red hover and Console show Error: ( image1.png )
My json data in Url transport: read: ( image2.png )
Hope the admin can show me how to show the item corresponding to my folder
Neli
Telerik team
answered
on
11 May 2021
1 answer
349 views
Hello. I am using a custom column editor as shown in your example : https://docs.telerik.com/kendo-ui/knowledge-base/custom-editor-autocomplete. Even in the example that you provided, if I type a value that is not in the list, on focus out the field will display "undefined" and will remain this way even if i try to select another value. Is there a fix for this situation? Thank you in advance :)
I attached a screenshot from your working example.
Martin
Telerik team
answered
on
11 May 2021
3 answers
420 views
Using the code below I can successfully update a gantt task (I'm using a custom edit screen + custom update function). It fires off my transport update handler and axios does the update just fine.
var task = ganttdataSource1.at(0);
ganttdatasource1.update(task, { title: "New Title" });
ganttdatasource1.sync()What I can't figure out is how to update the resource assignments, doing as below seems to ignore the 'resources' property so when in the transport update handler 'resources' just has the ones that were originally set,
var task = ganttdataSource1.at(0);
ganttdatasource1.update(task, {
title: "New Title",
resources: {
taskId: 111,
resourceId: 222,
value: 5,
}
});
ganttdatasource1.sync()
1 answer
3.8K+ views
I'm trying to make my grid be able to export its data as a CSV file, and I saw this:
https://www.telerik.com/forums/export-to-csv-also-collapse-data
which said that currently, Kendo UI does have only build-on support for export to PDF and Excel(xlsx).
However, after surveying on the internet I find another one:
It says that it's a completed feature, but I only find the sample using ASP.net:
https://demos.telerik.com/aspnet-mvc/grid/server-export
Since It's a completed feature, does it involve jQuery? or is it just support using ASP.net?
If it involves jQuery, can anyone provide a sample of it?
Thanks.
Nikolay
Telerik team
answered
on
10 May 2021
4 answers
135 views
Hi,
I have added Kendo dropDownList as cell editor to Kendo Gantt.
After some time, some users reported issue where doubleclick on cell randomly just opens and closes dropdown on its own.
We did quite a lot of debugging until we were able to reproduce issue.
It turns out that in some cases (not clear under which conditions) when doubleclick is either too fast or performed on laptop touchpad, it happens almost in 30% of cases.
(We are using kendo UI 2020 R2 version, but issue is reproducible even in latest version).
Issue was reproduced by developer on Dell Latitude 5580 (using touchpad doubleclick), while users reported on other systems.
Here you can find the dojo where issue is reproducible.
https://dojo.telerik.com/aHuDaYup/4
Also, we recorded video on the same dojo, where behavior is demonstrated.
First 4 clicks are mouse, and next ones are with touchpad. (users were having issues even with mouse)
If there are any things we can do to help, please let me know.
Thank you and best regards.
Vedad
Aleksandar
Telerik team
answered
on
10 May 2021
1 answer
97 views
I am working With Kendo FileManager, I need get value name of Folder and get value of Items in Folder to API work.
Please guide for me.
Thanks Admins and Everyone so much.
Stark
Top achievements
Rank 1
Iron
Iron
Rank 1
Iron
Iron
answered
on
08 May 2021
7 answers
1.7K+ views
Hi !
I'm using Kendo TileLayout in Jquery. When I create Tilelayout.
I want add or remove item dynamic at runtime, but I don't find way to do it.
Please help me do it
Many thanks !
Timothy
Top achievements
Rank 1
Iron
Rank 1
Iron
updated answer
on
07 May 2021
1 answer
738 views
I have a large grid (to support filter functions) and I have editable: "popup" set. This is fine when I have a 20 row set, but it doesn't finish in a tolerable length of time with a 60,000 row set.
I have not yet written the writeback functions to update the database. This is just updating the grid.
Any advice would be appreciated.
Here is the code:
@{
ViewBag.Title = "Casebook Files";
}
<h2>Casebook Files</h2>
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css" rel="stylesheet" />
@*<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>*@
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
<div id="kendoGrid">
</div>
<script>
var caseBookDatasource;
$(function () {
$("#kendoVersion").text(kendo.version);
var casebooks = getCaseBooks();
});
function getCaseBooks() {
$.ajax({
//url: "/Home/GetCaseBooks"
url:"/Home/GetNewtonCaseBooks"
}).done(function (rows) {
var datarows = JSON.parse(rows);
buildCasebookDatasource(datarows)
createGrid();
});
}
function buildCasebookDatasource(rows) {
caseBookDatasource = new kendo.data.DataSource({
data: rows,
schema: {
model: {
fields: {
recordId: { type: "number" },
caseNumber: { type: "string" },
caseName: { type: "string" },
serviceReqDate: { type: "date" },
srProg: { type: "string" },
srUnit: { type: "string" },
boxNumber: { type: "number" },
destructDate: { type: "date" },
notes: { type: "string" },
otherNames: { type: "string" },
initials: { type: "string" },
xRef1: { type: "string" },
xRef2: { type: "string" },
xRef3: { type: "string" },
xRef4: { type: "string" }
}
}
},
pageSize: 20,
sort: {
field: "caseNumber",
dir: "asc"
}
});
}
function createGrid() {
$("#kendoGrid").kendoGrid({
dataSource: caseBookDatasource,
height: 750,
pageable: true,
sortable: true,
filterable: true,
scrollable: "virtual",
columns: [
{
field: "recordId"
},
{
field: "caseNumber",
title: "Case #",
width: 100
},
{
field: "caseName",
title: "Name",
width: 200
},
{
field: "serviceReqDate",
title: "Received",
template: "#= kendo.toString(kendo.parseDate(serviceReqDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
width: 120
},
{
field: "srProg",
title: "Program",
width: 50
},
{
field: "srUnit",
title: "Unit",
width: 50
},
{
field: "boxNumber",
title: "Box",
width: 50
},
{
field: "destructDate",
title: "Destroyed",
template: "#= kendo.toString(kendo.parseDate(destructDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
width: 120
},
{
field: "notes",
title: "Notes",
width: 200
},
{
field: "otherNames",
title: "Other Names",
width: 200
},
{
field: "initials",
title: "Initials",
width: 50
},
{
field: "xRef1",
title: "XRef1",
width: 50
},
{
field: "xRef2",
title: "XRef2",
width: 50
},
{
field: "xRef3",
title: "XRef3",
width: 50
},
{
field: "xRef4",
title: "XRef4",
width: 50
},
{command: "edit"}
],
editable: "popup",
toolbar:["create","cancel", "save"]
});
}
</script>
Veselin Tsvetanov
Telerik team
answered
on
07 May 2021
