Telerik Forums
Kendo UI for jQuery Forum
1 answer
135 views

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?

Viktor Tachev
Telerik team
 answered on 15 Apr 2025
0 answers
110 views
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?

Jiří
Top achievements
Rank 1
 updated question on 15 Apr 2025
1 answer
154 views

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



Nikolay
Telerik team
 answered on 15 Apr 2025
0 answers
131 views

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

 

George
Top achievements
Rank 3
Bronze
Bronze
Iron
 asked on 14 Apr 2025
0 answers
167 views

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

    
        };


James
Top achievements
Rank 1
 asked on 14 Apr 2025
1 answer
411 views
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..
Heythem
Top achievements
Rank 1
Iron
 answered on 10 Apr 2025
1 answer
125 views

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

Neli
Telerik team
 answered on 09 Apr 2025
0 answers
104 views
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.
John
Top achievements
Rank 1
 asked on 02 Apr 2025
1 answer
169 views
Is it possible to force the grid .saveAsExcel() function to maintain the sort order of the columns if the user manually adjusts the sorting?
Neli
Telerik team
 answered on 02 Apr 2025
10 answers
943 views
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 ?
Jim
Top achievements
Rank 2
Iron
Iron
 answered on 31 Mar 2025
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?