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.

I have a grid  using the custom remote binding directive, and filtering, sorting work fine via the directive productsBinding rebind().

<kendo-grid #productgrid

                    productsBinding
                    [height]="450"
                    [resizable]="true"
                    [filterable]="true"
                    [filter]="state.filter"
                    [sortable]="true"
                    [sort]="state.sort"
                    [pageSize]="state.take"
                    [pageable]="true"
                    [skip]="state.skip"
                    [selectable]="true">

 <ng-template kendoGridToolbarTemplate>
                <table class="k-grid-ignore-click">
                    <button kendoButton [icon]="'myspace'" style="color:blue;" 
                            (click)="openPayorDeptDialog()" >
                        Select Payor/Dept
                    </button>
                </table>
            </ng-template>

I have this plunker setup with the columns 'FileId Selected' (showing the selected value from the dropdownlist) and 'File Lists' (dropdownlist).

https://plnkr.co/edit/8dhH14k9HTwgdAA4fXsb?p=preview

I would expect to see the first row of the grid 'Hospital A' to show the value "1111 file" highlighted in the dropdownlist on initial rendering, but it does not. Could someone tell me if I missed some setting?

Thanks!

Hi

I have a question on the kendo-panelbar

I added an event handler for stateChange, and in some cases, I want my user to stay on the current panelbar Item.  

Basically, If I have a validation error, i want my user to stay on the current panelbar item and not navigate to the panelbar item they clicked

    public onStateChange(data: Array<PanelBarItemModel>): boolean {
            const previousItem: PanelBarItemModel = data.filter(item => item.focused === false)[0];
            const currentItem: PanelBarItemModel = data.filter(item => item.focused === true)[0];

    .........

                    if (previousSection === 'blah blah'&& !wasSuccessful) {
                        currentItem.selected = false;
                        currentItem.expanded = false;
                        previousItem.selected = true;
                        previousItem.expanded = true;

However, my panelBar item does not return to the current panelBar Item

What must I do in order to achieve this navigation?

Thanks

Hi,
I've a TreeView and it seem that I'm too stupid to updated data or trigger a reload...

my template:

my component (relevant parts only):

so..

* the data input is bound to this.categories, which is a flat list of category objects

* the fetchChildren method loads and returns child categories

Now I'll get updates from our (custom) data layer and have to update the tree:

I can update the root categories by simply updating the cmp.categories array, but this array does not contain any child nodes. I was looking for something like "tree.getNode().reload()" but,.. nope,.. and I'm confused :-)

So my questions are...

* How can I update child nodes that are loaded using function defined in "children" input?

* How can I tell the tree view to reload children of a single node (execute fetchChildren() again)?

Thanks and best regards,
Chris

Hi,

I'm trying to use the Upload control with a an asp.net core web api backend.

My server code is expecting to receive a file with a content-type of 'multipart/form-data', the Upload control is sending it as 'application/json'. Is there a way I can set the content-type of the posted file?

I tried setting the content-type in the UploadEvent (https://www.telerik.com/kendo-angular-ui/components/upload/api/UploadEvent/) 

but it was ignored.