Any idea why the blow code will throw error "ERROR Error: Expected initial value of type Object. See http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/#toc-value-selection" ??? If I remove the 

            <kendo-dropdownlist [data]="someList"
                                [textField]="'text'"
                                [valueField]="'value'"
                                formControlName="someFormControlName">
            </kendo-dropdownlist>

This work fine.

<kendo-dropdownlist [data]="someList"
                                [textField]="'text'"
                                [valueField]="'value'">
            </kendo-dropdownlist>

So, how do I get the dropdown list to play well in formGroup ?

Thanks,

Bryian Tan

When can we expect the Material theme to be fully supported for Kendo Angular?

The documentation currently states:
https://www.telerik.com/kendo-angular-ui/components/styling/theme-material/

The Material theme is under active development and is not supported by the whole suite. All components which are available for styling with the Material theme are included in the preview.

Do you already have an estimated date when this will be finished?

Is there a list to get all SASS theme variables used in Material theme?  The documentation says $selected-text is based off $accent-contrast but it doesn't list what $accent-contrast 

https://www.telerik.com/kendo-angular-ui/components/styling/theme-material/customization/

Also, shouldn't kendo variables be prefixed with some kendo identifier like "k".  I often create conflicts in my own SASS variables that accidentally overrides the kendo variables.  

  REQUIREMENT:

  I have a Kendo grid which displays tabular data. Initially the grid would fetch certain number of rows and upon reaching scroll end, it should make a http call      to get more rows appending to the existing list. Earlier achieved this using Kendo ui jquery.

  SCROLL: 

  Am not sure if this is a native scroll event to Kendo grid for angular. So am attaching a scroll event myself to DOM. When scroll reaches end, I make a call ,

  append more data and pass griddata to ui.

  WITH VIRTUAL SCROLL:

  From what I understand, whole data is retrieved before hand and using skip, pagenumber, we display what we need. What I need is more of an endless scroll    which appends to previous data.

  CODE:

  ngAfterViewInit() {     // attaches scroll event
     let scrolldiv = document.getElementsByClassName("k-grid-content")[0];
     if (scrolldiv) {
       scrolldiv.addEventListener("scroll", this.addMoreData.bind(this));}

     }

    addMoreData(event) {      // adds more data and passed grid data.
       let scrollAdjustment = 10;
        if (event.target.scrollTop != 0 && event.target.clientHeight + event.target.scrollTop + scrollAdjustment >= event.target.scrollHeight) {

        let moreRows = this.getMoreRows();
        this.gridView = {
          data: moreRows,
          total: moreRows.length
       }
    } }

   kendo template::

   <kendo-grid [data]="gridView" class="customgrid" >

       <div *ngFor="let col of totalColumns; ">
          <kendo-grid-column field="{{col.label}}" title="{{col.label}}" width="120"></kendo-grid-column>

     </div>

   <kendo-grid>

 1.   Is there a better way in Kendo UI Angualr to achieve this. The event I attach is defined only if there is a scrollable div inside kendo grid (which is only if               there are enough columns to bring a scrollbar)

 2. In case of Ng for, dynamically repeating , may I know how to access the data passed to <kendo-grid [data] > from ng for loop. Right now in NGFOR am              accessing  field values using a different variable (not [data]="gridView")

Hi,

The grid is having a date column as follows: -
<kendo-grid-column field="RequestedDate" title="Requested Date"filter="date" format="{0:d}" width="200" [headerStyle]="{'font-weight' : 'bold'}" [style]="{'font-size': '12px'}">
                <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
                    <kendo-grid-date-filter-menu [column]="column"
[filter]="filter"
                                                   [filterService]="filterService"
                                                   operator="eq">
                        <kendo-filter-eq-operator></kendo-filter-eq-operator>
                        <kendo-filter-neq-operator></kendo-filter-neq-operator>
                        <kendo-filter-gte-operator></kendo-filter-gte-operator>
                        <kendo-filter-lte-operator></kendo-filter-lte-operator>
                    </kendo-grid-date-filter-menu>
                </ng-template>
            </kendo-grid-column>


The, rendered grid shows the date coming from server side as follows :



As can be seen in the html markup that a format  {0:d} has been written , but it’s not showing date in that format.
Our expectation is in MM/DD/YYYY HH:MM:SS  format.

Please help

I'm getting an Uncaught TypeError: Cannot read property 'width' of undefined

When moving the mouse over the dashed line. I doesn't seem to be fatal though...

interface Model {
    interval: string;
    count: number;
    color: string;
}
@Component({
    selector: 'app-chart6',
    template: `
    <kendo-chart>
        <kendo-chart-axis-defaults [majorGridLines]="{ visible: false }"></kendo-chart-axis-defaults>   
        <kendo-chart-series>
            <kendo-chart-series-item type="column" [data]="seriesData" [color]="color" field="count" categoryField="interval"></kendo-chart-series-item>
            <kendo-chart-series-item type="line" [data]="lineData" dashType="longDash" markers="{ visible: false }" color="#000000"></kendo-chart-series-item>
        </kendo-chart-series>
    </kendo-chart>
    `
})
export class Chart6Component {
    public lineData: number[] = [150, 150, 150];
    public seriesData: Model[] = [{
        interval: "10",
        count: 200,
        color: "#00FF00"
    }, {
        interval: "11",
        count: 250,
        color: "#0000FF"
    }, {
        interval: "12",
        count: 150,
        color: "#00FFFF"
    }];
}

Uncaught TypeError: Cannot read property 'width' of undefined
    at LinePoint.createHighlight (line-point.js:196)
    at LinePoint.toggleHighlight (chart-element.js:270)
    at Highlight.togglePointHighlight (highlight.js:51)
    at Highlight.show (highlight.js:27)
    at Chart._startHover (chart.js:1039)
    at Chart._mouseover (chart.js:1052)
    at Surface.trigger (observable.js:94)
    at HTMLDivElement.eval (surface.js:135)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Zone.runTask (zone.js:188)

In API document, filter is configured with [filter] attribute.However, it does not work in the way that I thnik.

You can see my test code in https://plnkr.co/edit/byxbUXjzTjslnL2gCCSV

In summay, I put the filterDescriptor in [filter] attrbitue.

  <kendo-grid
        [data]="gridData"
        [filter]="filter"
  >
    <kendo-grid-column field="ProductID" title="ID" width="40" [filterable]="false">
    </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Product Name" width="100">
    </kendo-grid-column>
    <kendo-grid-column field="FirstOrderedOn" title="First Ordered On" width="240" filter="date" format="{0:d}">
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Unit Price" width="180" filter="numeric" format="{0:c}">
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" width="120" filter="boolean">
    </kendo-grid-column>
  </kendo-grid>

And filter is configured like following:

   public filter = {
          logic: 'or',
          filters: [{ field: 'ProductName', operator: 'contains', value: 'Chef' },
          { field: 'ProductName', operator: 'contains', value: 'Chang' }]
        };

Anyway, initial filter does not work and everyting is showed without filter.

Could you give me any advice?

The filter icon is currently displayed next to the first line of the column header text (see attached screenshot).  If a grid has some column headers text spanning on a single line, or multi-lines, is it possible to display the filter icon at the bottom line so all columns have the same position of the filter icon ?

One alternative is to set the [headerStyle] of each column to be 'white-space':'nowrap', but then the column header width will be too big if I need to show the full column name.

Thanks for any suggestion.