Adding slider to listview

4 posts, 0 answers
  1. Mike
    Mike avatar
    7 posts
    Member since:
    Jul 2012

    Posted 18 May 2013 Link to this post

    I've looked for a recent example of this and can't seem to find it.

    I
    have a listview that displays results.  I want the user to see a slider
    and edit the slider without having to enter the edit mode of the
    listview.  I'll use custom ajax to pull that off... BUT i can't seem to
    add the slider to the template... it never renders. I just get the plain
    input box.

    I've tried this:
    <script type="text/x-kendo-tmpl" id="template">
    <div class="search-result k-block k-shadow" >      
          
                <input id="#=apiId#" type="button" class="k-button search-follow" value="#if(userId==null){#Follow#}else{#Unfollow#}#"/>
                <input class="#=apiId#"  value="0" data-role"slider"/># $("."+apiId).kendoSlider({
                    orientation: "vertical",
                    min: 0,
                    max: 5,
                    smallStep: 1,
                    largeStep: 5,
                    showButtons: false
                });#
       </div>
      </script>
    and this:

    <script type="text/x-kendo-tmpl" id="template">
       
    <div class="search-result k-block k-shadow" >     
              <input id="#=apiId#" type="button" class="k-button search-follow" value="#if(userId==null){#Follow#}else{#Unfollow#}#"/>
               <input class="#=apiId#"  value="0" data-role="slider"/>
    </div>
    </script>


  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 21 May 2013 Link to this post

    Hi Mike,

    Are you using remote data for the ListView? If this is the case you could initialize the Slider widget in the ListView's dataBound event. As an example: 
    $("#listView").kendoListView({
      //....
      dataBound: initializeSlider
    })
     
    function initializeSlider(){
      $(".slider").kendoSlider({
         //....
      })
    }

    If the suggested approach does not fit your requirements please provide more detailed information about your ListView's configuration. Thank you in advance for your cooperation.

    Regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Mike
    Mike avatar
    7 posts
    Member since:
    Jul 2012

    Posted 21 May 2013 Link to this post

    Thank you Iliana for the response.   I am using a remote datasource.    I tried that approach and its not practical.   There seems to be a delay in initializing the slider so the text input fields flash on the screen every time the event fires.   I had to go back to using the list with an edit button on each item to put the item into edit mode.   This is unfortunate because I wanted to have a user simply edit fields without the extra clicks.   In other words it would be nice to have the list be in 'live Edith's mode when it first renders. 
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 23 May 2013 Link to this post

    Hi Mike,

    I am afraid that Kendo ListView does not support such type of editing. By design, in order to edit an item the user has to enter in edit mode at first.

    As a workaround I suggest you to hook up to the change event of the slider and set manually the value of the corresponding dataItem. The flash which you see happens when the HTML is refreshed after the data change. I am afraid that this cannot be prevented.

    May I know which features of the ListView you are using? If you would like to edit the values directly (without pressing edit button at first) probably it would be better choice to work with MVVM + source and template binding.
    In this way you would be able to bind the slider directly to the dataItem field.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready