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.

<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

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

I am using Kendo UI for Jquery.

I have a grid and a local array as a datasource. The grid is showing, but the data inside is not.  

I searched aroud and I can't find what's wrong. 

Here is the code: Dojo UI

How can I extend this view with more fields?

Hi,

The TypeScript definitions for the View are incomplete.

Kind Regards,

Marco

I am trying to achieve the following :

1. Hide the header & footer on home page or home view but display on other views
2. Customize the header for each view
3. Navigating to views using href tags was not showing the layout

---------------------------------------First Issue : Hide the header & footer on any specific view -------------------------------------------------------------------                             
I am using the following code for lay-out initialization in home view i.e. index.html:

How can I hide the header and footer on the home page.
Currently I used the following custom css to hide the header

I probably need to do the same to hide the footer also.
Is there any other standard approach to do this ?

------------------------------------------Second Issue : Customize the header for any specific view--------------------------------------------
Since I have the main-layout defined , the same layout will be copied to all views.
Let's say I want to change the header for a specific view to be 
<div data-role="header">              
        <div data-role="navbar">                
            <img  src="xyz/abc.jpg"></img>       
        </div> 
</div>

I was able to achieve this by adding data-layout tag to this view and defining a new layout in this view's html file.

But this was breaking the tabstrip navigation.
Could you please advise how can this be achieved ?

--------------------------Third Issue : Navigating to views directly using href tags was not showing the layout----------------------------

In my home page, I have a gird of four images created using CSS flex-box.
I have added href on each image to link to a different view.
But when clicked on the image only the view's content is displayed , the layout is not shown.
The custom css styling applied to view's elements is also broken.

I have also tried using #idOfView in the href tags but same problem exists.

Could you please let me know how this can be resolved ?

Sorry for the very lengthy post , but these are the issues I am struck with now.
Thanks in advance.