Hi,
I've added an editor as following
<kendo-editor formControlName="note" [iframe]="false"></kendo-editor>
I'm trying to interact with it while testing with Cypress but no luck, i.e the following doesn't work
const input = cy.get('kendo-editor[formcontrolname=note]');
input.type('sample text');
the error is
Timed out retrying after 4000ms: cy.type() failed because this element:
<kendo-editor _ngcontent-yle-c1049="" formcontrolname="note" style="height: 180px;" _nghost-yle-c961="" ng-reflect-name="note" ng-reflect-iframe="false" dir="ltr" ariadisabled="true" class="k-editor k-state-disabled ng-untouched ng-pristine">...</kendo-editor>
has CSS pointer-events: none
pointer-events: none prevents user mouse interaction.
Could you please provide some hints on how to do this? Do we have guidelines/howtos for Cypress e2e testing of Kendo UI for Angular?
Thanks
Hi
I would like to ask how I can create a dropdown with these colored circles and text?
Also how to manage dark mode and lite mode ?
Thanks in advance.
Our current application is an Angular 1.6.x using Kendo for JQuery. While I would love to be able to migrate all our code in one fell swoop I just have too many directives to do this.
Would it be possible to use both Kendo for JQuery and Kendo for Angular in the same mixed application. In this way I can migrate my directives/components one at a time and then eventually remove the Kendo for JQuery .
Using kendo line charts and with datapoints that contain a value and a date, if there is a gap between two dates then the line chart with slope up to the next point when there is no data to be displayed (please reference "slopedLine" picture).
In the example "slopedLine" I have data ranging from 8/8/2024 from 10-11am then I have data from 9/8/2024 from 9:55-10am. I am looking for a way I can make this line to not slope and stay at 0 all the way from the end of 8/8/2024 to 9/8/2024. I have this same issue with larger data sets (please reference "timeRangeLarge"). In this second example I have 600 data points but we could have up to 10,000 points depending on filters and other factors.
In the example "noSlopAllDates", I removed the type="date" and set it to type="category" for kendo-chart-category-axis-item and that fixes the slope but then my labels are messed up and we can see EVERYONE and maxDivisions does not apply to type "category".
I have a kendo line chart with data that has a date and a value associated with each point. Also the total number of datapoints can range from 10,000 to 0 depending on filters and other factors. I would like to set the number of columns/divisions on the chart to ALWAYS be 6 no matter how many points of data I have to display.
What I understand is I can set the divisions of the chart using maxDivisions but I have issues getting it to consistently set the columns/divisions number to display 6 every time.
Is it possible to set the columns/divisions to 6?
When using kendo line charts with small datasets I am able to view the correct labels on the chart (first picture attached). My data has a date and a number value. However my data set can be as small as 0 and be as large as 10,000 data points in some cases. At 600 datapoints, the labels on my chart are defaulted to "00:00" (second picture attached).
I would like to make the labels on my chart as dynamic as I can keeping in mind the range of data I could have. Is this possible and how can I do this?
The html code for my chart looks like the following:
<kendo-chart
(render)="onRender($event)"
#metricChart
renderAs="canvas"
[pannable]="{ lock: 'y' }"
[zoomable]="{ mousewheel: { lock: 'y' }, selection: { lock: 'y' } }"
style="height: 300px"
>
<kendo-chart-value-axis>
<kendo-chart-value-axis-item
[majorUnit]="25"
[max]="100"
[min]="0"
type="numeric"
[majorGridLines]="{ dashType: dashType }"
name="valueAxis"
>
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item
[labels]="{ format: 'HH:mm', rotation: 'auto' }"
type="date"
[majorGridLines]="{ dashType: dashType }"
name="categoryAxis"
[justified]="true"
[minorTicks]="{step:10}"
>
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-area *ngIf="hasActiveAlarm" background="#ffedf0"></kendo-chart-area>
<kendo-chart-series>
<kendo-chart-series-item
[data]="metricsData"
[markers]="{ visible: false }"
[style]="lineStyle"
color="#0e893f"
type="line"
field="Value"
categoryField="MetricDate"
>
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-tooltip>
<ng-template kendoChartSeriesTooltipTemplate let-category="category" let-value="value">
{{ category | date: 'medium' }} : {{ value }}
</ng-template>
</kendo-chart-tooltip>
</kendo-chart>
Hello,
Im using angular 16 and .net core 7 version. When i send request to back-end, i can handle. But i have a problem.
I had the same problem as the one that was opened in git:
https://github.com/telerik/kendo-angular/issues/889
Using the example that user "dtopalov" left
https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting/#toc-with-virtual-scrolling
The provided event (selectionChange) does not provide the rows that were deselected.
I changed the pagesize to 10 and when I select item 1, 3, 4 and 6 (all items using "ctrl") the event returns correctly, but if I scroll down and select an item by pressing "shift" the grid will deselect items 1, 3 and 4 and the event does not return items unchecked in the event.
And I need to get this information because I need to emit the rows that are not selected. How can I get the items that have been deselected?
I put a gif with the example:
https://cdn.discordapp.com/attachments/1215659099467808849/1275169938834849864/kendofu.gif?ex=66c4ea0c&is=66c3988c&hm=e1c9a362fe115d0e2e8eed242c6f7002f71e770729412d5e5eaaafa80ea9dbdd&
stackblitz:
https://stackblitz.com/run/?file=src%2Fapp%2Fapp.component.ts
Hey there,
I have a line chart with invisible markers.
The marker (and therefor the tooltip) should only appear when hovered or touched, which it does so far.
But for a touchscreen device the hitbox to trigger the tooltip on a marker that is not visible seems very small, so one has to be very exact in hitting the line, for me it usually takes 2 or 3 times to hit it correctly. Is there any possibility to increase the hitbox without showing and / or increasing the marker size? I found out increasing the marker size without showing the markers does not help either.
I tried various css modifications for k-marker something along these:
.k-marker {
margin: 20px !important;
background-color: yellow !important;
padding: 50px !important;
border: 2px solid red !important;
}
to get any visual representation or feedback, but nothing seems to work.
I am aware that I can increase line thickness, but visually this is not an option.
On a different note, once I hit one point, it seems easier to hit another point on that line. It seems somehow there is an "active" line, is it possible to preselect the "active" line to get a workaround?
Am I missing something?
Any help is appreciated.
Best regards,
Leo