Questions on Kendo UI for jQuery Forum

7 answers

473 views

Clicking on option closes list but does not select option

I have a kendoDropdownList that has virtualization. The list is created from a flat array such as ["a", "b", "c", "d"]. When I click on a value the list closes but it is not selected. Can you help? Here is my code.

var attributeValues = {

age: ["1", "2", "3", "4", "5"],

name: ["John", "Jenny", "Suzie", "Lee", "Robert"]

};

createDropdownLists("name", "#myList");

var shouldPreventOpen = [];

var menuIsOpen = [];

function createDropdownLists(key, selector) {

shouldPreventOpen = [];

let values = attributeValues[key];

if (values.length < 1) {

$(selector).prop("disabled", true);

} else {

$(selector).prop("disabled", false);

}

$.each($(selector), function (index, element) {

let value = $(element).val();

let valueIndex = values.findIndex((element) => element.toString() === value);

$(element).kendoDropDownList({

height: 300,

optionLabel: "Select Value",

filter: "contains",

//filterFields: ["itemName", "itemID"],

template: "<div title='#: data #'><span class='listItemName' >#: data #</span></div>",

//valueTemplate: "#: data #",

virtual: {

itemHeight: 44,

valueMapper: function (options) {

console.log(options, valueIndex);

options.success([!isNaN(valueIndex) ? valueIndex : -1]);

}

},

dataSource: values,

value: value,

open: onOpen,

close: onClose

});

let id = $(element).attr("id");

shouldPreventOpen[id] = false;

menuIsOpen[id] = false;

let list = $(element).getKendoDropDownList();

list.wrapper.on("focus", function (e) {

let id = $(e.currentTarget).find(".js-k-item-dropdown").attr("id");

if (shouldPreventOpen[id] && menuIsOpen[id]) {

list.close();

shouldPreventOpen[id] = false;

} else {

list.open();

}

});

$(".k-list-container").on("click", ".k-list-optionlabel, li", function (e) {

let clickedId = $(e.currentTarget).closest(".k-list-container").attr("id");

clickedId = clickedId.substring(0, clickedId.indexOf("-"));

let list = $(`#${clickedId}`).getKendoDropDownList();

list.close();

});

}

function onOpen(e) {

let id = $(e.sender.element).attr("id");

if (shouldPreventOpen[id] && menuIsOpen[id]) {

shouldPreventOpen[id] = false;

e.preventDefault();

} else {

shouldPreventOpen[id] = true;

menuIsOpen[id] = true;

}

function onClose(e) {

let id = $(e.sender.element).attr("id");

if (shouldPreventOpen[id] && menuIsOpen[id]) {

e.preventDefault();

}

menuIsOpen[id] = false;

$.each(shouldPreventOpen, function (element, index) {

shouldPreventOpen[index] = false;

});

}

DropDownList

answered on 13 May 2020

1 answer

327 views

Autocomplete to MS graph People and authToken

Need your help Looking for a jQuery example of how to pass authToken and bind autocomplete to https://graph.microsoft.com/v1.0/me/people/?$search=(?)

AutoComplete

answered on 12 May 2020

5 answers

166 views

problems with method viewToLocation

In drag and drop markers method viewToLocation does not position the point in the right place, there is always an offset. Very little zoom point comes to be positioned in another country.

Here we can see an example of this problem http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/drag-and-drop-markers

Map

answered on 12 May 2020

3 answers

370 views

Tooltip for KendoTreeView jQuery

Hi,

I need to display a tooltip for KendoTreeView when hovered over the checkbox.

HTML

<div class="demo-section k-content">

<div>

<div id="treeview"></div>

</div>

JavaScript

ruleNames = [{ text: "Rule 1", description: "Rule 1 Hovered upon" },

{ text: "Rule 2", description: "Rule 2 Hovered upon" }]

$("#treeview").kendoTreeView({

checkboxes: {

checkChildren: true

},

check: function (e) {

onCheck(pass);

},

dataSource: [{ text: "List of Rules", expanded: false, items: ruleNames }]

});

I want to display the description text on the tooltip.

Please could your help me out with a demo.

Thanks in advance

TreeView

answered on 12 May 2020

4 answers

979 views

Kendo Editor style block preventing borders and padding from displaying in table cells

Our software uses both Telerik WPF editors and Kendo editors, and we transfer the HTML back and forth from these editors. The WPF editors export the HTML, and that HTML is loaded into the Kendo editor. One of the problems we encountered is that table cell (td) padding and borders are not showing up in the Kendo editor when loaded. The reason is that there appears to be a block of styles that always appears in the editor doc head, and these styles are overriding the class styles of the tables.

Here is the block of styles that gets inserted into the editor head (appears to come from the javascript:

<html lang="en"><head><meta charset="utf-8"><title>Kendo UI Editor content</title><style>html{padding:0;margin:0;height:100%;min-height:100%;cursor:text;}body{padding:0;margin:0;}body{box-sizing:border-box;font-size:12px;font-family:Verdana,Geneva,sans-serif;margin-top:-1px;padding:5px .4em 0;word-wrap: break-word;-webkit-nbsp-mode: space;-webkit-line-break: after-white-space;}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em}h3{font-size:1.16em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.7em}p{margin:0 0 1em;}.k-marker{display:none;}.k-paste-container,.Apple-style-span{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}ul,ol{padding-left:2.5em}span{-ms-high-contrast-adjust:none;}a{color:#00a}code{font-size:1.23em}telerik\3Ascript{display: none;}.k-table{width:100%;border-spacing:0;margin: 0 0 1em;}.k-table td{min-width:1px;padding:.2em .3em;}.k-table,.k-table td{outline:0;border: 1px dotted #ccc;}.k-table th{outline:0;border: 1px dotted #999;}.k-table p{margin:0;padding:0;}.k-column-resize-handle-wrapper {position: absolute; height: 10px; width:10px; cursor: col-resize; z-index: 2;}.k-column-resize-handle {width: 100%; height: 100%;}.k-column-resize-handle > .k-column-resize-marker {width:2px; height:100%; margin:0 auto; background-color:#00b0ff; display:none; opacity:0.8;}.k-row-resize-handle-wrapper {position: absolute; cursor: row-resize; z-index:2; width: 10px; height: 10px;}.k-row-resize-handle {display: table; width: 100%; height: 100%;}.k-row-resize-marker-wrapper{display: table-cell; height:100%; width:100%; margin:0; padding:0; vertical-align: middle;}.k-row-resize-marker{margin: 0; padding:0; width:100%; height:2px; background-color: #00b0ff; opacity:0.8; display:none;}.k-table-resize-handle-wrapper {position: absolute; background-color: #fff; border: 1px solid #000; z-index: 100; width: 5px; height: 5px;}.k-table-resize-handle {width: 100%; height: 100%;}.k-table-resize-handle.k-resize-east{cursor:e-resize;}.k-table-resize-handle.k-resize-north{cursor:n-resize;}.k-table-resize-handle.k-resize-northeast{cursor:ne-resize;}.k-table-resize-handle.k-resize-northwest{cursor:nw-resize;}.k-table-resize-handle.k-resize-south{cursor:s-resize;}.k-table-resize-handle.k-resize-southeast{cursor:se-resize;}.k-table-resize-handle.k-resize-southwest{cursor:sw-resize;}.k-table-resize-handle.k-resize-west{cursor:w-resize;}.k-table.k-table-resizing{opacity:0.6;}.k-placeholder{color:grey}k\:script{display:none;}</style>

Here is an example of a TD that is part of our HTML being loaded:

<td class="tc_8D184ABE" align="left" valign="top" data-role="resizable"><p class="Normal p_A43897F6"><span>Some text</span></p></td>

And the class styles:

.tc_8D184ABE { telerik-style-type: local;border-left: 12px double #548ED5;border-top: 12px double #548ED5;border-right: 12px double #548ED5;border-bottom: 12px double #548ED5;padding: 4px 12px 4px 12px;width: 189.466674804688px;vertical-align: top; }

Since the .k-table td style in the head block overrides the class styles, the borders and the padding do not render. Is there any suggestions for getting around this issue?

Thanks for any help.

Editor

answered on 12 May 2020

9 answers

871 views

Export to excel - considering hidden field

Attached my code.

Its working fine as expected.

But while i am exporting to excel, the child rows are not showing. because in datasource field i made "Comments" field as hidden. If i remove "hidden" then data is exporting as expected. But i dont want to show this Comments field as parent record.

I tried to use showColumn/hideColumn as mentioned in code. but its not working as expected. Looking your help on this.

Grid

answered on 12 May 2020

5 answers

1.7K+ views

Setting optionLabel after initiation

Is there a way to set the optionLabel after the initiation, because I want it to be dependent on the value of the data.
If there is no data I want my users to know, that there are no options anymore.

Otherwise I just do a jquery.html() on that element. But it would be nice if I can set it with the API

DropDownList

answered on 12 May 2020

3 answers

158 views

Ghost cells created while working with tables

I am using your demo site for the Kendo editor. I created a 4x2 table in the editor. I then merged the first two cells horizontally, and the last two cells vertically. I then changed some borders and set the table cell spacing in the wizard. As I keep changing things, I see new cells get created unexpectedly. We see this same behavior in our products.

This should be a 4x2 table:

Editor