Telerik Forums
Kendo UI for Angular Forum
0 answers
88 views
As of R3 2023 release, the font icons are detached from the themes css files. If you are still using font icons, make sure to include a reference to the font icons in your applications. You can read more information about the change in the following blog post: https://www.telerik.com/blogs/future-icons-telerik-kendo-ui-themes. It contains essential information about the change for all products and migration articles to svg icons.
Telerik Admin
Top achievements
Rank 1
Iron
 asked on 06 Oct 2023
1 answer
280 views

Hi , 

I am using the Kendo Grid to display some data with checkboxes , I am trying to checked the item checkbox if the item is already selected , the selected item id is store on a separate sql table .

The process is ;  load items , load selected items , add selected items to selectedKeys.

for some reason the first time the page is loaded selectedKeys is empty , but if a navigate to another page and back to the page the selected items are checked.

I can only assume the selectedKeys are not populated on time for the grid to update the checkboxes , I have try NgOnInit , ngAfterViewInit. 

Any Ideas ? 

 

HTML

 <kendo-grid [data]="gridData" 
    (dataStateChange)="dataStateChange($event)" 
    [filterable]="true"
    [filter]="state.filter"
    [sortable]="true"
    [sort]="state.sort"
    [pageSize]="20"
    [pageable]="true"
    kendoGridSelectBy="codeNumber"
    [selectedKeys]="selectedCodes"
    (selectionChange)="onSelect($event)"
    [selectable]="selectableSettings">
       
        <kendo-grid-column field="codeNumber" title="Code Number"> </kendo-grid-column>
        <kendo-grid-checkbox-column title="Use on Project"></kendo-grid-checkbox-column>
        
    </kendo-grid>

TS 

export class PackageCodesMasterListComponent implements OnInit, AfterViewInit {

    public gridData: GridDataResult;
    packageCodes: PackageCode[] = [];
    item: PackageCode;
    packageCodeTypes: PackageCodeType[];
    public selectedCodes: string[] = [];
    projectPackageCodes: ProjectPackageCode[] = [];

    public mode: SelectableMode = "multiple";

    constructor(private store: Store<IPackageCodeState>, private coreStore: Store<AppState>, private router: Router) {
        combineLatest(this.store.pipe(select(selectPackageCodes)), this.store.pipe(select(selectProjectPackageCodes)), this.store.pipe(select(selectPackageCodeTypes))).subscribe(([packageCodes, projectPackageCodes, packageCodeTypes]) => {
            if (packageCodes && projectPackageCodes && packageCodeTypes) {
                this.packageCodes = packageCodes;
                this.projectPackageCodes = projectPackageCodes;
                this.packageCodeTypes = packageCodeTypes;

                if (this.projectPackageCodes.length > 0) {
                    this.findSelectedItems();
                }
                this.gridData = process(this.packageCodes, this.state);
            }
        })
    }

    ngOnInit(): void {
        this.store.dispatch(getPackageCodes())
        this.store.dispatch(getPackageCodeTypes())
        this.store.dispatch(getProjectPackageCodes())
    }

    public ngAfterViewInit() {
        //Custom logic could be added here, to be executed once the grid and the selection are loaded
        this.findSelectedItems();
    }

    public state: State = {
        sort: [{ field: "codeNumber", dir: "asc" }],
        group: [],
        filter: {
            logic: "and",
            filters: [],
        },
    };

    public selectableSettings: SelectableSettings = {
        enabled: true,
        mode: this.mode
    };

    public dataStateChange(state: DataStateChangeEvent): void {
        this.state = state;
        this.gridData = process(this.packageCodes, this.state);

    }

    findSelectedItems() {
        if (this.projectPackageCodes.length > 0) {
            this.projectPackageCodes.forEach(item => {

                let code = this.packageCodes.find(x => x.packageCodeId === item.packageCodeId)
                let y = this.selectedCodes.includes(code.codeNumber)
                if (y === false) {
                    this.selectedCodes.push(code.codeNumber);
                    console.log(this.selectedCodes.length)
                }
            })
        }
    }

Hernando
Top achievements
Rank 1
Iron
Iron
 updated answer on 05 Oct 2023
1 answer
91 views

https://www.telerik.com/kendo-angular-ui/components/charts/drill-down/

 

Error: src/app/dashboard/dashboard.component.html:20:23 - error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ "Company A": { product: string; sales: number; }[]; "Company B": { product: string; sales: number; }[]; }'.

20               [data]="productData[company]"
                         ~~~~~~~~~~~~~~~~~~~~
 
Martin Bechev
Telerik team
 answered on 05 Oct 2023
1 answer
146 views

I am using kendo Multiview calendar .I am expecting that when I click on any of the Weeknumber, complete week should be selected . Kindly help on this . Is there any click event available ?

Martin Bechev
Telerik team
 answered on 04 Oct 2023
1 answer
223 views

I am using kendo Multiview calendar . Current implementation is the start day of the week is from Sunday.
I need to make start day of the week as Monday .Kindly help on this

My sample code :

 <kendo-daterange>
                <div class="row">
                  <div class="col-md-6">
                    <kendo-floatinglabel text="Start">
                      <kendo-dateinput kendoDateRangeStartInput [min]="minDate" [(value)]="range.start"></kendo-dateinput>
                    </kendo-floatinglabel>
                  </div>
                  <div class="col-md-6">
                    <kendo-floatinglabel text="End">
                      <kendo-dateinput #endDateInput kendoDateRangeEndInput [max]="maxDate" [(value)]="range.end"></kendo-dateinput>
                    </kendo-floatinglabel>
                  </div>
                </div>
              
                <kendo-daterange-popup>
                  <ng-template kendoDateRangePopupTemplate>
                    <kendo-multiviewcalendar kendoDateRangeSelection [selectionRange]="range" [weekNumber]="true"
                      (selectionRangeChange)="handleSelectionRange($event)">
                
                      <ng-template kendoCalendarWeekNumberColumnTemplate  let-context="cellContext">
                        <span class="weeknumber-cell">{{context.formattedValue}}</span>
                      </ng-template>
                    </kendo-multiviewcalendar>
                  </ng-template>
              
                </kendo-daterange-popup>
    </kendo-daterange>

Martin Bechev
Telerik team
 answered on 04 Oct 2023
0 answers
286 views

I'm now finding a way to customize the appearance of TabStrip in our app.

As defined in Kendo default theme, the TabStrip was defined with a border roundness by default and this behavior affects both the border of the tabstrip and closable buttons. I concerned if there's a way to configure the TabStrip roundness which works as button's roundness: https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance/#toc-roundness

Thanks in advance.

 

Nhat
Top achievements
Rank 1
 updated question on 04 Oct 2023
1 answer
82 views
i am using a kendo combox dropdown for my angular project where i am using [kendoDropDownFilter]="filterSettings" on the dropdown, but when i am searching the filter and selecting from it , it always select the 1st option but when i remove this property it stop searching. find a way to solve the issue, so that if i type and select it should select the option i selected not the 1st option on the list.
Simeon
Telerik team
 answered on 03 Oct 2023
0 answers
107 views

    <kendo-chart [categoryAxis]="{ categories: categories }">
      <kendo-chart-series-defaults type="bar">
        <kendo-chart-series-defaults-labels format="c">
        </kendo-chart-series-defaults-labels>
      </kendo-chart-series-defaults>

      <kendo-chart-series>
        <kendo-chart-series-item [data]="salesData"> </kendo-chart-series-item>
        <kendo-chart-series-item [data]="purchaseData">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>

Tera
Top achievements
Rank 1
Iron
Iron
 asked on 02 Oct 2023
1 answer
253 views

I am using the kendo-drawer component at the left side of a page. When the drawer is collapsed, only the icons are visible. At this time I would like to show tooltips over the icons.

I am using the 'items' attribute of Drawer to specify the items. However I do not see any attribute for tooltips in the docs for https://www.telerik.com/kendo-angular-ui/components/layout/api/DrawerItem

Is there anyway this can be achieved?

Hetali
Telerik team
 answered on 27 Sep 2023
1 answer
175 views
Martin Bechev
Telerik team
 answered on 26 Sep 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?