Questions on Kendo UI for jQuery Forum

4 answers

558 views

Hello

I experienced some weird behaviours on refreshing chart. At the bottom of this message you find a fully working sample showing those weird behaviours. Some appearing effects are unpredictable. All over there is no error message in the console.log.

There are two categories in the column chart you can switch by using the two buttons at bottom of the chart. By default category 1 with 11 columns while max 8 will be displayed. Category 2 has one column. You can pan the chart (required for category 1 to show hidden ones).

Case 1:

Sliding category 1 to the most right shows a placeholder after column K (probably for the column in category 2).

Case 2:

Switch between category 1 and 2: works fine even tough the column of category 2 is not centered. As soon as you try to pan the column in category 2 it gots resized and centered. Furthermore you can move (pan) the column in category 2 out of the chart on the right side.

Case 3:

Slide to the right side (most right column) in category 1. Now switch to category 2: You will not see the column of it and the value axis is set to : 0, 0.2, 0.4, ...

You can move the column of category 2 into the chart by pressed mouse button while move it to the right. You see the column appearing. If you drag the column over the middle of the chart it disappears right away. If you move the column out of the chart on the right side the whole chart disappears sometimes or won't reappear

Tested in Chrome, Firefox and Safari (all on Mac), all with the described behaviours.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<link href="http://kendo.cdn.telerik.com/2019.3.917/styles/kendo.common.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="http://kendo.cdn.telerik.com/2019.3.917/js/kendo.all.min.js"></script>

</head>

<script>

$(document).ready(function () {

var dataList = [

// Category 1

{ 'cat1': 'A', 'value': 1 },

{ 'cat1': 'B', 'value': 7 },

{ 'cat1': 'C', 'value': 2 },

{ 'cat1': 'D', 'value': 8 },

{ 'cat1': 'E', 'value': 5 },

{ 'cat1': 'F', 'value': 2 },

{ 'cat1': 'G', 'value': 9 },

{ 'cat1': 'H', 'value': 3 },

{ 'cat1': 'I', 'value': 7 },

{ 'cat1': 'J', 'value': 4 },

{ 'cat1': 'K', 'value': 1 },

// Category 2

{ 'cat2': 'L', 'value': 5 }

];

$("#chart").kendoChart({

dataSource: {

data: dataList

},

series: [{

type: "column",

aggregate: "sum",

field: "value",

categoryField: "cat1"

}],

pannable: {

lock: "y"

},

categoryAxis: {

min: 1,

max: 8,

majorGridLines: {

visible: false

}

});

// Switch category (over buttons)

function showCategory (category) {

var chart = $("#chart").data("kendoChart");

chart.options.series[0].categoryField = category;

chart.refresh();

}

</script>

<body>

<div id="chart" style="width: 1000px;"></div>

<button id="cat1" type="button" onclick="showCategory('cat1');">Show category 1</button>

<button id="cat2" type="button" onclick="showCategory('cat2');">Show category 2</button>

</body>

</html>

Am I missing something or is there anything I can do/set to avoid these "glitches" before refreshing the chart?

Regards

Charts

answered on 14 Oct 2019

18 answers

764 views

Focus problem while insert to edit mode

Hello,

I'm using kendo UI grid and have a strange problem that occurred
sometimes when user click on cell to start edit mode on it:

I define a grid with inline edit mode. The grid contains among other a
simple string column.

When the user click on this field for edit it he see as expected a
simple input control and can change its text. But, sometimes after he click on
this cell to start edit it, the input control got the focus just for a millisecond
and then lost the focus. In this case the cell is opened for edit and
the input field is displayed but the focus is not on it. In order to start edit,
the user needs to click again on the input control for get it back the focus.
When this problem occurs it seems like the td that contains this input field got
the focus instead the input itself.

This problem occurs only in IE browser (I have IE version 11) and not
occurs in Chrome browser.

The strange story here, that when I change the 'navigatable' attribute
of grid to 'false' everything works perfectly. When I change this attribute to
'true' this problem occurs.

Do you have any idea what can be the problem? (my code is attached)

Thanks,

Yocheved

Grid

answered on 14 Oct 2019

3 answers

154 views

databinding issue when adding items

Hi, I have a dropdown that I need to add available values in it while it is already loaded and have a selected item.

Look at my sample:

https://dojo.telerik.com/@foxontherock/ulONexoh/2

I just create an observable Array, bind it to my datasource, and run it. I select an item.

Then, I try to add a new one, using databinding, so I "push" it to the observableArray.

These are some issues I have:

When I open the dropdown after adding items, all the selections seems to be reversed (orange / gray)

If I don't reselect a new item, the last one - 1 is selected (reversed).
But the real selected one seems to be the last (new one) when calling the .text() method.

Also, if I call select(id-of-already-selected-item), it switch to it, but when i open the combo, all colors are reversed.

I also tried to:
combo.refresh()
combo.datasource.data(original list containing new item)

combo.datasource.data(copy of original list from .toJSON())
I never had any good results.
Looks like I need to destroy and recreate the combo from scratch if I want to add a new item !!

Thank you

DropDownList

answered on 11 Oct 2019

2 answers

1.4K+ views

Save in cell edits before calling editCell or calling close cell.

I'm implementing some custom navigation options in one of my kendo grids. Specifically our users want the grid to behave similarly to excel, navigating to the next row and editing the cell when a user hits the enter key.

Based on recommendations here : https://www.telerik.com/forums/kendo-grid-navigation-with-enter-key

I have disabled the navigatable option and have implemented my own keydown bindings. Using jquery I am selecting the next cell and then calling the following

grid.current(nextCell);
grid.editCell(nextCell[0])

This puts the correct cell into edit mode, but in the process I lose any changes the user had made to the previous cell.

I have tried calling close cell as referenced here: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/closecell

but I cant seem to determine a way to call the method and not cancel changes.

Is there a different method I need to call? Or a different way to persist the cell edit?

Grid

answered on 11 Oct 2019

3 answers

338 views

Missing Borders - Firefox

Hi Guys,

Have just tripped over an issue whereby Firefox is not rendering row/cell borders correctly.

To illustrate the problem run the following dojo in Firefox

https://dojo.telerik.com/EyIZuzog

On opening the popup you should see that alternate rows are missing a bottom border and the first column is missing the right border (see Firefox.png).

Under Chrome & Edge these borders are being rendered correctly (See Chrome.png).

Is this a known issue with Firefox and if so are there any methods/workarounds to overcome the problem.

Regards
Alan

Firefox: v69.0.1
Chrome: v77.0.3865.90

MultiColumnComboBox

answered on 11 Oct 2019

13 answers

1.2K+ views

Problem with DropDownList, iFrame and iPad.

Hello,
I have problem when I use DropDownList inside a page loaded into an iframe and when I use an iPad (I don't know if other touch device have the same behaviour). I have attached a small example.

In the example you can see two DropDownList, one in the main page and the other one in a second page that is loaded into an iframe.
When I use one of the many browser on Windows (IE, Firefox, Chrome...), all works fine.
When I use Chrome or Safari on iPad I have a strange behaviour: if I change the selection on the first dropdown all works fine, instead when I try to change the selected item in the second dropdown, the popup close immediatly without changing che selection.

Any dropdown in the page loaded inside the iframe have the problem.
This is a small example and the iframe have no sense, but in my projects I must use iframes.

How can I fix this issue?

Thanks.

EDIT: 04/04/2013
The previous version (2012.3.1315) works fine and the dropdownlist works as expected in the iframe too.
The new one (2013.1.319) has the descripted behaviour.

DropDownList

answered on 11 Oct 2019

3 answers

451 views

Detail Template (with row template)

Can I attach a row-template to a detail-template?

<script id="templateSubGrid" type="text/x-kendo-template">

<h4>ciao ciao </h4>

<div id="Subgrid"

data-role="grid"

data-row-template="rowTemplate"

data-bind="source: Grid.source"

data-columns="[

{ 'field': 'documenti','title':' documentiName'},

{ 'field': 'documenti','title':'documentiSurname'},

{ 'field': 'documenti','title':'documentiAge'},

{ 'field': 'documenti','title':'documentiIsEmpty'}

]">

</div>

</script>

<script id="rowTemplate" type="text/x-kendo-template">

#for(var i = 0; i < data.length; i++){ #

<tr>

<td>

<span>ciao</span>

</td>

<td>

<span>ciao</span>

</td>

<td>

<span>ciao</span>

</td>

<td>

<span>ciao</span>

</td>

</tr>

#}#

</script>

Grid

answered on 10 Oct 2019

1 answer

136 views

Calendar display weird with Chrome

Hi team,

Seems the calendar rendering is a bit broken with Chrome when setting font-size to odd number like 11px,13px. Since 2019R1.

Last line is a bit cut at the bottom (see screenshot).

https://dojo.telerik.com/aLuvEtIp

Best regards.

Laurent

DatePicker

answered on 10 Oct 2019

9 answers

706 views

Printing?

Is there a printing feature to print the content inside the spreadsheet or do I need to use a print stylesheet?

Thanks!

Spreadsheet

answered on 09 Oct 2019

3 answers

324 views

Timeline with accuracy to minutes

Timeline is a great piece of work, but...
for my purposes i need to show not just date, but whole datetime including hour and minute, if possible seconds also.
Is there any option, overload or a way how to show full datetime in timeline?
Option for customisable datetime format is in need also.

Timeline

answered on 09 Oct 2019