Hello,

I am upgrading my application to Kendo version 2023.3.1114 and during the upgrade I fell over the fact, that the <span> tags do not show their assigned icons anymore.

I am using the code as explained here in the Basic Usage section: Font Icons - Sass Themes - Kendo UI for jQuery (telerik.com)
<span class="k-icon k-font-icon k-i-calendar"></span>
But the icon is not shown. If I put a text in between the <span> only the text is displayed.

Also the Dojo example, which should show how to display the icon (Font Icons - Sass Themes - Kendo UI for jQuery (telerik.com)), does not work in the Dojo: Kendo UI® Dojo by Progress (telerik.com).
Here the code:

So is this a bug in Kendo? Or am I and the Dojo missing something?

Thank you for a clarification.

Best,
Jeannine

Hello Team,

We are currently facing challenges with the Kendo grid, which is a widely used widget or component at o9Solutions. Although we have been using Kendo for a long time, the widget is failing to meet accessibility standards for some components, which are crucial in today's world.

Regarding the Kendo grid, there is an issue where SR is reading the table twice, once for the header and once for the cells. This can cause confusion for assistive technologies like SR.

Consider the cases of horizontal scroll or fixed column cases also.

Having a single <table> is the standard. We can't create multiple tables, which will violate the good coding practices + accessibility standards.

---

I saw some posts regarding this... where it was mentioned we can remove this Scrollable() . But what are the cons of this if we remove this?
--

We want this functionality like a horizontal or vertical scroll or fixed column cases.But it needs to recognize as a single table.

Case: Frozen [Name and hometown ..enabled locked flag]. It's considered as 4 table.

https://dojo.telerik.com/oXoroDav

Case 2: normal one. It's considered as  2 table.

Dojo: https://dojo.telerik.com/@naseer743/eyeVuCep

Hi.

I have a problem with the pagination grid when inside a tabstrip. and I don't know why this happens and how to solve it.

<div class="h-100">
        <div id="tabstrip" class="h-100">
            <ul>
                <li class="k-active">Arbeitsschritte</li>
                <li>Mitteilungen</li>
                <li>Wiedervorl</li>
            </ul>
            <div id="tab1" class="vh-100">
                <div id="grid1"></div>
            </div>
            <div class="vh-100">
                <div id="grid2"></div>
            </div>
            <div class="vh-100">
                <div id="grid3"></div>
            </div>
        </div>
    </div>

<script>
    $(document).ready(function () {
        $("#tabstrip").kendoTabStrip();

        $("#grid1").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: '100%',
            groupable: true,
            sortable: true,
            columnMenu: true,
            resizable: true,
            reorderable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });

        $("#grid2").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: '100%',
            groupable: true,
            sortable: true,
            columnMenu: true,
            resizable: true,
            reorderable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });

        $("#grid3").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: '100%',
            groupable: true,
            sortable: true,
            columnMenu: true,
            resizable: true,
            reorderable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });

    })
</script>

Hello,

I am using Kendo version Kendo UI v2020.2.617 in our project, I have implemented custom fonts in the fonts family tool. When I select any text to change its font for some instances, the selection gets held until the time I select the font and after the font selection is completed. Still, when I select the text and try to open the font dropdown, the selection is getting deselected, which means the selection is not getting hold in the editor.

Even I faced the same issue for the default fontName tool when I implemented it before trying the custom.

Will you please help me with what might be the possible reasons for it? 

Code which I implemented -

{
                    name: "fontName",
                    items: [{
                        text: "Andale Mono",
                        value: "Andale Mono"
                    }, {
                        text: "Arial",
                        value: "Arial"
                    }, {
                        text: "Arial Black",
                        value: "Arial Black"
                    }, {
                        text: "Book Antiqua",
                        value: "Book Antiqua"
                    }, {
                        text: "Comic Sans MS",
                        value: "Comic Sans MS"
                    }, {
                        text: "Courier New",
                        value: "Courier New"
                    }, {
                        text: "Georgia",
                        value: "Georgia"
                    }, {
                        text: "Helvetica",
                        value: "Helvetica"
                    }, {
                        text: "Impact",
                        value: "Impact"
                    }, {
                        text: "Symbol",
                        value: "Symbol"
                    }, {
                        text: "Tahoma",
                        value: "Tahoma"
                    }, {
                        text: "Terminal",
                        value: "Terminal"
                    }, {
                        text: "Times New Roman",
                        value: "Times New Roman"
                    }, {
                        text: "Trebuchet MS",
                        value: "Trebuchet MS"
                    }, {
                        text: "Verdana",
                        value: "Verdana"
                    }, {
                        text: "Webdings",
                        value: "Webdings"
                    }, {
                        text: "Wingdings",
                        value: "Wingdings"
                    }]
                }

Thank you

I am trying to add a tooltip to my page that covers the element it is triggered on. When I do so, it flashes instead of staying on. Here is a dojo. Hover your mouse over the text and see it flash.

https://dojo.telerik.com/AsoDIzAC

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.2.0/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
</head>
<body>
  
<span id="target" title="Tooltip content">
  Some content
</span>

<script>
  $(document).ready(function() {
    $("#target").kendoTooltip({
      position: "center",
      callout: false,
      showAfter: 1000
    });
  });
</script>
</body>
</html>

Hi,

Are there any new properties that have been added in version 2022.3.913 where we can defined the width/height of the labels within the axis.

If the labels are set for 20% and the text is longer than the space defined then it will add ellipses for that section.

Similar to the image below.

Thanks!

I'm trying to set margins when exporting to PDF using the Drawing API and can't get it to work. Here is a dojo. When you click the button to get the PDF, there is no margin around the chart. I'm assuming I'm doing something wrong, but not quite sure what.

Dear developer:

I made  a calendar to user with kendoMultiViewCalendar , but I didn't know how to append a hyperlink to each date. 

Each gridcell HTML was looked like:

<td role='gridcell' class>

<a tabindex="-1" class="k-link" href="#" data-vale="2024/0/18"> 18</a>

</td>

I tried to use template to do it, but found out that I only could make some style on the "data.value", was not able to change the attribute "href" of the up node "a" .

Could anyone help me with that?

I have a kendoGrid, on initial load I am able to see the pagination being set and datasource.total has some value:

On Initial load:

When I click on the default "cancel" option from my toolbar, the total is "undefined".:
OnCancel:

I can see the data in my grid, but the pagination footer displays "No items to display"