or
0 answers
10 views
Hello!
I am trying to use ListView with Buttons inside a Tabstrip. I want the user to be able to select an item to view a report.
As part of this list, I want a clickable hamburger button for the user to open up a popover menu for additional settings.
This setup works for all browsers when I do not perform the "filter" function. However on Firefox (only), using this filter function on the ListView causes my Kendo buttons inside the list to suddenly not fire the onClick handlers.
$("#listView").data("kendoListView").dataSource.filter({
filters: [
{ field: "Document_Number", operator: "contains", value: "J82901" }
]
});On Chrome and Edge, the Kendo buttons work just fine even after this filter. On Firefox however, I notice that the Kendo buttons are unformatted and do not respond to the click events when logging output in the console.
To reproduce the issue, I have provided the following dojo code: Sandbox Code here
Here is a sample image of the output: I have a Tabstrip with a ListView nested within. Each ListView entry has a button attached to it via a template. On click, the button should fire the click handler and print output to the console. (And a popover in the future)
Any help to get this working on Firefox would be greatly appreciated! This is an older version of Kendo UI (Sept 2021).
Thanks.
0 answers
66 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">×</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();
});0 answers
528 views
Hi,
I need to extend the kendo form dynamically. I created a dojo for demonstration:
https://dojo.telerik.com/IDElitox
In the first form, user should be able to click "Add" button and create a new pair of field at the bottom of the form, which shouldn't affect previously filled fields. So instead of 1, the user can submit more than 1 header pair.
Is it possible? How can I do that?
The number of inputs is ambiguous so I didn't think of any better solution. If there is a dedicated tool for this purpose, please let me know.
Regards,
Umutcan
