Adding slider to listview

[Mike]

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>

[Iliana Dyankova]

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

[Mike]

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. 

[Alexander Valchev]

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