$(
'#widgetsGrid'
).kendoGrid({
dataSource: {
type:
'json'
,
transport: {
read:
'/widgets/widgetsList/'
},
pageSize: 10
},
columns: [
{
field:
'name'
,
title:
'Name'
},
{
field:
'description'
,
title:
'Description'
},
{
field:
'url'
,
title:
'Url'
}
],
sortable:
true
,
pageable:
true
,
rowTemplate: kendo.template($(
'#widgetsListRowTemplate'
).html())
});
<
script
id
=
'widgetsListRowTemplate'
type
=
'text/x-kendo-tmpl'
>
<
tr
>
<
td
>${ name }</
td
>
<
td
>${ description }</
td
>
<
td
><
a
href
=
'${ url }'
>${ url }</
a
></
td
>
</
tr
>
</
script
>
Hello. My target is make 2 charts with same colors of the items. I make this
<link rel=
"stylesheet"
href=
"/analyticsRes/jsCharts/css/kendo.common.min.css"
/>
<link rel=
"stylesheet"
href=
"/analyticsRes/jsCharts/css/kendo.default.min.css"
/>
<link rel=
"stylesheet"
href=
"/analyticsRes/jsCharts/css/kendo.default.mobile.min.css"
/>
<script src=
"/analyticsRes/jsCharts/js/kendo.all.min.js"
></script>
<div id=
"chart-top"
style=
"width:600px;height:350px;"
></div>
<script>
$(
function
() {
$(
'.top-td'
).closest(
'table'
).attr(
'id'
,
'top-table'
);
$(
'.top-td'
).closest(
'tr'
).addClass(
'top-tr'
);
$(
'.top-td'
).closest(
'.CVView'
).css(
'display'
,
'none'
);
$(
'#top-table colgroup'
).remove();
$(
'#top-table .PTColSizingCell'
).remove();
$(
'#top-table tr'
).each(
function
() {
if
($(
this
).hasClass(
'top-tr'
)) {}
else
{
$(
this
).remove();
}
});
var
TopList =
new
Array();
var
tr = document.getElementById(
"top-table"
).getElementsByTagName(
"tr"
);
for
(
var
i = 0; i < tr.length; i++) {
var
td = tr.item(i).getElementsByTagName(
"td"
);
TopList[i] =
new
Object();
for
(
var
j = 0; j < td.length; j++) {
if
(j == 0) {
TopList[i][
"category"
] = td.item(0).innerText;
TopList[i][
"name"
] = i;
}
if
(j == 1) {
TopList[i][
"value"
] = parseFloat(td.item(1).innerText.replace(/,/,
'.'
));
}
if
(j == 2) {
var
id = td.item(2).innerText;
if
(id ===
"K_22"
) { TopList[i][
"color"
] =
"#3f51b5"
}
if
(id ===
"K_21"
) { TopList[i][
"color"
] =
"#03a9f4"
}
if
(id ===
"K_01"
) { TopList[i][
"color"
] =
"#4caf50"
}
if
(id ===
"K_11"
) { TopList[i][
"color"
] =
"#f9ce1d"
}
if
(id ===
"K_13"
) { TopList[i][
"color"
] =
"#ff9800"
}
if
(id ===
"K_88"
) { TopList[i][
"color"
] =
"#ff5722"
}
if
(id ===
"K_12"
) { TopList[i][
"color"
] =
"#56ff22"
}
if
(id ===
"K_10"
) { TopList[i][
"color"
] =
"#e222ff"
}
if
(id ===
"K_31"
) { TopList[i][
"color"
] =
"#8d22ff"
}
}
}
}
TopList.sort(
function
(a, b) {
if
(a.value < b.value) {
return
1;
}
if
(a.value > b.value) {
return
-1;
}
return
0;
});
console.log(TopList);
$(
"#chart-top"
).kendoChart({
title:
"Предложений по предприятиям"
,
theme:
"Material"
,
dataSource: {
data: TopList,
group: {
field:
"name"
},
sort: {
field:
"category"
,
dir:
"asc"
}
},
legend: {
visible:
true
,
position:
"bottom"
},
seriesDefaults: {
type:
"column"
,
gap: 0.1,
spacing: 0.2
},
series: [{
field:
"value"
,
colorField:
"color"
,
labels: {
font:
"14px Arial,Helvetica,sans-serif"
,
template:
"#= value #"
,
visible:
true
},
name:
"#: group.items[0].category #"
}],
seriesColors: [
"#3f51b5"
,
"#03a9f4"
,
"#4caf50"
,
"#f9ce1d"
,
"#ff9800"
,
"#ff5722"
,
"#56ff22"
,
"#e222ff"
,
"#8d22ff"
],
valueAxis: {
majorGridLines: {
visible:
false
},
visible:
false
,
},
categoryAxis: {
majorGridLines: {
visible:
false
},
line: {
visible:
false
},
visible:
false
},
tooltip: {
visible:
true
,
template:
"#= series.name #: #= value #"
}
});
});
</script>
I have a tabstrip with multiple tabs, and each tab has its own contentUrl, so data is fetched using ajax.
I noticed that if you delete a tab, and reload the selected tab, it uses the old url from the removed tab. The tabstrip's contentUrls array still has the old values, that probably causes this.
Steps to reproduce:
1) Create a tabstrip with two tabs, with contentUrl set for both separately
2) Select the second tab
3) Remove the first tab (remove())
4) Reload the selected tab (select() and reload())
I suppose I need to manually update the contentUrls array?
Hello! I found that the “NumericTextBox”’s input field
location is not correct, if we use “float” style for “<input>”. If you
open the following example in Firefox:
http://dojo.telerik.com/eWiVE/2
It works fine in Chrome and Edge. Could you take a look at
this issue? Or let me know if there’re alternative ways to align to right and
work in all browsers.
Thank you!
Hi,
I am using trying to use kendo chart with Angularjs (1.6.2) and typescript. I have a sample project created using Yeoman.
I have my kendo package also in the project folder. I have run the project using npm run serve
Gettting error: "index.js:23241 Error: The Kendo UI directives require jQuery to be available before AngularJS. Please include jquery before angular in the document.
at createWidget (index.js:117598)
at Object.link (index.js:118233)
at index.js:9926
at invokeLinkFn (index.js:19086)
at nodeLinkFn (index.js:18475)
at compositeLinkFn (index.js:17715)
at compositeLinkFn (index.js:17718)
at publicLinkFn (index.js:17580)
at index.js:10495
at Scope.$eval (index.js:26964) "<div kendo-chart="" k-legend="{ position: 'bottom' }" k-series-defaults="{ type: 'bar' }" k-series="[
{ field: 'nuclear', name: 'Nuclear electricity' },
{ field: 'hydro', name: 'Hydro electricity' },
{ field: 'wind', name: 'Wind electricity' }
]" k-data-source="electricity" k-series-hover="onSeriesHover" style="height: 400px;">""
I have the below code in my index.html.
-------------------------------------------------------------------------
<div kendo-chart k-legend="{ position: 'bottom' }" k-series-defaults="{ type: 'bar' }" k-series="[
{ field: 'nuclear', name: 'Nuclear electricity' },
{ field: 'hydro', name: 'Hydro electricity' },
{ field: 'wind', name: 'Wind electricity' }
]" k-data-source="electricity" k-series-hover="onSeriesHover" style="height: 400px;"></div>
-------------------------------------------------------------------------
In my index.ts file, I have the below code
import * as $ from "jquery";
import * as angular from 'angular';
import {techsModule} from './app/techs/index';
import 'angular-ui-router';
import routesConfig from './routes';
import {main} from './app/main';
import {header} from './app/header';
import {title} from './app/title';
import {footer} from './app/footer';
import './index.scss';
import '@progress/kendo-ui/';
/// <reference path="./app/kendo/typescript/kendo.all.d.ts" />
angular
.module('app', [techsModule, 'ui.router','kendo.directives'])
.config(routesConfig)
.component('app', main)
.component('fountainHeader', header)
.component('fountainTitle', title)
.component('fountainFooter', footer);
-------------------------------------------------------------------------
Please give suggestions. I am new to angularjs and typescript...I have attached the project without the kendo package files which was earlier inside src/app/kendo folder.
Hi, not very familiar with the webpack tool, but its slow to build my SPA using VS2017 and JavaScriptServices, about 50 seconds. Is there some way to cache the webpack output for the Telerik angular modules/css? Specifically the requests :
Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request starting HTTP/1.1 GET http://localhost:52626/dist/main.css?v=lTMQDsn6qiFEshoAdXck56k4BIPX0Y7qdkml_OMV67E
Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request starting HTTP/1.1 GET http://localhost:52626/dist/main-client.js?v=9miPYLaRFn3FUiIl4DMnHaXSLA7W1TNPUmhx5OdN8Jw
seem to be part of the problem as the response are:
Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request finished
in
39309.1692ms 200 text/css; charset=UTF-8
Microsoft.AspNetCore.Hosting.Internal.WebHost: Information: Request finished
in
41590.2456ms 200 application/javascript; charset=UTF-8
This is the start of the webpack output:
Microsoft.AspNetCore.NodeServices: Information: webpack built e833ab89a2ae6f1de16b
in
47695ms
Microsoft.AspNetCore.NodeServices: Error: Hash: e833ab89a2ae6f1de16b
Version: webpack 2.7.0
Time
: 47695ms
Asset
Size
Chunks Chunk Names
main-client.js 7.25 MB 0 [emitted] [big] main-client
main.css 456 kB 0 [emitted] [big] main-client
main-client.js.map 8.2 MB 0 [emitted] main-client
main.css.map 85 bytes 0 [emitted] main-client
chunk {0} main-client.js, main.css, main-client.js.map, main.css.map (main-client) 6.49 MB [entry] [rendered]
Sorry I don't really know more precisely what the problem is, just trying to get a fast build environment for VS2017+Telerik Angular. Note that I'm using the JavaScriptServices over the CLI as I have a many plain c# projects in the solution.
// Editor definition
element.kendoEditor({
execute: handlers_editorExecute,
imageBrowser: {
apply: handlers_editorImageBrowserApply,
}
});
// This does not work for double-clicking the image because the image is inserted regardless of the return value
handlers_editorImageBrowserApply: function (e) {
var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");
if (imageBrowser.value() != "") {
if ($(".k-filebrowser-dialog #k-editor-image-title").val() == "") {
alert("Alternate text is required.");
return false;
}
}
},
// This does work for clicking the Insert button and the apply function is not defined, but feels like a hack
handlers_editorExecute: function (e) {
if (e.name == "insertimage") {
setTimeout(function () {
var insertButton = $(".k-filebrowser-dialog .k-dialog-insert");
insertButton.unbind("click");
insertButton.click(function () {
var imageBrowser = $(".k-imagebrowser").data("kendoImageBrowser");
if (imageBrowser.value() != "") {
if ($(".k-filebrowser-dialog #k-editor-image-title").val() == "") {
alert("Alternate text is required.");
return false;
}
}
imageBrowser.trigger("apply");
});
});
}
},
Hello,
we are using Kendo UI for angular and dicsovered that multiselect does not work unless user clicks on checkboxes (even if checkboxOnly is set to false). Its reliably reproducible even on your sameple in documentation: http://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-selection
There if selection mode is 'mutiple' clicking on rows (not checkboxes) only allows single row to be selected at the time.
Jan
Hi,
There is an event seriesClick; how if I want to ignore single click and only respond to double click ?]
Thank you.
I am wondering if anyone has experience with refreshing a grid (no paging involved) on an interval. I would like to refresh every 60 seconds but interested in making it as transparent as possible to the user. I am doing my reads from an API endpoint with JSON returns therefore wondering about the use of .read() or .sync() and preference. This is a read-only grid. I am using the jQuery Kendo grid with ASP.NET Core MVC project.
In addition if you have any examples of web sockets or using ASP.NET Core early releases of SignalR with an ASP.NET Core MVC site that would be amazing.
Thanks.
Doug