Questions on Kendo UI for jQuery Forum

1 answer

206 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 13 Dec 2022

0 answers

4 views

Multi-Axis-Chart - Set minimum value to every single chart when I click on each one

How can I set the minimum value to every single chart when I click on each one (in Multi-axis charts) ?
See My attached picture.

Charts

asked on 28 May 2023

1 answer

3 views

Combination of Dropdownlist and Multiselect with Checkboxes

I'm looking for a widget that is sort of a combination of a dropdownlist and a multiselect. I would like to be able to select multiple items from the dropdownlist but instead of having chips like in the multiselect, I want the dropdownlist to display either "All Selected", "Multiple Selected" (or a count), or the name of the option selected if only one is selected. I would ideally have checkboxes to the left of each item but it could just highlight the item like the current multiselect does. Is there a way to accomplish this with Kendo UI for JQuery?

DropDownList

MultiSelect

answered on 26 May 2023

0 answers

4 views

Convert RadChart

I am migrating an old Silverlight app that uses RadChart. The old chart is combination of column and line types. Please see image (filename: Chart.jpg).

It has this middle vertical line (which is the Actual Mean series/legend) that I am very confuse how to convert to KendoUI. Underneath, it has 2 data point value 0 and 1. The Axis is assign to the right axis. Another question is how it is placed in the middle of the chart with only 2 data points? There is no programmatic manipulation seen on the old code.

Is this possible to do with Kendo UI chart? I also attached the XAML of the old RadChart in case needed.

Please help.

Charts

asked on 26 May 2023

1 answer

8 views

Pre-built CSS files sizes

Hi team,

I'm having a look at last kendo release and I notice that size of css pre-builts files are really really bigger than before (currently I'm using 2022 R2). Even if sass compile only the stylesheet of the button widget, I get a 553KB css file! Was 293KB in R2 2022.

Also, there are many css classes doubled by a counterpart beginning with .!k- like with:

.k-ratio-1 {
aspect-ratio: 1;
}

.\!k-ratio-1 {
aspect-ratio: 1 !important;
}

Can someone tell me what are all these css classes beginning with .!\k- ? And also why the stylesheet got so big?

Best regards,

Laurent.

General Discussions

answered on 26 May 2023

1 answer

13 views

Kendo ListView grouping issue

Hi there,

We are using the Kendo ListView control. In this control we are trying to use a grouping option.

While using this option we are facing a few issues listed below.

1. We are making a field with hyperlink, that means if a user clicks the hyperlink, it should redirect or get specific details. Now that fails here.

2. Also we are making a hyperlink which is grouped by one item, If the user clicks any one specific item, that should open in a new tab. Again we are not able to get that specific item position.

3. And we need to group by 2 items. For example, We have 1 set of results and with that we need to group by 2 fields like one by User & Department.

We are using the Tojo link below for our reference.

https://demos.telerik.com/kendo-ui/listview/grouping

ListView

answered on 25 May 2023

0 answers

5 views

Fill in pagesize of grid with empty rows

Hello, just started with kendo and angular so this might be a basic question.

I have set up a template for a grid:

<h2>Peoples</h2>
<div class="peoplesOverview">
  <kendo-grid [data]="gridData"
    [scrollable]="'virtual'"
    [pageable]="true"
    [pageSize]="10">
    <kendo-grid-column field="Name" title="Name"></kendo-grid-column>
    <kendo-grid-column field="Title" title="Title"></kendo-grid-column>
  </kendo-grid>
  <kendo-button class="downloadButton">Download</kendo-button>
</div>

And in my component.ts I set up a sample dataset to test:

export class PeopleOverviewComponent {
  public gridData: Person[] = [
    {
      Name:"Jane",
      Title: "Worker",
    }
  ];
}

Currently this creates a grid with one row, I would like to have the grid be filled in with empty rows to fill the page size to 10.

All the help is appreciated!

Grid

updated question on 25 May 2023

6 answers

312 views

Kendo UI Editor + autocomplete / auto suggest

Hi! I want to create an autocomplete plugin for the Kendo UI Editor, see attached mock-up. I would need to be able to:

On keyup, retrieve the current word being entered
If possible, display the suggestion list at cursor position (if not, could be displayed beneath editor)
When suggestion list is displayed, make arrow up/down change list selection and tab/enter/mouseclick to select
Replace the current word with selection from autocomplete

How much of this is achievable? (and how)
Is there a preferred way to create plugins for Kendo UI?

As an alternative; is it possible to attach any existing autocomplete plugin to the Kendo UI Editor?

Thanks in advance for any feedback!

Editor

answered on 23 May 2023

1 answer

26 views

Kendo License Warning

Hello I am looking for an answer/clarity on why my kendo-ui-license might not be applied correctly.
Since we are using kendo-react and kendo-ui I've tried both approaches to applying the license.
Here are approaches I've tried:
https://docs.telerik.com/kendo-ui/intro/installation/using-license-code
https://www.telerik.com/kendo-react-ui/components/my-license/
Here is the warning:

I've tried removing yarn.lock and node modules and installing dependancies again. That did not help as well.
shasum is returning correct license as well.

My package.json is attached to the post.

NOTE: only kendo-ui throws warning. Seems like license for kendo-react is activated correctly.

yarn v1.22.17
node v16.13.0

  "devDependencies": {
    "@testing-library/dom": "^8.13.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^14.1.1",
    "@types/applicationinsights-js": "^1.0.9",
    "@types/es6-promisify": "^6.0.0",
    "@types/jest": "^27.4.1",
    "@types/jquery": "^3.3.28",
    "@types/jqueryui": "^1.12.7",
    "@types/node": "^18.7.13",
    "@types/prop-types": "^15.7.2",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@types/signalr": "^2.2.35",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^2.0.0",
    "gulp-uglify": "^3.0.2",
    "rimraf": "^2.6.3",
    "typescript": "^4.6.3"
  },
  "dependencies": {
    "@progress/kendo-all-react-wrapper": "^2019.4.1014",
    "@progress/kendo-base-component-react-wrapper": "^2019.4.1014",
    "@progress/kendo-data-query": "1.5.4",
    "@progress/kendo-drawing": "^1.17.5",
    "@progress/kendo-dropdowns-react-wrapper": "^2019.4.1014",
    "@progress/kendo-gantt-react-wrapper": "^2019.4.1014",
    "@progress/kendo-grid-react-wrapper": "^2019.4.1014",
    "@progress/kendo-layout-react-wrapper": "^2019.4.1014",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-popups-react-wrapper": "^2019.4.1014",
    "@progress/kendo-react-charts": "5.13.1",
    "@progress/kendo-react-dialogs": "^5.2.0",
    "@progress/kendo-react-dropdowns": "^5.2.0",
    "@progress/kendo-react-inputs": "^5.2.0",
    "@progress/kendo-react-intl": "^5.2.0",
    "@progress/kendo-react-labels": "^5.2.0",
    "@progress/kendo-react-popup": "3.18.0",
    "@progress/kendo-react-tooltip": "^5.2.0",
    "@progress/kendo-theme-default": "^4.44.0",
    "@progress/kendo-treeview-react-wrapper": "^2019.4.1014",
    "@progress/kendo-ui": "2022.3.1109",
    "azure-maps-control": "2.0.31",
    "es6-promise": "^4.2.6",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "jqueryui": "^1.11.1",
    "jszip": "^3.10.1",
    "kendo-ui-core": "2022.3.1109",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-transition-group": "^4.4.5",
    "signalr": "^2.4.1",
    "typescript-collections": "1.3.3"
  }

Licensing

answered on 23 May 2023

0 answers

10 views

jQuery Ui Grid to .Net Core - Dates

I have a jQuery UI Grid with a .Net MVC Core backend.
The record data has a nullable date in it and everything is displaying fine ( ive added abrdiged working code below)
I use the popup edit to edit the record which contains a nullable date Kendo sends the date as :

Sun May 28 2023 00:00:00 GMT+0100 (British Summer Time)

The Model Binder in MVC does not recognise this as a date and reports a model binding error:
"The value 'Sun May 28 2023 00:00:00 GMT+0100 (British Summer Time)' is not valid for MortgageExpiry."

Theres alot of talk about dates, formats and parsing etc.. in documentation but I'm confused as to what Im actually meant to do.
I know C# dosnt see this as a date when trying to bind it to Model , I understand that but what am I meant to do to fix it.
Can I modify the outgoing format of the date before its sent to server or is there something else I should be doing?

function populateProductsTable() {
        var applicationId = $("#MortgageApplicationId").val();
        var gridDataSource = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    url: "/api/ApplicationProductsApi/Read/" + applicationId,
                    dataType: "json"
                },
                create: {
                    url: "/api/ApplicationProductsApi/Create",
                    dataType: "json",
                    type: "POST"
                },
                update: {
                    url: "/api/ApplicationProductsApi/Update",
                    dataType: "json",
                    type: "POST"
                },
                destroy: {
                    url: "/api/ApplicationProductsApi/Delete",
                    dataType: "json",
                    type: "POST"
                },
            },
            schema: {
                data: "data",
                total: "total",
                errors: "errors",
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number", editable: false },
                        productProvider: { type: "string", validation: { required: true } },
                        productTypeId: {type: "number", validation: { required: true } },
                        productName: { type: "string" },
                        mortgageExpiry: { type: "date" },
                    }
                }
            }
        });
        /* eslint-enable */

        $("#productGrid").kendoGrid({
            toolbar: ["create"],
            editable: "popup",
            dataSource: gridDataSource,
            filterable: true,
            sortable: true,
            pageable: false,
            columns: [{
                command: ["edit"], title: "&nbsp;",
            }, {
                field: "id",
                filterable: false,
                hidden: true,
            }, {
                field: "productProvider",
                title: "Provider"
            }, {
                field: "productTypeId",
                title: "Type",
                editor: dropDownProductType, template: "#=productTypeIdName#"
            }, {
                field: "productName",
                title: "Name"
            },{
                field: "mortgageExpiry",
                title: "Expiry",
                format: "{0:dd/MMM/yyyy}"
            }, 
            ]
        });
    }