Can we use a kendo Template in the shapeDefaults Content template part in below code?
$("#diagram").kendoDiagram({
dataSource: [{
"name" : "Telerik",
"items": [
{"name": "Kendo", "items": [{"name": "Kendo", "items":[{"name":"abc"}]}]}
],
}],
shapeDefaults: {
content:{template: "#=item.name#"}, //Need to use a kendo template here
editable: true
}
});
Your code is correct but there is a bug in the Kendo code; the content visual is not added on redraw when using templates.
You can wait for next release or simply add it in the redrawVisual method, it should be;
redrawVisual: function() {
this.visual.clear();
this.shapeVisual = Shape.createShapeVisual(this.options);
this.visual.append(this.shapeVisual);
this.visual.append(this._contentVisual);
this.updateBounds();
}
Related
How can I change the title of a loaded chart using javascript? The following doesn't work with external data
https://codepen.io/abdfahim/pen/zYOPvPx
var chart = am4core.createFromConfig({
"titles": [
{
"text": "ABCD",
"fontSize": 25,
"marginBottom": 10
}
],
"dataSource": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json"
},
"xAxes": [
{
"type": "CategoryAxis",
"dataFields": {
"category": "year"
}
}
],
"yAxes": [
{
"type": "ValueAxis"
}
],
"series": [
{
"type": "ColumnSeries",
"name": "Cars",
"dataFields": {
"categoryX": "year",
"valueY": "cars"
}
}
]
}, "chartdiv", am4charts.XYChart);
function changeTitle()
{
chart.titles[0].text = "New Title";
}
AmCharts v4 uses lists for the majority of its array-like objects, so using subscripts will not work. It's recommended to use the accessor methods provided by the list to get at the object you want to change, such as getIndex:
chart.titles.getIndex(0).title = "New title"
Updated codepen
Just in case some one will hit my same issue, I found this solution working for me
chart.titles.getIndex(0).text = "new title";
this is particularly handy if you are going to refresh the chart each x seconds
This is how you define a title in amCharts:
"titles": [{
"text": "My Chart Title"
}, {
"text": "My Chart Title 222",
"bold": false
}]
However I cannot define font family (as Arial) as the Title class does not support this. Any idea how this can be achieved?
First it is necessary to identify the right title.
For that you need to add addClassNames in your configuration.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"theme": "none"
});
Next you have to set an id for your title. AmCharts will create an additional class on the DOM-Element thats includes the specified id.
"titles": [{
"text": "My Chart Title",
"id": "main"
}]
resulting class: amcharts-title-main
Now everything you have to do is changing the font family whenever the chart is drawn using jQuery:
$(".amcharts-title-main").css("font-family", "Arial");
Working demo.
Supplement to the comment: #gerric
For add classes in 4 version you need:
import * as am4core from '#amcharts/amcharts4/core'
...
am4core.options.autoSetClassName = true
https://www.amcharts.com/docs/v4/reference/options/
https://www.amcharts.com/docs/v4/tutorials/chart-element-class-names-and-css/
For titles will be generated, classes by template: ${classNamePrefix}${id}
P.S. classNamePrefix by default: 'amcharts-'
Is there any way to add a button to the toolbar in Kendo UI web editor that allows user to change line height of the selected content?
Yes. What you are referring to is accomplished by configuring the stylesheets property of the editor, and then configuring the tools that will apply the styles to the selected content.
$("#editor").kendoEditor({
tools: [
{ name: "formatting", items: [
{ text: "Highlight Error", value: ".hlError" },
{ text: "Highlight OK", value: ".hlOK" },
{ text: "Inline Code", value: ".inlineCode" }
] }
],
stylesheets: [
"../../content/web/editor/editorStyles.css"
]
});
Please refer to this demo on Kendo UI's site: http://demos.kendoui.com/web/editor/styles.html.
http://jsfiddle.net/N8Svz/5/
I'm sure I must be doing something kind of dumb; this seems like a textbook usage of HeirarchicalDataSource as far as I can tell.
var domtree = [{
"id": "linear1",
"element-class": "LinearLayout",
"children": [{
"id": "static1",
"element-class": "Static"
}, {
"id": "static2",
"element-class": "Static",
"children": [{
"id": "static3",
"element-class": "Static"
}]
}, {
"id": "4",
"element-class": "Error"
}]
}];
var inline = new kendo.data.HierarchicalDataSource({
data: domtree,
schema: {
model: {
id: "id",
children: "children"
}
}
});
$("#navtree").kendoTreeView({
dataSource: inline,
dataTextField: "id"
});
A big thank you to anyone who can point out what I'm doing wrong!
I just change the field children to items.
here's a jsfiddle: http://jsfiddle.net/nn007/N8Svz/6/
If you add the schema property like this it may work. You are telling the hierarchical datasource what the key for children is. Something like this:
schema: { model: { children: "children" } }
Is there a way to filter the data currently displayed in a jqGrid programmatically (in Javascript, not server-side)? All the search examples seem to depend on using jqGrid's own search UI, which doesn't work for me. For example, I'd like to be able to filter based on user actions elsewhere on a page.
I'm imagining something like
jQuery("#grid_id").filter('CategoryID', selectedCategoryID);
where CategoryID is a column in the grid and selectedCategoryID contains, for example, a value chosen by the user in a select element.
If you want to pre-filter your data first:
$('#myGrid').setGridParam({ data: filtereddataarray }).trigger("reloadGrid");
where filtereddataarray contains only records you want to display for this view
If you want to construct your filter programmatically(I use this method, mostly):
var filters = { "groupOp": "AND", "rules": [{ "field": "id", "op": "eq", "data": "9" }, { "field": "amount", "op": "ge", "data": "10" }, { "field": "name", "op": "cn", "data": "do i"}] };
//To filter:
jqGridFilter(filters , $('#myGrid'));
//To reset:
jqGridFilter(null, $('#myGrid'));
function jqGridFilter(filtersparam, grid) {
grid.setGridParam({
postData: {
filters: filtersparam
},
search: true
});
grid.trigger("reloadGrid");
}
You could pass JSON as the data and use the setGridParam method to reload the data!
I have never tried this and not sure how you would get jqgrid to use your client data rather than hit a URL!
Have you had any luck?