Questions on Kendo UI for jQuery Forum

2 answers

2.2K+ views

Kendo switch change event using jquery

is there any way ,to get the Change event of kendo switch with jquery?i dont want to use kendo helper

<input type="checkbox" id="tst" aria-label="Notifications Switch" />
the following does not work:

$("#tst").change(function(){ alert("works");});

i

Switch (Mobile)

answered on 18 Nov 2021

0 answers

135 views

Move scrollbar of long table with locked columns below footer but keep footer in view

Dojo

The above Dojo shows my code. I have a table with many rows. I want the first row locked and the table has a footer. I want the footer to remain visible regardless or where the user scrolls vertically. I want the footer to track horizontally with the rest of the table though so the columns stay lined up. This has to also be responsive so it works on various screen sizes and devices. I tried the sample in one of the previous questions on here but that doesn't work with the conditions mentioned above. How would I accomplish this?

Grid

asked on 18 Nov 2021

1 answer

837 views

How to validate an optional date with a date input mask

I have a dateinput field that I need to validate. Unfortunately I can't seem to figure out how to make it work. The requirements are as follows:

1. The date is optional.

2. If the date is provided, it must be a valid date.

3. The input mask could be in various languages.

When I try to validate I get invalid date when the date field just has the input mask (month/day/year) showing.

Here is a dojo showing my example.

https://dojo.telerik.com/@dojolee/ukIKedUL

DatePicker

answered on 18 Nov 2021

1 answer

2.3K+ views

One validation error for group of checkboxes

I have a list of checkboxes and I need to validate if at least one is checked. If not, I want one error message to appear for the entire group. That message should appear in a separate <span></span> below the group. I know how to do this with radio buttons but these are checkboxes so they can't all have the same name. I've looked at the other posts on here from 2013, 2015, and 2019 but none of them really answer my question. How would I do something like that?

Validation

answered on 18 Nov 2021

1 answer

517 views

autocomplete attribute on AutoComplete widget

How can I set the HTML autocomplete attribute on an input which uses Kendo UI AutoComplete widget to a value other than "off"?

So far, I have tried the following code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1109/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1109/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1109/js/kendo.all.min.js"></script></head>
<body>
  <input type="text" id="countries" autocomplete="one-time-code" />
  <script>
  $(function(){
      
      var countries = [ "Australia", "Canada", "United States of America"];
    
      var countriesDataSource = new kendo.data.DataSource({
        data: countries
      });
      $('#countries').kendoAutoComplete({
        dataSource: countriesDataSource
      });
  });
  </script>
</body>
</html>

But if you see the screenshot, no matter the HTML markup, the input gets the autocomplete="off" attribute (and value). Guessing this is part of the autocomplete widget?

I am trying to get round the Chrome issue reported here where the previous input to an input[type=password] is autofilled with a username / email.

So want to know how to set the autocomplete attribute on a Kendo-ified AutoComplete input, to a value of my choice.

Alternatively, any solid method of avoiding Chrome autofill on the Kendo UI AutoComplete widget would be greatly appreciated.

Thanks in advance

AutoComplete

answered on 18 Nov 2021

0 answers

195 views

What's causing the row height styles being added to every row in virtual scroll and how do I stop it?

When scrolling with frozen columns and virtual scrolling enabled, the grid freezes a few seconds when you scroll back up to previously loaded rows. Looks like kendo is adding inline height styles to each row that's causing the jank.

I see in the demos for frozen columns and virtual scrolling this does not happen. Is this being cause by a specific grid setting that we have? Is it possible to disable this?

Grid

updated question on 16 Nov 2021

2 answers

620 views

[Solved] MaskedTextBox mask doesn't work correctly with promptChar: "" or " "

Hello,

I tried to hide the mask prompt characters. But I got strange results.

If I use empty string as a promptChar

input.kendoMaskedTextBox({ mask: "&", promptChar: "" });

then the mask doesn't work at all.

When I use a space as a promptChar

input.kendoMaskedTextBox({ mask: "&", promptChar: " " });

then the mask enforces the length but not contents - I can enter a space even when I shouldn't be able.

When I use an underscore as a promptChar or use default

input.kendoMaskedTextBox({ mask: "&", promptChar: "_" });
input.kendoMaskedTextBox({ mask: "&" });

then everything works as it should, I can enter only one character but not a space.

Is this a feature or a bug? I'm using Kendo UI v2021.1.119.

MaskedTextBox

answered on 16 Nov 2021

1 answer

473 views

Set Date on renderMessage in KendoChat

Is there a way to set the date on the renderMessage method. I'm using the renderMessage to pre-populate the chat instance with a predefined, persistent chat message. When you click on the chat bubble, it shows you the time in hh:mm:ss format.

I'm curious, is there a way to set the date on the renderMessage. If yes, can you control what shows up when you click on it (i.e. old stuff, you most likely want to see the time.

Thanks,

Richard

Chat

answered on 16 Nov 2021

1 answer

475 views

Tabstrip getting dashed "select" box around element, when clicked on. Wasnt there with older Kendo version.

When clicked on tabstrip tab, it gets "selected" box around it. It is quite ugly when you have biggest tabstrips and nice UI around it.

Is there a way to disable it? I tried navigatable : false, but no help.

Example:

https://dojo.telerik.com/iveBAPAK

TabStrip

answered on 16 Nov 2021

1 answer

228 views

grid each cell dynamic calculation question

Hello,

I am trying to create a function that dynamically calculates the value input by the user in each cell of the row through kendo grid.

When the user enters a value in a specific cell, we want the calculation to be made in the save event function bound to the grid.

However, if you try to apply the calculated value to each cell through e.model.set, the save event continues to occur.

Uncaught RangeError: Maximum call stack size exceeded

I am getting the above error.

Any other methods or advice for doing this?

Directly assigning values to dataItem requires refresh() , so it loses focus and is difficult to use.

Below is the code for example.

Please reply.
thank you.

<!DOCTYPE html>
<html>

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

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.914/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2021.3.914/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.914/js/jszip.min.js"></script>
</head>

<body>

    <div id="testGrid"></div>
    <script>
        function grid_save(e) {
            if (e.values.A >= 0 || e.values.A <= 0) {
                e.model.set("A", e.values.A);
                e.model.set("B", e.model.C - e.values.A);
                e.model.set("C", e.values.A + e.model.B);
                e.model.set("STATUS", "MODIFY");
            }
            // B
            else if (e.values.B >= 0 || e.values.B <= 0) {
                e.model.set("B", e.values.B);
                e.model.set("A", e.model.C - e.values.B);
                e.model.set("C", e.model.A + e.values.B);
                e.model.set("STATUS", "MODIFY");
            }
            // c
            else if (e.values.C >= 0 || e.values.C <= 0) {
                e.model.set("C", e.values.C - e.model.A);
                e.model.set("STATUS", "MODIFY");
            }
        }
        $("#testGrid").kendoGrid({
            columns: [
                { field: "A" },
                { field: "B" },
                { field: "C" },
                { field: "STATUS" }
            ],
            dataSource: {
                data: [
                    { id: 1, A: 0, B: 0, C: 0, RESULT: "READY" }
                ],
                schema: {
                    model: { id: "id" }
                }
            },
            editable: true
        });
        
        var testGrid = $("#testGrid").data("kendoGrid");
        testGrid.bind("save", grid_save);
    </script>
</body>

</html>

Grid

answered on 15 Nov 2021