Telerik Forums
Kendo UI for jQuery Forum
0 answers
6 views

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)

Pol
Top achievements
Rank 1
Iron
 asked on 13 Mar 2024
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
21 views

On  previous updates, selected filters are showing in blue colour.

But now even applying single or multiple filters still color not changed.

 

Neli
Telerik team
 answered on 07 Dec 2023
1 answer
64 views

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

Martin
Telerik team
 answered on 10 Oct 2023
0 answers
66 views

<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

Mani
Top achievements
Rank 1
Iron
 updated question on 21 Jul 2023
2 answers
50 views
I'm using Kendo MVC. The data is appearing as the JSON that returned from the controller instead of a formatted KendoGrid. Even when I remove the contents of the entire CSHTML file, it still shows the JSON to the user. The JSON looks to be correctly formatted. What could cause that?
Rick
Top achievements
Rank 1
Iron
 answered on 14 Jul 2023
0 answers
100 views

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

santosh
Top achievements
Rank 1
 asked on 17 Jun 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
2 answers
211 views

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

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 11 Jan 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?