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.     

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?

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: 

My Component

Thanks (: 

When having a Grid with only one column,the height of the row decreases when editing its cell. Please check the following example:

http://dojo.telerik.com/EsATab 

Hi, 

How to end the current cell edit mode in the toolbar button click event?

Thanks! 

Regards,

Su Pei

I currently have the Date/Time picker set to a time interval of 240 minutes, which is 12:00AM, 4:00AM, 8:00AM, 12:00PM, 4:00PM, and 8:00PM.  I would like to only show 8:00AM and 8:00PM.  Is this achievable?

Hello -

We are making heavy use of Kendo UI Grids in our AngularJS-based application.

 In some views, we may have up to 6 different kendo grids showing data.  We are using remote live scrolling in some and others we are loading all the data (when dataset size is small).

**All of our grids are READ-ONLY.  In other words, users are just viewing data, not editing, modifying, etc. rows**

We have discovered that each *ROW* in each table has an angular $watcher attached to it for **each** column value.

For example:

In the example above, **TWO** angular watches will be created for "id" and "hostname" for **each row**.

If our table has 200 rows x 2 watchers = 400 angular watchers added to the angular $digest cycle (which is run 2x every time there's an "event" that triggers the digest cycle).

We understand that for **editable** grids these watches may be required to correctly perform two-way data-binding.  However, since our grids are read-only we do **NOT** need these watches created (and they are impacting our application's performance).  

We have tried setting "editable: false" on both the grid options as well as individual columns, but it seems to have no affect.

Is there any way to prevent Kendo from creating all these **unnecessary** AngularJS watches and scopes?

Hello.

We have a problem of time shift to DateTimePicker widget.
When I entered the current date and time, and switch it on 03.26.2017, the DateTimePicker added to the time of one hour. It's a problem. We do not change time automatically when time clock time forward.
Worse, if I change the value on the date 27.03.2017 time to go back - this is a mistake.
Or if the specified date to 03/26/2017 and change it for any other - moves the time.
Behavior is also seen on the official website:
http://demos.telerik.com/kendo-ui/datetimepicker/index

Well thank you.

Hello,

Can you please help us with detail explanation and full steps how to implement drop down list column in Kendo grid that should work when we add new record and also  when we edit existing record.

can you please respond ASAP.

Okay, been working with this one for about 20 mins and I'm not sure what's going.

I've got a kendo Switch which I enable like so on my page inside using an MVVM framework.

<input data-role="kendo.mobile.ui.Switch" id="mySwitch'" data-type="boolean'" data-name="showRecords'" data-checked="false" />

The switch renders find, but no matter if I have it on or off is just sends "on" to my form as a value.

How do I get it to send off please?

Philip