Questions on Kendo UI for jQuery Forum

5 answers

245 views

Gantt performance when connected to slow responding services

Hi,

I recently encountered situation where web services used as CRUD methods for gantt widget to be very slow (6+ seconds TTFB per request). This has caused every action on the gantt widget to be slow, and widget looks as it hangs with spinning wheel. Basically, widget is unusable, specially when user moves tasks between groups where a few tasks need to be updated to adjust hierarchy.

Unfortunately, at the moment, I am forced to remain with this services as endpoints.

Do you have any suggestion how to approach this problem?

Only thing that came to my mind was to build local datasource and handle actions manually, but I am not sure that this is best approach.

Thank you in advance.

Best regards

Gantt

answered on 11 Feb 2020

5 answers

771 views

DropDownList FK column requires 2 clicks

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?

DropDownList

answered on 11 Feb 2020

5 answers

1.1K+ views

ListBox refresh with HTML

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>

ListBox

answered on 10 Feb 2020

3 answers

1.1K+ views

Changing eventHeight to auto changes height of the scheduler

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

Scheduler

answered on 07 Feb 2020

2 answers

143 views

kendoWindow containment jumpy

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.

Window

answered on 07 Feb 2020

8 answers

1.1K+ views

Stacked Chart Legend Order

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

Charts

answered on 07 Feb 2020

2 answers

209 views

Order of legend in stacked bar is backwards

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.

Charts

answered on 07 Feb 2020

1 answer

254 views

Preview, Open, Save

Hi, Dev Team!

Can i use FileManager for preview (if picture), open or save files?

FileManager

answered on 06 Feb 2020

4 answers

405 views

Unable to scroll listbox on mobile (IOS)

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.

ListBox

answered on 06 Feb 2020

2 answers

104 views

Styling events from bootstrap theme

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

Scheduler

answered on 06 Feb 2020