Questions on Kendo UI for jQuery Forum

0 answers

152 views

Line chart rendering issue when data is big

I have bar chart rendering issue, and not sure how or when it can occur. It works just fine when data is not too big. Please see image attachment below. Thanks!

Charts

updated question on 20 Jun 2022

0 answers

112 views

how to kendoMultiColumnComboBox popup Always show top

The kendomulticolumncombobox is displayed at the bottom when there is little data, and at the top when there is much data. Now I want to permanently display it on the top. How do I set the property

MultiColumnComboBox

asked on 20 Jun 2022

1 answer

133 views

How to add link to header text or bodyTemplate tile

I am trying to use tileLayout to display the names and logos of commonly used applications.

To achieve this, I would like to have the image in the body of the card to be clickable and redirect to its respective URL. Currently I am getting an Invalid Template error.

    <script id="header_@action.Id" type="text/x-kendo-template">

      <a href="@action.Url">@action.Label</a>

    </script>

Templates

TileLayout

answered on 20 Jun 2022

0 answers

247 views

Kendo Spreadsheet

Hello ,

I want to multiple sheet with different type data when i click on tab name than that sheet data should show how to do this in kendo spreadsheet can you explain  ? 
and different sheet have different type of columns how to do that please help me to solve this problem. Thanks 
<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        sheets: [{ name: "Sheet1" }, { name: "Sheet2" }]
    });
    var sheets = $("#spreadsheet").data("kendoSpreadsheet").sheets();
    $("#spreadsheet").data("kendoSpreadsheet").activeSheet(sheets[1]);
</script>

Spreadsheet

asked on 20 Jun 2022

1 answer

142 views

Add new Item containing \\ and \ ( paths)

I have a Grid, which has a column that uses a MultiSelect as an editor and also allows the user to add new items. This is all running off a remote data with crud etc

It's been 4 days to get it all working.. lost a bit of hair , but finally it all works! ( all the examples just were not applicable or when used together caused issues!)

It all looks good now, but I have got 1 more bit to sort and I'm struggling to keep going . Would really appreciate a little help.

The Multi Select is for selecting Shares / Paths. This is find if they are already defined in the database, but I cannot add them using the Add New approach.
e.g the user types \\Server\Share as a new item.. and then try's to add it... we end up with \ServerShare

The issue is what I am getting back from input.val

<script id="noDataTemplate" type="text/x-kendo-tmpl">
    # var value = instance.input.val(); #
    # var id = instance.element[0].id; #
    <div>
        No data found. Do you want to add new item - '#= value #' ?
    </div>
    <br />
    <button class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md" onclick="addNew('#: id #', '#= value #')" ontouchend="addNew('#: id #', '#: value #')">Add new item</button>
</script>

I can't find a way to get a raw string of the instance.input.val();

Any ideas greatly appreciated,

Many thanks

MultiSelect

updated answer on 19 Jun 2022

1 answer

93 views

Export PDF in different layout

Hi,

Is it possible to reformat the data being exported from the Grid?

Basically, I need to change the page layout from being a screen capture, as the PDF export does by default, to a different layout.

Think of a list of names, address, phones that is portrayed in a column layout instead of the row layout with columns that is the Grid default.

Column 1 would have, for example

Name1
Address1
City, state zip1
phone1

Name2
Address2
City, state zip2
phone2

Name3
Address3
City, State, Zip3
Phone3

Then, column 2 would have

Name4
Address4
City, State, Zip4
Phone4

And then continuing to the bottom of column2, then starting at the top of Column 3.

Is this possible with the Kendo UI PDF Export? Or maybe another function in the Kendo UI?

Thank you!

Grid

answered on 17 Jun 2022

0 answers

218 views

How to keep focus on same Kendowindow modal poup on Tab click

Hi Forum,

I have kendowindow opens as dialogue where we have two dropdown and two button (OK, Cancel)

once window loads focus on window and while tab click goes all fine till Cancel button, after that focus shift to browser

I wanted to keep focus on same window, Instead go to somewhere else in screen.

Below is piece of code snippet.

@(Html.Kendo().Window()
.Name("AddressSelectionModal")
.Modal(true)
.Visible(false)
.Width(350)
.Animation(true)
.Title("")
.Actions(actions => actions.Clear())
.Content(@<text>
@Html.Partial("~/Views/Shared/Modals/test.cshtml")
</text>)

I was trying by write below code on cancel button "onblur" event but seems does not works.

$("#AddressSelectionModal").data("kendoWindow").focus();

Please help on this how to keep focus on same kendowindow.

Thanks,

Santosh

General Discussions

View

Window

asked on 17 Jun 2022

1 answer

572 views

Kendo upload error "An asynchronous module or handler completed while an asynchronous operation was still pending."

Hi..

When I upload file using kendo upload, it will hit the error event with response message "An asynchronous module or handler completed while an asynchronous operation was still pending.", but the file is successfully uploaded.

This only happen on the first time, subsequently is not getting the error anymore.

$("#files").kendoUpload({
	async: {
		saveUrl: "upload.aspx",
		removeUrl: "remove",
		autoUpload: true,
		allowmultiple: true,
		batch: true
	},
	localization: {
		select: "Select Files"
	},
	complete: onComplete,                
	error: function (e) {
		console.log(e);
	},
	select: function (e) {
		
	},
	dropZone: "#dropZoneElement",
	showFileList: false
});

Any idea of what is going on?

Upload

answered on 17 Jun 2022

1 answer

2.0K+ 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

150 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