Settings of the data source are as follows:

below is the code of popup and javascript function

 <!-- #region  Vaibhav Updated Bootstrap 5.3.3 * -->
 <!-- DatePicker Text Modal -->
 <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 "&eacute; 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');
}

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.

Here is the initialization of the control in JavaScript:

Any work around or quick patch would be awesome.

 

Regards,

George

 

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. 

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: 




Please help me..

Hello!

Is there a simple way to remove autocomplete from gridfilter?
I want to use filterbox. I need filterbox. But I don't want autocomplete.

https://dojo.telerik.com/hYMEJZcB

Thank you

Hello.
A developer who has purchased and is using a Kendo Chart license with a company account.
I'm going to proceed with development using the Kendo Gantt function this time, but there are some problems.
I'm going to register multiple task in one Row, is there a way?
I've tried several times, but I can't register multiple task in one row.

Is it possible to force the grid .saveAsExcel() function to maintain the sort order of the columns if the user manually adjusts the sorting?

I am trying to use the PDFViewer for the first time. I am using PDFJS processing. In the examples it is easy to understand including the pdf.mjs and worker.mjs as type='module' along with kendo as type='module'. However, if I understand this correctly type='module' delays loading until after the cshtml page has completed. We use a common layout page that loads required script libraries (including kendo) as part of the page. Other parts of the layout and pages require kendo to be loaded and accessible, so it cannot be changed to type='module' without breaking stuff. Is it possible to load the PDFJS libraries as regular javascript includes rather than modules ?

Hello,

I'm trying to retrieve data from the kendoAutoComplete component, but I'm encountering an issue when the input is hidden.

The happy path works perfectly when the input is visible. For example:

<input id="test">

var data = ["One", "Two"];
$("#test1").kendoAutoComplete({
  dataSource: data
});

$("#test1").data('kendoAutoComplete').dataSource.data() // return  ["One", "Two"]

However, the problem arises when the input is not visible (e.g., using style="display: none;"). I use the same code, but when I call the data() method, it does not return the original data. Instead, it returns undefined until I make the input visible again and reload the data source. Only then does it start working correctly.

Example:

<input id="test" style="display: none;>

var data = ["One", "Two"];
$("#test1").kendoAutoComplete({
  dataSource: data
});

$("#test1").data('kendoAutoComplete').dataSource.data() // return  "undefined"

Is there a workaround or specific configuration to ensure the data() method behaves as expected, even when the input is hidden?

Thank you in advance for your assistance!