or
3 answers
347 views
Can the listbox be made to autofit its content?
Nikolay
Telerik team
answered
on
10 Nov 2020
5 answers
415 views
Is there a solution (or workaround) to the following problem:
Tooltips are only displayed for active ("enabled") listbox items.
I have two linked listboxes (ListBoxA and ListBoxB). ListBoxA shows valid and invalid entries. Invalid entries are disabled in ListBoxA so that they cannot be added to ListBoxB. I want to display tooltips for all entries in ListBoxA so that the user can see why an entry may be is disabled.
Sample code https://jsfiddle.net/chstorb/b2u9cowd/
Kind regards,
Chris
Tooltips are only displayed for active ("enabled") listbox items.
I have two linked listboxes (ListBoxA and ListBoxB). ListBoxA shows valid and invalid entries. Invalid entries are disabled in ListBoxA so that they cannot be added to ListBoxB. I want to display tooltips for all entries in ListBoxA so that the user can see why an entry may be is disabled.
Sample code https://jsfiddle.net/chstorb/b2u9cowd/
Kind regards,
Chris
Nikolay
Telerik team
answered
on
27 Aug 2020
5 answers
235 views
Hi Team,
As my question says, Im having trouble with a DataSource bound to a ListBox. Take a look at my Dojo here, https://dojo.telerik.com/ipIfAROK.
I have bound a DS to the listbox, and it displays the DS content, great. The content is (suppose to be) linked to the enabled state of the ActionButton, no content = disabled button. however if i removed the listbox items, the button remains enabled.
To Replicate:
1) Click the "Log List" button and check your console, there are 2 items in the viewModel DS
2) Remove them and click the Log button again. There are STILL 2 items in the DS, but they've been removed from the listbox.
Please advise on how i can link the enabed state of a button to the content of the list box, preferably using the View Model. I hope this isnt something simple I've missed.
THanks,
Grant
Georgi
Telerik team
answered
on
14 May 2020
10 answers
1.0K+ views
I have a connected listbox on the screen and call a function to setup the list box. This function should select the three items in the itemsToSelect variable and move them to the selectedItems listbox. Unfortunately it seems nothing happens. I can add the items using the add command (see commented out code) but I cannot remove them using the remove command either. I've looked at the documentation about select and remove but the examples don't show removing an array of items. What am I doing wrong?
let itemsToSelect = [
{ itemID: 123, itemName: "Item 123" },
{ itemID: 234, itemName: "Item 234" },
{ itemID: 345, itemName: "Item 345" }
];
setupListbox(itemsToSelect);
function setupListbox(itemsToSelect) { let availableItemsListBox = $('#availableItems').data("kendoListBox"); let selectedItemsListBox = $('#selectedItems').data("kendoListBox"); let selectedItems = []; // Reset the list boxes availableItemsListBox._executeCommand("transferAllFrom");// Select the correct items $.each(itemsToSelect, function (index, item) { var itemID = item.itemID; var dataItem = availableItemsListBox.items().find(function (item) { return item.itemID === itemID; }); if (dataItem) { selectedItems.push(dataItem); } }); if (selectedItems.length > 0) { //selectedItemsListBox.add(selectedItems); //availableItemsListBox.remove(selectedItems); availableItemsListBox.select(selectedItems); availableItemsListBox._executeCommand("transferTo"); } }If you need it, here is my initial setup of the listbox:
$("#availableItems").kendoListBox({ connectWith: "selectedItems", autoScroll: false, dropSources: ["selectedItems"], toolbar: { position: "right", tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"] }, dataSource: itemsListBoxDataSource, template: "<span class='listItemID'>#: data.itemID #</span><span class='listItemName'>#: data.itemName #</span>", valueTemplate: "#: itemName #", dataTextField: "itemName", dataValueField: "itemID", add: () => changeListBox("#availableItems"), remove: () => changeListBox("#availableItems") }); $("#selectedItems").kendoListBox({ connectWith: "availableItems", dropSources: ["availableItems"], template: "<span class='listItemID'>#: data.itemID #</span><span class='listItemName'>#: data.itemName#</span>", valueTemplate: "#: itemName #", dataTextField: "itemName", dataValueField: "itemID", add: () => changeListBox("#selectedItems"), remove: () => changeListBox("#selectedItems") });
Angel Petrov
Telerik team
answered
on
19 Feb 2020
5 answers
857 views
I am trying to add and remove listbox items via modifying the select tag it is based off of when initilizing. So when a user presses a button it will add options tags to the select and when the user presses another button it should refresh the listbox with the new items added by the user. For some reason I cannot get it to work. I've tried destroy() and then remaking the listboxes but that only gives me an empty listbox with no controls. Any help would be appreciated thank you
Here is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<base href="https://demos.telerik.com/kendo-ui/listbox/index?_ga=2.84834905.1992168603.1580165777-1170392125.1577463742">
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div runat="server" id="example" role="application" >
<select runat="server" id="size" style="width: 100%;" ></select><br><br>
<div class="demo-section k-content">
<div>
<label for="optional" id="employees">Allowed Roles</label>
<label for="selected">Disallowed Roles</label>
<br />
<select id="optional" runat="server">
<option value="min">Text1</option>
<option value="Adn">Text Fo</option>
<option value="Adm">Text #</option>
<option value="Ain">Text 5</option>
</select>
<select id="selected" runat="server">
<option value="min">Text Six</option>
<option value="Amin">Text Sev</option>
<option value="Adn">Text Eght</option>
<option value="AT">Text Twentt</option>
</select>
</div>
<input type="button" id="submit" value="submt" class=""/>
<input type="button" id="Button1" value="yoooo"/>
</div>
</div>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
#panelbar {
width: 600px;
max-width: 700px;
margin: 0 auto;
}
.demo-section label {
margin-bottom: 5px;
font-weight: bold;
display: inline-block;
}
#employees {
width: 270px;
}
#example .demo-section {
max-width: none;
width: 600px;
}
#example .k-listbox {
width: 236px;
height: 310px;
}
#example .k-listbox:first-of-type {
width: 270px;
margin-right: 1px;
}
</style>
<script>
$(document).ready(function () {
var template = "<option value='#: Department #'>#: Function #</option>";
$("#submit").click(function () {
var d = $('#size').val();
alert(d); //alert(c);
$('#optional > option').each(function () {
//alert($(this).text() + ' ' + $(this).val());
});
var listBox1 = $("#optional").data("kendoListBox");
// refreshes the list box
listBox1.remove(listBox1.items());
listBox1.destroy();
var listBox = $("#selected").data("kendoListBox");
// refreshes the list box
listBox.remove(listBox.items());
listBox.destroy();
listbox.items.add
alert("destroyed kendo boxes")
$("#optional").kendoListBox({
connectWith: "selected",
toolbar: {
tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
}
});
$("#selected").kendoListBox();
//$("#size").append('<option value="empl@c1.com">option6</option>');
//$("#size").kendoDropDownList({onChange: onChange});
});
$("#Button1").click(function () {
$('#optional').append(`<option value="dios"> carao </option>`);
$('#selected').append(`<option value="dios"> carao </option>`);
});
$("#optional").kendoListBox({
connectWith: "selected",
toolbar: {
tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
}
});
$("#selected").kendoListBox();
$("#size").kendoDropDownList({
change: onChange
});
function makeid(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
//called when user switches employee name in drop down list
//to do -- remove all current contents and replace with permissions for that user
function onChange() {
//alert("here");
//$("#optional").empty();
// refreshes the list box
//listbox.refresh();
//listBox.dataSource.read();
};
});
</script>
</form>
</body>
</html>
Viktor Tachev
Telerik team
answered
on
10 Feb 2020
4 answers
249 views
I have two connected listboxes with drag and drop and multiselect both enabled. This works fine on desktop, however on mobile (I only checked IOS) the user is unable to scroll through the list of items. You can reproduce this in Chrome developer tools by selecting the device toolbar and choosing one of the simulators) I created a Dojo here: https://dojo.telerik.com/@dojolee/oBeMUwuQ to demonstrate.
Georgi
Telerik team
answered
on
06 Feb 2020
1 answer
451 views
I have 2 listboxes that are connected. I want to execute a function AFTER an item is transferred from one box to the other. I see the add and remove functionality but it fires before the item is added or removed. I need it to happen after the items are removed from the from box and added to the to box. How would I do this?
Preslav
Telerik team
answered
on
28 Jan 2020
4 answers
296 views
I have a kendoListBox with 12,000 items. This is connected with another kendoListBox and has draggable enabled. Each listbox item has a template applied. The listbox is inside of a modal. When I click a button to open the modal there is a 3 second delay for the modal to open. Then when I try to drag an item or click the arrow buttons to move the item to the opposite list there is another 3 second delay before anything happens. The issue occurred when I changed from a list with only a couple hundred items to this large list. I had this problem with some dropdown boxes and fixed those with virtualization but virtualization does not appear to be available or work here. How do I increase performance so that these components are usable?
<div id="baseModal"> <div class="modal-content"> <div class="modal-header"> <div id="baseModalTitle" class="modal-title">My Modal</div> </div> <div class="modal-body"> <div id="exceptions" class="kendo-dnd-component"> <div class="dnd-list-boxes"> <div class="available-options-container"> <label for="availableItems">Applies To</label> <span class="k-list-filter"> <input id="availableItemsSearchBox" class="k-textbox"><span class="k-icon k-i-zoom"></span> </span> <select id="availableItems" class="browser-default"></select> </div> <div class="selected-options-container"> <label for="selectedItems">Excludes</label> <span class="k-list-filter"> <input id="selectedItemsSearchBox" class="k-textbox"><span class="k-icon k-i-zoom"></span> </span> <select id="selectedItems" class="browser-default"></select> </div> </div> </div> </div> </div> <div class="modal-footer"> <div class="right-align"> <button type="button" class="modal-close waves-effect btn-flat">Cancel</button> <button type="button" class="btn waves-effect ">Accept</button> </div> </div></div><script>function createItemsDragLists() { // List Boxes $("#availableItemsSearchBox").on("input", function (e) { var listBox = $("#availableItems").getKendoListBox(); var sarchString = $(this).val(); listBox.dataSource.filter({ logic: "or", filters: [ { field: "itemID", operator: "contains", value: sarchString }, { field: "itemName", operator: "contains", value: sarchString } ] }); }); $("#selectedItemsSearchBox").on("input", function (e) { var listBox = $("#selectedItems").getKendoListBox(); var sarchString = $(this).val(); listBox.dataSource.filter({ logic: "or", filters: [ { field: "itemID", operator: "contains", value: sarchString }, { field: "itemName", operator: "contains", value: sarchString } ] }); }); $("#availableItems").kendoListBox({ connectWith: "selectedItems", draggable: true, autoScroll: true, dropSources: ["selectedItems"], toolbar: { position: "right", tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"] }, selectable: "multiple", dataSource: items, template: "<span class='listItemID'>#: data.itemID #</span><span class='listItemName'>#: data.itemName#</span>", valueTemplate: "#: itemName #", dataTextField: "itemName", dataValueField: "itemID" }); $("#selectedItems").kendoListBox({ connectWith: "availableItems", draggable: { placeholder: function (element) { return element.clone().css({ "opacity": 0.3, "border": "1px dashed #000000" }); } }, dropSources: ["availableItems"], selectable: "multiple", template: "<span class='listItemID'>#: data.itemID #</span><span class='listItemName'>#: data.itemName#</span>", valueTemplate: "#: itemName #", dataTextField: "itemName", dataValueField: "itemID" });}</script>
1 answer
305 views
After removing an item in the list box it does not focus on the first item by default, We need an option to focus on the first item. Attached screenshot & video link for your reference. Please check
Video link and screenshot
Hetali
Telerik team
answered
on
31 Dec 2019
1 answer
338 views
I was able to successfully use the .enable() method to disable an item in the list box on the left. However, it doesn't do the same for the the right side items.
Demo:
https://dojo.telerik.com/eVoZahaX
Any other way to support disabling any items on the right side? We want to pre-load some values on the right side, but not allow them to be moved.
