Questions on Kendo UI for jQuery Forum

1 answer

39 views

Kendo Chart event when drop item over axis

I'm trying to add series to a specific axis when users drag an item from a treeview and drop it over some axis.

To implement this scenario, is necessary to know the index of the droped axis.

There is any event that I can subscribe to get axis mouse drop?

Regards,

Gustavo

Charts

Drag and Drop

answered on 17 Apr 2025

1 answer

55 views

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

answered on 17 Apr 2025

2 answers

135 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

answered on 17 Apr 2025

1 answer

68 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

answered on 16 Apr 2025

1 answer

41 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

answered on 16 Apr 2025

1 answer

77 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

answered on 15 Apr 2025

0 answers

51 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,
    schema: {
        model: {
            id: "id"
        }
    },
    transport: {
        read: read
    }
});
 
$scope.gridOptions = {
    selectable: "multiple",
    pageable: {
        pageSizes: [5, 10, 15, 20, 25, 50]
    },
    persistSelection: true,
    resizable: true,
    filterable: { mode: "row" },
    sortable: {
        mode: "multiple",
        allowUnsort: true
    }
};
 
// template
<div kendo-grid k-data-source="dataSource " k-options="gridOptions">
</div>

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 15 Apr 2025

1 answer

103 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');
}

answered on 15 Apr 2025

0 answers

69 views

Having Problems sizing the kendoNumericTextBox

Hi,

Having problems getting the spinner portion of the kendoNumericTextBox to show up when width is les than 140px. 150pxs is ok, but at 140px it does not move over to the left it starts getting partially hidden:

I am using Kendo version: 2023.3.1010. Is there a work around so the spinner buttons appear when less than 140 pixels in width? Moving up to a different version at this time is not an option unfortunately.

                <table id="date-picker-table">
                    <tbody>

                        <tr>
                            <td class="date-cell" style="width:16%">
                                <label for="startDate">Start Date:</label>
                                <input id="startDate" style="width:180px" />
                            </td>
                            <td class="date-cell" style="width:19%">
                                <label for="numb-days">Number of Days:</label>
                                <input id="num-days" style="width:140px" />
                            </td>
                            <td class="date-cell">
                                <label for="endDate">End Date:</label>
                                <input id="endDate" style="width:180px" />
                            </td>
                        </tr>
                    </tbody>
                </table>

Here is the initialization of the control in JavaScript:

    $("#num-days").kendoNumericTextBox({

        min: 0,             // Minimum value
        max: 9999,          // Maximum value (4 digits)
        decimals: 0,        // Restrict to integers (no decimals)
        format: "n0",       // Display format for integers
        restrictDecimals: true // Prevent decimal input
    });

Any work around or quick patch would be awesome.

Regards,

George

NumericTextBox

asked on 14 Apr 2025

0 answers

97 views

Drawing Dom Chart for PDF Export with custom parameters

I am using

kendo.drawing.drawDOM

to draw a chart from DOM into a template for exporting as a PDF. However the business want to add the custom parameters into the footer. This works but loses the default page numbering. I understand adding custom parameters overwrites the default params so I would like to know if there is a work around or correct way to do this.. One which will still allow us to correctly number the pages.

 $scope.exportOther = function (objId, filename){
            $scope.printDt = $.RGMPDate.onParseJSONUIDate(new Date());

            const hiddenElement = document.getElementById('griddiv');


            hiddenElement.style.visibility = 'visible';


            kendo.drawing.drawDOM($(".chart-content-wrapper"), {
                paperSize: "A4",
                landscape: true,
                margin: {
                    left: "2cm",
                    top: "2cm",
                    right: "2cm",
                    bottom: "2cm"
                },
                forcePageBreak: ".page-break",
                scale: 0.5,
                title: filename,
                template: kendo.template($("#page-template").html())
                    (
                        {
                            pageNum: "",
                            totalPages: "",
                            fBasisSelectedLockedTxt : $scope.fBasisSelectedLockedTxt,
                            rgod: $scope.printDt,
                            fTimespanSelectedTxt: $scope.fTimespanSelectedTxt
                        })
                

            }).then(function (group) {

                kendo.drawing.pdf.saveAs(group, filename);
                hiddenElement.style.visibility = 'hidden';
            });

    
        };

Charts

Drawer

asked on 14 Apr 2025