or
5 answers
704 views
Hello all,
I have a dynamic Kendo grid that can perform CRUD operations. Foreign Keys are retrieved and mapped to their value and placed in the grid as a drop down list, seen in this example here:uhhh https://demos.telerik.com/kendo-ui/grid/foreignkeycolumn My grid is in Multiple selection mode with the Cell selection type.
The issue I am running into is that modifying that column requires 2 clicks to open the dropdown. All other fields require only one click and the user can start typing new values. You can see this behavior in the example I linked earlier. I believe the issue mainly comes from the dropdown being contained within the grid's cell.
Another issue caused by this behavior is when selecting and attempting to edit multiple cells. The double-click of the dropdown causes all other cells to lose their selection.
Is there a way for a dropdownlist to be opened with one click when it is contained inside a grid?
Veselin Tsvetanov
Telerik team
answered
on
11 Feb 2020
5 answers
1.1K+ 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
3 answers
1.0K+ views
Hi,
As my title says, if I change the event height to "auto" for a month view, the height of the entire scheduler changes. it shrinks and then expands depending on the events.Is it not possible for the scheduler to remain 1000px high (for eg) and just the events auto size?
Please see my dojo (https://dojo.telerik.com/ONUcadIP) based on your docs example (https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views.eventheight)
Thanks,
Grant
Ivan Danchev
Telerik team
answered
on
07 Feb 2020
2 answers
132 views
Our application is card based with user driven exact positioning and it works extremely well with one small bug I have duplicated with the latest build in the dojo.
https://dojo.telerik.com/ameFOTij
You can move the top left card around just fine. However, the first time you attempt to drag one of the other cards, it either becomes temporarily invisible or it jumps to another portion of the screen. After that, you can move that same card around without any issues.
Any thoughts on how I could fix this? It was an issue in the previous build as well.
Aleksandar
Telerik team
answered
on
07 Feb 2020
8 answers
1.1K+ views
Hi,
Is there any way to force the items (the data points that are stacked and shown in the legend) in a stacked chart to be in a custom order? Right now it looks like the items are sorted alphabetically but I need them to be in a different order. I couldn't find any way to do this. I also am not sure what term to use to describe the items in the legend for me to do a thorough search.
Thanks,
Chris
Is there any way to force the items (the data points that are stacked and shown in the legend) in a stacked chart to be in a custom order? Right now it looks like the items are sorted alphabetically but I need them to be in a different order. I couldn't find any way to do this. I also am not sure what term to use to describe the items in the legend for me to do a thorough search.
Thanks,
Chris
Alex Hajigeorgieva
Telerik team
answered
on
07 Feb 2020
2 answers
187 views
Seems to be a bug, or a bad design choice. When adding series to a stacked bar, the order in which the series are displayed on the chart is opposite what the legend shows when on the right or left side. e.g.
Any way to reverse the one or the other so they're in the same order? Makes for a bad user experience.
Alex Hajigeorgieva
Telerik team
answered
on
07 Feb 2020
1 answer
233 views
Hi, Dev Team!
Can i use FileManager for preview (if picture), open or save files?
Ivan Danchev
Telerik team
answered
on
06 Feb 2020
4 answers
350 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
2 answers
88 views
Hi,
Id like to apply background-colors to events in my scheduler. I cannot use resources as different colours must be applied based on positive and negative values. I say "from Bootstrap theme" because I was recently using a LESS based theme and had no problems.
I've created a Dojo, https://dojo.telerik.com/OyOLifAc.
The problem here is that the background colour of the event only fills the content of the event template, not hte whole event, so on the right there is a blue bar, that is the base colour of the colour scheme.
How can I fill the event correctly?
Thanks,
Grant
3 answers
157 views
Is there an example of using the spreadsheet custom editor with a kendoPopup rather than a kendoWindow? I want the editor to be shown just to side of the cell that is selected, and disappear when a user clicks a location other than the popup. I am using MVVM. Here is an example similar to my scenario. Click on the editor button next to cell A1. Notice that the popup flashes and disappears almost immediately. How to get this to work properly and be anchored to the cell that originated it?
Dimitar
Telerik team
answered
on
06 Feb 2020
