Questions on Kendo UI for jQuery Forum

4 answers

115 views

Hi,

I am using Font Awesome in my website, and i use kendo.drawing.drawDOM to export the content of browser to save as PDF.

I have no issue when using Font Awesome v6.x, but after upgrade to v7, it throws exception as below:

Uncaught Error: Table loca not found in directory
    at Directory.readTable (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:42392:19)
    at TTFFont.parse (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43552:25)
    at new TTFFont (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43544:18)
    at kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43844:32
    at XMLHttpRequest.<anonymous> (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43823:21)

$(document).on({
    "click": function (e) {
        e.preventDefault()
        // Embed external fonts into pdf
        kendo.pdf.defineFont({
            "Font Awesome 7 Brands":
                "/fonts/FontAwesome/fa-brands-400.ttf",

            "Font Awesome 7 Free":
                "/fonts/FontAwesome/fa-regular-400.ttf",

            "Font Awesome 7 Solid":
                "/fonts/FontAwesome/fa-solid-900.ttf",

            "DejaVu Sans":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans.ttf",

            "DejaVu Sans|Bold":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",

            "DejaVu Sans|Bold|Italic":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",

            "DejaVu Sans|Italic":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
        })
        kendo.drawing.drawDOM($("#Body"), {
            landscape: false,
            paperSize: "B2",
            margin: "2cm",
            forcePageBreak: ".page-break"
        }).then(function (group) {
            kendo.drawing.pdf.saveAs(group, siteShortName + "-Snap-" + new Date().getTime() + ".pdf")
        })
    }
}, "#Snap")

Do you able to tell what may cause the error? I am using online free font converter to convert woff2 to ttf as v7 no longer provide ttf. v7 is now using css variable.

Thanks.

Drawing API

answered on 20 Aug 2025

1 answer

65 views

Kendo jQuery PivotGrid: Show hierarchy levels in Fields

I want to compare two data types side-by-side in one PivotGrid. Conceptually the Fields tree should look like:

Field

DATA 0
├─ Area Data 0
└─ Period Data 0

DATA 1
├─ Area Data 1
└─ Period Data 1

Measures
• Value Data 0
• Value Data 1

Then on Columns I’d place Area → Period under DATA 0 (and/or DATA 1) to get a hierarchical header.

Question

Is showing expandable hierarchy levels in the Fields panel supported with client-side data?
If yes, what’s the correct schema?
If not, what’s the recommended approach (e.g., model each level as its own dimension), and would PivotGrid v2 change this?

Product & version

Kendo UI for jQuery – PivotGrid (classic, not v2)
Reproduced on CDN builds 2023.2.718 and 2024.2.514
Browser: Chrome (latest)

PivotGrid

PivotGridV2

answered on 19 Aug 2025

2 answers

203 views

Call Function on DataBound of Every Instance of Widget

I have a lot of projects with kendo grids in them. As a matter of practice, I always call the same function on the dataBound event. Instead of adding this every time I initialize a widget, I would like to set it as a default so that any time I initialize a kendo grid, it is already set. I don't want to give up the ability to add additional functions to specific grids though. Is this possible?

Grid

updated answer on 16 Aug 2025

1 answer

115 views

Why turn the samples into such a mess??

Just needed to check a quick example for reference and I've discovered all the samples have been rewritten to include a bunch of fluff. Here is the new example for the textbox. THE TEXTBOX... this is the example??? Who thought this was a good idea? It seems like someone was given a task to make sure the examples are up to date and some very eager beaver who jumps on every new web dev bandwagon but loses sight of what the end user experience is like, or their fellow coding team members. I have always told people 'and telerik has good documentation and examples' but I can't honestly say that now. After using it for 15 years, I'm so disappointed in what happened to kendo.

Reminder, this is the first example for kendo text box:

<body>
    <div class="demo-wrapper k-d-grid k-gap-8 k-flex-1 k-px-8 k-pt-7">
    <div data-role="skeletoncontainer" class="side-container k-skeleton k-opacity-20 !k-d-flex k-flex-col k-align-items-center k-px-5 k-pt-7.5 k-rounded-tl-md k-rounded-tr-md" aria-live="polite" aria-label="Loading...">
        <span class="k-skeleton k-opacity-80 k-skeleton-circle k-w-18 k-h-18 k-mb-5"></span>

        <div class="k-d-flex k-flex-col k-align-items-center k-gap-1">
        <span class="k-skeleton k-w-24 k-h-4 k-rounded-md"></span>
        <span class="k-skeleton k-opacity-80 k-w-14 k-h-2.5 k-rounded-md"></span>
        </div>

        <div class="k-d-flex k-flex-col k-w-full k-mt-13 k-gap-4">
        <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        </div>

    </div>

    <div class="main-container k-pb-8 k-d-flex k-flex-col">
        <div class="k-d-flex k-gap-3 k-align-items-center k-mb-5">
        <span class="avatar !k-d-none k-skeleton k-opacity-30 k-skeleton-circle k-w-12 k-h-12"></span>
        <h4 class="k-h4 k-opacity-20 k-font-bold">My Profile</h4>
        </div>
		<span class="k-d-inline-block">Name</span>
        <input id="textbox" />

        <div class="k-d-flex k-flex-col k-gap-1 k-mt-5">
        <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
        <span class="k-skeleton k-opacity-30 k-rounded-md k-h-7.5"></span>
        </div>

        <div class="k-d-flex k-flex-col k-grow k-gap-1 k-mt-5">
        <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
        <span class="content-expanded k-grow k-skeleton k-opacity-30 k-rounded-md k-h-20"></span>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // create TextBox from input HTML element
        $("#textbox").kendoTextBox({
            value: "John Smith",
            clearButton: true
        });
    });
</script>

<style>
    .demo-wrapper {
        grid-template-columns: 180px 1fr;
    }

    .k-h4 {
        line-height: 26px;
        margin-bottom: 0;
    }

	.kd-nodata-wrapper{
		display: block !important;
		padding-top: 20px !important;
	}

    /* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
    @media (max-width: 678px), (min-width: 821px) and (max-width: 1038px), (min-width: 1241px) and (max-width: 1328px) {
      .demo-wrapper {
        grid-template-columns: 1fr;
      }

      .avatar {
        display: block !important;
      }

      .side-container {
        display: none !important;
      }

      .main-container {
        padding-bottom: 0;
      }

      .content-expanded {
        border-end-end-radius: 0;
        border-end-start-radius: 0;
      }
    }

    /* Breakpoint for full screen demo: max:359px */
    @media (max-width: 476px) {
      .avatar {
        width: 32px;
        height: 32px;
      }
    }
</style>


</body>

(p.s., the list of tags to select from when submitting a question aren't in alphabetical order. Who is making these decisions???)

General Discussions

answered on 14 Aug 2025

2 answers

117 views

[Solved] Why is dojo platform not working?

When I go to dojo.telerik.com, I get a loading image that is showing forever and the actual playground is never getting loaded.

Has dojo been retired?

UPDATE

I tried again after a few hours but after a long time of loading panel , the playground in dojo loaded. But, now there is no button to login. So my question now is if I can get all my snippets from dojo?

Menu

answered on 14 Aug 2025

0 answers

75 views

Array of arrays.

Hi everyone,

I'm not very familiar with Kendo.

This is my first time using an array of arrays. I expected all the Arrays in the Array to be DataSource structures.

Instead, I had to write something like this:

var selected = new kendo.data.DataSource();

for ( var font of AP.page.selectedFonts ) {
    var newRow = {
        id: font.id,
        font: font.font,
        // I thought this array was automatically converted to a DataSource.
        items: new kendo.data.DataSource( { data: font.items } ) 
    };

    selected.add( newRow );
}

viewModel.set( "selectedFonts", selected );

Is this the correct approach?

Many thanks

Data Source

updated question on 13 Aug 2025

3 answers

93 views

render bar chart with rounded corner at right.

i am trying to render my chart with rounded corner at the side. but cant seems to get it to work.

dojo link

Expected result

Charts

answered on 12 Aug 2025

1 answer

117 views

Correct Usage of kendoToggleButton

So I wanted to know if there was an easier way to find the current state of the toggle button. I used a global variable defined in the scope of the .js file I am using.

var isSelected = false.

Then for extra safety and really embarrassingly enough we just kind of blindly follow this pattern, we put this variable in a kendo.observable:

function initControls() {
//More initialization stuff before...
    _view = kendo.observable({

        intervalList: _intervalList,
        layoutDataList: _layoutDataList,
          noCustoms: _noCustoms,
        isSelected: _isSelected, //<--------[ADDED]
   })
)
//More initialization code after

}

then in the initialization:

    //Percent button:
    $("#my-toggle-btn").kendoToggleButton({
        icon: "null", // using Font Awesome for an icon.
        enable: true,
        selected: false,
        togglable: true,
        click: function () {
            // on the click change current state of the percentSelected:
            _view.set("isSelected", !_view.get("isSelected"));
            let perSelected = _view.get("isSelected");
            console.log("percentSelected toggled to: " + perSelected);
            if (perSelected) {
                console.log("...button should be BLUE.");
            } else {
                console.log("...button should be GREY.");
            }
        }

    });

And then depending on the Boolean value of the _view observable isSelected it controls whether a mathematical operation is a regular number or a percentage of the number being operated on (multiply, add, subtract):

    var number = $("#numberInput").data("kendoNumericTextBox").value();
    // Detect if percentage toggle is active -- GREY not selected and BLUE == selected.
    var isPercent = _view.get("isSelected");

    //... later in the code this is evaluated like:

    //If the percent toggle button in true/BLUE then convert.
     //Ergo...modify to make the number in the input a percent value 30 is percent then it needs to be converted to .30.
                    var modifier = isPercent ? val * (number / 100) : number;//ternary operator.

    // then later in the code the percentage value or the non-percentage value is inserted into a simple 
    // mathematical formula that loops through an array of numeric values...

My question is ... is there a more direct way to capturing the current state of the button?. I tried selected and selected and my understanding is it doesn't capture the current state (true or false of the button)...so after that I hacked it like this.Maybe this is NOT a good use for the toggle button.(?)..but damn it I wanted a toggle button.

Again the toggle button in question simple allows the user to convert an numeric input to a percentage value of a number operated on (add, subtract, multiply)... ergo secondary color = BLUE, then number is a percent, if its the initial or color = GRAY then the number is just it's face value. I couldn't capture any examples of a real use case. I later found the onToggle event handler and yeah you can read the current value thorugh that...but thought it was overkill...still I am confused on how to use it to flag options...or correct usage.

ToggleButton

answered on 05 Aug 2025

1 answer

62 views

How do I style the autocomplete list items if they keep disappearing

Normally just select the item in the browser inspector, and style, but the second I tap ANYWHERE the autocomplete items disappear. Is there some way to persist them just for styling?

AutoComplete

answered on 31 Jul 2025

1 answer

99 views

One Upload, Multiple Uses

I have a kendo upload on my page where users can upload multiple files. It is NOT set to batch mode, so each file is uploaded individually. I need to use the same upload and the same set of files on two different endpoints. For the first endpoint, I need to upload only the first file. For the second endpoint, I need to upload every file (including the first one). I have two separate buttons that will trigger these. There is also some custom data that I need to include from other controls on the page (like a name, address, etc). How would I accomplish this?

Button 1: Upload the first file to Endpoint A with extra data Y

Button 2. Upload all of the files to Endpoint B with extra data Z

This is the actual flow

1. Select all files

2. Analyze First File (upload only the first file to the server)

3. Server responds with some info about the file ({ type: "text", "author: "John Smith", creditor: "Wells Fargo", etc }

4. This data is placed in some inputs on the page where the user can change it, for example, the system says the author is John Smith but it is really Jane Doe. In my scenario, all files must use the same data regardless of what files 2 through X may contain, so even if Jack Jackson's name appears in File 2, we are using Jane Doe. This whole process is really just to make it easier when the user fills out the data form so that they just update the stuff that is wrong.

5. After the user approves the data in the inputs, they click a submit button. At this time, all of the files are uploaded along with the edited input data object {type: "text", author: "Jane Doe", creditor: "Wells Fargo", etc }

Example:

Upload:
[ Select Files...]

[ Test First File ]

Fill out the form:
Type: _________
Author: _________
Creditor: _________

Click the button below to upload all files using the data entered in the form.

[ Upload Files ]

Upload

answered on 30 Jul 2025