Telerik Forums
Kendo UI for Angular Forum
0 answers
27 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
62 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
219 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
751 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
57 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
55 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
390 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
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?