Telerik Forums
Kendo UI for jQuery Forum
1 answer
26 views

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

  • Some classes were changed in the new js say buttons in the kendo grid.
  • Some CSS files are removed. (Assuming it is not compatible with the current version.

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">
Please help me if there is something I've missed while upgrading kendo.
Nikolay
Telerik team
 answered on 04 Mar 2024
1 answer
22 views

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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.2.0/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
</head>
<body>
  
<span class="k-icon k-font-icon k-i-pencil"></span>
<span class="k-icon k-font-icon k-i-pencil k-flip-h"></span>
<span class="k-icon k-font-icon k-i-pencil k-flip-v"></span>
<span class="k-icon k-font-icon k-i-pencil k-flip-h k-flip-v"></span>
</body>
</html>

So is this a bug in Kendo? Or am I and the Dojo missing something?

Thank you for a clarification.

 

Best,
Jeannine

Neli
Telerik team
 answered on 19 Feb 2024
1 answer
46 views

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

 

 

Zornitsa
Telerik team
 answered on 01 Nov 2023
1 answer
179 views

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 desired to expand and show the child rows in a hierarchical table:

 

 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

 

Neli
Telerik team
 answered on 19 Oct 2023
1 answer
32 views

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.  

Martin
Telerik team
 answered on 12 Oct 2023
1 answer
73 views

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!

Ruchika
Top achievements
Rank 1
Iron
 answered on 03 Aug 2023
1 answer
563 views

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

 

Frank
Top achievements
Rank 1
Iron
 updated answer on 26 Jun 2023
1 answer
35 views

I want button add title tag.  "data refresh".

 

How can I make it simple?

 

                    $("#toolbar").kendoToolBar({
                        items: [
                            { id: "btn_reload", icon: "k-icon k-i-reload", type: "button", overflow: "never" },

 

Thank you.

 

Lyuboslav
Telerik team
 answered on 14 Nov 2022
0 answers
61 views

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">&times;</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();
        });

Eric
Top achievements
Rank 1
 asked on 16 Jun 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?