2017-01-20 3 views
2

Кнопка клика на клиенте в моем шаблоне (btnDelete) не будет работать. Это потому, что «выбранное» событие dropDown (dropDown) «переопределяет».Кнопка внутри шаблона никогда не вызывает обработчик

Что я могу сделать, чтобы моя кнопка (btnDelete) вызывала его обработчик событий?

У меня есть выпадающий список:

@(Html.Kendo().DropDownList() 
     .Name("dropDown") 
     .DataTextField("Name") 
     .DataValueField("Id") 
     .Value(Model.SelectedView.Id.ToString()) 
     .TemplateId("dropDownGridViewsItemTemplate") 
     .ValueTemplateId("dropDownGridViewsValueTemplate") 
     .FooterTemplateId("dropDownGridViewsFooterTemplate") 
     .Events(r=>r.Select("selectedEvent")) 
     .DataSource(source => 
        { 
         source.Read(read => 
            { 
             read.Action("GetAvailableViews", Model.GridDataSourceControllerName); 
            }); 
        })) 

Javascript Выбранный Handler (для тестирования)

selectedEvent =function(e) { 
    e.preventDefault(); 
} 

eventNeverGetCalled = function (e) { 
    e.preventDefault(); 
    alert("Why this event never get called?"); 
}; 

Шаблон:

<span class="viewTrash"> 
      @(Html.Kendo().Button() 
      .Name("btnDelete") 
      .HtmlAttributes(new 
      { 
       dataId = "#: data.Id #" 
      }) 
      .Events(r => r.Click("eventNeverGetCalled")) 
      .Content(Html.FontIcon("trash")).ToClientTemplate() 
      ) 
     </span> 

Изображение:

enter image description here

ответ

0

Ниже приведен пример, сравните с реализацией:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"/> 
 
    <title>Kendo UI Snippet</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <input id="dropdownlist" /> 
 
    
 
    <p id="log" style="margin-top: 5em;"></p> 
 
    
 
    <script id="template" type="text/x-kendo-template"> 
 
    \t \t <span> 
 
    \t \t #: name # <span class="k-icon k-i-delete my-delete"></span> 
 
     </span> 
 
    </script> 
 
    
 
    <script> 
 
     $("#dropdownlist").kendoDropDownList({ 
 
     dataSource: [ 
 
      { id: 1, name: "Apples" }, 
 
      { id: 2, name: "Oranges" } 
 
     ], 
 
     dataTextField: "name", 
 
     dataValueField: "id", 
 
     template: kendo.template($("#template").html()), 
 
     dataBound: function(e) { 
 
      e.sender.list.find(".my-delete").click(function(j){ 
 
      j.stopPropagation(); 
 
      j.preventDefault(); 
 
      $("#log").append("click called<br/ >"); 
 
      }); 
 
     } 
 
     }); 
 
    </script> 
 
    
 
    </body> 
 
</html>