Telerik Forums
Kendo UI for Angular Forum
0 answers
8 views

Hi,

I've been trying to override the progress bar style for kendo-stepper. For some reason, i'm getting a scroll bar across the application in the bottom, which follows all the way across the stepper steps. 

From dev tools, i can override this overflow to hidden (Previously it was visible). But when i apply them in my style sheet, it's not getting overridden. Help please.

::ng-deep .k-stepper .k-progressbar {
    pointer-events: none;
    z-index: 0;
    overflow: hidden !important;

}

RAMAKRISHNAN
Top achievements
Rank 1
Iron
 asked on 15 Feb 2024
1 answer
59 views

 

I need to visible this step outer circle/border when it is the current step not only focusing/clicking on it,  Im using next button to go future steps

Yanmario
Telerik team
 answered on 22 Aug 2022
1 answer
193 views

Initially instead of first step other steps are disabled. I want to enable them by button click. tried as follows but step still disabled.

 


public steps = [
    {
      class: "step1",
      label: "API Setup",
      iconClass: "k-icon k-i-file-bac"
      
    },
    {
      class: "step2",
      label: "File Upload",
      isValid: this.isStepValid,
      iconClass: "myicon1",
      disabled : this.disableStep2
    },
    {
      label: "Review",
      isValid: this.isStepValid,
      iconClass: "k-icon k-i-file-txt",
      disabled : this.disableStep3
    },
    {
      label: "Finish",
      isValid: this.isStepValid,
      iconClass: "k-icon k-i-file-txt",
      disabled : this.disableStep4
    },
  ];

Hetali
Telerik team
 answered on 15 Aug 2022
1 answer
691 views

Hi,

I'm using kendo UI for angular and want to know how I can customize stepper icons with my own svg icons without adding icon library (eg: font awesome)

following is the kendo sample I'm using
import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <kendo-stepper
      [steps]="steps"
      stepType="full"
      [(currentStep)]="current"
      [linear]="false"
      [style.width.px]="570"
    >
    </kendo-stepper>
  `,
})
export class AppComponent {
  public current = 1;

  public steps = [
    { label: "Personal Info", icon: "user" },
    { label: "Education", icon: "dictionary-add" },
    { label: "Attachments", icon: "attachment", optional: true },
    { label: "Preview", icon: "preview" },
    { label: "Submit", icon: "file-add" },
  ];
}

Kaloyan
Telerik team
 answered on 10 Aug 2022
0 answers
53 views

I'm trying to adapt the kendo-stepper (with vertical position) so that I can display it as a type of collapsable between each step.

Something like this:

https://material.angular.io/components/stepper/overview

 

but I can't do it, in the image I attached a couple of examples


 

Erik
Top achievements
Rank 1
 updated question on 16 Mar 2022
1 answer
1.0K+ views
Is there a way to disable stepper functionality and keep same styling as before disabling? 
So to be more specific I want stepper to look like this


But the user click functionality should be disabled.

I've tried with disabled property but it grays out whole stepper.

Thanks,
Sasa
Preslava
Telerik team
 answered on 09 Feb 2022
1 answer
52 views

Hello,

i add an input inside kendo stepper using the 'kendoStepperStepTemplate' option, it works fine but in FireFox , you cannot select the input 
exemple :

   <kendo-stepper
            [steps]="steps"
            [stepType]="'label'"
            [currentStep]="2"
            [linear]="false"
            [style.width.px]="750"
        >
            <ng-template kendoStepperStepTemplate let-step let-index="index">
                <div class='oval-step'>
                    <span class="{{step.icon}}"></span>
                </div>
                <div class='step-label'>{{step.label}}
                 <ng-container *ngIf="index === 1">
                  <input type=text value='testtt' >
                </ng-container>
                </div>
            </ng-template>
        </kendo-stepper>

Yanmario
Telerik team
 answered on 12 Apr 2021
1 answer
358 views

Hello, I am trying to implement stepper with child steps. For example Sports is my main step and football, cricket are my sub steps. 

I can only see steppers without child steps in the website. Kindly help me on this

 

 

Svet
Telerik team
 answered on 17 Jul 2020
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?