Hi Team,

I am using Kendo Dropdown.

on Suggestion list if I selected one value and hover on the selection showing red highlight, As per my requirement I should not use any red colors.

How to remove the red highlight?

Please refer the attachment

Thanks

Sankar

Due to this message in Chrome...

"The SSL certificate used to load resources from https://www.telerik.com will be distrusted in M70. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information."

I now know the Kendo-UI tries to talk back to Telerik, for at least a CSS file, but I don't know what else.

Many of our customers have a white-list of allowed internet sites, and we don't want our application to require random 3rd party addresses to be white-listed on their firewalls, or have our request refused.  Architecturally, we did not appreciate this requirement for remote files for a library that we thought we hosted and delivered ourselves.

What are the options for not requiring internet access to use the Kendo UI?  Is it just a CSS file (or other CDN files) or other things like metrics reporting?  The CSS file does not appear to relate to any given version of Kendo UI - how do you keep backwards compatibility?

Many thanks for your help.

Hi,

If any of the kendo grid cell has overflowing content (horizontal or vertical scroll), I want to have that text copied to a clipboard by showing a 'copy to clipboard' icon on that specific cell,  when mouse is hovered over that data cell.

When trying to achieve this, I call a (mouseover) event and check if the element hovered on has overflow. If it does, I set a variable 'hasOverflow' to true and use this to conditionally show the icon. 

But the problem is I don't have access to specific cell, because kendo automatically renders them for us.

<div *ngFor column of columns>

    <ng-template kendoGridCellTemplate let-dataItem let-column="column">

         <div (mouseover) = setCellOverflow($event)><pre>{{dataItem[column.field]}}</pre></div>

         <i *ngIf= "hasOverflow">icon</i>             

    </ng-template>

</div>

Script::         

         setCellOverflow(event) {

             if(event.scrollHeight < event.clientHeight)  hasOverflow = true;       //instead of setting hasOverflow for every cell, want to set it for specific cell

         }

For some reason my dropdown isnt displaying the arrow icon.  I think its a styling issue, but cant figure out which style is being overridden.  Im using a custom bootstrap theme, but have commented out all my variables, yet the arrow still wont show.  What can I check? 

      <div class="col-1">
        Customers<br />
        <kendo-dropdownlist [data]="customerdata"></kendo-dropdownlist>
      </div>

Im also looking at the "computed" styles in the chrome dev console.  Comparing to the default example here

https://www.telerik.com/kendo-angular-ui/components/dropdowns/

See attached images.  My

The example dropdown is rending the arrow like this

<span unselectable="on" class="k-select" ng-reflect-ng-class="[object Object]">
               <span class="k-i-arrow-s k-icon" ng-reflect-ng-class="[object Object]"></span>
</span>

Where as mine is being rendered as a k-input class

<span unselectable="on" class="k-input" ng-reflect-ng-class="[object Object]"><!--bindings={}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--></span>

I have this type of problem . From some case I need to disable whole tree . And as I see when I disable root of the tree all children items will be disabled .

But when I enable that disabled item . it mean that i remove the identifier keys from disabled disabledKeys input param . I can't select tree node . Whole tree will be unselectable except the root items .

In my point of view Kendo has a bug so when you disable tree node and then enable that node you can select the disabled keys but you can't select childrens from that node before clicking on the roots of that children item.

If I am wrong please give me a tips how to make it that will allows me to select every item that I want when tree node is disabled and after it enabled .

Thank you.

https://github.com/telerik/kendo-themes/tree/develop/packages/bootstrap

About half way down the page, there is a link for using the Bootstrap theme.
Its linked to http://gyoshevlnx:4000/components/styling/ but this is broken ?

Basic Usage
For more information on how to implement the Material theme in your project, refer to the following articles:
Using the Bootstrap Theme in Angular Projects
Using the Bootstrap Theme in jQuery Projects
Customizing the Bootstrap Theme

Hello Kendo Team,

I am using below given demo to save column show/hide for future use. But, it is not working for me. 
I tried your demo in plunker, it is working fine there. but not working in my code.

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/persist-state/#toc-handling-grid-events

My grid is given below.

<kendo-grid #grid id="gridInvoice" name="gridInvoice" 
        [kendoGridGroupBinding]="gridData" 
        [pageSize]="pageSize" 
        [scrollable]="'virtual'"
        [sortable]="true" 
        [resizable]="true" 
        [reorderable]="true" 
        [filterable]="{filter:true}"                
        [columnMenu]="true" 
        [rowHeight]="35"
        [height]="550" 
        [selectable]="selectableSettings" 
        [kendoGridSelectBy]="'itblarcharge_id'" 
        [selectedKeys]="mySelection"                
        [rowClass]="isDisabled"                 
        [groupable]="true"                 
        [height]="530" 
        [sortable]="{ allowUnsort: true, mode:'multiple' }"
        [sort]="state.sort" 
        [filter]="state.filter" 
        [group]="state.group" 
        (columnReorder)="onReorder($event)"                            
        (selectedKeysChange)="onSelectedKeysChange($event)" 
        (filterChange)="filterChange($event)"
        (dataStateChange)="dataStateChange($event)"
        (columnVisibilityChange)="onVisibilityChange($event)">
                <ng-template kendoGridToolbarTemplate>
                        <button type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
                        <!-- <button class="k-button" (click)="saveGridSettings(grid)">Save current state</button> -->
                </ng-template>
                <ng-container *ngFor="let format of DataFormat">
                        <kendo-grid-column [field]="format.FieldName" [title]="format.ColumnHeader" [width]="150" [hidden]="format.IsHidden"
                                [format]="getFormat(format.ColumnFormat)">
                                <ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService">
                                        <multicheck-filter [isPrimitive]="true" [field]="column.field" [filterService]="filterService" [currentFilter]="filter" [data]="Checkprimitive(column.field,format.ColumnFormat)"></multicheck-filter>
                                </ng-template>                                
                        </kendo-grid-column>
                </ng-container>
                <kendo-grid-excel fileName="Products.xlsx" [fetchData]="allData"></kendo-grid-excel>
        </kendo-grid>

My packages are given below.

{
  "name": "mvcangular-project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animation": "^4.0.0-beta.8",
    "@angular/animations": "^5.2.0",
    "@angular/cdk": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "@progress/kendo-angular-buttons": "^4.1.1",
    "@progress/kendo-angular-dateinputs": "^3.0.0",
    "@progress/kendo-angular-dropdowns": "^2.1.0",
    "@progress/kendo-angular-excel-export": "^1.0.7",
    "@progress/kendo-angular-grid": "^3.3.0",
    "@progress/kendo-angular-inputs": "^3.0.0",
    "@progress/kendo-angular-intl": "^1.4.0",
    "@progress/kendo-angular-l10n": "^1.2.0",
    "@progress/kendo-data-query": "^1.3.0",
    "@progress/kendo-drawing": "^1.5.5",
    "@progress/kendo-theme-default": "^2.53.2",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/compiler-cli": "^5.2.10",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "jquery": "^3.3.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

Please help me in this,

Hi,

My company has its own HttpService (angular) that handles A LOT of application states. Something like: special API errors; oauth tokens; header-like pagination; and a requests queue with priorization too, ...

So I'm searching on the telerik solution if I can use my own HttpService to call the requests, but I can't find on docs any articles that tells me if I can do that.

I know that I can handle beforeRequest events, and I can add headers on "DataSource.transport.read" too. But like I said, I want telerik call my request method and pass as parameters the request data and I returns a Observable|Promise response. Is that possible?