Questions on Kendo UI for jQuery Forum

1 answer

1.7K+ views

Is Kendo UI for Jquery and angular is free or licenced ?

If we get lincence will we be able to access all the compoenents

Accessibility

answered on 17 Jun 2022

0 answers

111 views

Kendo viewmodel not binding to function

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();
        });

Button

View

asked on 16 Jun 2022

0 answers

105 views

Kendo Spreadsheet

Hello,

Can i iterate this code through the loop in kendo spreadsheet

sheet.range("AV2").formula("sum(AJ2:AU2)").background("#FFFF00").color("#ffffff");
sheet.range("AV3").formula("sum(AJ3:AU3)").background("#FFFF00").color("#ffffff");
sheet.range("AV4").formula("sum(AJ4:AU4)").background("#FFFF00").color("#ffffff");
sheet.range("AV5").formula("sum(AJ5:AU5)").background("#FFFF00").color("#ffffff");
sheet.range("AV6").formula("sum(AJ6:AU6)").background("#FFFF00").color("#ffffff");
sheet.range("AV7").formula("sum(AJ7:AU7)").background("#FFFF00").color("#ffffff");
sheet.range("AV8").formula("sum(AJ8:AU8)").background("#FFFF00").color("#ffffff");
sheet.range("AV9").formula("sum(AJ9:AU9)").background("#FFFF00").color("#ffffff");
sheet.range("AV10").formula("sum(AJ10:AU10)").background("#FFFF00").color("#ffffff");
sheet.range("AV11").formula("sum(AJ11:AU11)").background("#FFFF00").color("#ffffff");
sheet.range("AV12").formula("sum(AJ12:AU12)").background("#FFFF00").color("#ffffff");
sheet.range("AV13").formula("sum(AJ13:AU13)").background("#FFFF00").color("#ffffff");
sheet.range("AV14").formula("sum(AJ14:AU14)").background("#FFFF00").color("#ffffff");
sheet.range("AV15").formula("sum(AJ15:AU15)").background("#FFFF00").color("#ffffff");
sheet.range("AV16").formula("sum(AJ16:AU16)").background("#FFFF00").color("#ffffff");
sheet.range("AV17").formula("sum(AJ17:AU17)").background("#FFFF00").color("#ffffff");
sheet.range("AV18").formula("sum(AJ18:AU18)").background("#FFFF00").color("#ffffff");
sheet.range("AV19").formula("sum(AJ19:AU19)").background("#FFFF00").color("#ffffff");
sheet.range("AV20").formula("sum(AJ20:AU20)").background("#FFFF00").color("#ffffff");
sheet.range("AV21").formula("sum(AJ21:AU21)").background("#FFFF00").color("#ffffff");
sheet.range("AV22").formula("sum(AJ22:AU22)").background("#FFFF00").color("#ffffff");
sheet.range("AV23").formula("sum(AJ23:AU23)").background("#FFFF00").color("#ffffff");

and what is the validate solution for this loop iterate based on row data available in spreadsheet

Spreadsheet

asked on 16 Jun 2022

1 answer

580 views

KendoUi Font icons are not loading

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

Hierarchical Data Source

answered on 15 Jun 2022

1 answer

510 views

Text area gaining multiple inner sections

I have a grid with an edit button which opens a modal window

Inside that modal window I have a text area

Each time I set the value, it indents

$("#mytextarea").kendoTextArea().data('kendoTextArea').value("A new comment here");

It starts to do this which each successive setting of the value.

<span class="k-input k-textarea k-input-solid k-input-md k-rounded-md" style="width: 100%;">
<span class="k-input k-textarea !k-overflow-y-auto k-input-inner k-input-solid k-input-md k-rounded-md" style="width: 100%; resize: none;">
<span class="k-input k-textarea !k-overflow-y-auto k-input-inner k-input-solid k-input-md k-rounded-md" style="width: 100%; resize: none;">
<span class="k-input k-textarea !k-overflow-y-auto k-input-inner k-input-solid k-input-md k-rounded-md" style="width: 100%; resize: none;">
<textarea id="setup-deliverymethod-dialog-comments-textarea" style="width: 100%; resize: none;" data-role="textarea" aria-disabled="false" rows="1" placeholder="Comments" class="!k-overflow-y-auto k-input-inner" autocomplete="off"></textarea>
</span>
</span>
</span>
</span>

Am I setting the textarea value incorrectly?

TextArea

answered on 15 Jun 2022

1 answer

202 views

Tabstrip loading indicator

Hey guys,

I miss the loading indicator on top of each tab while loading content with ajax.
Latest version 2022.2.510.

It's easy to reproduce since the offical demo doesn't show the indicator as well.

(https://demos.telerik.com/kendo-ui/tabstrip/ajax -> Chrome Dev-Tools -> fake slow connection)

Any tricks?

Thank you!

Peter

TabStrip

answered on 15 Jun 2022

1 answer

129 views

Kendo Jquery Captcha error in IE 10

Good evening,

Yes, I'm struggling with the telerik captcha implementation in IE 10 ,

am getting below error,

Even your demo site is also giving the same error.

Not sure how to fix this , can you please help me on this or redirect who can help me

Captcha

answered on 15 Jun 2022

1 answer

147 views

Kendo Jquery Captcha error in IE 10

Good evening,

Yes, I'm struggling with the telerik captcha implementation in IE 10 ,

Am getting "SCRIPT5007: Unable to get property 'options' of undefined or null reference On kendo.all.min.js (25,35564)" error,

even your demo site is also giving the same error.

Not sure how to fix this , can you please help me on this or redirect who can help me

Captcha

answered on 15 Jun 2022

1 answer

227 views

Kendo Spreadsheet

1.I want to set multiple sheet tab name every sheet tab name have a different columns and I want this when click on another tab than that data show

2. how to set validation for model from json file. Json file also contain sequence of column based on that file column should show is it possible?

3.I'm doing validation like this please check zip file

It's too lengthy code how to handle if dynamically any changes on column please help me to solve out this problem

I have Json file like this please check another zip file.I have a multiple json file i want when i click on sheet tab name than that json file columns and data show

ActionSheet

Data Source

Spreadsheet

answered on 15 Jun 2022

12 answers

36.3K+ views

Pass additional parameters to Read ajax datasource method - MVC

Hi,

I want to pass an additional parameter to my Read ajax method from Grid along with currently passing the controller name and method name.

Currently I have something like below in my cshtml file:
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(model => model.Id(m => m.Id))
.Create(create => create.Action("Create", controllerName))
.Read(read => read.Action("Read", controllerName))
.Update(update => update.Action("Update", controllerName))
.Destroy(delete => delete.Action("Delete", controllerName))
)
And my Action method is below:
public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{}

Please can you show my how to pass addtional parameter (i.e Id) in Grid for Read operation and how to handle it in corresponding Controller?

Thanks,
Nirav

Grid

answered on 14 Jun 2022