I have created a custom legend based on this approach, and it works well. Is it possible to change the legend text color when the item is clicked and in it's "inactive" state? So far everything I have tried ends up changing the color of all the legend items and not just the one I clicked on. 

Thanks, 

How do I configure a column in a Kendo Angular GridComponent to size to fit its contents please?

Would like some Kendo-specific suggestions or tips to best use the components, mainly in regards to whether or not seperate "create" and "edit" components should be created.  The UI im putting together is fairly complex and ill either need to manage the complexity of having almost identical create and edit components, or managing whether or not the user is editing or creating a new object.  So, either in general or given the scenario below, would you look at creating separate "create" and "edit" components?

Generally I have been using separate create and edit components when using angular with basic html components.  However, I think I should be able to manage a particular object type with just a single component.  Eg the Angular.io example managing heros.  The example below allows listing and editing a "hero", but not creating a new hero. 
example

The UI im about to build involves two grids in a master/detail relation, along with other elements related to the parent object. So the user would come to this screen and start a new DeliveryBucket by entering some basic info about the DeliveryBucket, then adding items to Grid A and for each row in Grid A, they would need to add items to Grid B.  Once they have enough to start they could "save" the DeliveryBucket which would persist the data model back to the database via an angular service and api.

The data model looks something like this. 

DeliveryBucket
    |___Path
        |__<Destination>
                |__Order
                    |__<OrderItem>

Where:  
- DeliveryBucket will contain a single path
- Path contains one or more Destinations
- Destination contain a single order
- Order contains one or more OrderItem

Do you know if there's any known issue using Kendo-splitter, kendo-window, kendo-treeview, kendo-tabstrip with Safari browser?

I tested my app with Chrome, IE, Edge and the pages look OK with these browsers.

Only with Safari, then the page does not show the splitter panes, tabs, popup dialog correctly.

Attached is a document showing screenshots across browsers.

 Hi,

I have a 'kendo-autocomplete' control on my app. Trying to set auto focus (element highlighted) on page load.  Using native javascript was able to track down the HTML element , but cannot fire 'click' / 'focus' events on them. Can you please help ?

I have seen a jquery post achieving the same , by calling .data('kendo-autocomplete). https://stackoverflow.com/questions/17152915/setting-focus-on-autocomplete-textbox

Here's what I tried ->

1. let searchInput: HTMLElement = document.getElementsByClassName('customClass')[0] as HTMLElement;

     searchInput.click(); //doesn't fire

2. Native Angular way -> Doesn't even find the element on DOM.

    <kendo-autocomplete #findMe>

     @ViewChild('findMe') searchInput: ElementRef;

     ngAfterViewInit() {

            this.searchInput.nativeElement.focus();    //searchInput is not defined. 

     }

Hello,

I need to use custom directives for manage checkedChange behavior.

Firstly I tried:

 <kendo-treeview [nodes]="model.Nodes"
                    textField="TextField"
                    kendoTreeViewExpandable
                    [expandBy]="model.ExpandBy"
                    [(expandedKeys)]="model.ExpandedKeys"
                    [hasChildren]="model.HasChildren"
                    [children]="model.Children"

                    [kendoTreeViewCheckable]="model.CheckableSettings"
                    [(checkedKeys)]="model.CheckedKeys"
                    [checkBy]="model.CheckBy"
                    [isChecked]="model.IsChecked"
                    (checkedChange)="checkMultiple($event)"
    </kendo-treeview>

but fires my event, and then the default event also. So checkMultiple was executed 2 times, so I could't check items. I thought that this way ignore the default event.

For this reason I decided to use my own custom directives, to overwrite all:

<kendo-treeview [nodes]="treeView.Nodes"
                    textField="TextField"
                    kendoTreeViewExpandable
                    [expandBy]="treeView.ExpandBy"
                    [(expandedKeys)]="treeView.ExpandedKeys"
                    [hasChildren]="treeView.HasChildren"
                    [children]="treeView.Children"

                customCheck
                    [(checkedKeys)]="treeView.CheckedKeys">
    </kendo-treeview>

My Kendo menu items are loaded from a JSON file so it's dynamically created using the [items] property. How do I change the font color for menu items? 

I know there's a cssClass property on MenuItemComponent but that doesn't work for me.

Im using the bootstrap theme, and things seem to be working ok once I switched my app config over to using scss.
Here is my variables.scss file
However, looking at the override variables on this page, I added $primary to be a different color, but it still shows up blue (default)
https://www.telerik.com/kendo-angular-ui/components/styling/theme-bootstrap/customization/

$base-theme:Bootstrap;
$skin-name:kendo-dflood-bs4-1;
$accent: #007bff;
$secondary: #e4e7eb;
$info: #17a2b8;
$success: #28a745;
$warning: #ffc107;
$error: #dc3545;
$body-bg: #ffffff;
$body-color: #292b2c;
$component-bg: #ffffff;
$component-color: #292b2c;
$card-cap-bg: #f7f7f9;
$card-cap-color: #292b2c;
$series-a: #0275d8;
$series-b: #5bc0de;
$series-c: #5cb85c;
$series-d: #f0ad4e;
$series-e: #e67d4a;
$series-f: #d9534f;
$button-bg:#dc3545;  //bg should be red
$primary:#28a745;

<div class="col-xs-12 col-sm-12 col-lg-12">
  <p class="k-block">
    <kendo-buttongroup>
      <button kendoButton [primary]="true"> test1</button>
      <button kendoButton [primary]="true"> test2</button>
      <button kendoButton [primary]="true"> test3</button>
      <button kendoButton [primary]="true"> test4</button>
      <button kendoButton [primary]="true"> test5</button>
    </kendo-buttongroup>
  </p>
</div>

    <div class="col-xs-12 col-sm-12 col-lg-12">
      <p class="k-block">
        <kendo-buttongroup>
          <button kendoButton [primary]="true" [togglable]="true"> Rating </button>
          <button kendoButton [primary]="true" [togglable]="true"> Invoices  </button>
          <button kendoButton [primary]="true" [togglable]="true"> Statements </button>
          <button kendoButton [primary]="true" [togglable]="true"> Vouchers </button>
          <button kendoButton [primary]="true" [togglable]="true"> ChargeBacks </button>
        </kendo-buttongroup>
      </p>
    </div>

Looking at the "computed" styles in the dev console, the font-zie is 10 px.  How can I get it larger?  Isnt the bootstrap default 14 px?

Im currently using the bootstrap theme and now looking at using a custom theme based on the bootstrap theme.

Looking over this, im not sure on how to place the output
https://www.telerik.com/kendo-angular-ui/components/styling/theme-builder/

When I download my theme, I have a zip file containing two files, all.css and variables.scss

For example, in the linked instructions above, do I use these paths and put the two files in the zip file into the scss/all folder?

// import configuration from the theme builder
@import 'variables.scss';
// import the base theme
@import '~@progress/kendo-theme-default/scss/all';

Or... since im using the bootstrap theme, I replace the files in @progress\kendo-theme-bootstrap\scss ???

Or, do I create a new folder under node_modules\@progress with the name of my new theme?