Question

我正在使用Kendo UI模板中的滑块。

<script type="text/x-kendo-template" id="template3">   
  <div>
       <b> Grades: </b>  <br />  
       <input id="slider" class="temperature" value="#= temper #"  data-bind="value:temper"/>
  </div>    
</script>

模板由网格上的编辑功能调用。

var grid = $("#grid").kendoGrid({                        
    editable: {
        mode:"popup",
        template:kendo.template($("#template3").html())
    },
...

我创建了JS滑块

var slider = $("#slider").kendoSlider({
                    increaseButtonTitle: "Right",
                    decreaseButtonTitle: "Left",
                    min: 0,
                    max: 5,
                    smallStep: 1,
                    largeStep: 2
                }).data("kendoSlider");

问题是弹出编辑器上没有显示Slider。仅显示该值。有人可以帮帮我吗？

Answer 1

您的滑块元素最初不可用，因此$（“＃slider”）不返回任何内容。一旦网格初始化其编辑器模板，您应该调用此代码。使用网格的编辑事件：

var grid = $("#grid").kendoGrid({                        
    editable: {
        mode:"popup",
        template:kendo.template($("#template3").html())
    },
    edit: function() {
       $("#slider").kendoSlider({
                    increaseButtonTitle: "Right",
                    decreaseButtonTitle: "Left",
                    min: 0,
                    max: 5,
                    smallStep: 1,
                    largeStep: 2
                })
    }

或者，您可以设置data-role属性：

<script type="text/x-kendo-template" id="template3">   
  <div>
       <b> Grades: </b>  <br />  
       <input data-role="slider" 
              data-min="0" 
              data-max="0" 
              data-small-step="1" 
              data-large-step="2" 
              class="temperature" 
              data-bind="value:temper"
       />
  </div>    
</script>

kendo ui使用带模板的滑块

1 个答案: