Questions on Kendo UI for jQuery Forum

3 answers

1.4K+ views

DateInput() for data-role="datepicker" declared in template

<div id="AffectedCountries" name="AffectedCountries" data-role="grid"

data-bind="source: dudu.AffectedCountries"

data-columns='[{"field": "Name", "title": "Name", "width": 180 },

{"field": "ValidFrom", "title": "Valid From", "width": 170},

{"command":"", "width": 50}]'

data-row-template="list-country-group-row-template" >

</div>

<script type="text/x-kendo-template" id="list-country-group-row-template" >

<tr role="row" class="k-row" data-bind="attr: { idRow: IdForBinding }">

<td data-bind="text: Name"></td>

<td class="with-required">

<input type="date" data-type="date" data-role="datepicker" class="validFrom" required

data-format="yyyy-MM-dd" data-bind="value: ValidFrom, events: {change: validFromChanged}" />

<span class="required">*</span>

</td>

<td>

<input type="date" data-type="date" data-role="datepicker" class="validTo"

data-format="yyyy-MM-dd" data-bind="value: ValidTo, events: {change: validToChanged}"/>

</td>

<td class="k-command-cell">

</td>

</tr>

</script>

I have a template with rows, each row with 2 dates, bound to an entity. Both dates have a kendoDatePicker.

I need to apply some constraints, like ValidTo value should have as min the value of ValidFrom.

And I would like to prevent the user from typing wrong values in the input field. Like "DateInput()" for ASP .NET Core or "dateInput: true" in Kendo.

Is there a way to do this? Since I could not fing any "data-*" attribute to use, and the fields do not have an Id, being bound to a viewModel.

Should I generate some kind of Id for each ValidFrom and ValidTo, for each row, and bind a $(id).kendoDatePicker()?

DatePicker

answered on 12 Feb 2020

3 answers

848 views

Apply different autohide for notification types

Hi,

How can i apply different autoHide duration for different types of notifications? A success message should auto hide after 5sec, but the rest must not autohide.

I looked at this thread, https://www.telerik.com/forums/different-closing-behaviour-for-notifications , but it does work completely. When the info window hides, it hides everything, not just the info window.

Please Advise,

Grant

Notification

answered on 12 Feb 2020

9 answers

559 views

Focus and Select Scheduler slot programmatically

I have multiple scheduler components and only one can be active at a time,
When a scheduler is switch and "right-click"/context-menu is triggered on a slot in a newly switched scheduler, an error message occur: "Unable to get property 'getFullYear' of undefined or null reference" - in kendo.all.min.js

This message will pop up on IE and trigger an error message in the console on Google Chrome,
So far the error doesn't have any impact in general, just an annoying error message,

Apparently, it won't trigger any error if "left-click" is triggered first on a slot in a newly switched scheduler before the "context-menu", and I realized that the "left-click" will give a focus and select a slot on a current scheduler. But the focus won't be given automatically by simply switching the scheduler,
I switch the scheduler only by clicking a button that will set the display of a div to 'block' and zindex to '100' and then refresh the scheduler with .refresh(). The div has scheduler inside of it.
So in general, the switching looks like this:

var calendar1=document.getElementById("div1").firstChild;

var calendar2=document.getElementById("div2").firstChild;

$("#btn1").click(function(){

$("#div2").css("display","none").css("z-index","-1");

$("#div1").css("display","block").css("z-index","100");

$(calendar1).data("kendoScheduler").refresh();

});

$("#btn2").click(function(){

$("#div1").css("display","none").css("z-index","-1");

$("#div2").css("display","block").css("z-index","100");

$(calendar2).data("kendoScheduler").refresh();

});

When the switching occur, the scheduler won't switch the focus, how can I select a slot on a newly switched scheduler or at least give a focus to the newly switched scheduler?
Because focus() method will not select a slot and it will still trigger the error

Scheduler

answered on 12 Feb 2020

3 answers

237 views

Using IF and empty quotes to check for blank value

One of our clients has spreadsheets using IF(A10="",'N/A', 1) but this does not work it will display the 1 with an empty cell. However if IF(ISBLANK(A10),'N/A',1) is used it works properly. Is there a reason for this behavior or maybe a fix without having to change a ton of formulas across several hundred files?

Spreadsheet

answered on 11 Feb 2020

9 answers

1.8K+ views

setDataSource not working

I have a kendoComboBox that I have configured with Server filtering. (autocomplete like functionality)

When a certain action occurs, I want to have the combobox select an item that I supply in code. i.e. I want to set the text AND the selected value of the combobox, and then disable the combobox.

I know I can set the text with widget.text("something"). However, the value function also sets the text. (widget.value("1111");)

So my next attempt was to set the datasource of the combobox to the object, and then call widget.select(0).

widget.setDataSource(new kendo.data.DataSource({

data: [{

itemID: '1111',

name: 'Some Item'

}]

}));

widget.select(0);

widget.trigger("change");

widget.enable(false);

However, this doesn't seem to do anything. (except disable the widget) The dataSource is getting set, but underlying value and the text are not changing. Also, the dropdown is empty. (if I don't disable it)

dataTextField is set to "name", and dataValueField is set to "itemID".

Any help would be appreciated. Thanks.

ComboBox

answered on 11 Feb 2020

5 answers

235 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

760 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.0K+ 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

137 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