Questions on Kendo UI for jQuery Forum

4 answers

4.4K+ views

Disable, Readonly and MaxLength for KendoEditor

How do i set Disable, Readonly and MaxLength for KendoEditor?
I also need Disable and enable for Dropdown controls as well.. I am guessing its the same options as Editor (if available)

Editor

answered on 27 Apr 2021

0 answers

105 views

Custom Value Fields Based on Operator

Hi,

Currently I have an editor template set for date fields where it changes out the input based on what operator is selected. We have custom operators such as "Next X Days" and "Last X Days" where I would like the input to be a number field, and then for operators such as "Is Equal To" I would like those to be date fields. I have this working, but the problem is that the value in the input doesn't show up in the expression preview or in the serialized data from the filter. Is it possible to accomplish what I'm trying to accomplish?

Filter

asked on 26 Apr 2021

1 answer

82 views

Kendo UI: Grid header(width) alignment issue inside tabstrip

I have used KENDO UI two Tabstrips.

Tabstrip One.
Tabstrip Two.

and both tabstrip contains a kendo Grid inside and Grid inside Tabstrip One is fixed column grid (2 fixed column) and 8 scrollable columns.

Issue: The grid inside Tabstrip One will take some 20-30 seconds to load after the page load.
The header of the Grid inside the Tabstrip One breaks, If i navigate to Tabstrip Two before the grid inside the Tabstrip One loading and comes back to Tabstrip One after the grid inside the Tabstrip One finished loading. See the First Image.
However if i click inspect on the Grid header the Grid header comes back to Normal (by self setting the k-grid-header width) See the second Image.

Please let me know if anybody faced similar type of issues.
Thanks in advance

Grid

answered on 26 Apr 2021

2 answers

1.6K+ views

How to show a popup on hover in Kendo Multiselect

I have a kendo multiselect component that works great, but when text in my dropdown are too long I have to truncate it. I would show at least a tooltip on hover with the full text. Here is an example of the desired result (in this example my mouse is on the first result, getting a popup with the full text) :

MultiSelect

answered on 26 Apr 2021

2 answers

196 views

Can Signature Demo be made to use touch

I found the following article about using a Kendo surface to create signatures and exporting them to SVG. However, the example shown does not appear to work using a touch interface (finger or stylus) on a mobile device (or touch screen on a laptop). What would need to be added to support touch?

https://docs.telerik.com/kendo-ui/knowledge-base/drawing-draw-signature-and-export-svg

General Discussions

answered on 26 Apr 2021

2 answers

446 views

Zoom in and zoom out in spreadsheet

hi team,

Is there an option to implement zoom in and zoom out in spreadsheet?

Regards,

Jaspreet

Spreadsheet

answered on 26 Apr 2021

2 answers

375 views

scrollTo/next not working properly?

Hello

I have successfully created a scrollView with pager (clickable dots at bottom). It works when I manually switch to next/previous page or click on a page dot. Now I wanted to enhance that after a few seconds the scrollView switched to the next page. On the last page it should switch back to the first page. For this I'm using the Javascript function setIntervall and scrollView's methods next and scrollTo.I have now a experienced some weird effects:

- next: With each call of method next a page button at bottom disappears
- scrollTo: After reaching the last page it keeps hanging and does not go back to first page

Here's a code sample that runs out of the box:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Auto scrollview</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.blueopal.min.css" />

<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>

<script>

var timerNewPage;

var pageNewFile = 0;

// Jump to next page, after page 10 jump back to page 1

function jumpNextPage ()

{

if (pageNewFile > 8) {

pageNewFile = 0;

var scrollView = $("#scrollView").kendoScrollView().data().kendoScrollView;

scrollView.scrollTo(0);

}

else {

var scrollView = $("#scrollView").kendoScrollView().data().kendoScrollView;

scrollView.next();

pageNewFile += 1;

}

$(document).ready(function () {

// Init scrollView

$("#scrollView").kendoScrollView({

enablePager: true,

contentHeight: "100%",

page: 0

});

timerNewPage = setInterval(() => jumpNextPage(), 4000);

});

</script>

</head>

<body>

<div id="scrollView" style="height: 500px;">

<div data-role="page">Page 1</div>

<div data-role="page">Page 2</div>

<div data-role="page">Page 3</div>

<div data-role="page">Page 4</div>

<div data-role="page">Page 5</div>

<div data-role="page">Page 6</div>

<div data-role="page">Page 7</div>

<div data-role="page">Page 8</div>

<div data-role="page">Page 9</div>

<div data-role="page">Page 10</div>

</div>

</body>

</html>

I have tested in on lastest Safari, Chrome and Firefox, all with the same described behaviour.Is this a bug or am I doing something wrong? I've used the method refresh after page switch but didn't fix the vanishing page buttons. I've also tried to scroll to next page with scrollTo (instead of using next) but also with the same weird behaviour.

Any help/hint appreciated!

ScrollView

answered on 25 Apr 2021

1 answer

97 views

Splitter makes height super small?

Hello,

I have 2 divs that I want to have a splitter between. For the top div I am using the Kendo UI scheduler module. I want this to have height of around 700. Under it I have a grid with "tasks" that I can drag and drop in the scheduler. When i am using the splitter the 2 divs become very small (splitter1.png)

It looks like that Kendo is giving the div1 a default height that is constanly overwritten? (splitter2.png).

So my question is: How can I keep the height that I define through the backend code?

Thanks,
Mark

Splitter

answered on 23 Apr 2021

1 answer

138 views

DropDownList triggered a change event even if i selected a same item

I have a grid using edit Pop-up, the pop-up contain a DropDownList.

The problem is that if i saved two records in the grid. When i open the edit pop-up of the first record and select a new item in the DropDownList then close the pop-up. After that, i open the edit pop-up of the second record and select a same item in the DropDownList (for example, open the pop-up and it bind a selected item "Product1" to the dropdownlist, then i open the dropdownlist and select the "Product1" again). It wrongly triggered the change event. May i know how can i avoid the above problem? Thanks.

cshtml:

01.@(Html.Kendo().DropDownListFor(model => model.Product)

02..Name("EditProduct")

03..DataTextField("ProductName")

04..DataValueField("ProductID")

05..Filter("contains")

06..HtmlAttributes(new

07.{

08. @class = "form-control",

09. data_bind = "value: ViewModel.Product, source: ViewModel.ProductList, events: { change: Functions.ProductChanged }",

10. data_required_msg = @String.Format(@Error.RequiredField, @Wording.lblProduct),

11. required = "required",