Questions on Kendo UI for jQuery Forum

1 answer

2.2K+ 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

490 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

146 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

567 views

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

419 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

442 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

197 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

1 answer

120 views

Failed to apply All filter on empty cell

Hi,

If I have an empty cell and I apply a filter -all, it is throwing an error like the one I show in the attached file. How could I fix that? Thanks

Spreadsheet

answered on 15 Nov 2021

0 answers

197 views

Freeze filter row while remote data is loading

My grid is attached to remote data, my grid has filter row.
If user set one filter, and while data still is loading if set another filter on other column, gird ignores next filter settings and do not send new request to server.
In that case second filtering drops silently.(filter row set filter value but there is no request and data is not filtered)
Is there a way to some how cancel data loading when new filter event came applinked?
Is there a way to some how disable filter row of grid while data is loading ?
I do now control event of filtering in datasoruce

var sourceListaRacuna =
{
    datatype: "json",
    method: "post",
    type: "post",
    datafields: [
        { name: 'racunId', type: 'int' },
        { name: 'ts', type: 'date' },
        { name: 'sklSifra', type: 'string' },
        { name: 'sklNaziv', type: 'string' },
        { name: 'kasa', type: 'string' },
        { name: 'blagajnik', type: 'string' },
        { name: 'hrc', type: 'string' },
        { name: 'total', type: 'number' },
        { name: 'isStorno', type: 'bool' },
        { name: 'isPrekinut', type: 'bool' },
        { name: 'isPrebijanje', type: 'bool' },
        { name: 'reqL1audit', type: 'bool' },
        { name: 'reqL2audit', type: 'bool' }
    ],
    url: "../../BO/ListaRacunaData",
    key: "racunId",
    formatData: function (data) {
        return {
            'GridFilter': JSON.stringify(data),
            'initGrid': initGrid
        };
    },
    filter: function (data) {
        if (data.length === 0 || data.findIndex(x => x.datafield === 'ts') < 0) {
            $("#samo100").html("Filter datuma je obavezan");
            $('#gridRacuna').jqxGrid('clear');
            return false;
        }
        else
            {
            var ado = data.find(x => x.datafield === 'ts').filter.getfilters();

            var poruka = "";

            if (ado.length === 1) {
                poruka += "Na datum: "+ ado[0].value.toLocaleDateString();
                   }
            else {
                poruka += "Od: " + ado[0].value.toLocaleDateString() + " do " + ado[1].value.toLocaleDateString();
            }

            $("#samo100").html(poruka);
            $("#gridRacuna").jqxGrid('updatebounddata', 'filter');
        }
    }
};

General Discussions

updated question on 13 Nov 2021

1 answer

503 views

Timepicker always displays midnight on blur

I am having an issue where when I select a different time from the timepicker it is reverting back to zero. I have created a dojo with 2 timepickers. Both are initiated in a loop and stored in an object with the key being the id of the input. My issue is that if I set dateInput to true the time reverts back to midnight on blur. When I console.log the value though it is the value I picked. This is only an issue on the timepicker that has the min and max options set. I need the user to be able to input a time using the datepicker formatting and only choose from select times.

Dojo:

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

DatePicker

answered on 12 Nov 2021