Questions on Kendo UI for jQuery Forum

3 answers

774 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

1 answer

9 views

Conditionally Show or Hide Items in a Kendo Form

Is it possible to conditionally show and hide items in a Kendo form based upon the data?

For example, if I have a form to enter a Person or a Company, I want to hide the Address field if it is a Company, or hide the Contact field if it is a Person.

Also please note that if attributes are used to try to set the field to display:none as in the example here., it only hides the editor, not the label or hint.

<form id="myForm"></form>

<script>
    $("#myForm").kendoForm({
        formData: {
            Name: "John Doe",
            Address: "123 Main St.",
            Contact: "",
            Type: 1 // 1 = Person, 2 = Company
        },
        items: [{
            field: "Name",
            hint: "Enter Full Name",
        }, {
            field: "Address",
            hint: "Enter Address with ZIP Code",
            attributes:{
                // need to hide this field if the Type = 2
                class: "person"
            }
        }, {
          field: "Contact",
          hint: "Enter the Company Contact",
            attributes:{
              	// need to hide this field if the Type = 1
                class: "company"
            }
        }]
    });
</script>

<style>
  .person {
    display: block;
  }
  .company{
    display: none;
  }
</style>

Thanks, Bob

Form

answered on 20 May 2025

1 answer

10 views

How to use Radio Buttons in Kendo Form?

I have a form where I want to use radio buttons to represent the item value, but I want the label of the radio buttons to be something different than the value. For example, I have a name and I want to distinguish that name between a type of Person or Company, but the data value representing the name type is numeric.

I can setup the form like this:

<form id="myForm"></form>

<script>
    $("#myForm").kendoForm({
        formData: {
            ID: 1,
            Name: "John Doe",
            Type: 1  // 1 = Person, 2 = Company
        },
        items: [{
            field: "Name",
            validation: { required: true }
        }, {
            field: "Type",
            editor:"RadioGroup",
        editorOptions: {
          layout: "horizontal",
          items: [1, 2],
          select:function(e){              
            // Do something here?
          } 
        },
        }]
    });
</script>

Using Items: [1, 2] does work, but I don't want to show 1 and 2 on the radio buttons. I want to show Person and Company. How do I achieve that? Can I set Items: ["Person", "Company"] and then do something in the select function? If so, what needs to be done to set the model data correctly?

Please note that in my actual code, I am using setOptions for the model data, and not formData.

Thanks, Bob

Form

RadioGroup

answered on 20 May 2025

1 answer

6 views

Kendo UI for jQuery - Need client-side library path for libman.json

Hi,

I have created .net core project and imported Kendo UI jQuery files from the given path and placed them in my project's js path along with trial license key .js file. But I need to invoke "kendo.all.min.js", "kendo-ui-license.js" using client-side library path for libman.json. If it is possible to invoke then please guide me with client-side library settings. And also let me know how to take the actual license instead of trial license.

Thanks,

Dhirendra

ImageEditor

answered on 20 May 2025

0 answers

4 views

DataSource dates

I've seen your demos on setting up the type: "date" and the format: stuff on the model and on the column display for the grid. Your demo sorts the dates as if they are dates properly. Ours shows the value as null if we set the type to date. It displays the string properly if we set it to type string but still sorts as a string. If we simply set the column to the kendo format and do not use a schema on the datasource, our code still sorts as a string.

https://dojo.telerik.com/TgCibbiL

When I looked at the data in your demo, it looks like the long form GMT. Today, we are instead blocking the script from sending the .NET property types of DateTime and instead sending a pre-formatted string of the date. Ran into some serialization issues when posting those same objects with DateTime properties on them.

Are you returning your DateTime properties as strings but formatted in this GMT when you serialize your .NET data objects back to the JavaScript handlers?

Grid

asked on 19 May 2025

0 answers

6 views

Kendo map - Unable to pan in Firefox

Hi,

I have an issue in Firefox where the kendo map cannot be panned. It works fine on the other browsers.

Can someone help me with this issue? Here are the details:

Firefox - 138.0.4
Kendo - 2019.1.115

Map

asked on 19 May 2025

1 answer

14 views

Pivotgridv2 measure is not slicing the data by the second attribute when expanding

When there is a second item in a row and both are expanded the value is no longer sliced(filtered?) by the first item. My users are used to this with excel etc and really want this functionality how can I achieve it?

Value sum is correct (sliced) for all rows

where second row is expanded and not correct(sliced?).

Here is a simplified version of my code showing the unwanted behavior

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
  <link href="../../styles/default-ocean-blue.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
  <script src="../../js/kendo.all.min.js"></script>
  <script src="../content/shared/js/console.js"></script>
</head>
<body>
  <div id="container">
    <div id="pivotgrid"></div>
    <div id="configurator"></div>
    <div id="pivotbutton"></div>
  </div>
  <script>
    var dataSource = new kendo.data.PivotDataSourceV2({
      "data": [
        { "Value": 77, "ASort": 2, "BSort": "b" },
        { "Value": 28, "ASort": 1, "BSort": "a" },
        { "Value": 63, "ASort": 2, "BSort": "a" },
        { "Value": 42, "ASort": 1, "BSort": "b" }
      ],
      rows: [
        { name: "ASort", expand: true },
        { name: "BSort", expand: true }
      ],
      "schema": {
        "model": {
          "fields": {
            "Value": { "type": "number" },
            "ASort": { "type": "number" },
            "BSort": { "type": "string" }
          }
        },
        "cube": {
          "dimensions": {
            "ASort": { "caption": "ASort" },
            "BSort": { "caption": "BSort" }
          },
          "measures": {
            "Value sum": {
              "field": "Value",
              "format": "{0:n}",
              "aggregate": "sum"
            }
          }
        }
      }
    });


    $(document).ready(function () {
      window.pivotgrid = $("#pivotgrid").kendoPivotGridV2({
        height: $(window).height() - 2,
        dataSource: dataSource

      }).data("kendoPivotGridV2");

      $("#configurator").kendoPivotConfiguratorV2({
        dataSource: pivotgrid.dataSource,
        filterable: true,
        sortable: true
      });

      $("#pivotbutton").kendoPivotConfiguratorButton({
        configurator: "configurator"
      });

      $("#container").kendoPivotContainer({
        configuratorPosition: "left"
      });
    });
  </script>

</body>
</html>

Data Source

PivotGridV2

answered on 15 May 2025

2 answers

10.3K+ views

DateTime picker is adding timezone to time

Hi all,

I am building a web application that collects information about emergency drills, such as evacuation drills, tornado drills, etc. As you could imagine recording what time the drill was conducted is extremely important.

Well, the Kendo DateTime pickers are adding the timezone offset to the time value when the value is sent to the server. Receiving from the server works fine.

Everybody that is using my web application is in eastern time zone, no exceptions. The timezone is GMT-5 currently. Let's use an example: a user submits a drill for 12/04/2014 1:00 PM. The time gets sent to the server but the timezone affects the time, so it will be stored in the database as 12/04/2014 6:00 PM. The timezone adds 5 hours when sent to the server. When we are in daylight savings time we are GMT-4 and 4 hours are added to the time. When my app requests the information from the server it works fine. If the server sends back 12/04/2014 1:00 PM it will display as such on the web page.

My current fix it to subtract 5 hours from the time before it is sent to the server. I don't like that because every time we go through day light savings time I have to update my code back and forth between 4 hours and 5 hours. I guess I could find the time zone from the time string and subtract whatever it is currently, but I don't like that. How can I fix this?

Thanks

Date/Time Pickers

answered on 14 May 2025

1 answer

7 views

Some AutoCompletes in Wizard in Grid Edit Popup not working

I've got a grid that uses a Kendo Wizard in the grid edit popup window. The first step in the wizard has 3 AutoComplete controls (among other controls). The first 2 AutoCompletes do not save the value selected back to the model and grid, but the 3rd one does and they're all configured exactly the same. The code was working before we upgraded to 2024.3.806. Are there breaking changes for the wizard or AutoComplete in this release? A demo for this kind of scenario would be helpful because I inherited this code, and I'm not even sure if it was done correctly. Here is a sample of the js that defines the grid and the wizard (in the grid edit method):

$gridDiv.kendoGrid({
autoBind: true,
columns: [
{
field: "DealNumber",
title: "Deal Number",
filterable: {
extra: false,
operators: {
string: { contains: "contains" }
}
},
sortable: true,
template: 'dealUrl',
editable: () => false
},
{
field: "CustomerName",
title: Customer Name",
filterable: {
extra: false,
operators: {
string: { contains: "contains" }
}
},
sortable: true
},
{
field: "SalesPersonName",
title: "Sales Person",
filterable: {
extra: false,
operators: {
string: { contains: "contains" }
}
},
sortable: true
},
{
field: "CreatedDate",
type: "date",
title: "Created Date",
sortable: true,
filterable: true,
format: "{0: M/d/yyyy}",
width: 100,
editable: function () { return false; }
}
],
editable: {
mode: "popup",
window: {
title: "Add/Edit",
width: "500px"
}
},
edit: function (e) {
const popupWindow = e.container.data("kendoWindow");
popupWindow.center();

let model = e.model;

$(e.container).kendoWizard({
pager: true,
done: function (e) {
e.preventDefault();

$gridDiv.dataSource.sync();

$($(".k-popup-edit-form")[0]).data("kendoWindow").close();
},
reset: function (e) {
e.preventDefault();

$gridDiv.cancelChanges();

$($(".k-popup-edit-form")[0]).data("kendoWindow").close();
},
steps: [
{
title: "Sale Info",
buttons: [{
name: "next",
primary: true,
},
{
name: "reset",
text: "Cancel"
}],
form: {
id: "page1",
orientation: "vertical",
formData: model,
items: [

{
field: "CustomerName",
title: "Customer Name",
editor: "AutoComplete",
editorOptions: {
dataSource: {
serverFiltering: true,
transport: {
read: {
url: "/Customer/Search",
dataType: "json",
type: "POST"
},
parameterMap: (options, operation) => {
return {
text: (options.filter.filters[0] !== void 0) ?
options.filter.filters[0].value :
null
};
}
}
},
dataTextField: "FullName",
minLength: 3,
highlightFirst: true,
suggest: true,
valuePrimitive: true,
select: (e) => {
model.set("CustomerId", e.dataItem.Id);
},
enforceMinLength: true,
filter: 'contains'
}

},
{
field: "CustomerId",
title: "Customer Id",
},
{
field: "SalesPersonName",
title: "Sales Person",
editor: "AutoComplete",
editorOptions: {
dataSource: {
serverFiltering: true,
transport: {
read: {
url: "/SalesPerson/Search",
dataType: "json",
type: "POST"
},
parameterMap: (options, operation) => {
return {
text: (options.filter.filters[0] !== void 0) ?
options.filter.filters[0].value :
null
};
}
}
},
dataTextField: "FullName",
template: '#: data.FullName #',
minLength: 3,
highlightFirst: true,
suggest: true,
valuePrimitive: true,
select: (e) => {
model.set("SalesPersonId", e.dataItem.Id);
},
enforceMinLength: true,
filter: 'contains'
}

},
{
field: "Manager",
title: "Manager",
editor: "AutoComplete",
editorOptions: {
dataSource: {
serverFiltering: true,
transport: {
read: {
url: "/Manager/Search",
dataType: "json",
type: "POST"
},
parameterMap: (options, operation) => {
return {
text: (options.filter.filters[0] !== void 0) ?
options.filter.filters[0].value :
null
};
}
}
},
dataTextField: "FullName",
template: '#: data.FullName #',
minLength: 3,
highlightFirst: true,
suggest: true,
valuePrimitive: true,
select: (e) => {
model.set("ManagerId", e.dataItem.Id);
},
enforceMinLength: true,
filter: 'contains'
}

}

]
}
},
{
//step 2 code here//
},

]
})
},
sortable: true,
resizable: true,
pageable: {
pageSizes: false,
messages: {
empty: ""
}
},
filterable: true,
persistSelection: true,
noRecords: true,
messages: {
noRecords: "No records found"
},
dataSource: gridDataSource(),
}).data("kendoGrid");
},

AutoComplete

Grid

Wizard

answered on 13 May 2025

2 answers

14 views

kendoNumericTextBox draggable

This is the console display of my numeric textbox with draggable = false. When inspecting the DOM in chrome, the attribute shows up on the input you dynamically create. However, if I select the whole number with my mouse it can easily still drag the number into a neighboring textarea. I need to be able to cut, copy, paste on both of these controls. Is there a way to force Chrome to not allowing dragging here?
{prefix: '', name: 'NumericTextBox', decimals: 2, autoAdjust: true, enable: true, …}