2 Answers, 1 is accepted
Hello, Lee,
Could you please share where would you like to display the button? If you wish to display it within the component's items, that wouldn't work because the popup will still close when you press the button.
Looking forward to your reply.
Regards,
Martin
Progress Telerik
Hi Lee,
If it is suitable for you scenario you can add a flag in order to prevent closing of the DropDownList. You can a button in the template of each item. When the button is clicked, you can show the Tooltip.
close: function(e){
if(!shouldClose){
e.preventDefault()
}
},
open: function(){
$('.details').on('click', function(){
if(!$('body').data('kendoTooltip')){
$('body').kendoTooltip({
filter: 'li.k-list-item',
position: 'right',
content: "gggggg",
width: 220,
height: 280,
content: function(e){
var item = ddl.dataItem($(e.target));
var result = '<h3>' + item.name + '</h3>' +
'<h4>' + item.email + '</h4>' +
'Address: <hr />' +
'<p>Street: ' + item.address.street + '</p>' +
'<p>Suite: ' + item.address.suite + '</p>' +
'<p>ZIP Code: ' + item.address.zipcode + '</p>';
return result;
},
});
}
$('body').data('kendoTooltip').show($(this).closest('.k-list-item'))
})
},
Here is such Dojo example. - https://dojo.telerik.com/@NeliKondova/uKucacaN
I hope this helps.
Regards,
Neli
For anyone reading this, here is a function I wrote that will cause the name of the hovered item to expand above the dropdown's list when it is too long. It works for dropdownlists or multiselects.
JavaScript:
addTooltipsToKendoDropdown(elementId, widgetType);
elementId = the id of the select element
widgetType = "dropdownlist" (default) or "multiselect"
function addTooltipsToKendoDropdown(elementId, widgetType) {
let tooltipTimeout = null;
$("body").on("mouseenter", `#${elementId}-list .k-list-item:not(.tooltip-loading)`, function (e) {
tooltipTimeout = setTimeout(
function () {
let element = e.currentTarget;
let elementWidth = $(element).find(".k-list-item-text")[0].offsetWidth;
let elementHeight = $(element).offsetHeight;
let textWidth = $(element).find(".k-list-item-text")[0].scrollWidth;
if (textWidth <= elementWidth) {
return;
}
let rect = element.getBoundingClientRect();
let html = $(element).html();
let uid = $(element).data("uid");
let isSelected = false;
if ($(element).hasClass("k-selected")) {
isSelected = true;
}
$(element).addClass("tooltip-loading");
$("body").append(`<div data-id="${uid}" class="ddl-tooltip ${isSelected ? "selected" : ""}" style="position: absolute; top: ${rect.top}px; left: ${rect.left}px; min-width: ${elementWidth}px; min-height: ${elementHeight}; z-index: 10003;">${html}</div>`);
$(element).removeClass("tooltip-loading");
}, 300
);
});
$("body").on("mouseleave", `#${elementId}-list .k-list-item:not(.tooltip-loading)`, function (e) {
let element = e.currentTarget;
let uid = $(element).data("uid");
$(`.ddl-tooltip[data-id=${uid}]`).remove();
clearTimeout(tooltipTimeout);
});
$(`#${elementId}-list .k-list-content`).on("scroll", function () {
throttle(function () {
clearTimeout(tooltipTimeout);
$(".ddl-tooltip").remove();
});
});
if ((widgetType === undefined || widgetType.toLowerCase() === "dropdownlist") && $(`#${elementId}`).data("kendoDropDownList")) {
$(`#${elementId}`).data("kendoDropDownList").bind("close", function () {
clearTimeout(tooltipTimeout);
$(".ddl-tooltip").remove();
});
} else if (widgetType === "multiselect") {
$(`#${elementId}`).data("kendoMultiSelect").bind("close", function () {
clearTimeout(tooltipTimeout);
$(".ddl-tooltip").remove();
});
}
}
SCSS:
Note: You may need other CSS modifications but this will get you going. You will also need to replace the color variables with your own..ddl-tooltip {
background-color: #e9ecef;
color: $body-text-color;
font-family: "system-ui", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
padding: calc(.25rem - 1px) 1rem;
box-shadow: 3px 3px 5px 2px $shadow-color-light;
pointer-events: none;
&.selected {
background-color: $button-primary-color;
color: $button-primary-text-color;
}
}
.tooltip-has-focus {
background-color: #e9ecef;
}