Questions on Kendo UI for jQuery Forum

1 answer

85 views

We are trying to create a Editor custom toolbar button with a defined SVG. No matter what we try, we are unable to change the default SVG button.

I am are trying to create a custom toolbar button with a defined SVG.

No matter what we try, we are unable to change the default SVG button.

The documentation says that the name will be used to apply a k-name class. We can then use that to apply our own SVG. How can we change the SVG on a custom button?

Example - https://dojo.telerik.com/NyxxkxYJ

The following example demonstrates how to add a custom tool button. To enable styling where toolName is the specified name in the custom tool configuration, the custom buttons get a k-toolName CSS class. The undo and redo tool names are reserved.

Editor

answered on 08 Jan 2025

7 answers

379 views

Using Drawer with treeview in mobile app

Hi,

I am new to mobile development, in my company we are trying kendo ui complete for mobile app development. So far I was able to develop some screens without any issues for the app. However, now I am running into problems with a specific view or screen.

In our app a user logins in a picks a task on the second screen then he is sent to a screen that contains 2 drawers (left and right). The left drawer contains a treeview that is bound to a view model and the right drawer has some text. So, the problem is I get uncaught type error: cannot call method 'tolowercase' on undefined inside kendo.all.min.js

My code looks something like this, this is a screen that is called from my second screen when a user picks a particular task:

<div data-role="view" id="two-drawer-home" data-title="Default Report">

<header data-role="header">

<div data-role="navbar">

<a data-role="backbutton" id="back-button" class="nav-button" data-align="left">Back</a>

<span data-role="view-title"></span>

<a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right"></a>

</div>

</header>

<a class="left-btn" data-role="button" data-rel="drawer" href="#left-drawer" data-icon="nav"></a>

<div data-role="content">

Main Content Goes Here

</div>

<div data-model="app.Menus" data-init="app.Menus.init" data-role="drawer" id="left-drawer" style="width: 270px" data-title="Select a Report" data-views="['two-drawer-home']">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<div id="zones" class="k-content">

<div class="configuration-horizontal">

<div class="config-section">

<div data-role="treeview"

data-drag-and-drop="false"

data-text-field="Name"

data-bind="visible: isVisible,

source: zones,

events: { select: onSelect }"></div>

</div>

<div data-role="drawer" id="right-drawer" style="width: 80px" data-title="Share" data-position="right" data-views="['two-drawer-home', '/kendo-ui/mobile/m/drawer/two-way-drawers.html']">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

Filters will appear here

</div>

I have not attached the styles.

Is this because I have not initialized the treeview as kendotreeview in my view model? If that is the case, can i do that in my init function?

Thanks for the help !!

Drawer (Mobile)

answered on 07 Jan 2025

1 answer

45 views

Grid checkbox problem

Hello,

I have a question. After updating Kendo UI from version 2017.2.621 to 2017.3.1018, a problem occurred. The checkbox functionality in the grid, which previously had no issues, is no longer working. When I click the checkbox, nothing happens.

If you know how to solve this issue, please help me.

{    title: "사용여부", 
     width: "70px", 
     template: '<input type="checkbox" class="chk k-checkbox" name="useYn" #= useYn =="Y" ? "checked=checked" : "" # />'+
               '<label class="k-checkbox-label"></label>', 
     attributes: { style: "text-align: center" } 
}

Checkbox

Grid

answered on 31 Dec 2024

1 answer

328 views

CSS Issues After Upgrading to Version 2024.4.1112

Hello

I am currently using a purchased Kendo UI license. I plan to replace my existing Kendo UI with the latest jQuery version 2024.4.1112. Before making the change, I do not know the version I was previously using.

When I check the CSS file, I see the following comment:

/**
* Kendo UI v2017.2.621 (http://www.telerik.com/kendo-ui)
* Copyright 2017 Telerik AD. All rights reserved.
*
* Kendo UI commercial licenses may be obtained at
* http://www.telerik.com/purchase/license-agreement/kendo-ui-complete
* If you do not own a commercial license, this file shall be governed by the trial license terms.
*/

Since someone else developed this project, I am not sure which version was used, and if I try to update to the latest version, there are issues with the CSS.

Currently, my license allows me to download the following versions:
2015.2.624
2022.2.510
2022.2.621
2022.2.802
2022.3.913
2022.3.1109
2023.1.117
2023.1.314
2023.1.425
2024.2.514
2024.3.806
2024.3.1015
2024.4.1112

If I need to upgrade step by step to use the latest version, I am unsure what to do since I cannot find version 2017.2.621. Can you help me figure out how to use the newest version?

Checkbox

Grid

answered on 30 Dec 2024

1 answer

133 views

Change multiselect item remove icon

Hi,

How can I replace multiselect item remove icon with the old one? The new icon is svg icon. My version is 2024.3.1015

new icon

old icon

MultiSelect

answered on 24 Dec 2024

0 answers

117 views

Styling issues upgading from 2023.1.117 to 2024.4.1112

Hi,

I am attempting to update our current version of Kenduo UI for Jquery from 2023.1.117 to 2024.4.1112.

I have downloaded the commercial release zip and have updated the references to the js and css files (as I have done with previous upgrades), however I am experiencing lots of styling issues for font sizes and layout across inputs ans widgets.

Firstly, the text size is much smaller for inputs and widgets.

The display of widgets on different browsers is inconsistent (for example the calendar widget is being cut off on FireFox, but is spanning the whole screen on Chrome - screenshots attached).

Any ideas what could be causing this?

Calendar

DatePicker

asked on 23 Dec 2024

0 answers

62 views

Extending Kendo SVG Icons with Custom Ones

Hi,

I need to replace svg icons with custom icons. I found this in the documentation How to Add Custom SVG Icons to Kendo UI for jQuery - Kendo UI for jQuery I need something similar. Looks like does not work for earlier version. My version is 2024.3.1015. Is there a way to be done in earlier version?

Application

asked on 20 Dec 2024

1 answer

57 views

Table Accessibility with Caption alignment

This can be tested using the Kendo editor demo on the website. Create a table using the Wizard and under the Advanced tab, create a Caption in the Accessibility options. Select a bottom alignment for the caption. Although the style of vertical-align: bottom is applied to the caption, the text of the caption is still shown above the table. Is this the correct way for the caption alignment to work? Our clients expected the caption to be positioned below the table when selecting one of the bottom alignment options. Thanks for any help.

Editor

answered on 19 Dec 2024

1 answer

112 views

Kendo UI Combo/dropdown/lists Issue | Initiating multiple times

Hi Team,

We extensively use Kendo UI jQuery in our application for various front-end activities. Recently, we attempted to upgrade our Kendo UI version from 2021 to 2024 and encountered issues with comboboxes, dropdowns, and lists.

Many of our controls rely on dynamic data that changes based on multiple factors and requirements. This functionality is critical to our application. However, post-upgrade, we have observed unexpected behavior, as illustrated in the attached screenshots.

To help replicate the issue, we have created a sample in the Kendo Dojo, which can be accessed via the following link:
https://dojo.telerik.com/WyKWJZpa

Please note, The reported behavior is seen in combobox2 on change of combobox1

This behavior was not present in the previous version, and the upgrade seems to have introduced this issue. Since this implementation pattern is widespread in our application, modifying the code everywhere is not a feasible option.

We kindly request your assistance in identifying a quick and efficient resolution to this issue.

Thank you in advance for your support.

ComboBox

DropDownList

ListView