Questions on Kendo UI for jQuery Forum

1 answer

64 views

Kendo Editor MVVM doesnt seem to work with Javascript initialization.

While Kendo Editor MVVM works with "data" attributes, if I try to use it with Javascript initialization MVVM doesnt work.

WORKING

NOT WORKING

$("#bodyEditor2").kendoEditor({

        bind: "visible: isVisible, value: html, events: { change: onChange }"

        }).data("kendoEditor");

I was trying to set the "encoded" property to false and neither this worked correctly.

Full dojo:

https://dojo.telerik.com/@ChrisMylonas/IpuWoQUP

Editor

MVVM

answered on 03 Sep 2024

1 answer

46 views

I need to upgrade the existing project to Kendo UI R1 2022 (version 2022.1.11.9)

Need an upgrade from Kendo UI version 2016.3.914 to 2022.1.11.9 (R1 2022)

Doubts- do I need a commercial license for it?

and How can I get the Kendo UI for jQuery bundle (including js, css and other files) for this specific version not the latest one?

Licensing

answered on 03 Sep 2024

2 answers

64 views

How to use JSON return in DropDownTree

I have a JSON return from an endpoint that is hierarchical in a way but has different field names on each level for the ID and text. How would I make a kendo Drop Down Tree with this data without having to recreate the entire list? I will need to use the valueMapper, loadOnDemand, and get the value like this: .value(). It is like this (except with a lot more records):

[
  {
    stateId: 1,
    stateName: "Florida",
    cities: [
      {
        cityId: 1,
        cityName: "Orlando",
        stores: [
          {
            storeId: 101,
            storeName: "I4"
          },
          {
            storeId: 202,
            storeName: "International Drive",
          },
          {
            storeId: 240,
            storeName: "UCF"
          }
        ]
      }
    ]
  }
]

DropDownTree

Hierarchical Data Source

answered on 29 Aug 2024

0 answers

53 views

Responsive Panel is scrolling

I am seeing an issue with the Kendo Responsive Panel component. There is a Kendo Menu inside the responsive panel, but when displaying the horizontal menu its showing horizontal and vertical scroll bars when hovering over the menu item that says Foo, and also its not showing the menu group item since the height of the responsive panel is limited to the initial height of the horiontal menu. I am using Kendo UI jQuery R2 2020. The code I have is as given below. The dojo sample can be seen at https://dojo.telerik.com/@sun21170/uPisoRoW

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Kendo UI Responsive Panel is scrolling for a menu inside it</title>
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.common.min.css">
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.rtl.min.css">
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.moonlight.min.css">
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.mobile.all.min.css">
    <script src="Scripts/kendoUIMVC/jquery.min.js"></script>
    <script src="Scripts/kendoUIMVC/kendo.all.min.js"></script>
</head>
<body>
<nav id="nav1">
<button class="k-button" id="btnMenuToggle" data-role="button" role="button" aria-disabled="false" tabindex="0"><span class="km-icon km-drawer-icon"></span></button>
<div id="sidebar">
    <ul id="mainMenu"></ul>
</div>

</nav>
<script>
    $(document).ready(function() {
        $("#sidebar")
            .kendoResponsivePanel({
                breakpoint: 769,//have this more than 768 since if its 768 then responsive panel will not display at screen width >= 768 rather than screen width > 768
                orientation: "left",
                toggleButton: "#btnMenuToggle"
            })
            .children("#mainMenu").kendoMenu({
            orientation: ($(window).width() > 768 ? "horizontal" : "vertical"),
            direction: "bottom left",
            dataSource: [
                {
                    text: "Foo", items: [
                        {text: "Qux ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
                        {text: "Hi Abc! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
                        {text: "Hi Klm! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
                        {text: "Hi Xyz! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"}
                    ]
                },
                {text: "Bar"}
            ]
        });
    });
</script>
</body>
</html>

ResponsivePanel

updated question on 27 Aug 2024

3 answers

791 views

Form validation always treats checkbox as required field

I have a form on which there is checkbox control. For some reason the kendo validator always considers the checkbox a required field and considers a non-checked state as invalid. How can I get the validator to ignore the checkbox? As you can see, the field, IsTerminated is not marked required.

<form id="frmEmployee" method="post">
    <div class="control-grid">
        <div class="col-1-label">
            @Html.LabelFor(m => m.Id, "Employee Id: ")
        </div>
        <div class="col-1-control">
            @Html.Kendo().TextBoxFor(m => m.Id).HtmlAttributes(new { @readonly = "", @required = "", @validationMessage = "Id is required" })
        </div>

        <div class="col-2-label">
            @Html.LabelFor(m => m.FirstName, "First Name: ")
        </div>
        <div class="col-2-control">
            @Html.Kendo().TextBoxFor(m => m.FirstName).HtmlAttributes(new { @required = "", @validationMessage = "First Name is required" })
        </div>

        <div class="col-3-label">
            @Html.LabelFor(m => m.LastName, "Last Name: ")
        </div>
        <div class="col-3-control">
            @Html.Kendo().TextBoxFor(m => m.LastName).HtmlAttributes(new { @required = "", @validationMessage = "Last Name is required" })
        </div>

        <div class="col-1-label">
            @Html.LabelFor(m => m.MiddleName, "Middle Name: ")
        </div>
        <div class="col-1-control">
            @Html.Kendo().TextBoxFor(m => m.MiddleName)
        </div>

        <div class="col-2-label">
            @Html.LabelFor(m => m.PreferredName, "Preferred Name: ")
        </div>
        <div class="col-2-control">
            @Html.Kendo().TextBoxFor(m => m.PreferredName)
        </div>

        <div class="col-3-label">
            @Html.LabelFor(m => m.Email, "Email: ")
        </div>
        <div class="col-3-control">
            @Html.Kendo().TextBoxFor(m => m.Email).HtmlAttributes(new { @required = "", @validationMessage = "Email is required" })
        </div>

        <div class="col-1-label">
            @Html.LabelFor(m => m.HireDate, "Hire Date: ")
        </div>
        <div class="col-1-control">
            @Html.Kendo().DatePickerFor(m => m.HireDate).HtmlAttributes(new { @required = "", @validationMessage = "Hire Date is required" })
        </div>

        <div class="col-2-label">
            @Html.LabelFor(m => m.IsTerminated, "Terminated: ")
        </div>
        <div class="col-2-control">
            @Html.Kendo().CheckBoxFor(m => m.IsTerminated)
        </div>

        <div class="col-3-label">
            @Html.LabelFor(m => m.TerminationDate, "Termination Date: ")
        </div>
        <div class="col-3-control">
            @Html.Kendo().DatePickerFor(m => m.TerminationDate)
        </div>

        <div style="display: none;">
            @Html.Kendo().DatePickerFor(m => m.CreatedDate)
        </div>
    </div>
</form>

On page load I have:

    $(document).ready(function ()
    {
        $("#frmEmployee").kendoValidator();
    });

And before I submit my data to the server I have a check:

let validator = $('#frmEmployee').kendoValidator().data('kendoValidator');

if (validator.validate())
{
   // ...
}

validator.validate() always returns false if IsTerminated is not checked. IsTerminated is a non-nullable bool.

Checkbox

answered on 27 Aug 2024

0 answers

88 views

Kendo for jQuery and WordPress

I am trying my first steps using jQuery and Kendo in WordPress.

It would be really helpful to get some advice on the following:

I do I install Kendo UI in a WordPress site?
I do I install Kendo UI just in a plugin?

Thanks!

General Discussions

updated question on 26 Aug 2024

1 answer

51 views

Kendo UI JQuery ListView Virtualization

I am trying to virtualize a Kendo UI JQuery list view with local data.

I also made my own Dojo here but it doesn't work. The problem with mine is that it is still creating all of the items, not just the first 5. Any idea how to fix this?

ListView

answered on 26 Aug 2024

0 answers

65 views

TreeView Expansion When Switching Views in Kendo UI FileManager

Description: We have encountered an issue with the Kendo UI FileManager component related to drag-and-drop uploads and the navigation bar.

Issue Details:

Duplicate Uploads on Drag-and-Drop: When performing a drag-and-drop upload, the file(s) are uploaded twice. This occurs because the API is called twice during the drag-and-drop operation, resulting in duplicate uploads.
Navigation Path Issue: The navigation bar at the top does not function as expected. When clicking a navigation path link, the FileManager navigates back to the home directory instead of the intended path. However, the navigation tree on the left works correctly.

Steps to Reproduce:

Open the Kendo UI FileManager.
Drag and drop a file into the FileManager interface.
Observe the file being uploaded twice.
Click on any path link in the navigation bar at the top.
Observe that it navigates to the home directory instead of the intended path.

Expected Behavior:

The file(s) should be uploaded only once during drag-and-drop.
The navigation bar should correctly navigate to the intended path, similar to the navigation tree on the left.

Attached Video: A video demonstrating both issues have been attached for reference. It shows how the file is uploaded twice during drag-and-drop and how the navigation bar fails to navigate properly.

Attached Source Code: I have also attached my JavaScript and controller upload source code for reference. This will provide additional context for the implementation and may help in identifying the root cause of the issues.

Reference:
https://demos.telerik.com/kendo-ui/filemanager/index

FileManager

updated question on 23 Aug 2024

1 answer

45 views

2016.2.504-Spreadsheet does not support setting the number of rows and columns

In Kendo UI 2016.2.504, the Spreadsheet does not support setting the number of rows and columns, and the settings have no effect after being applied

Spreadsheet

answered on 22 Aug 2024

1 answer

43 views

Update multiple rows

I have a grid where user input causes multiple rows to be updated through a complex formula. Currently, I'm using dataItem.set("column", value) to do the update. Unfortunately, this is taking about 20 seconds to complete. Is there a way to speed this up but also not lose the current grid view. For example, If the user scrolled down to record 50, it needs to stay there after the update. No rows are being added or deleted, just the values are changing.

Grid

answered on 21 Aug 2024