Hello,
We have upgraded our Kendo jQuery package. The previous version was 2019.1.220 and our latest version is 2023.3.1114. We observed that
After upgrading some of our css are not getting applied. Attaching the screenshots for reference. I'm attaching my sample code.
Below are the stylesheets I'm using<link href="{{ URL::asset('css/boostrap_v4_alpha.css') }}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('kendo/styles/material-main.css') }}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('kendo/styles/font-icons/index.css') }}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('kendo/styles/bootstrap-main.css') }}" rel="stylesheet" type="text/css">
Hello,
I am upgrading my application to Kendo version 2023.3.1114 and during the upgrade I fell over the fact, that the <span> tags do not show their assigned icons anymore.
I am using the code as explained here in the Basic Usage section: Font Icons - Sass Themes - Kendo UI for jQuery (telerik.com)
<span class="k-icon k-font-icon k-i-calendar"></span>
But the icon is not shown. If I put a text in between the <span> only the text is displayed.
Also the Dojo example, which should show how to display the icon (Font Icons - Sass Themes - Kendo UI for jQuery (telerik.com)), does not work in the Dojo: Kendo UIĀ® Dojo by Progress (telerik.com).
Here the code:
So is this a bug in Kendo? Or am I and the Dojo missing something?
Thank you for a clarification.
Best,
Jeannine
Now that we are supposed to switch to svg icons, away from the font icons, I was wondering if there is an easy way to size the buttons? I use a custom class for the buttons right now and on two of the buttons I am using icons:
They seem to have shrunk. I am guessing this is because of the switch from font icons to the svg icons?
To be honest the icon on the refresh button for v 2020.1.118 disappeared and I had to find a suitable replacement.
So some of the sizing issue for that button might be caused by what icon I picked -- icon: "refresh" didn't seem to produce an icon, so I went with icon "arrowRotateCwIcon".
I just need some sugestions on how to maintain my custom style and get the icons to appear bigger. The style I am using is below:
.submit {
width: 110px;
height: 30px;
padding: 20px 16px 20px 16px;
border-radius: 4px;
background-color: #1e98d7;
box-sizing: border-box;
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.35);
font-family: "Roboto Medium", "Roboto", sans-serif;
font-weight: 500;
color: #ffffff;
text-align: center;
line-height: normal;
letter-spacing: 0.4px;
}
.submit:hover {
background-color: #0084cf;
box-sizing: border-box;
}
.submit:active {
background-color: #50a5d5;
box-sizing: border-box;
}
Regards,
George
Hi....
Issue is the icons don't change when clicking the expand/ contract button in the kendo-grid:
In the context of a hierarchical kendo grid, it used to, in prior versions (2020.1.1118) swapped icons:
from - to + if the user wanted collapse the child rows and show only the parent rows.
Now as of version 2023.3.1010:
,,,something is interfering with my code, guessing that some CSS references have changed.
Here is a DOJO link:
Untitled | Kendo UI Dojo (telerik.com)
If the link doesn't work (I am new to Kendo as of July and I still haven't gotten the hang of saving stuff on the DOJO) , I have attached a text file (with HTML) that the exact code to test in the DOJO. You might need to stretch the right side that shows the active code to see the button in the header.
Also, the version prior to 2023.3.1010 showed an evil twin :) ... a little plus sign in addition to the default + plus icon... so you might want to go back a version to look at that too.
Can you give me some ideas on how to fix the issue of the icons NOT swapping on the 2023.3.1010 version when it was working fine previously?
Regards,
George
Use case: I have a button that triggers a long-running process. I would like to add a spinning icon to the button itself to show that the process is already in progress (it has no reason to affect the rest of the page).
I can add an imageUrl on the fly, however when the process completes, I would like to be able to remove the image, and it does not seem to work. If I set imageUrl to null or empty string, nothing happens.
This is not a huge problem as I can write jQuery code to hide the image, I just wondered if there was a simpler way.
Hello, I am studying a lot because I am using Kendo for JQuery for the first time in this project.
Currently, I am creating a function that registers a favorite for each row of data, and I need to create it as shown in the picture.
The favorite column is assigned a Y/N cutoff value, and the icon changes accordingly.
And when the icon is clicked, the icon should change if the favorite status is successfully switched through ajax communication.
Thanks a lot for all your help!
I'd like to show / hide or change the icon of a toggle button and currently struggle getting this to work after changing to the current version.
I had no problems with older versions (2019 / 2021).
What I'm trying to achieve ist something like
setOptions({icon: "check"})
and (re)render()
I also tried to take the road via kendo.ui.icon(element....) and kendo.html.renderButton / renderIcon but so far to no avail.
Any hint would be greatly appreciated.
Kind regards
Frank
I want button add title tag. "data refresh".
How can I make it simple?
Thank you.
I am unable to bind a function to my Kendo viewmodel. It does not give an error message and simply does not bind even though other viewmodels on my page are working.
var Ccf; (function (Ccf) { var ViewModels; (function (ViewModels) { var User; (function (User) { var defaultAddModel = { labelIds: [] }; var InfoViewModel = (function (_super) { __extends(InfoViewModel, _super); // parentViewModel must begin with an underscore, otherwise kendo will wrap it in an observable object. function InfoViewModel(_parentViewModel) { _super.call(this); this._parentViewModel = _parentViewModel; this.data = new kendo.data.ObservableObject(); this.messages = new kendo.data.ObservableArray([]); _super.prototype.init.call(this, this); } InfoViewModel.prototype.add = function (e) { e.preventDefault(); if (!this._parentViewModel.addViewModel) { // Initialize and bind the view model for the modal window. this._parentViewModel.addViewModel = new AddViewModel(this._parentViewModel, defaultAddModel); kendo.bind(this._parentViewModel.addModal, this._parentViewModel.addViewModel); } else { this._parentViewModel.addViewModel.set("data", defaultAddModel); this._parentViewModel.addViewModel.set("messages", []); } this._parentViewModel.addModal.modal("show"); }; InfoViewModel.prototype.destroy = function (e) { var _this = this; e.preventDefault(); if (confirm("Are you sure you want to delete the Note " + e.data.note + "?")) { kendo.ui.progress(this._parentViewModel.container, true); $.ajax({ url: Ccf.Utility.serviceUrl + "UserLabel/" + e.data.id, method: "DELETE", contentType: "application/json; charset=UTF-8", dataType: "json" }) .done(function (data, textStatus, jqXHR) { // No need to hide the spinner. The refresh function will handle that. _this._parentViewModel.refresh(); }) .fail(function (data, textStatus, errorThrown) { toastr.error(Ccf.Utility.getAjaxMessages(data)[0], "Delete Failed"); kendo.ui.progress(_this._parentViewModel.container, false); }); } }; return InfoViewModel; }(kendo.data.ObservableObject)); var AddViewModel = (function (_super) { __extends(AddViewModel, _super); // parentViewModel must begin with an underscore, otherwise kendo will wrap it in an observable object. function AddViewModel(_parentViewModel, data) { _super.call(this); this._parentViewModel = _parentViewModel; this.data = data; this.messages = new kendo.data.ObservableArray([]); _super.prototype.init.call(this, this); } AddViewModel.prototype.save = function (e) { var _this = this; e.preventDefault(); var messages = []; if (messages.length > 0) { this.set("messages", messages); return; } this.data.userId = this._parentViewModel.options.userId; kendo.ui.progress(this._parentViewModel.addModal, true); $.ajax({ url: Ccf.Utility.serviceUrl + "User/AddUserNote/", method: "POST", data: kendo.stringify(this.get("data")), contentType: "application/json; charset=UTF-8", dataType: "json" }) .done(function (data, textStatus, jqXHR) { _this._parentViewModel.refresh(); _this._parentViewModel.addModal.modal("hide"); }) .fail(function (data, textStatus, errorThrown) { _this.set("messages", Ccf.Utility.getAjaxMessages(data)); }) .always(function (data, textStatus, errorThrown) { kendo.ui.progress(_this._parentViewModel.addModal, false); }); }; return AddViewModel; }(kendo.data.ObservableObject)); var UserProfileNotesViewModel = (function () { function UserProfileNotesViewModel(options) { this.options = options; this.isInitialized = false; } UserProfileNotesViewModel.prototype.initialize = function () { var _this = this; if (!this.isInitialized) { this.container = $("#user-profile-note-container"); this.addModal = $("#user-profile-entry-note-modal"); this.infoViewModel = new InfoViewModel(this); this.refresh().then(function () { return _this.isInitialized = true; }); } }; UserProfileNotesViewModel.prototype.refresh = function () { var _this = this; kendo.ui.progress(this.container, true); return $.ajax({ url: Ccf.Utility.serviceUrl + "User/GetUserNotes/" + this.options.userId, method: "POST", contentType: "application/json; charset=UTF-8", dataType: "json" }) .done(function (data, textStatus, jqXHR) { _this.infoViewModel.set("data", data); }) .fail(function (data, textStatus, errorThrown) { _this.infoViewModel.set("messages", Ccf.Utility.getAjaxMessages(data)); }) .always(function (data, textStatus, errorThrown) { kendo.ui.progress(_this.container, false); if (!_this.isInitialized) { kendo.bind(_this.container, _this.infoViewModel); } }); }; return UserProfileNotesViewModel; }()); User.UserProfileNotesViewModel = UserProfileNotesViewModel; })(User = ViewModels.User || (ViewModels.User = {})); })(ViewModels = Ccf.ViewModels || (Ccf.ViewModels = {})); })(Ccf || (Ccf = {}));
The HTML that that binds to the viewmodel:
<div id="user-profile-note-entry-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" data-bind="invisible: data.id">Add Child</h4>
<h4 class="modal-title" data-bind="visible: data.id">Update Child</h4>
</div>
<div class="modal-body">
@Html.Partial("_MessageListPartial")
<div class="form-group">
<label for="txtName">Name</label>
<input id="txtName" class="form-control" placeholder="" data-bind="value: data.name" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bind="click: save">Save</button>
</div>
</div>
</div>
</div>
<div class="user-profile-note-container">
<div id="note-container" style="position: relative;">
<div class="portlet">
<div class="portlet-heading bg-primary">
<div class="portlet-widgets pull-left p-0">
<a data-toggle="collapse" data-parent="#notes" href="#notes-settings">
<i class="ion-minus-round pull-left m-t-10"></i>
<span class="divider"></span>
<span class="m-l-10 p-t-10">Associated Notes</span>
</a>
</div>
<div class="portlet-title pull-right">
<button type="button" class="btn btn-default waves-effect w-sm waves-light" data-bind="click: add">Add Note</button>
<span class="divider"></span>
<i class="ion-help-circled help-text-icon" data-container="body" title="" data-toggle="popover" data-placement="left" data-content="o These are notes that can only be viewed by administrators and coordinators. Use this area to add information about a user." data-original-title="Associated Notes" aria-describedby="popover383606"></i>
</div>
<div class="clearfix"></div>
</div>
<div id="notes-settings" class="panel-collapse collapse in">
<div class="portlet-body" style="" data-bind="visible: messages.length <= 0">
<div id="bg-primary" class="panel-collapse collapse in">
<div class="portlet-body">
@foreach (User_Notes note in ViewBag.UserNotes)
{
<div class="list-group-item">
<div class="row">
<div class="=conversation-text">
<div class="ctext-wrap">
<div>
@note.NoteMessage
</div>
<small class="text-muted">by @note.EnteredByUserName - Entered at: @note.DateEntered </small>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The page itself has several viewmodels being initialized and this is the only one that is having issues. The others are working fine with the same code structure and function calls. Here is where the viewmodels are being initialized:
var Ccf; (function (Ccf) { var ViewModels; (function (ViewModels) { var User; (function (User) { var UserProfileViewModel = (function () { function UserProfileViewModel(options) { this.options = options; this.infoViewModel = new User.UserProfileInfoViewModel(options); this.childrenViewModel = new User.UserProfileChildrenViewModel(options); this.diagnosisViewModel = new User.UserProfileDiagnosesViewModel(options); this.labelViewModel = new User.UserProfileLabelsViewModel(options); this.languageViewModel = new User.UserProfileLanguagesViewModel(options); this.referralSourceViewModel = new User.UserProfileReferralSourceViewModel(options); this.settingsViewModel = new User.UserSettingsViewModel(options); this.notesViewModel = new User.UserProfileNotesViewModel(options); } UserProfileViewModel.prototype.initialize = function () { this.infoViewModel.initialize(); this.childrenViewModel.initialize(); this.diagnosisViewModel.initialize(); this.labelViewModel.initialize(); this.languageViewModel.initialize(); this.referralSourceViewModel.initialize(); this.settingsViewModel.initialize(); this.notesViewModel.initialize(); }; return UserProfileViewModel; }()); User.UserProfileViewModel = UserProfileViewModel; })(User = ViewModels.User || (ViewModels.User = {})); })(ViewModels = Ccf.ViewModels || (Ccf.ViewModels = {})); })(Ccf || (Ccf = {}));
The user profile view model gets initialized directly on the view with the .Net razor passing the user Id value:
$(function () { var vm = new Ccf.ViewModels.User.UserProfileViewModel({ userId: "@ViewBag.UserId", isCoordinator: @isCoordinator.ToString().ToLower() }); vm.initialize(); });