is there any configuration in the control to show 5% on focus too instead of 0.05,
for percentage its right to show 0.05 as value and on focus out it displays 5% but if there is a configurable switch to do the show 5% both times other than writing custom focus and blur events
The built-in number formatting allows to escape the '%' symbol, thus skipping the default value * 100 behavior.
Here is how you can do this:
#Component({
selector: 'my-app',
template: `
<kendo-numerictextbox
[value]="value"
[format]="format"
></kendo-numerictextbox>
`
})
export class AppComponent {
public value: number = 5;
public format: string = "#.# \\%";
constructor(public intl: IntlService) {}
}
Runnable demo: http://plnkr.co/edit/Ba05nP4LCgjuKjssSJzE?p=preview
More details about the formats can be found in the kendo-intl repo:
https://github.com/telerik/kendo-intl/blob/master/docs/num-formatting/index.md#custom
Related
When I open the DatePicker with a Month picker on the left navigation, there is no January option, you have to select the year which represents JAN; this is confusing to my users. I'd like to see the year when I scroll down, and see a JAN below 2020, 2021, etc.
You can use the kendoCalendarNavigationItemTemplate template to customize the way the navigation entries are shown.
Here's a simple example that adds " Jan" after the year number:
#Component({
selector: 'my-app',
styles: ['/deep/ .k-calendar-navigation .k-content li { padding: 0; }'],
template: `
<kendo-calendar>
<ng-template kendoCalendarNavigationItemTemplate let-title>
{{isNaN(title) ? title : title + " Jan"}}
</ng-template>
</kendo-calendar>
`
})
class AppComponent {
public isNaN = isNaN;
}
I am trying to disable mdl-menu-item based on condition set by module.
my app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'ca-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
test() {
return true;
}
}
my app.component.html
<button mdl-button #btn1="mdlButton" (click)="m1.toggle($event, btn1)" mdl-button-type="raised" mdl-ripple>Options</button>
<mdl-menu #m1="mdlMenu" mdl-menu-position="top-left">
<mdl-menu-item mdl-ripple [disabled]="test()">Draw Object</mdl-menu-item>
<mdl-menu-item mdl-ripple mdl-menu-item-full-bleed-divider>Another Action</mdl-menu-item>
<mdl-menu-item mdl-ripple disabled>Disabled Action</mdl-menu-item>
<mdl-menu-item>Yet Another Action</mdl-menu-item>
</mdl-menu>
At this stage the menu item is never disabled, not sure what i am doing wrong here.
The disabled attribute is a ui only feature in material design lite. e.g. there are only some css rules that change the ui if the disabled attribute is present on an mdl-menu-item. So in your case you can do the following:
<mdl-menu-item [attr.disabled]="test() ? '' : null">Draw Object</mdl-menu-item>
The null value removes the attribute. Also you should note that the click event is fired in any case.
This could be improved but I think I would break existing behavior. I have filed an issue for the next major release to make it more angular like (https://github.com/mseemann/angular2-mdl/issues/797).
I'm using the react-virtualized ScrollSync component to sync the scrolling of a couple fixed headers — very similar to the example in the docs.
My question: is it possible to provide an initial scrollTop value to ScrollSync (or its children)? I realize that the better way to do this would be through use of scrollToRow on the Grid component that controls the scroll position — for what it's worth, I am using scrollToColumn for this purpose. But because, vertically, I'm only rendering one very tall cell, scrollToRow doesn't provide the fidelity needed.
I do realize that this is a slightly bastardized use of a grid component, but it all works quite nicely as a horizontal, infinitely loading scroller, while allowing me to re-use an existing component. If I could just set an initial scrollTop, I'd be golden.
Thanks.
Unfortunately this is not currently supported without a bit of a hack.
First, the reason for the hack: Scroll offsets flow in one direction with ScrollSync (main Grid to synchronized Grids). This means that even if ScrollSync accepted default left/top offsets as props- they would get overridden by the first render of the main Grid. I think this is probably the right thing to do to avoid ugliness inside of react-virtualized.
However you could work around it in application code like this if you wanted to:
class YourComponent extends Component {
render () {
// These are arbitrary
const defaultScrollLeft = 300
const defaultScrollTop = 500
return (
<ScrollSync>
{({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => {
if (!this._initialized) {
scrollLeft = defaultScrollLeft
scrollTop = defaultScrollTop
this._initialized = true
}
return (
<div>
<Grid
{...otherSyncedGridProps}
scrollLeft={scrollLeft}
/>
<Grid
{...otherMainGridProps}
onScroll={onScroll}
scrollLeft={defaultScrollLeft}
scrollTop={defaultScrollTop}
/>
</div>
)
}}
</ScrollSync>
)
}
}
I want to bind the kendo-dropdownlist to a specific class. Essentially I need to change the appearance of the control based on certain state of the form (e.g. error, required, etc). The logic in the model determines which classes are applied to the control.
If the model is 'error-state' then add CSS to put a box around it, if required, change border to a different state, and other business rules.
How do I programmatically bind CSS classes to a kendo-dropdownlist?
I have tried
[ngClass]="class_list_in_model"
-- and --
class="class_list_in_model"
For my text box input controls I am using [ngClass]="someproperty_in_model" and that works.
You can use an [ngClass] binding for the <kendo-dropdownlist> component:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<kendo-dropdownlist [ngClass]="ddl_state" [data]="listItems">
</kendo-dropdownlist>
`,
styles: [".error-state { box-shadow: 0 0 3px 3px red; }"]
})
export class AppComponent {
public ddl_state: string = "error-state";
public listItems: Array<string> = ["Item 1", "Item 2", "Item 3"];
}
Here is a plunkr demo that shows this in action.
When I inherit/subclass the 'Column' component, it throws Warning: Failed prop type: Table only accepts children of type Column
This is how I subclassed Column
import React, {Component, PropTypes} from 'react';
import * as RV from 'react-virtualized';
class Column extends Component {
constructor() {
super();
}
render() {
return (
<RVC.Column {...this.props} type="Column" />
)
}
}
Column.defaultProps = RV.Column.defaultProps;
Column.propTypes = RV.Column.propTypes;
export default Column;
It works very well but how can I avoid from that warning?
I don't think there's any benefit to subclassing Column. I assume your real intent is to set default values or DRY up your project in which case, I'd suggest just using a factory-function for columns like so:
import { Column, Table } from 'react-virtualized'
export default function CustomColumn (columnProps) {
const customProps = {
// Set any default props here ...
}
return (
<Column
{...customProps}
{...columnProps}
/>
)
}
function ExampleTable (tableProps) {
return (
<Table {...tableProps}>
{CustomColumn({
dataKey: 'foo',
width: 100
})}
{CustomColumn({
dataKey: 'bar',
width: 100
})}
</Table>
)
}
For what it's worth, I've done this on Production projects and it works nicely. If you think you have a strong use-case for subclassing Column though let me know and I will consider adding support for it.
I'm afraid you are not subclassing RV.Column at all, you are still subclassing React.Component, just that the name of your component is Column. React will still show the error because your self-defined Column !== RVC.Column.
Why do you want to subclass it in the first place? What does type="Column" do?