Use Kendo UI Slider with Angular 2

5 posts, 0 answers
  1. Lance
    Lance avatar
    3 posts
    Member since:
    Aug 2015

    Posted 05 Oct Link to this post

    I have an angular 2 application and I want to use the Kendo UI Slider on it.  I tried the Beta version of the "Kendo UI for Angular 2" but it did not work properly and I don't want to use a beta version. 

    How can I use the normal kendo Slider with Angular 2?  I want the slider to have ticks with number tick labels.  I am using Visual Studio 2015.

     

    Please help.

  2. Lance
    Lance avatar
    3 posts
    Member since:
    Aug 2015

    Posted 05 Oct in reply to Lance Link to this post

    Below is how my slider was configured when I was using angular 1.58.  I want the same thing for angular 2.

    <input kendo-slider k-options="slideroptions" k-max="NoOfCells" k-rebind="NoOfCells" ng-model="NoOfUnits" k-tooltip="{ enabled: true }" ng-disabled="!common.cellOrStringConfig.Battery" /> 

    scope.slideroptions = {
            largeStep: 1,
            min: 1
        };

  3. Kendo UI is VS 2017 Ready
  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 07 Oct Link to this post

    Hello Lance,

    Thank you for your interest in Kendo UI for Angular 2.

    This is a new and separate product, currently in beta stage and free for use and community preview. We will release a commercial offering in 2017 and that will also include dedicated support service.

    In the meantime, the Community & Support page outlines the available options to receive technical assistance via StackOverflow or Telerik Professional Services, or report issues and provide feedback in our kendo-angular2 GitHub repository.

    Stay tuned and keep an eye on our Kendo UI for Angular 2 site and the roadmap, the Telerik blogs (specifically, the Kendo UI Product Manager posts) and GitHub repository for updates.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  5. Lance
    Lance avatar
    3 posts
    Member since:
    Aug 2015

    Posted 21 Oct in reply to Dimiter Topalov Link to this post

    Hi,
    I've managed to achieve what I wanted.  Below is my solution in case it helps anyone else.
    slider.component.ts:
    import { Component, OnInit, forwardRef, Input, OnChanges } from'@angular/core'; import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from'@angular/forms'; declarevar jQuery: any; @Component({     selector: 'slider',     template: `        <div class="kendoslider">            <input type="text">            <input type="text">        </div>  `,     providers: [         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true },         { provide: NG_VALIDATORS, useExisting: forwardRef(() => SliderComponent), multi: true }     ] }) exportclass SliderComponent implements ControlValueAccessor {     private _slider: any;     @Input('sliderValue') _sliderValue: number = 1;     @Input('min') _min: number = 1;     @Input('max') _max: number = 10;     @Input('smallStep') _smallStep: number = 1;     @Input('largeStep') _largeStep: number = 1;     @Input('tickPlacement') _tickPlacement: string = "both";     get sliderValue()     {         returnthis._sliderValue;     }     set sliderValue(val)     {         this._sliderValue = val;         this.propagateChange(val);     }     propagateChange: any = () => {  };     validateFn: any = () => { };     constructor()     {     }     writeValue(value: any)     {         if (value)         {             this.sliderValue = value;         }     }     registerOnChange(fn: any)     {         this.propagateChange = fn;     }     registerOnTouched(){}     validate(c: FormControl)     {         returnthis.validateFn(c);     }     ngOnChanges()     {         if (this._slider)         {             let wrapper: any = this._slider.wrapper;             let element: any = this._slider.element;             // detach eventsthis._slider.destroy();             // remove slider html from DOM             wrapper.before(element.show());             wrapper.remove();             this._slider = null;             this.initialiseSlider();             this._slider.enable();         }         else         {             this.initialiseSlider();         }     }     initialiseSlider(): void     {         if (!this._slider)         {             this._slider = jQuery(".kendoslider").kendoSlider({                 change: (e: any) =>                 {                     this.writeValue(e.value);                 },                 precision: 0,                 min: Number(this._min),                 max: Number(this._max),                 smallStep: Number(this._smallStep),                 largeStep: Number(this._largeStep),                 tickPlacement: Number(this._tickPlacement)             }).data("kendoSlider");             this._slider.value(Number(this._max));         }     } }
    References in Index.html:
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css" /><link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" /><script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script><script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.core.min.js"></script><script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.userevents.min.js"></script><script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.draganddrop.min.js"></script><script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.slider.min.js"></script>
    Usage in components:
    <slidername="kSlider"[(ngModel)]=".NoOfUnits"min="1"[max]="NoOfCells"largeStep="1"smallStep="1"></slider>
    Be sure to import slider.component and add to @NgModule declarations in app.modules.ts.      
       
  6. Lance
    Lance avatar
    3 posts
    Member since:
    Aug 2015

    Posted 21 Oct in reply to Lance Link to this post

    Hi,
     
    I've managed to achieve what I wanted.  Below is my solution in case it helps anyone else.
     
    slider.component.ts:
    import { Component, OnInit, forwardRef, Input, OnChanges } from'@angular/core';
    import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from'@angular/forms';
      
    declarevar jQuery: any;
      
    @Component({
        selector: 'slider',
        template: `        <div class="kendoslider">            <input type="text">            <input type="text">        </div>  `,
        providers: [
            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true },
            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SliderComponent), multi: true }
        ]
    })
      
    exportclass SliderComponent implements ControlValueAccessor
    {
        private _slider: any;
      
        @Input('sliderValue') _sliderValue: number = 1;
        @Input('min') _min: number = 1;
        @Input('max') _max: number = 10;
        @Input('smallStep') _smallStep: number = 1;
        @Input('largeStep') _largeStep: number = 1;
        @Input('tickPlacement') _tickPlacement: string = "both";
      
        get sliderValue()
        {
            returnthis._sliderValue;
        }
      
        set sliderValue(val)
        {
            this._sliderValue = val;
            this.propagateChange(val);
        }
      
        propagateChange: any = () => {  };
      
        validateFn: any = () => { };
      
        constructor()
        {
      
        }
      
        writeValue(value: any)
        {
            if (value)
            {
                this.sliderValue = value;
            }
        }
      
        registerOnChange(fn: any)
        {
            this.propagateChange = fn;
        }
      
        registerOnTouched(){}
      
        validate(c: FormControl)
        {
            returnthis.validateFn(c);
        }
      
        ngOnChanges()
        {
            if (this._slider)
            {
                let wrapper: any = this._slider.wrapper;
                let element: any = this._slider.element;
      
                // detach eventsthis._slider.destroy();
      
                // remove slider html from DOM
                wrapper.before(element.show());
                wrapper.remove();
      
                this._slider = null;
      
                this.initialiseSlider();
      
                this._slider.enable();
            }
            else
            {
                this.initialiseSlider();
            }
        }
      
        initialiseSlider(): void
        {
            if (!this._slider)
            {
                this._slider = jQuery(".kendoslider").kendoSlider({
                    change: (e: any) =>
                    {
                        this.writeValue(e.value);
                    },
                    precision: 0,
                    min: Number(this._min),
                    max: Number(this._max),
                    smallStep: Number(this._smallStep),
                    largeStep: Number(this._largeStep),
                    tickPlacement: Number(this._tickPlacement)
                }).data("kendoSlider");
      
                this._slider.value(Number(this._max));
            }
        
    }
     
    References in Index.html:
     
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
    Usage in components:
     
    <slidername="kSlider"[(ngModel)]=".NoOfUnits"min="1"[max]="NoOfCells"largeStep="1"smallStep="1"></slider>
     
    Be sure to import slider.component and add to @NgModule declarations in app.modules.ts.
     
           
     
     
     
       
Back to Top
Kendo UI is VS 2017 Ready