k-add按钮只能工作一次。

时间:2015-08-27 11:13:17

标签: javascript jquery kendo-ui telerik kendo-listview

viewtemplate中带有k-add-button的a href仅适用于时间,而不是多次。有人知道为什么,或mybe一个样本或解决方案正常工作? 如果k-add-button位于模板外部,则可以正常工作。

<div id="example"></div>
<script type="text/x-kendo-template" id="viewtemplate">
    <div class='k-widget'>
        <span>Filter:</span><span>#:filtertext#</span><span>Filterwert:</span><span>#:filterwert#</span>
        <a class="k-button k-edit-button" ><span class="k-icon k-edit"></span></a>
        <a class="k-button k-delete-button" ><span class="k-icon k-delete"></span></a>
        <a class="k-button k-add-button" ><span class="k-icon k-add"></span></a>            
    </div>
</script>
<script type="text/x-kendo-template" id="editTemplate">
    <div class='k-widget'>
         <input type="text" class="k-textbox" data-bind="value:filtertext" name="filtertext" required="required" validationMessage="required" />
         <span data-for="filtertext" class="k-invalid-msg"></span>
         <input type="text" class="k-textbox" data-bind="value:filterwert" name="filterwert" required="required" validationMessage="required" />
         <span data-for="filterwert" class="k-invalid-msg"></span>
         <a class="k-button k-update-button" ><span class="k-icon k-update"></span></a>
         <a class="k-button k-cancel-button" ><span class="k-icon k-cancel"></span></a>
    </div>
</script>
   <script type="text/javascript">
    $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
              data: [ { filternr: 0, filtertext: "SA-Code", filterwert:"123"} ],
              schema: {
                  model: {
                   id: "filternr",
                   fields: {
                        filternr: { type: "number" },
                        filtertext: { type: "string" },
                        filterwert: { type: "string" }
                      }
                  }
              }
        });

        var listView = $("#example").kendoListView({
            dataSource: dataSource,
            template: kendo.template($("#viewtemplate").html()),
            editTemplate: kendo.template($("#editTemplate").html()),
        }).data("kendoListView");

        $(".k-add-button").click(function(e) {
            listView.add();
            e.preventDefault();
        });       


    }); // Ende $(document).ready()
    </script>

1 个答案:

答案 0 :(得分:0)

我已经在此道场稍微修改了您的代码:list view template with button

您将有希望注意到我所做的以下更改。

我已经将listBound事件添加到listview对象中,如下所示:

editTemplate: kendo.template($("#editTemplate").html()),
dataBound: onDataBound

然后我将您的按钮点击事件包含在名为onDataBound

的相应功能中

按钮无法正常工作的原因是,一旦您添加到dataSource的数据被保存,然后重新读取,模板将被重新渲染,然后从您关联的按钮中删除事件处理程序。为了重新链接它们,我们将它重新附加到dataBound事件的一部分,然后一切都很愉快。

如果您需要更多信息,请告诉我们。 希望这个例子展示它正在做什么。