Hi, 

I am trying to implement specific feature using kendo ui grid and MultiSelect Tree as editor template.

I tried making example within stackblitz, but unfortunately problem is that I don't have adequate data structure to make an example.

My use case is following:
I have kendo grid with multiple columns. One of these columns can have multiple elements with appropriate quantities. 
For example, column name is Furniture, and user can select multiple types of furniture but also can provide quantity of selected furniture. 

I have made kendo multiselectTree as an editor template for this column, and at the same time I used kendoMultiselectTreeNodeTemplate to add textbox to the all items in the tree. When I open editor first time and select, for example, Chairs with textbox value 4, and Tables with textbox value 1, it is perfectly fine displayed in the list. This part works fine. (multiselect shows: Chairs 4, Tables 1)

But, if I refresh page, I have no way of retrieving reference and when I open list again, I can't bind back values from tags to the textboxes in the list. Chairs and Tables are checked, but textbox remains empty.

Each row in my table is object with structure like this:
{

id: number, 
orderId: string, 
date: date,
orderedItems: [ ],
orderStatus: number

}

For example:
{
id: 24021,
orderId: 'PC-322',
date: new Date(),
orderedItems: [{itemId: 22, description: "Chair", nr: 4}, {itemId: 14, description: "Table", nr: 1}],
orderStatus: 3
}

Can you please suggest approach.

Thank you very much

I'm struggling to access this kendo-switch ID (in this case it should be A1) being passed to the generateSubscriptionArray function it seems to return undefined no matter what variation of attempts to access it I try, it also doesn't seem to show up on the $event if I try to pass this to the function.

Any assistance regarding this would be really beneficial the switch is returning the relevant true/false boolean

HTML

 
<kendo-switch
    onLabel=" "
    offLabel=" "
    formControlName="A1"
    id="A1"
    (click)="generateSubscriptionArray(userPreferenceForm.controls.A1.value,
             formcontrol id as string in this case A1 should be passed here)"
    ></kendo-switch>

TypeScript:

exportclass UserPreferencesComponent implements OnInit {
    userPreferenceForm: FormGroup;
    email_address: FormControl;

    constructor() {}

    ngOnInit(): void {
        this.userPreferenceForm = new FormGroup({
            email_address: new FormControl('', Validators.required),
            A1: new FormControl(false),
        });
    }
generateSubscriptionArray = (subscription: boolean, alertID: string): void => {
        if (subscription === true) {
            console.log(subscription, alertID);
        } else {
            console.log(subscription, alertID);
        }
    };
 

I have upgraded my Angular version from 11 to 12 and corresponding to that I have upgraded the supported Kendo version for angular 12. I am facing issue with Kendo Context Menu. Previously it used to work fine, I have added the jQuery function to dynamically add the kendo context menu on the Grid rows which will trigger on Click of the row but after upgrading the version this jQuery function does not work. I tried adding directly kendo context menu on the UI that is working so that means there is no library issue. 

Please check the code and libraries and let me know what went wrong on this jQuery function or is there any change happened recently.

$('#menu').kendoContextMenu({
                  orientation: 'vertical',
                  target: this.jqGridSelector,
                  filter: //Added classes for filtering,
                  animation: {
                    open: { effects: 'fadeIn' }
                  },
                  showOn: 'click',
                  closeOnClick: true,
                  open: (e: any) => {
                   //Adding list on context menu and showing it when click is triggered.
                  },
                  select: (e: any) => {
                   //select Function
                  },
                  close: (e: any) => {
                   //Close function
                  }
                });

I have added this above code under kendo.data.DataSource and the open function was getting triggered on row item click but after upgrade it is not happening.

Package.json

Hi,

  I am trying the code for persist columns on my computer.  I got the code from this URL:

    https://www.telerik.com/kendo-angular-ui/components/knowledge-base/persist-columns-order/

  I received the error below when I tried to run the code:

Error: src/app/app.component.ts:52:16 - error TS7053: Element implicitly has an 'any' type because expression of type '"field"' can't be used to index type 'ColumnBase'.
  Property 'field' does not exist on type 'ColumnBase'.

52         field: col["field"],
                  ~~~~~~~~~~~~

  The corresponding code is this:

//the restructured columns containing only the needed properties that will be persisted
    const restructuredColumns: ColumnFooType[] = orderedColumns.map(col => {
      const column: ColumnFooType = {
        field: col["field"],
        title: col["title"]
      };
      return column;
    });

  It looks like there is no "field" property in ColumnBase.  Does anyone know how to fix the error?

Thanks,

Taichi

Whenever i tried to key in a negative sign "-", followed by a zero. the grid filter will automatically change it to zero.

how can i prevent it from automatically changing?

need to maintain a numeric filter, (no letters allowed)

Code:

<kendo-grid-column field="xx" title="xx">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-numeric-filter-cell
[showOperators]=false
[column]="column">
</kendo-grid-numeric-filter-cell>
....
<kendo-grid-column>

I have three layer object: there is several departments, Department have multiple categories and category have multiple subCategories:

I am using [checkBy]="checkBy" in html page

Html code of tree view:

and methods in ts file

public checkBy(item: TreeItem) {

     return item.dataItem;     

}  

if I removed the [checkBy]="checkBy"

from html than parent coming checked when i checking any child item but handleProductChecking

returns the array of indexes like [0_1_2] while I need object for my requirement, 

conclusion of my requiremnt is - parent should be checked(with hypen) when I checked in any child and handleProductChecking

return the object rather than array of indexes.

Hi,

  I checked the demo for Angular kendo-grid persist state at this url: https://www.telerik.com/kendo-angular-ui/components/grid/persist-state/

  The demo is good and it works for simple columns, because it's using *ngFor to generate columns in the grid.

  Is it possible to have persist state for grid with custom columns?  For example, I have following columns in my grid:

<kendo-grid-column field="{{ 'category.field' | translate }}" title="{{ 'grid.category' | translate }}" [width]="150">
  <ng-template kendoGridCellTemplate let-dataItem>
	<span *ngIf="dataItem.category.id === CATEGORY.LIVINGROOM">
		Some custom code here

	</span>
	<span *ngIf="dataItem.category.id !== CATEGORY.LIVINGROOM">
		Some cusotm code here
	</span>
  </ng-template>
</kendo-grid-column>

<kendo-grid-column field="{{ 'subCategory.field' | translate }}" title="{{ 'grid.subCaregory' | translate }}" [width]="150">
  <ng-template kendoGridCellTemplate let-dataItem>
	<span *ngIf="dataItem.subCategory.id === SUBCAREGORY.SOFA">
		Some custom code here

	</span>
	<span *ngIf="dataItem.subCategory.id !== SUBCAREGORY.SOFA">
		Some cusotm code here
	</span>
  </ng-template>
</kendo-grid-column>

  If there is a way to use persist state for grid with custom columns, can you provide some code sample?

Thanks,

Taichi

We are trying to create multi select component with remote data (with paging) and virtual scroll to use it in grid menu filters. Unfortunately, there are few problems:

1) When I pass selected items from parent component everything that is not in loaded items is ignored (no tags presented) even if I set allowCustom to true. Loading entire data set is not an option for us, amount of data is too large.

2) Selected items are shown incorrect. It selects wrong items, seems the problem is in virtual scroll. Is there any possibility (any attribute?) to control selected items in our code?

3) Checkbox sometimes selects more than one item.


Code example: 
HTML:

TS:

Thanks in advance,
Vlad

How can I identify the primary scrollbars of the MultiSelect control to be able to modify their appearance?

I have tried to highlight the scrollbar-button so see if I am on the right track with each of these, one-at-a-time:

• .kc-input-base::-webkit-scrollbar-button:single-button
• .kc-input-base ::-webkit-scrollbar-button:single-button
• .kc-input-base > ::-webkit-scrollbar-button:single-button
• .kc-input-base > ::ng-deep::-webkit-scrollbar-button:single-button
• .kc-input-base > ::ng-deep.k-multiselect-wrap::-webkit-scrollbar-button:single-button
• .kc-input-base > ::ng-deep.k-multiselect-wrap ::-webkit-scrollbar-button:single-button
• ::ng-deep::-webkit-scrollbar-button:single-button

The multiselect is defined as:

        <kendo-label class="k-form k-form-label" text="Coverage">
          <kendo-multiselect
            [data]="coverageCodes"
            formControlName="coverageCode"
            [autoClose]="false"
            [textField]="'name'"
            [valueField]="'key'"
            class="input-search-flex kc-input-base"
            (valueChange)="valueChange($event)"
            [clearButton]="false"
            DropDownFillMode="outline"
            [popupSettings]="{ popupClass: 'kc-popup' }"
          >
          </kendo-multiselect>
        </kendo-label>

This is the result:

As you can see, the scrollbars never changed color.

Hi,

I am having an issue with kendo labels being marked as "orphaned form label" (label was not read by NVDA screen reader) when using the kendo editor with [iframe] set to false to have non-encapsulated style in the Editor. 

The WAVE browser extension does show the "orphaned form label" alert for some of your controls (dropdowns, multiselect) but since you have the aria-label attribute NVDA reads the label text values for those controls.

However, I have noticed that no such aria attribute is added/updated when the [iframe] input of the Editor control is set to false.

I have checked this in your example stackblitz environment and it seems to reproduce the issue as well.