Questions on Kendo UI for jQuery Forum

1 answer

109 views

Hi,

Please see my dojo for context, https://dojo.telerik.com/AdIqAPoy

The modelView binds 'selectedName' to the value of the dropdownlist, my query is this:
1) Why, when I select a option and 'get' the value, does the ModelView return the dropdownlist dataItem, but

2) when I 'set' the value of 'selectedName' manually, to the id of a dataItem, the dropdownlist updates, but when I 'get' the value again, it returns the id only?

Version v2018.3.911.

Thanks,
Grant

PS. In the Forums, whats the difference between the 'MVVM' and 'ModelView' topics?

MVVM

answered on 15 Oct 2019

4 answers

455 views

Weird behaviour on refreshing chart

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

698 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

83 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.2K+ 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

284 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.0K+ 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