I am trying to sort alphabetically string values inside the multi filter combobox in Kendo Grid to filter. Now it shows randomly there is no any order in mvc. Here is the code
columns.Bound(c => c.EmpName).Title("Employee Name") .Filterable(filterable => filterable .Multi(true)
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">
On previous updates, selected filters are showing in blue colour.
But now even applying single or multiple filters still color not changed.
Hello,
I got a custom button on my toolbar , which opens a modal, but , when i tried to open in mobile mode , it stops working
see the code below
$('#pdfViewer').css('width', '100%');
var request = new XMLHttpRequest();
request.responseType = 'blob';
request.onload = function () {
var reader = new FileReader();
reader.readAsDataURL(request.response);
reader.onload = function (e) {
$("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: {
data: e.target.result.split(",")[1]
}
},
toolbar: {
items: [
"zoomInOut",
{
type: "button",
name: 'Description',
template: '<button type="button" onclick="openModal()" title="Description" class="k-button k-button-md k-button-flat" id="btn-Description"><span class="k-icon k-i-toc-section-level"></span></button>',
}
]
},
width: "100%",
height: 760
}).getKendoPDFViewer();
};
};
on browser desktop modal it works normally
<div>
@(Html.Kendo().Grid<FourCSQL.ContractorPortal.Model.Custom.WorkRequest.WorkRequestModel>()
.Name("gridTestrequest")
.Columns(columns =>
{
columns.Bound(c => c.TestName).Title(ResourceManagerClass.GetResource("CarTest", languageID)).Width(200);
columns.Bound(c => c.TestDescription).Title(ResourceManagerClass.GetResource("Car Description", languageID)).Width(460);
columns.Bound(c => c.TestToComplete).Title(ResourceManagerClass.GetResource("Car Test to complete", languageID)).Width(150);
columns.Bound(c => c.TestPriority).Title(ResourceManagerClass.GetResource("Carpriority", languageID)).Width(180);
columns.Bound(c => c.TestCode).Title(ResourceManagerClass.GetResource("CarTestCode", languageID)).Width(200);
columns.Bound(c => c.TestDepartment).Title(ResourceManagerClass.GetResource("Cardepartment", languageID)).Width(180);
columns.Bound(c => c.TestLocation).Title(ResourceManagerClass.GetResource("CarLocation Description", languageID)).Width(240);
columns.Bound(c => c.LocationDescription).Title(ResourceManagerClass.GetResource("Asset", languageID)).Width(240);
columns.Bound(c => c.WorkDescription).Title(ResourceManagerClass.GetResource("Work ", languageID)).Width(180);
columns.Bound(c => c.TestStatus).Title(ResourceManagerClass.GetResource("Status", languageID)).Width(180);
columns.Bound(c => c.TestStore).Title(ResourceManagerClass.GetResource("Store", languageID)).Width(180).Hidden(true).Exportable(true);
})
.ToolBar(toolBar =>
toolBar.Template("<a class='k-button k-button-icontext k-grid-excel btn btn-secondary btn-custom' style='float:right;margin- right:12px;color:white;' href='#'><span class='k-icon k-i-excel' style='margin-top:-1px;'></span>Export</a> "))
.Excel(excel => excel
.FileName("workrequest.xlsx")
.Filterable(true).AllPages(true)
.ProxyURL(Url.Action("AdminList", "Admin", new { @requestType = @ViewBag.RequestType }))
)
.Scrollable(scr => scr.Height(230))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Pageable(pageable => pageable.Refresh(false).PageSizes(true).ButtonCount(1))
.Sortable()
.Filterable(f => f.Extra(false)
.Operators(op => { op.ForString(str => { str.Clear().Contains("Contains"); }); })
.Messages(m => m.Info("Items with value contains:")))
.DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("AdminList", "Admin", new { @requestType = "pending" })))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorderable => reorderable.Columns(true))
.Events(events => events.ColumnReorder("saveColumnReorder").ColumnResize("saveColumnSize"))
.HtmlAttributes(new { @class="KendoGrid"})
)
</div>
1.How We can Export the Hidden columns in Excel...?
2. In the grid has one columns values like this the user is seeing like this (volvo, benz, Audi, BMW, I20, MG,) But When user clicks on the Excel So we want show ('30lakhs', '1crore' , '80lakhs', '30lakhs', '50lakhs')
So How We can do this I have not found any link anyone can you please help me out to find for this solution.
Thanks& Regards
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
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(); });
Hello,
I have a question about grids loading: some customers could receive the fully loaded content on the UI, while some received a different loaded content for the same JSP code. Here are how the loaded HTML using the same code look like in the browser for two different customers:
for one customer:
<div id="transportGrid">
<div class="k-header k-grid-toolbar ">...</div>
<table role="grid" tabindex="0" data-role="selectable" class="k-selectable" style aria-activedescendant="transportGrid_active_cell">...</table>
<div class="k-pager-wrap k-grid-pager k-widget k-floatwrap userDefinedBgColor" data-role="pager">...</div>
<div class="k-resize-handle">...</div>
</div>
for the second customer:
<div id="transportGrid">
<div class="k-header k-grid-toolbar">...</div>
<div class="k-grid-header" style="padding-right: 17px;">...</div>
<div class="k-grid-content k-auto-scrollable userDefinedBgColor">...</div>
<div class="k-pager-wrap k-grid-pager k-widget k-floatwrap userDefinedBgColor" data-role="pager">...</div>
</div>
so for the first customer, the <divs> containing the k-grid-header and k-grid-content are ignored and replaced by <table> element.
Do you know the reason of the difference of the loaded contents?
Thanks in advance for your help and answer.
Best regards,
Antsa Rakotoarimalala