Questions on Kendo UI for jQuery Forum

1 answer

165 views

Transfer and read additional XML-data in the grid data source

I'm using Kendo UI Grid with XML as DataSource. I want to transfer additional data in the XML as the grid data.

My dataSource schema looks like this

schema: {
type: "xml",
id: "field 1",
data: "/data/dataset",
total: "/total/text()",
model: {
fields: {
field1: "field1/text()",
field2: "field2/text()"
}
}
}

My XML like this:

<total>1</total><data><dataset><field1>test</field1><field2>test</field2></dataset></data>

No i want to transfer additional data like this:

<total>1</total><data><dataset><field1>test</field1><field2>test</field2></dataset></data><additionaldata>test</additionaldata>

and i want to have access on it it in the "dataBound" event. Is it possible and if how? I hope someone can help me.

Grid

answered on 28 Mar 2017

1 answer

101 views

Problems with selecting cells in monthview on Google Chrome

Hello, we recently encountered an issue when using the scheduler in Google Chrome. It seems as certain zoom percentages on Google Chrome prevents certain cells from being selected in the monthview component of the scheduler. Providing a dojo-example here. And instructions below.

Set your browsers zoom to 67%
Try to select 2014-10-15

The specific day (and the entire week in fact) can not be selected (see attached image)

Scheduler

answered on 28 Mar 2017

1 answer

361 views

Attaching Header information to Window.Content and changing request type to POST

Hello, I have read through the documentation many times and believe I can accomplish what I want to do. In fact, I have created a Dojo doing exactly what I want:

http://dojo.telerik.com/UDoZU

However, when I attempt to do this in my own software, I cannot even change the method request type from GET to POST.

I am attempting to create a Kendo Window and insert data inside of it from an API endpoint. I need to set custom request headers for my data call in order to make the request. So far, I've tried:

var window = document.createElement('div');
$(window).kendoWindow();
var dialog = $(window).data("kendoWindow");

dialog.refresh({
url: uri_UIManagement + 'Container/GetBuiltContainer' + urlString,
type: 'POST',
headers: headers,
beforeSend: function (xhr) {
debugger;
}
});

myWindow.kendoWindow({
width: "600px",
title: "About Alvar Aalto",
content: {
url: uri_UIManagement + 'Container/GetBuiltContainer' + urlString,
type: "POST"
},
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
]
}).data("kendoWindow").center().open();

myWindow.data('kendoWindow').refresh({
url: uri_UIManagement + 'Container/GetBuiltContainer' + urlString,
type: 'POST',
headers: headers,
beforeSend: function (xhr) {
debugger;
}
});

NONE of these methods allow me to hit the breakpoint I have set inside of beforeSend. They don't even change the request type from GET to POST. I can accomplish all of these things inside of the Kendo Dojo. What am I missing?

Window

answered on 28 Mar 2017

1 answer

300 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

219 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

464 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

358 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

200 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

527 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

688 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