Questions on Kendo UI for jQuery Forum

1 answer

25 views

I have a sample at https://js.do/sun21170/kendouitextboxsample1, which shows up as in the screenshot below when rendered.

When I run the same sample at https://dojo.telerik.com/QASrBLOT, this problem is not there because no autofill occurs.

So, my question is how to prevent the overlap in my first sample when the autofill is occurring?

TextBox

updated answer on 29 Sep 2025

1 answer

25 views

Prakash Hinduja Geneva (Switzerland) How do I set up Kendo UI components in my project?

Hello, I’m Prakash Hinduja, born in India and now living in Geneva, Switzerland (Swiss). I’m new to Kendo UI and want to set up its components in my project. Any tips, please suggest me.

General Discussions

updated answer on 26 Sep 2025

0 answers

39 views

DatePicker Min and Max value permit date out of range

When I use the DatePicker, the calendar displays a date between the minimum and maximum values, which is fine. However, if I manually enter a date before the minimum or after the maximum value, nothing prevents me from doing so. Even worse, the change event is no longer triggered. There's no way to validate the input manually if it's out of range.

Wouldn't it have been better for the control to block manually entered values that exceed the allowed range?

DatePicker

Validation

asked on 26 Sep 2025

1 answer

16 views

Get rid of hours:minutes text in time picker

Hi all,

I am using TimePicker in asp.net mvc. Issue is that when I remove either hours or minutes then it shows text 'hours' or' 'minutes'. How Can I remove that. I have tried couple of ways but did not work?

Want to remove this text?

Please advise how this can be done.

Thanks in advance

TimePicker

answered on 26 Sep 2025

1 answer

17 views

Mvvm: grid from array of arrays

I'd like to build a grid of divs.
I have an array of arrays, like this:

[ [ { "value": "0"}, { "value": "1", } ] ]

(Sorry, but I can't indent the code properly in the editor.)

I can't do it with MVVM.

This is how I do it:

Template container:

<div data-bind="source: matrix" data-template="frame-cells-row-tmpl">
</div>

Template row:

<script type="text/x-kendo-template" id="frame-cells-row-tmpl">
    <div class="frame-grid-row" data-bind="source: data" data-template="frame-cells-col-tmpl">
    </div>
</script>

Template col:

<script type="text/x-kendo-template" id="frame-cells-col-tmpl">
    <div class="frame-grid-col">
         #: value #
    </div>
</script>

The error I get is:

Uncaught TypeError: e.bind is not a function

It works fine if I do this:

<script type="text/x-kendo-template" id="frame-cells-row-tmpl">
    <div class="frame-grid-row" >

 ## for(var i=0; i < data.length; i++) { ##
<div class="frame-grid-cell">
 ##= data[i].value ##
            </div>
 ## } ##

    </div>
</script>

Why can't I use MVVM?

In the "row" template, is "data" the correct variable name for "source"?

Many thanks!

MVVM

answered on 26 Sep 2025

1 answer

15 views

Taskboard Custom Editor and Customization

Hello. I am planning to use the taskboard for my code, but I would like to customize it a little bit. However Im finding almost any customization to be not possible. Im working with Copilot and its telling me a couple things that dont appear to be true:

1. On the datasource tab, I have commented out code because Copilot has told me that if I use the from attribute when defining the model that those fields would automatically map to its default title and description fields. It stays undefined until I switch to the default values.

2. The custom editor I have specified does not get acknowledged by the code. It simply loads the default one with Title and description fields. At the very minimum I just want it to show different labels than title and descritpion, such as PartyName and comments. However Im not seeing any way to not just load the out of the box solution.

Are my requests possible? The example code on this site just appear to use out of the box editing and mapping.

<body>
    <div id="taskBoard"></div>
    <script id="JurisdictionEditor" type="text/x-kendo-template">
        <div style="padding:2em; color:red;">Custom Editor Rendered!</div>
    </script>
    <script>
        $(function () {
            $("#taskBoard").kendoTaskBoard({
                dataSource: [
                    { id: 1, title: "Jane", description: "Test", status: "cited" }
                    // { id: 1, PartyName: "Jane", comments: "Test", status: "cited" } //doesnt work
                ],
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { type: "number" },
                            title: { from: "PartyName", type: "string" },
                            description: { from: "comments", type: "string" },
                            PartyName: { type: "string" },
                            comments: { type: "string" },
                            status: { type: "string" }
                        }
                    }
                },
                columns: [
                    { text: "Cited", status: "cited" }
                ],
                cardTemplate: "<div class='k-card-header'>#: PartyName #</div><div class='k-card-body'>#: comments #</div>",
                editorTemplate: kendo.template($("#JurisdictionEditor").html())
            });
        });
    </script>
</body>

TaskBoard

answered on 23 Sep 2025

5 answers

1.7K+ views

multiSelect in kendo grid popup

I have an editor configured for a column which can reflect multiple values - the multiselect control binds to the source datasource just fine when a grid row is edited or a new record is being created but for the pure edit portion I need to preselect the current values from the grid row datasource - the values are there in the row object because I can see them when I do a console.log of the model field via e.model.get("UserRoleSectors") (example of value is ["2","25"] ) - however in the grid edit event handler if I try to set the value for the multi-select to ensure it reflects what values are already bound to the record via the statement e.container.find('[name="UserRoleSectors"]').data("kendoMultiSelect").value(e.model.get("UserRoleSectors")); - nothing is selected even though the values are available in the multiselect. Am I doing something wrong?

editor: function (container, options) {

// create an input element

var input = $('<select multiple="multiple" />');

// set its name to the field to which the column is bound

input.attr("name", options.field);

// append it to the container

input.appendTo(container);

// initialize a Kendo UI MultiSelect

input.kendoMultiSelect({

autoBind: true,

valuePrimitive: true,

dataTextField: "SectorAcronym",

dataValueField: "SectorNo",

dataSource: $scope.sectorsDataSource

});

MultiSelect

answered on 22 Sep 2025

1 answer

14 views

LineChart container's scaling affects mouse events

Hi Telerik team!

I'm trying to scale my linechart by setting zoom Css property, but this is affecting mouse events and messing up the tooltip position and the marking wrong focused item.

As you can see here:

https://dojo.telerik.com/RQNGZUUK

So, is possible to scale linechart without affect mouse events?

Regards,

Gustavo

Charts

answered on 22 Sep 2025

0 answers

10 views

Display original size when inserting images

Spreadsheet

asked on 22 Sep 2025

0 answers

25 views

Kendo UI (2018-2019) template #= in calc() causes Invalid template on modern browsers (Edge 140 / Chrome)

Hello —

we're seeing an Uncaught Error: Invalid template when rendering a Kendo template that contains a calc() CSS expression with a #= ... # interpolation. The template works on older browsers (Edge 139 and older) but fails on newer ones (Edge 140+, recent Chrome). Could this be a compatibility/escaping change in the template engine or browser JS engine? Any guidance or workaround would be appreciated.

Code Used:

<!--SmartView Pipeline STEP Template-->
<script id="smartViewPipelineStepTemplate" type="text/x-kendo-template">
    <div class="col-xs-4">
        <div class="contenitor-element-process-monitor">
            <div class='pipelineTask element-process-monitor
                        #if(completion() < 100){ if(completion() > 0){ # blue # } }#
                        #if(completion()==100){ # complete # }#
                        #=type#'
                 idStep='#:idStep()#'>
                <div class='clickableStep'>
                    <div class='process-monitor-name'>#: stepNumber #</div>
                    <div class='process-monitor-description'>#:stepNameShort()#</div>
                    <div class='info-process-monitor'></div>

                    <!-- erroring line -->
                    <div style="width:calc(#=completion()#% - 24px)" class='progress-process-monitor clickableStep'>
                        <p>#=completion()#%</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
</script>

Error shown in console

Uncaught Error: Invalid template: '<div class="col-xs-4"> ... <div style="width:calc(#=completion()#% - 24px)" ...>'

Environment/Version

Kendo UI: v2019.1.220 (Kendo jQuery bundle in production)
jQuery: 1.12.4 included in the project
Browsers where error occurs: Edge 140+, recent Chrome (older Edge 139 works)
Template uses legacy Kendo template syntax (#=, #:, # if(...) { # ... # } #)

Templates

asked on 19 Sep 2025