I am using kendo donut chart, the chart loads fine in the UX/UI with data being displayed. Now I am writing a functional test using protractor/jasmine and I need to access the values of the chart.
Normally element(by.xpath) or element(by.css) works for HTML controls. but since kendo donut makes use of SVG, element(by.xpath) or element(by.css) does not work.
How can I access the SVG elements in protractor/jasmine?
I made use of element(by.binding('vm.results')) on the div where I have the kendo-chart
<div kendo-chart="kchart" data-k-options="vm.options" k-data-source="vm.results" data-role="chart" class="k-chart" style="position: relative;"></div>
I accessed the kendo donut chart like so:
element(by.binding('vm.results')).getText();
with this I am able to get the legend details I needed
Related
When using Fluent UI Web Components from the CDN, I have learned it is possible to provide some values to the adaptive color system as attributes on the <fluent-design-system-provider> element. For example: <fluent-design-system-provider base-layer-luminance=".15">
Question: Is there a similar way to set the fillColor of elements within HTML so as to have the appropriate design token values recalculated for the child elements?
For example, I am looking to do something like this:
<div id="myCardContainer" fill-color="neutralLayer2">
<fluent-button appearance="accent">Hello</fluent-button>
</div>
...and have the styles of the <div>'s child element(s) recalculated in the same way as if I had used the JavaScript method:
const layer = document.getElementById('myCardContainer');
fillColor.setValueFor(layer, neutralLayer2);
Not currently.
This is tracked at https://github.com/microsoft/fast/issues/5286. There's some underlying infrastructure work happening now that should make this easier to solve soon.
There is also a component that does this in the Color Explorer at https://github.com/microsoft/fast/blob/5ba576ffb833ec7d705175608394860888963721/sites/fast-color-explorer/app/components/layer-background/index.ts.
For now use either the code you posted or incorporate the layer component above. Note that we'll be reworking the layering system to be more flexible soon. That work will take place in the adaptive-ui package.
I'm using one of the included KendoUI themes, but I'd like to replace the font family. What is the easiest way to override the entire font family used throughout Kendo UI?
In Angular you can do below
$scope.$on("kendoWidgetCreated", function (event, widget) {
var styleTag = widget.body.parentNode.getElementsByTagName("style")[0];
styleTag.parentNode.removeChild(styleTag);
widget.body.style.fontFamily = '<your font name here>';
widget.body.style.fontSize = '12px';
widget.body.style.color = '#35384D';
});
Make sure the new font you are using exists in Kendo provided fonts, if it doesn't exist, Kendo will use default Arial font.
To use any other third party font, it needs to be included in Kendo header section. I am struggling to use google font in Kendo at the moment but will update the thread when I get working example.
Finally I have to do go for ugly solution to use google font, though Kendo demo show much easier way to do it, but those were not working for me
angular.element(angular.element('.k-editable-area .k-content')[0].contentDocument.getElementsByTagName("head"))
.append("<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>");
By working together I mean that I can place Angular bindings in D3.js code, perhaps
.attr("bind-attr.fill", "aColorVar")
where aColorVar is a variable that can be also bound to a color control in Angular way.
I can do similar things in Angular1, unfortunately using $compile.
I can bind SVG attributes when SVG is used as a component template.
I believe in Angular 2 we can only setup bindings in templates, not in code, so I can't think of a way to get this to work.
The best I can think of is to put the D3 code into a component or a directive, then you can use the component/directive properties:
.attr("fill", this.someComponentProperty)
However, this does not setup any kind of binding. If you update property someComponentProperty, you will need to execute that line of code again.
I am trying to follow the advice laid out in this post's answer and comments: Hyperlinks in d3.js objects to add hyperlinks to circles in a d3.js bubble graph. Here's where I am trying to do this, and here's the original bl.ock I am trying to modify. As you can see all I've done is the following:
Replace <html> tag with: <html xmlns:xlink="http://www.w3.org/1999/xlink">
Insert this code right after creation of var node
node.append("svg:a").
attr("xlink:href", function(d){return "http://www.google.com";});
I am using Chrome and Firefox to test the page, and I don't see a hyperlink in either. Following some comments on the answer, I have tried:
Removing the html namespace declaration
Using node.append("a")
I don't see any results with any of these options, though I have been clearing my browser cache and using multiple computers to make sure I am seeing the fresh code. What am I doing wrong?
The <a> has no content so it has no click area. You need to make something a child of the <a> nodes.
I'm using the telerik TreeView.
I wonder if there is a way to change the dotted line used in the TreeView to a line that is not dotted(by uploading a background image file,or if telerik a have another solution.
http://demos.telerik.com/aspnet-mvc/treeview/draganddrop?theme=default
Based on your Theme please update below highlighted (three) images.
If you used CDN URL then please create this three images and add into your project.
Then copy all the css class which was used this three images.
Then update the image source and add "!important" in the style property.
Code from Original CSS File (ehich was used 'treeview-nodes.png' image)
.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('Default/treeview-nodes.png')}
Updated CSS code
.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('YourNewPathComesHere') !important;}