Unplanned
Last Updated: 27 Jan 2023 09:56 by Leo

Bug report

Filtering a column bound to a complex object throws a JavaScript error.
This is a regression introduced with v 2023.1.117

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at x (kendo.all.js:313050:21)
    at init._createForm (kendo.all.js:313050:21)
    at init._init (kendo.all.js:313050:21)
    at init._click (kendo.all.js:313050:21)
    at HTMLAnchorElement.dispatch (jquery.min.js:3:12445)
    at r.handle (jquery.min.js:3:9174)

Reproduction of the problem

  1. Run this REPL or this dojo
  2. Click on the filter icon of the Category column

Current behavior

JavaScript error is thrown and the filter menu is not generated.

Expected/desired behavior

Filtering should work as expected.

Environment

  • Kendo UI version: 2023.1.117
  • Browser: [all]
Unplanned
Last Updated: 26 Jan 2023 11:53 by ADMIN
Created by: Nitin
Comments: 0
Category: Editor
Type: Feature Request
1

Hi,

We are looking for a feature like outlook when we start typing with "@" it should display the users list using some API Call or any other method. 

Similarly when I start any word with "#" in editor, it should display some suggestions.

Unplanned
Last Updated: 19 Jan 2023 15:31 by Mark
Created by: Ravi
Comments: 2
Category: PDFViewer
Type: Feature Request
8

1. Allow the elastic behavior of the PDFViewer's mobile scroller to be disabled. Currently, when scrolling to the top or to the bottom, the document jumps and then immediately re-adjusts its position under the widget's header/bottom border.

2. Add the ability to manually scroll the document up/down with mousedown.

3. Add keyboard scrolling support.

Unplanned
Last Updated: 19 Jan 2023 12:54 by Brian
Created by: Brian
Comments: 0
Category: Grid
Type: Feature Request
1
The DateOnly type has been introduced in .NET 6 but isn't supported by Telerik DatePickers although Telerik is compatible with .NET 7 now.

I'd like DateOnly support to be introduced to Telerik UI for ASP.NET Core because my Grid uses that type and issues occur in the Grid's PopUp and InLine editing fields that are bound to DateOnly fields.
Unplanned
Last Updated: 03 Jan 2023 08:07 by Abhishek
Created by: Abhishek
Comments: 0
Category: BulletChart
Type: Feature Request
1
Expose the ability to integrate a Tooltip, particularly for the BulletChart's .Target() API configuration. 
Unplanned
Last Updated: 26 Dec 2022 10:24 by Nitin
Expose the ability to configure the CheckBox's header to include a partially selected state based on the current selection's entries
Unplanned
Last Updated: 15 Dec 2022 18:09 by Ville
Expose a string overload for the DataSource configuration option in the SchedulerResourceBuilder in order to accept a DataSource id parameter.
Unplanned
Last Updated: 12 Dec 2022 19:07 by Bas
Created by: Lucas
Comments: 1
Category: Wizard
Type: Feature Request
2
Unlike the regular Form the Wizard's Form Integration doesn't allow .HtmlAttributes to be added to it. This is need to pass custom Actions, Ids and Classes to the Form.
Unplanned
Last Updated: 08 Dec 2022 10:28 by Deborah
Created by: Deborah
Comments: 0
Category: Popover
Type: Feature Request
1
Expose the ability to load asynchronous content similar to that of the Tooltip respectively for the Body and Header options of the component.
Unplanned
Last Updated: 30 Nov 2022 14:53 by Brian
Created by: Brian
Comments: 0
Category: Map
Type: Feature Request
1
Expose the ability to automatically resize the Map component depending on the browser's dimensions.
Unplanned
Last Updated: 25 Nov 2022 10:12 by Vladyslav

Bug report

The TreeView rendering in UI for ASP.NET MVC and UI for ASP.NET Core are not consistent. Setting the Id configuration for an item in UI for ASP.NET MVC renders a data-id attribute, that is missing in UI for ASP.NET Core.

Reproduction of the problem

  1. Use the following TreeVIew definition
@(Html.Kendo().TreeView()
        .Name("treeview-kendo")
        .TemplateId("treeview")
        .Checkboxes(c=>c.CheckChildren(true))
        .Items(treeview =>
        {
            treeview.Add()
                .Text("My Documents")
                .Id("MyId1");

            treeview.Add()
                .Text("My Documents 2")
                .Id("MyId2");                
        })
)

Current behavior

When using the UI for ASP.NET Core the rendered <li> element does not have the data-id attribute that is present in UI for ASP.NET MVC

<li role="treeitem" class="k-item k-treeview-item k-first" data-uid="a3c937fd-1c4a-46a6-81e1-e53e1a2aeb6e" aria-checked="false" aria-selected="false" aria-expanded="false" data-expanded="false" aria-setsize="2" aria-level="1">
  <div class="k-treeview-top k-treeview-top">
    <span class="k-checkbox-wrapper" role="presentation">
      <input id="_a3c937fd-1c4a-46a6-81e1-e53e1a2aeb6e" aria-hidden="true" type="checkbox" tabindex="-1" class="k-checkbox k-checkbox-md k-rounded-md">
    </span>
    <span class="k-treeview-leaf k-in">
      <span class="k-treeview-leaf-text">My Documents</span>
    </span>
  </div>
</li>

Expected/desired behavior

Rendering should be consistent and the data-id attribute added in UI for ASP.NET Core.

Workaround

Use the HtmlAttributes configuration to add the data-id attribute

treeview.Add()
    .HtmlAttributes(new {data_id = "MyId1"})
    .Text("My Documents")
    .Id("MyId1");

Environment

  • Kendo UI version: 2022.3.1109
  • Browser: [all]
  • Further details available in ticket 1588455
Unplanned
Last Updated: 22 Nov 2022 16:50 by Nabi
Created by: Nabi
Comments: 0
Category: Filter
Type: Feature Request
1
Expose the ability to integrate a MultiSelect editor for filtering with multiple expressions.
Unplanned
Last Updated: 11 Nov 2022 09:08 by Matthew
Created by: Matthew
Comments: 0
Category: CircularGauge
Type: Feature Request
1

Expose a built-in API configuration for setting the borders for a given path within the Scale.


Unplanned
Last Updated: 04 Nov 2022 13:22 by CHIHPEI
Created by: CHIHPEI
Comments: 0
Category: Chart
Type: Feature Request
0

At this stage, the BaseUnit() method of the CategoryAxis configuration does not provide "Milliseconds" option. Is it possible to include it?

Unplanned
Last Updated: 03 Nov 2022 08:10 by ADMIN

I have a grid where the editor button should not be with text so I added a class to the button like this:

@(Html.Kendo().Grid<...>()
      .Name("...")
      .Columns(columns =>
      {
         columns.Command(command => command.Edit()
                                           .Text(" ")
                                           .HtmlAttributes(new { @class = "grid-button-notext", title = "..." }));
      })
      .Editable(editable => editable.Mode(GridEditMode.PopUp)
                                    .TemplateName("..."))
)

but the HtmlAttributes are applied also to the two buttons on the popup editor

<div class="k-edit-buttons k-actions-end">
   <button type="button" class="k-grid-update grid-button-notext k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" title="...">
     <span class="k-icon k-i-check k-button-icon"></span>
     <span class="k-button-text">Save</span>
   </button>
   <button type="button" class="k-grid-cancel grid-button-notext k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" title="...">
      <span class="k-icon k-i-cancel k-button-icon"></span>
      <span class="k-button-text">Cancel</span>
   </button>
</div>

Expected behaviour:

the HtmlAttributes to be applied only to the grid button. And if needed to provide PopupButtonHtmlAttributes like you have for column: HtmlAttributes, HeaderAttributes, FooterAttributes

Unplanned
Last Updated: 31 Oct 2022 09:11 by Vladyslav

Bug report

Reproduction of the problem

  • Run the following Telerik REPL.
  • Notice the logged error within the console.

Current behavior

Having a grid with a similar column setup will result in an error.

.Columns(columns =>
{
    columns.Bound(p => p.UnitsInStock).HtmlAttributes(new { @class = "#: UnitsInStock == 39 ? 'test' : 'a' #" });
})

Expected/desired behavior

Having a grid with a similar column setup should not result in an error.

.Columns(columns =>
{
    columns.Bound(p => p.UnitsInStock).HtmlAttributes(new { @class = "#: UnitsInStock == 39 ? 'test' : 'a' #" });
})

Environment

  • Kendo UI version: 2022.3.913
  • Browser: [all]
Unplanned
Last Updated: 20 Oct 2022 06:04 by Ray
We are looking for a configuration in DateTimePicker to set a time range (e.g. 8AM till 10PM) which gets applied to every date.
In ASP.NET AJAXs RadDateTimePicker it was possible by setting StartTime and EndTime in TimeView.
Unplanned
Last Updated: 19 Oct 2022 12:23 by ADMIN
Created by: Laurie
Comments: 5
Category: Drawer
Type: Feature Request
6

I'm trying to use it for navigation in a section using Razor Pages. Having to expand using javascript is very distracting when the user goes from page to page. Below is the code to create a self-running page that demonstrates the issue:


@page
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TestDrawer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.bootstrap-v4.min.css" />

    @* FontAwesome Pro css*@
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-xVVam1KS4+Qt2OrFa+VdRUoXygyKIuNWUUUBZYv+n27STsJ7oDOHJgfF0bNKLMJF" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
    </script>
    @* Place Kendo UI scripts after jQuery *@
    <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"
            asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
            asp-fallback-test="window.kendo">
    </script>
    <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.aspnetmvc.min.js"
            asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
            asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <style>
        /* Root navigation */
        #root-nav li,
        #example-nav li {
            list-style: none;
        }

        .root-nav-categories h3,
        #example-nav h3 {
            color: #000;
            font-size: 14px;
            line-height: 14px;
            padding: 0.5em 0 0.5em 3.571em;
            text-transform: uppercase;
        }

        #example-nav h3 {
            padding: 1.7em 0 0.5em 3.4em;
        }

        #example-nav-bar {
            border-top: 1px solid #e2e4e7;
        }


        #back-forward {
            display: block;
            position: relative;
            color: #000;
            font-size: 14px;
            line-height: 15px;
            font-weight: normal;
            padding: 1em 3.5em;
            /*vertical-align: middle;*/
        }

        #root-nav h4 a {
            text-align: right;
        }

        .back-nav {
            text-align: left;
        }

            .back-nav:before {
                position: absolute;
                top: 1em;
                left: 1.2em;
            }

        .forward-nav {
            text-align: left;
        }

            .forward-nav:before {
                position: absolute;
                display: block;
                top: 1em;
                right: 1.2em;
                width: 14px;
                height: 14px;
                -ms-transform: rotate(180deg); /* IE 9 */
                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
                transform: rotate(180deg);
            }

        .root-nav-categories {
            margin-top: 1.417em;
        }

        #root-nav,
        #example-nav {
            padding-bottom: 30px;
        }

            #root-nav li a,
            #example-nav li a {
                /*controls customer navigation icon and text size*/
                /*font-size: 13px;*/
                /*line-height: 13px;*/
                color: #2d3e50;
                display: block;
                padding: 0.5em 0 0.5em .5em;
                transition: all .2s ease;
            }

            #example-nav li .group {
                font-size: 13px;
                font-weight: bold;
                line-height: 13px;
                color: #2d3e50;
                display: block;
                padding: 1.5em 0 0.25em 3.7em;
                transition: all .2s ease;
            }

        .flip {
            transform: rotate( -180deg );
            transition: transform 500ms ease;
        }

        .no-boarder {
            border: none;
        }

        .k-drawer-container {
            border: none;
        }

        /*Adjusts width of icon blocks in customer navigation*/
        .k-drawer-wrapper.k-drawer-mini-mode .k-drawer-items {
            width: 3.5rem;
        }

        #root-nav li a:hover,
        #example-nav li a:hover,
        #back-forward:hover {
            color: #000;
            text-decoration: none;
            background-color: #e2e4e7;
        }

        .k-hover-enabled #root-nav li a:hover,
        .k-hover-enabled #example-nav li a:hover {
            background-color: transparent;
        }

        #example-nav .active {
            background-color: #e2e4e7;
            cursor: default;
        }
    </style>
    @*<link rel="stylesheet" href="~/css/site.css" />*@
</head>
<body>
    <div id="example-sidebar" class="border border-secondary">
        @*<div id="nav-wrapper">*@
        <div id="nav">
            <div id="example-nav">
                <kendo-drawer name="drawer" mode="push" on-hide="onHide" min position="left" swipe-to-open="true" template-id="template" class="no-boarder">
                    <mini enabled="true" />
                </kendo-drawer>
            </div>
        </div>
        @*NAVIGATION STACK*@
        @*<a href="#">
                <span class="fa-stack" style="vertical-align: top;">
                    <i class="far fa-circle fa-stack-2x"></i>
                    <i class="far fa-exchange fa-stack-1x"></i>
                </span>
            </a>*@


        <a href="javascript:void(0);" onclick="toggleDrawer();" id="expand" title="Toggle Navigation">
            <span class="fa-stack mb-2 ml-2">
                <i class="far fa-circle fa-stack-2x"></i>
                <i class="far fa-exchange fa-stack-1x"></i>
            </span>
        </a>
        <script>
            function getCookie(cname) {
                var name = cname + "=";
                var decodedCookie = decodeURIComponent(document.cookie);
                var ca = decodedCookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                        return c.substring(name.length, c.length);
                    }
                }
                return "";
            }

            $(document).ready(function () {

                var drawerInstance = $("#drawer").data().kendoDrawer;
                var hideMenu = getCookie("HideCustomerMenu");
                if (hideMenu == 'true') {
                    var arrowButton = $("#expand");
                    arrowButton.toggleClass('flip');
                }
                else {
                    drawerInstance.show();
                }

            });

            function toggleDrawer() {
                var drawerInstance = $("#drawer").data().kendoDrawer;
                var drawerContainer = drawerInstance.drawerContainer;
                var arrowButton = $("#expand");

                if (drawerContainer.hasClass("k-drawer-expanded")) {
                    document.cookie = "HideCustomerMenu=true";
                    arrowButton.toggleClass('flip');
                    drawerInstance.hide();
                } else {
                    document.cookie = "HideCustomerMenu=false";
                    arrowButton.toggleClass('flip');
                    drawerInstance.show();
                }


            }
        </script>
        <script id="template" type="text/x-kendo-template">
            <ul class="menuBar list-unstyled">
                <li id="test1"><a href="testdrawer"><i class="fa fa-user-circle fa-2x fa-fw mr-2" aria-hidden="true" title="Page 1"></i>Page 1</a></li>
                <li id="test2"><a href="testdrawer" class="customer"><i class="fa fa-check fa-2x fa-fw mr-2" aria-hidden="true" title="Page 2"></i>Page 2</a></li>
                <li id="test3"><a href="testdrawer" class="customer"><i class="fa fa-random fa-2x fa-fw mr-2" aria-hidden="true" title="Page 3"></i>Page 3</a></li>
                <li id="test4"><a href="testdrawer" class="customer"><i class="fa fa-dollar-sign fa-2x fa-fw mr-2" aria-hidden="true" title="Page 4"></i>Page 4</a></li>
                <li id="test5"><a href="testdrawer" class="customer"><i class="fa fa-paperclip fa-2x fa-fw fa-rotate-90 fa-flip-horizontal mr-2" aria-hidden="true" title="Page 5"></i>Page 5</a></li>
            </ul>
        </script>
    </div>
    <script>
        function onHide(e) {
            e.preventDefault();
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
    </script>
</body>
</html>

Unplanned
Last Updated: 19 Oct 2022 06:40 by Joel

Currently, when using the built-in vertical arrows(that move an item up or down inside the ListBox), the scrolled item can disappear from the view if there are more items in the ListBox.

Can you add automatic scrolling inside the view when moving a ListBox item , which is about to go outside the visible area?

The targeted functionality should be something like this: https://dojo.telerik.com/AtOWEhED  

 
Unplanned
Last Updated: 18 Oct 2022 17:49 by ADMIN
Created by: n/a
Comments: 1
Category: TabStrip
Type: Feature Request
1
Hello,

Please implement a client-side method to enable changes of the content-url property of the TabStrip dynamically after the Component has been initialized.
1 2 3 4 5 6