Questions on Kendo UI for jQuery Forum

1 answer

316 views

Menu automatically opens on hover even when option to openonClick is set to true

When the popup is open, hovering on another menu item automatically opens it. How do I make it so it actually opens on click event?

Menu

answered on 28 Mar 2017

2 answers

231 views

ImageUrl with additional CSS-Class

Hi,

I have a small problem with SVG images in the tabstrip-item. Is it possible to give the imageUrl a additional css class?

Because the SVG-Image has a native size of 64x64 which is much too large for me - I would like to define the size over a css-class instead of create a smaller version.

Thank you and best regards!

TabStrip

answered on 28 Mar 2017

4 answers

476 views

Daylight savings time and problem with event rendering

Hello,

I am from the Czech Republic and we use daylight savings time. Time is changing on 26th March, 2:00 AM. When I create an event in Scheduler and the event crosses the moment when the time is changing, e.g. event lasting from 25th March 5:00 PM to 26th March 5:00 PM, events in the Scheduler renders incorrectly and I get an exception:

Object doesn't support the method innerRect.

The exception is from _positionEvent function.

Interestingly, this problem occurs only when the event lasts exactly 24 hours. When it crosses the changing time moment, but lasts 25 or 23 hours, Scheduler works as expected.

Thanks for replies,

Boris

Scheduler

answered on 28 Mar 2017

2 answers

381 views

Grid Theme

Hi,

We just upgraded to the new version of Kendo and are struggling a bit with the new themes. FYI we're using the kendo.silver theme.

The grid works fine in general, but the filter icon seems to want to take up way more space than necessary; the column title is often truncated and then 3 dots added to show that there's more. It's hard to explain but see the attached screenshot. The column name is actually "ID" which should easily fit in the space, but you have to make the column really wide for some reason to get it to show otherwise it displays as "I...".

I tried to edit the CSS manually (I did find a large margin in "k-with-icon") but I'm not good with CSS and only made things worse - the column title went on a separate line from the filter icon. Anyone have ideas on how I can fix this? I really don't want to have to go edit every page in our system to increase the column widths; they looked perfect with the old styles.

Thanks!

Nathan

Grid

answered on 27 Mar 2017

6 answers

210 views

Unable to get the number in my pdf export

I am using css to increase the numeration but when I export to PDF the number doesn't appear.

Example

1 Section

1.1 Subsection

1.1.1 Standards

by in the PDF their appear like that:

0 Section

0.0 Subsection

0.0.0 Standards

this is the code I used

<!DOCTYPE html>
<html>
<head>

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>


<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="content-wrapper">

<div class="box wide hidden-on-narrow">
<h4>Export page content</h4>
<div class="box-col">
<button class='export-pdf k-button'>Export as PDF</button>
</div>
</div>

<main>
<section class="row foodSect">
<div class="section">
<h1 class="col-md-5">FOOD TRACEABILITY</h1>


<div class="col-md-12 subsections">
<h2 class="col-md-4">FOOD TRACEABILITY</h2>


<div class="col-md-12 standards">
<h3 class="col-md-5">Traceability Systems for Receiving Food </h3>
</div>
</div>
</div>
</section>
</main>

<style>

.foodSect {counter-reset: section;}

.foodSect h1 {counter-reset: subsection;}

.foodSect h2 {counter-reset: standards;}

.foodSect h3 {
font-size: 0.944em;
margin: 9px auto;
padding-left: 30px;
float: left;
}

.foodSect h1:before {
counter-increment: section;
content: counter(section) " ";
}

.foodSect h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}

.foodSect h3:before {
counter-increment: standards;
content: counter(section) "." counter(subsection) "." counter(standards) " ";
}
</style>

<script>
// Import DejaVu Sans font for embedding

// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. cdn.kendostatic.com
kendo.pdf.defineFont({
"DejaVu Sans" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
});
</script>



<script>
$(document).ready(function() {

$(".export-pdf").click(function() {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($("#example"),{
multiPage: true,
paperSize: [1100, 1430],
landscape:true,
date:true,
page:true,
title: true,
author:true,
margin: {left: "1cm", top: "1cm", right: "1cm", bottom: "1cm"}
})
.then(function(group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group);
})
.done(function(data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "HR-Dashboard.pdf",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
});
});
});

});
</script>

</body>
</html>

DropDownList

answered on 27 Mar 2017

1 answer

550 views

Custom Icon to Expand/Collapse

Hi,

I am using Kendo splitter to duplicate a layout to an existing app. The layout is a collapsible pane on the left thats only 200px wide when expanded In the existing app, there is an icon to toggle the collapsible pan. The icon sits in the top right corner of the left pane, and overflows the pane.

What is the best way to implement this icon that toggles the pane from collapsed to expanded?

From my perspective, I have two choices.

1. I can use CSS to change the existing .k-splitbar icons to match my design needs. The problem with this method is that the clickable region that triggers the expand/collapse is only as wide as the k-splitbar container. I need the clickable region to be at least 40px by 40px. How might I expand the clickable region?

2. I add my own button (an A tag) in my collapsed pane, absolutely position the icon to the correct space, and use javascript to expand/collapse the pane. The problem with this method is that I was unable to figure out how to get the pane to allow overflow (overflow: visible). I've seen numerous links for how to get the pane to allow overflow. however I can't seem to trump the inline style that kendo is adding to the pane. What is the bast way to allow overflow on panes?

Please and thanks.

Splitter

answered on 27 Mar 2017

1 answer

703 views

Error when loading TabStrip for angular 2

I get an error when trying to load a TabStrip for angular 2. I already use multiple Kendo components ( GridModule, ChartsModule, InputsModule ) but when I try to import a TabStrip I get the following error:

Error: (SystemJS) Can't resolve all parameters for e: (?). Error: Can't resolve all parameters for e: (?). at SyntaxError.ZoneAwareError (http://localhost:58498/node_modules/zone.js/dist/zone.js:958:33) at SyntaxError.BaseError [as constructor] (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:1592:20) at new SyntaxError (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20) at CompileMetadataResolver._getDependenciesMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18670:35) at CompileMetadataResolver._getTypeMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18545:30) at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18185:28) at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18061:27) at eval (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18262:58) at Array.forEach (native) at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18261:45) at eval (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27377:62) at Array.forEach (native) at JitCompiler._loadModules (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27376:47) at JitCompiler._compileModuleAndComponents (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27331:56) at JitCompiler.compileModuleAsync (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27297:25) Evaluating http://localhost:58498/main.js Error loading http://localhost:58498/main.js at SyntaxError.ZoneAwareError (http://localhost:58498/node_modules/zone.js/dist/zone.js:958:33) at SyntaxError.BaseError [as constructor] (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:1592:20) at new SyntaxError (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20) at CompileMetadataResolver._getDependenciesMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18670:35) at CompileMetadataResolver._getTypeMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18545:30) at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18185:28) at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18061:27) at eval (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18262:58) at Array.forEach (native) at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18261:45) at eval (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27377:62) at Array.forEach (native) at JitCompiler._loadModules (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27376:47) at JitCompiler._compileModuleAndComponents (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27331:56) at JitCompiler.compileModuleAsync (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27297:25) Evaluating http://localhost:58498/main.js Error loading http://localhost:58498/main.js at addToError (http://localhost:58498/node_modules/systemjs/dist/system.src.js:122:78) [<root>] at linkSetFailed (http://localhost:58498/node_modules/systemjs/dist/system.src.js:687:15) [<root>] at http://localhost:58498/node_modules/systemjs/dist/system.src.js:624:9 [<root>] at doDynamicExecute (http://localhost:58498/node_modules/systemjs/dist/system.src.js:769:7) [<root>] at link (http://localhost:58498/node_modules/systemjs/dist/system.src.js:964:20) [<root>] at doLink (http://localhost:58498/node_modules/systemjs/dist/system.src.js:623:7) [<root>] at updateLinkSetOnLoad (http://localhost:58498/node_modules/systemjs/dist/system.src.js:669:18) [<root>] at http://localhost:58498/node_modules/systemjs/dist/system.src.js:485:11 [<root>] at Zone.run (http://localhost:58498/node_modules/zone.js/dist/zone.js:126:43) [<root> => <root>] at http://localhost:58498/node_modules/zone.js/dist/zone.js:679:57 [<root>] at Zone.runTask (http://localhost:58498/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>] at drainMicroTaskQueue (http://localhost:58498/node_modules/zone.js/dist/zone.js:529:35) [<root>] at XMLHttpRequest.ZoneTask.invoke (http://localhost:58498/node_modules/zone.js/dist/zone.js:420:25) [<root>]

Systemjs just points to the js file:

map: {
// our app is within the app folder
app: 'app',

// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid/dist/cdn/js/kendo-angular-grid.js',
'@progress/kendo-angular-l10n': 'npm:@progress/kendo-angular-l10n/dist/cdn/js/kendo-angular-l10n.js',
'@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl/dist/cdn/js/kendo-angular-intl.js',
'@progress/kendo-drawing': 'npm:@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js',
'@progress/kendo-data-query': 'npm:@progress/kendo-data-query/dist/cdn/js/kendo-data-query.js',
'@progress/kendo-angular-inputs': 'npm:@progress/kendo-angular-inputs/dist/cdn/js/kendo-angular-inputs.js',
'@progress/kendo-angular-layout': 'npm:@progress/kendo-angular-layout/dist/cdn/js/kendo-angular-layout.js',
'angular2-uuid': 'npm:angular2-uuid/index.js',
'@progress/kendo-angular-charts': 'npm:@progress/kendo-angular-charts/dist/cdn/js/kendo-angular-charts.js',

// other libraries
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'rxjs': 'npm:rxjs',

},

and the module.ts file imports it

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { GridModule } from '@progress/kendo-angular-grid';
import { ChartsModule } from '@progress/kendo-angular-charts';

import { TabStripModule } from '@progress/kendo-angular-layout';

import { InputsModule } from '@progress/kendo-angular-inputs'

import { AppComponent } from './app.component';

@NgModule({
imports: [BrowserModule, TabStripModule, GridModule, ChartsModule, InputsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],

schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule {

}

Any idea what I do wrong?

TabStrip

answered on 27 Mar 2017

1 answer

1.6K+ views

Dialog Component Angular 2 - Can't bind 'width'...

Hello everyone,

I'm using Kendo UI for Angular 2 and it's awesome, but I'm having a little issue. Trying to handle the dialog component I need to change its dimensions. Looking at the docs I saw its possible to use "width" and "height" properties. When I put those I received and error:

EXCEPTION: Uncaught (in promise): Error: Template parse errors:

Can't bind to 'width' since it isn't a known property of 'kendo-dialog'.

1. If 'kendo-dialog' is an Angular component and it has 'width' input, then verify that it is part of this module.

2. If 'kendo-dialog' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

My Component

import { Component } from '@angular/core';

@Component({

selector: 'dialog-edit-form',

styles: [

"input, label { width: 100%; } label {font-size: bold; color: black;}"

],

template: `

<kendo-dialog [width]="500">

</kendo-dialog>

`

})

export class FormComponent {

}

Thanks (:

error_handler.js:56 EXCEPTION: Uncaught (in promise): Error: Template parse errors: Can't bind to 'width' since it isn't a known property of 'kendo-dialog'. 1. If 'kendo-dialog' is an Angular component and it has 'width' input, then verify that it is part of this module. 2. If 'kendo-dialog' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.