Hello everyone,

Here are the highlights of the new online resources we published this week from 10 Nov 2025 to 17 Nov 2025:

Article: https://www.telerik.com/kendo-jquery-ui/documentation/ai-components
Summary: Integrate Kendo UI for jQuery AI components—AI Prompt and AI Chat—with LLM providers (OpenAI, Azure OpenAI, custom endpoints) through a backend proxy. The article explains configuration and event handling (prompt templates, system messages, streaming responses, conversation history, request/response/error events) and covers API key security to implement AI chat and prompt workflows in your app.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/kendo-ui-clear-icon-span
Summary: This article explains how Kendo UI for jQuery renders the clear (x) icon as a span inside input widgets and how to reliably target it. You will learn how to enable or disable the clear button and use CSS/JavaScript to hide, style, or reposition the generated icon span to avoid overlap or alignment issues in TextBox, ComboBox, DropDownList, and DatePicker widgets.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/sortable/accessibility/overview
Summary: This article outlines the accessibility behavior of the Kendo UI for jQuery Sortable, covering WCAG 2.2/Section 508 targets, WAI-ARIA semantics, focus management, and screen reader considerations. It clarifies keyboard interaction and known limitations of drag-and-drop, and guides you on structuring markup and configuration to achieve an accessible sorting experience.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/dropdowntree/binding/load-on-demand
Summary: Configure the Kendo UI for jQuery DropDownTree to load child nodes on demand (lazy loading) from a remote endpoint when a node is expanded. Set loadOnDemand: true and bind a HierarchicalDataSource with transport.read, schema.model.id, and schema.model.hasChildren; pass the expanded node’s id to the server so it returns only that node’s children, reducing the initial payload for large hierarchies.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/sortable/accessibility/keyboard-navigation
Summary: This article documents keyboard navigation and accessibility for the Kendo UI for jQuery Sortable, showing how you focus the component, move between items, initiate reordering via keyboard, reposition items, drop, and cancel. It specifies the supported keyboard shortcuts plus the ARIA roles/attributes and focus management used to meet WCAG requirements and support screen readers, so you can implement and test accessible item reordering.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/fixing-bar-visibility-chart-long-labels
Summary: When long category axis labels in a Kendo UI for jQuery Bar/Column Chart consume too much space, the plot area can collapse and bars may appear hidden. Fix this by using categoryAxis.labels.visual to render wrapped or truncated labels within a fixed width and adjusting axis padding/margins, so the chart reserves bounded space for labels. The article includes sample code to measure text and draw multi-line labels, preserving bar visibility and label readability.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/stop-event-propagation-buttons-panelbar-header-contenturl
Summary: Learn how to prevent Kendo UI for jQuery PanelBar headers from expanding/selecting when clicking buttons placed in the header while using contentUrl. The article shows binding delegated handlers and calling e.preventDefault() and e.stopPropagation() on button click (and mousedown/touchstart if needed) so the event doesn’t bubble to the header anchor (.k-link), keeping header controls interactive without triggering PanelBar actions.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/preventing-auto-increment-dragging-kendo-ui-jquery-spreadsheet
Summary: Learn how to prevent auto-increment when dragging the fill handle in the Kendo UI for jQuery Spreadsheet by forcing drag-fill to copy the original value instead of creating a numeric/date series. You’ll intercept the Spreadsheet change event to detect drag-fill and programmatically reset the target range, with an option to hide the fill handle via CSS if you need to disable drag filling entirely.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 05 Nov 2025 to 10 Nov 2025:

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/customize-star-colors-kendo-ui-jquery-rating
Summary: The Kendo UI jQuery Rating does not expose a color option, so you customize star colors via CSS. Override the widget’s selectors for unselected, selected, and hover states to set your desired colors. The article shows the exact classes to target (e.g., .k-rating-item, .k-selected, .k-hover, .k-icon/.k-svg-icon) with sample rules.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 29 Oct 2025 to 05 Nov 2025:

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/custom-check-all-checkbox-kendo-jquery-dropdowntree
Summary: Learn how to add a custom “Check all” checkbox to a Kendo UI for jQuery DropDownTree and wire it to select or clear all nodes. The article shows rendering the control when the popup opens, accessing the internal TreeView to programmatically toggle the checked state for all items, and syncing the header checkbox (checked/indeterminate) by handling the widget’s check/change events.

Feel free to check them out and share your thoughts!

The Telerik Team

Just needed to check a quick example for reference and I've discovered all the samples have been rewritten to include a bunch of fluff.  Here is the new example for the textbox.  THE TEXTBOX... this is the example???  Who thought this was a good idea?  It seems like someone was given a task to make sure the examples are up to date and some very eager beaver who jumps on every new web dev bandwagon but loses sight of what the end user experience is like, or their fellow coding team members.  I have always told people 'and telerik has good documentation and examples' but I can't honestly say that now.  After using it for 15 years, I'm so disappointed in what happened to kendo.

Reminder, this is the first example for kendo text box:

<body>
    <div class="demo-wrapper k-d-grid k-gap-8 k-flex-1 k-px-8 k-pt-7">
    <div data-role="skeletoncontainer" class="side-container k-skeleton k-opacity-20 !k-d-flex k-flex-col k-align-items-center k-px-5 k-pt-7.5 k-rounded-tl-md k-rounded-tr-md" aria-live="polite" aria-label="Loading...">
        <span class="k-skeleton k-opacity-80 k-skeleton-circle k-w-18 k-h-18 k-mb-5"></span>

        <div class="k-d-flex k-flex-col k-align-items-center k-gap-1">
        <span class="k-skeleton k-w-24 k-h-4 k-rounded-md"></span>
        <span class="k-skeleton k-opacity-80 k-w-14 k-h-2.5 k-rounded-md"></span>
        </div>

        <div class="k-d-flex k-flex-col k-w-full k-mt-13 k-gap-4">
        <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        </div>

    </div>

    <div class="main-container k-pb-8 k-d-flex k-flex-col">
        <div class="k-d-flex k-gap-3 k-align-items-center k-mb-5">
        <span class="avatar !k-d-none k-skeleton k-opacity-30 k-skeleton-circle k-w-12 k-h-12"></span>
        <h4 class="k-h4 k-opacity-20 k-font-bold">My Profile</h4>
        </div>
		<span class="k-d-inline-block">Name</span>
        <input id="textbox" />

        <div class="k-d-flex k-flex-col k-gap-1 k-mt-5">
        <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
        <span class="k-skeleton k-opacity-30 k-rounded-md k-h-7.5"></span>
        </div>

        <div class="k-d-flex k-flex-col k-grow k-gap-1 k-mt-5">
        <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
        <span class="content-expanded k-grow k-skeleton k-opacity-30 k-rounded-md k-h-20"></span>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // create TextBox from input HTML element
        $("#textbox").kendoTextBox({
            value: "John Smith",
            clearButton: true
        });
    });
</script>

<style>
    .demo-wrapper {
        grid-template-columns: 180px 1fr;
    }

    .k-h4 {
        line-height: 26px;
        margin-bottom: 0;
    }

	.kd-nodata-wrapper{
		display: block !important;
		padding-top: 20px !important;
	}

    /* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
    @media (max-width: 678px), (min-width: 821px) and (max-width: 1038px), (min-width: 1241px) and (max-width: 1328px) {
      .demo-wrapper {
        grid-template-columns: 1fr;
      }

      .avatar {
        display: block !important;
      }

      .side-container {
        display: none !important;
      }

      .main-container {
        padding-bottom: 0;
      }

      .content-expanded {
        border-end-end-radius: 0;
        border-end-start-radius: 0;
      }
    }

    /* Breakpoint for full screen demo: max:359px */
    @media (max-width: 476px) {
      .avatar {
        width: 32px;
        height: 32px;
      }
    }
</style>


</body>

I am using Vue Js with Kendo.

I need to escape a function within a HTML input element. : 

This is the input values
 <input type="checkbox" class="checkbox" :class="{ 'checked': myVar }">
This is what i tried to do but it did not work: 
 <input type="checkbox" class="checkbox" \#:class="{ 'checked': myVar }"#>

Hi,

I have the suggestion regarding documentation for the widgets/components. It would be great if you could add two information to the documentation/demos:

1. When it was first introduced (which version)
2. When it was last changed.

For example: textbox prefixes and sufixes (from: VERSION NR, updated: VERSION NR). - and you can link it to that release note/breaking changes post that you already have.

I think it is very useful for two reasons:
1. when people (designers or managers etc.) browse the online library and find "cool" feature and ask why we don't have it or they want it implemented, we (developers/architects) could immediately know if its available in the version we have.
2. When we developers read documentation (yes some of us really read it), we immediately know if we can use feature or not. (otherwise I have to open demo dojo and then change version to our current one and see what works and what not - it takes time with multiple widgets and multiple versions used system wide).

Thank you very much.

Regards,

Vedad

Hello,

tried to ask for help in Stack Overflow, but can't get any help.

https://stackoverflow.com/questions/79315903/custom-build-of-telerik-kendo-themes