Questions on Kendo UI for jQuery Forum

3 answers

750 views

We need your feedback, because we are considering changes in the release approach for Kendo UI for jQuery. Please provide your feedback in the comments section below:

1. Is it hard to understand the version numbers of our releases? If yes, what makes them hard to understand them?

2. Would semantic versioning (SemVer) of our releases make it easier to understand our version numbers and what's behind them?

3. If we go with SemVer, we might need to start with version 3000.0.0 as we currently use 2022.x.x. Please share your thoughts about this approach and ideas for what number versioning would work best for you.

General Discussions

answered on 23 Jun 2023

0 answers

1 view

Validator giving inconsistent results

Hello,

Here is my validator code:

<script type="application/javascript">
    $(document).ready(function () {
        console.log("Ready");
        // Initialize Kendo MaskedTextBox for Phone Number
        $("#PhoneNumber").kendoMaskedTextBox({
            mask: "000-000-0000"
        });

        // Set up Kendo Validator with a custom rule
        validator =
            $(".k-edit-form-container").kendoValidator({
                rules: {
                    phoneMaskRule: function (input) {
                        // Check if it is the PhoneNumber input and the value matches the mask
                        if (input.attr("name") === "PhoneNumber") {
                            var maskedInput = input.data("kendoMaskedTextBox");
                            // The masked textbox's `raw()` method gets the actual value without placeholder characters
                            // Checking that it has a complete value (no _ symbols in "raw" value)
                            var retVal = maskedInput && maskedInput.value() && maskedInput.raw().length === 10;
                            return retVal;
                        }

                        return true; // Let other fields validate as normal
                    },

                    nameValidation: function (input) {
                        // Check for FirstName and LastName validation
                        if (input.is("[name=UserFirstName]") || input.is("[name=UserLastName]")) {
                            var retVal = input.val().length > 2; //Ensure there is at least 2 characters in each name. 
                            console.log("Name: " +
                                (retVal ? "Passed" : "Failed"));
                            return  retVal;
                            
                        }
                        return true; // No other inputs are affected by this rule
                    },

                    emailFormatValidation: function (input) {
                        // Check for Email validation
                        if (input.is("[name=Email]")) {
                            // Regex for a basic email validation
                            var emailRegex =/^[a-zA-Z0-9._%+-]+@@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                            var retVal = emailRegex.test(input.val());
                            console.log("email: " +
                                (retVal ? "Passed" : "Failed"));
                            return retVal
                        }
                        return true; // Other inputs are skipped
                    }


                },
                messages: {
                    phoneMaskRule: "Please enter a valid phone number in the format 999-999-9999.",
                    nameValidation: "First and Last Name must have at least 3 characters.",
                    emailFormatValidation: "Please enter a valid email address."

                }
            }).data("kendoValidator");
    });
</script>

This validates the user input and usually works correctly. Once data is entered, I check the validator before submitting:

function submitClinic() {

    resetInactivityTimer(duration);
    if (model == null) {
        model = {};
        model.ClinicUserID = "";
    }
     // Check if form is valid 
    if (!$(".k-edit-form-container").kendoValidator().data("kendoValidator").validate())
    {
        return false; // not valid
    }
...
}

So for some reason, the validator starts returning "not valid" out of the blue. I can click through the form and see that the validator validates the fields correctly, but I press my submit button, and suddenly it claims the fields fail

I thought maybe the validator object is null, but it's clearly calling the validation functions, but for some reason it fails? Any suggestions would be very helpful.

Thanks!

Russ

TextBox

Validation

asked on 14 Apr 2025

0 answers

8 views

Help with Dialog Error

I am trying to use Kendo's Dialog to get user confirmation of an action. I am using Kendo v 2022 3.913 with jQuery 3.7.1, but I get an error when trying to initialize the component (see below). Has anyone experienced this? If so, how did you fix it? I think I have loaded all the dependencies.

The error:

Dialog

asked on 12 Apr 2025

0 answers

10 views

Regarding Kendo grid

Hi,

I have few questions regarding kendo grid, i have implemented kendo grid for three nested levels, in every level it has checkboxes, i want to do if i select the parent level checkbox, it should expand its child and all child checkboxes should also selected, is it possible in kendo-grid??
if so do you have any demo link?

i have attached the image for you understanding, but in that it has only one level, in my case i have two nested levels

Thank you

Grid

updated question on 11 Apr 2025

0 answers

8 views

Kendo Grid - prevent server side filtering

Settings of the data source are as follows:

$scope.dataSource = new $kendo.data.DataSource({
    pageSize: 10,
    serverPaging: false,
    serverFiltering: false,
    filterable: true,
    filter: {},
    schema: {
        model: {
            id: "id"
        }
    },
    transport: {
        read: read
    }
});

The data source is bound through `k-data-source` in template.

Even if the serverFiltering is set to false, when I write something to the filter textbox, the read function is invoked, but just for the first time.

Any help, please?

Data Source

Grid

updated question on 11 Apr 2025

0 answers

8 views

CheckBoxFor causing JavaScript error and not working

Hello I have the following MVC code in a .cshtml file for an ASP.MVC application:

@(Html.Kendo().CheckBoxFor(m => m.IsNotificationSuppressed).Checked(false).Label("some text"))

Until a few days ago, this line worked fine. But we've recently updated Kendo to the most recent version and now it's throwing the following JavaScript error:

Uncaught TypeError: jQuery(...).kendoCheckBox is not a function

And the checkbox appears but without a label.

I've already determined that neither "m" (the view model) nor the property IsNotificationSuppressed are null. I cannot find any information as to what is causing this CheckBoxFor to not function and its use here matches the examples given in every example I can find for the Kendo checkbox.

What is wrong here and how do I fix this?

Also the kendo.all.min.js file appears to be a 2016 version and ctrl-f for kendocheckbox finds nothing. Is this the problem? How do I update this file and why didn't it update when the rest of Kendo was updated?

Checkbox

updated question on 10 Apr 2025

1 answer

177 views

Kendo Chat , Text format problem

Hello Everyone,
I use Kendo Chat. the user writes a text (promt). this prompt goes to my endpoint and returns a response. i print this response back to the chat, but there is a problem. for example, the incoming text :
"
This is a sample article. Sample text.
Sample text on the second line.
Sample text in the third line.
Sample text in the fourth line.
"
This is what the output looks like when I print it:
"
This is a sample article. Sample text, sample text on the second line, sample text on the third line, sample text on the fourth line.
"

I'm tired of searching for a solution. I can't find it.
My code snippet:

  $.ajax({
            url: SendPrompt.fmt(encodedMessage, encodedUserName), 
            async: true,
            contentType: 'application/json',
            type: "POST",
            dataType: "json",
            processData: false,          
            headers: { Authorization: tokenData() },
            beforeSend: setHeader,
            success: function (data) { 
                    var answer = data.Answer.replace(/(?:\r\n|\r|\n)/g, '\n\n');                   
                chat.renderMessage({
                    type: "MyText",
                    text: answer 
                }, {
                    id: kendo.guid(),
                    name: gptName
                });
            }, error: function (jqXHR, textStatus, errorThrown) {
                console.log("Status:", textStatus);
            },
            complete: function () {
                messageTemplate.animate({ opacity: 0 }, 500, function () {
                    $(this).css({ display: 'none' });
                });
                chat.wrapper.find(".k-input").prop('disabled', false);
                chat.wrapper.find(".k-button-send").prop('disabled', false);
            }
        });

Please help me..

Chat

answered on 10 Apr 2025

0 answers

10 views

Datepicker is not opening when jqery is updated to 3.5.0 shows error

below is the code of popup and javascript function



<div class="modal fade" id="DatePickerZoneModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="DatePickerZoneModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" style="min-width: 375px;">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">
@Localizer["lblSelectDate"]
<span class="lblDate fst-italic" style="color:lightgray;"></span>
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="height: 120px; padding: 2.5rem;">
<div id="dvdatezone">
<span class="spnmandatory hide" style="color: red; font-weight: bold; font-size: 18px;">*</span>
<label style="float:left; margin-right: 10px; margin-top: 5px;">Date : </label>
<input type="text" id="txtDatePicker">
</div>
<label id="lblmsg" style="color:red; margin: 0.5rem 4rem; font-size:15px;"></label>
<span data-for="myDatePicker" class="k-invalid-msg"></span>
</div>
<div class="modal-footer">
<button type="button" id="btnDateSave" class="btn btn-default btnCreate" onclick="return UpdateDate();">
<i id="innericon" class="fal fa-check-circle"></i>
<span id="innerdiv">@Localizer["lblSavechanges"]</span>
</button>
<button type="button" class="btn btn-default btnCancel" data-bs-dismiss="modal">
<i id="innericon" class="fal fa-ban"></i>
<span id="innerdiv">@Localizer["lblClose"]</span>
</button>
</div>
</div>
</div>
</div>

// Vaibhav UpdateDate Code for Bootstrap 5.3.3

function UpdateDate() {
var $txtDatePicker = $("#txtDatePicker");
var editor = $("#txtDatePicker").val();
var textZoneId = $("#hdnTextZoneId").val();
var index = textZoneId.split("_");
var frShowDocs = $frShowDocs[0].contentWindow;
var commmentDivtext = frShowDocs.document.getElementById(textZoneId);
var plainText = editor.replace(/<[^>]*>/g, "");
var cnt = 0;
if (frShowDocs.objTxtZoneArray[index[1]] != undefined) {
cnt = 1;
} else {
cnt = 0;
}

//Asingh: first replace <br /> to "!!_!!"
var outputText = plainText.replace(/<br\s*[\/]?>/gi, '!!_!!');
outputText = outputText.replace(/!!_!!/gi, '\n');
console.log('outputText : ' + outputText);
commmentDivtext.innerText = outputText;

jsonInputInfos.TextZones[index[cnt]].RTFTXT = outputText; //<<<ben: To see: should be not html encoded, at the moment if a "é" is here it's saved as "é in the db ...
jsonInputInfos.TextZones[index[cnt]].RTFTXTDECODE = outputText;

//Prab Fix: Client got enccoded french text
frShowDocs.objTxtZoneArray[index[cnt]].lastValue = outputText;
frShowDocs.objTxtZoneArray[index[cnt]].isUpdated = true;

var validator = $txtDatePicker.data("kendoValidator");
if (!validator.validate()) {
return false;
}

$("#DatePickerZoneModal").modal('hide');
return false;
}

// $("#txtDatePicker").on("focus", function () {
// var dp = $(this).data("kendoDatePicker");
// if (dp) dp.open();
// });

function DateZoneModal(clickedDivId, isMandatoryflag) {
if (isMandatoryflag)
$(".spnmandatory").removeClass("hide");
$("#btnDateSave").attr('disabled', false);
var $hdnTextZoneId = $("#hdnTextZoneId");
$hdnTextZoneId.val(clickedDivId.id);
var textZoneId = $hdnTextZoneId.val();
var index = textZoneId.split("_");
$("#lblmsg").text(' ');
//read iframe elemnt
var frShowDocs = $frShowDocs[0].contentWindow;

currentHighlightZone = parseInt(clickedDivId.dataset.highlightid);
frShowDocs.DisplayArrow(currentHighlightZone, true, false);

var commmentDivtext = frShowDocs.document.getElementById(clickedDivId.id);
var zoneText = commmentDivtext.innerText;

zoneText = zoneText.replace(/\n/g, "!!_!!");
zoneText = zoneText.replace(/!!_!!/g, "<br />");
console.log(clickedDivId.dataset.dateformat);

var $txtDatePicker = $("#txtDatePicker");
var $DatePickerZoneModal = $("#DatePickerZoneModal");

// 1. Destroy previous DatePicker instance (if exists)
if ($txtDatePicker.data("kendoDatePicker")) {
$txtDatePicker.data("kendoDatePicker").destroy();
$txtDatePicker.unwrap(); // Removes Kendo's wrapper (important to avoid offset errors)
// $txtDatePicker = $('<input type="text" id="txtDatePicker" />'); // Recreate input
}
setTimeout(function () {
$txtDatePicker.kendoDatePicker({
dateInput: true,
validation: { required: true },
format: clickedDivId.dataset.dateformat,
});
}, 100); // delay ensures modal is fully rendered

$txtDatePicker.kendoValidator({
rules: {
dateValidation: function (input) {
if (input.is('[data-role="datepicker"]')) {
var value = $(input).val();
var dformat = $(input).attr("data-dateformat");
var date = kendo.parseDate(value, dformat);

if (value == "" || !date) {
$("#btnDateSave").attr('disabled', 'disabled');
$("#lblmsg").text(txtdatevalidmsg);
$(input).val('');
return false;
}
else {
$("#btnDateSave").attr('disabled', false);
$("#lblmsg").text(' ');
return true;
}
}
return true;
}
},
messages: {
dateValidation: txtdatevalidmsg
}
});

$txtDatePicker.val(zoneText);
$txtDatePicker.attr("data-dateformat", clickedDivId.dataset.dateformat);
$txtDatePicker.attr('placeholder', clickedDivId.dataset.dateformat.toUpperCase());
$DatePickerZoneModal.find('.lblDate').text('(' + clickedDivId.dataset.dateformat.toUpperCase() + ')');
$('.k-datepicker').attr('style', 'width:initial;');
// $("#lblmsg").text(' ');
//$("#btnDateSave").attr('disabled', false);
$DatePickerZoneModal.modal('show');
}

asked on 10 Apr 2025

1 answer

13 views

Problem with reorderable Kendo grid columns in RTL languages

Hi;

I have a problem with kendo grid on rtl languages. the horizontal scrollbar doesn't move as I drag a column in order to reorder it!

and when trying to move the last column, the scrollbar jumps to the beginning and doesn't let you do your thing.

Here is a replication of my problem: https://dojo.telerik.com/pMuIrqLj

can anybody help me solve this issue?

Grid