Telerik Forums
Kendo UI for jQuery Forum
1 answer
82 views

I'm using the range slider from Kendo UI for jQuery. It provides a drag handle and a tooltip that is not draggable. Is it possible to make it so that I can click and drag the tooltip to move the drag handle across the slider? The file for this is fairly dense and I am not the original author so I'm not sure what to provide for reference. I'm just wondering if it's possible even thought it's not covered in the Kendo docs as far as I can tell.

Peter Milchev
Telerik team
 updated answer on 20 Feb 2024
1 answer
23 views

Hii, 

I am using Kendo version Kendo UI v2020.2.617 in our project, and while using insertImage tool from the editor I am facing some issues.

Following are the issues I faced -

1. When I select the insertImage tool and try adding an image at a certain position, it jumps to the top of the editor (Once in multiple try it sticks at a certain position).

2. insertImage tool does not render images from all URLs. I entered multiple URLs but only on some URLs I got an image rendered.

I have attached the screenshot above regarding the issue where once the image is rendered at the last position else it is rendered at the top.

Will you please help me out with possible ways to fix this?

 

Thank you,

Sameep Sawant

 

 

 

 

 

 

Neli
Telerik team
 answered on 20 Feb 2024
1 answer
25 views

the font was increased the way 

 


/*kendo-pdf-document .k-grid th {
    font-size: 25px;
    word-wrap: break-word;            
}*/

 

but if the header does not fit, it is cut, word-wrap does not work, how to make header wrap?

Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
 answered on 19 Feb 2024
1 answer
63 views

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:

<!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 class="k-icon k-font-icon k-i-pencil"></span>
<span class="k-icon k-font-icon k-i-pencil k-flip-h"></span>
<span class="k-icon k-font-icon k-i-pencil k-flip-v"></span>
<span class="k-icon k-font-icon k-i-pencil k-flip-h k-flip-v"></span>
</body>
</html>

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

Thank you for a clarification.

 

Best,
Jeannine

Neli
Telerik team
 answered on 19 Feb 2024
1 answer
37 views

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

 

Peter Milchev
Telerik team
 answered on 16 Feb 2024
3 answers
48 views

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>

Martin
Telerik team
 answered on 16 Feb 2024
0 answers
17 views
Hi ,

We are using Kendo Toolbar menu in our application , we are removing content after closing form but we are able to see those references in chrome memory tab , could you please any one tell me how to destroy or dispose those toolbar menu 
Naveen
Top achievements
Rank 1
 asked on 14 Feb 2024
3 answers
28 views

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

 

 

Sameep
Top achievements
Rank 1
Iron
 answered on 14 Feb 2024
1 answer
41 views

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>

Neli
Telerik team
 answered on 13 Feb 2024
1 answer
21 views

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!

Neli
Telerik team
 answered on 12 Feb 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?