In my requirement, I need to display both Room Number and Room Type on the side of the scheduler. Though I did achieve this by vertical grouping now I want is split that Room Column into Two so that on one side it shows Room Number and on the other Room Type. Please see the image for reference

I was able to achieve this with a custom field in the resource array 
My Example

Hi Everyone,

I'm using Angular 6 and Kendo UI for Angular. 

When I have chart with more than one series item in it, tooltips are not shown. They are appear for a microsecond(you cant see the full content of a tooltip) then it disappears and then it is redrawn again. So every time I hover over the chart area, the tool tip is redrawn multiple times (it doesnt stop while I hover).

Any help would be much appreciated.

The component HTML is:

  <div class="row">
    <div class="col-lg-12 text-center pv-lg col align-self-center">
      <!-- <kendo-chart class="catProdSales" [transitions]="false"> -->
      <kendo-chart [transitions]="true">
        <kendo-chart-area background="none" [height]="height"></kendo-chart-area>

        <kendo-chart-tooltip format="Default Content {0}" [shared]="true">
        </kendo-chart-tooltip>

        <kendo-chart-legend position="right" orientation="vertical">
        </kendo-chart-legend>

        <kendo-chart-value-axis>
          <kendo-chart-value-axis-item>
            <kendo-chart-value-axis-item-labels culture="en-GB" format="c">
            </kendo-chart-value-axis-item-labels>
          </kendo-chart-value-axis-item>
          <kendo-chart-value-axis-item name="secondAxis">
            <!-- <kendo-chart-value-axis-item-labels culture="en-GB" format="c">
                      </kendo-chart-value-axis-item-labels>                   -->
          </kendo-chart-value-axis-item>
        </kendo-chart-value-axis>

        <kendo-chart-category-axis>
          <kendo-chart-category-axis-item [labels]="categoryAxisLabelConf" [categories]="data?.LabelData.slice(1)" [axisCrossingValue]="[0, 1110]">
          </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>

        <kendo-chart-series>
          <kendo-chart-series-item type="column" [data]="data?.ColumnData?.slice(1)" axis="secondAxis" name="Packs">
            <kendo-chart-series-item-tooltip>
              <ng-template let-value="value">
                {{ value
                < 1000 ? value : (value / 1000).toFixed(1) + 'k' }} </ng-template>
            </kendo-chart-series-item-tooltip>
          </kendo-chart-series-item>
          <kendo-chart-series-item *ngFor="let item of data?.LineData;" type="line" [data]="item.slice(1)" [name]="item[0]">
            <kendo-chart-series-item-tooltip>
              <ng-template let-value="value">
                {{ value
                < 1000 ? value : (value / 1000).toFixed(1) + 'k' }} </ng-template>
            </kendo-chart-series-item-tooltip>
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    </div>
  </div>

I've noticed a regression in the dropdown list when i specify the dropdown height. The shadow is resizing but not the actual 

list. Here is a plunker showing the issue

https://plnkr.co/edit/A8bgcQrFi6ijrwEezvRp?p=preview

Is this a known issue and is there a work around??

In my angular.js app view I initiate kendo grid with the  directive:

<kendo-grid options="gridConfig" id="grid" class="operationsGrid" flex></kendo-grid>

and in my kendo grid configuration I have a custom command action:

{ command: { name: "comment", click: showComments, template:'<md-menu><md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="openMenu($mdMenu, $event)"> <i class="material-icons">comment</i> </md-button> <md-menu-content width="4"> <md-menu-item> <md-button ng-click="redial($event)"> <i class="material-icons">close</i> </md-button> </md-menu-item> <md-menu-item> <md-button disabled="disabled" ng-click="checkVoicemail()"> <i class="material-icons">open</i> </md-button> </md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-button ng-click="toggleNotifications()"> <i class="material-icons">comment</i> </md-button> </md-menu-item> </md-menu-content> </md-menu>' }, width: "80px" }

The button with the comment material icon appears, but the click action openMenu($mdMenu,$event) doesn't get called. I don't even get an error. 

whats wrong my setup? 

I tried to integrate the keyboard navigation in my code but i get the  activeRow, activeCell attributes as undefined( in incell-tab.directive.ts file)   as shown in attached image.please check out my code in plunker and suggest a solution.

https://next.plnkr.co/edit/1p2315uxx3OAuYcM1CpL?p=preview

To date I've made several modifications to the in-cell editing example to get it to work in my Angular reactive forms. The following is how I typically built my cellClickHandler and cellCloseHandler:

  public cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited }) {

    if (!isEdited) {
      sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
    }
  }


  public cellCloseHandler(args: any) {
    const { formGroup, dataItem } = args;

    if (!formGroup.valid) {

      args.preventDefault();
    } else if (formGroup.dirty) {

      this.editService.assignValues(dataItem, formGroup.value);
      this.editService.update(dataItem);

      let iFeasibilityFlag: IFeasibilityFlag = {
        'id': dataItem.id,
        'flagSeq': dataItem.flagSeq,
        'location': dataItem.location,
        'warning': dataItem.warning,
        'description': dataItem.description,
        'stop': dataItem.stop
      }

      this.feasibilityFlagService.save(iFeasibilityFlag, false);
    }
  }

  public createFormGroup(dataItem: any): FormGroup {
    return this.formBuilder.group({
      'id': dataItem.id,
      'flagSeq': dataItem.flagSeq,
      'location': dataItem.location,
      'warning': dataItem.warning,
      'description': dataItem.description,
      'stop': dataItem.stop
    });
  }

This works fine if I have data I'm keying in by hand but I've noticed that this pattern doesn't give me a formgroup name that I can latch onto such as if I need to declare in kendoGridEditTemplate: let-formGroup="namedFormGroup" or in kendo-dropdownlist: [formControl] ="namedFormGroup.get('property')"

The attached pictures show how I'm trying to contend with this at present. Unfortunately while I've tried this several ways the following tends to show up often and I'm not sure how to read this error:

TypeError: control.setParent is not a function

Take a look at the attached images and let me know if there's something you can think of that I need to add to these or if you see something I'm doing breaking the typescript let me know what I'd need in order to map it correctly.

Thank you!

Is there an update to the Visual Studio template mentioned here

https://www.telerik.com/blogs/cooking-with-aspnet-core-and-angular-2

To use Core 2.1.x and Angular 6.x ?