Telerik Forums
Kendo UI for Angular Forum
0 answers
89 views

Does Kendo Scheduler for Angular with custom dates range

multiple months examples 1,2,3 months view at same time.

(And does it support multiple months examples 1,2,3 months view at same time.)

And also can we custom the start and end dates. As of now I only the 1 week for custom dates.

Can you please help.

Alamo
Top achievements
Rank 1
 asked on 08 Oct 2023
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
282 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
225 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
108 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
256 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
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
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
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?