Telerik Forums
Kendo UI for Angular Forum
0 answers
123 views
How to show only parent Tag name if all child are selected in kendo angular multiselect tree
kulwinder
Top achievements
Rank 1
 asked on 08 Mar 2023
1 answer
233 views
Is there any way we can achieve virtual scroll in Kendo UI Angular Gantt chart?
Dimiter Topalov
Telerik team
 answered on 07 Mar 2023
1 answer
156 views
I added the event handler (scrollBottom) and every time I scroll I am querying the api and updating the datasource [data] .
it adds 1-2 empty rows at the end of every page.
Martin Bechev
Telerik team
 answered on 06 Mar 2023
1 answer
220 views

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

Slavena
Telerik team
 answered on 03 Mar 2023
0 answers
234 views

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); } };


Olivia
Top achievements
Rank 1
 asked on 03 Mar 2023
1 answer
365 views

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

"@progress/kendo-angular-buttons": "^8.2.2",
    "@progress/kendo-angular-common": "^3.2.2",
    "@progress/kendo-angular-dateinputs": "^7.1.6",
    "@progress/kendo-angular-dialog": "^7.1.5",
    "@progress/kendo-angular-dropdowns": "^7.2.4",
    "@progress/kendo-angular-excel-export": "^5.0.2",
    "@progress/kendo-angular-grid": "^7.4.2",
    "@progress/kendo-angular-inputs": "^10.1.2",
    "@progress/kendo-angular-intl": "^4.1.1",
    "@progress/kendo-angular-l10n": "^4.0.1",
    "@progress/kendo-angular-label": "^4.0.2",
    "@progress/kendo-angular-layout": "^7.2.0",
    "@progress/kendo-angular-menu": "^4.1.1",
    "@progress/kendo-angular-pdf-export": "^4.0.1",
    "@progress/kendo-angular-popup": "^5.0.2",
    "@progress/kendo-angular-progressbar": "^3.1.2",
    "@progress/kendo-angular-treeview": "^7.1.5",
    "@progress/kendo-angular-upload": "^9.0.4",
    "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.14.0",
    "@progress/kendo-licensing": "^1.2.2",
    "@progress/kendo-theme-default": "^5.0.0",
    "@progress/kendo-ui": "^2021.3.1207",
    "jquery": "^3.5.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",

Slavena
Telerik team
 answered on 03 Mar 2023
0 answers
184 views

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

Domamu
Top achievements
Rank 1
 asked on 02 Mar 2023
1 answer
192 views

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>

Veselin
Telerik team
 answered on 02 Mar 2023
1 answer
661 views

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:

 [nodes]="refinedProducts"
                [children]="children"
                [hasChildren]="hasChildren"
                [textField]="['Department', 'Category', 'SubCategory']"
                [checkedKeys]="checkedKeys"
                (valueChange)="handleProductChecking($event)"
                [checkBy]="checkBy"

 

and methods in ts file

public checkBy(item: TreeItem) {

     return item.dataItem;     

}  

public handleProductChecking(checkedKeys: any): void {

//checkedKeys coming as object - that as per my requirement

}

 

 

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.

 

 

Martin Bechev
Telerik team
 answered on 02 Mar 2023
0 answers
213 views

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

 

 

 

Domamu
Top achievements
Rank 1
 asked on 01 Mar 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?