마우스를 가져다 대면 KendoComboBox의 항목 옆에 버튼이 표시됩니다.

현재 마우스를 올리고있는 KendoComboBox 목록의 항목 오른쪽에 버튼 표시가 표시됩니다. 이것이 가능한가? 이 일을 어떻게 하죠? 마우스를 가져다 대면 KendoComboBox의 항목 옆에 버튼이 표시됩니다.

내가 다음 demo에서 시작하고 나는 documentation을 통해 찾아 봤는데 (최종 목표는이 버튼을 클릭하면, 해당 항목의 텍스트. 편집 가능한 필드가되어야한다는 것입니다)하지만 내가 할 수있는 ' KendoComboBox의 각 항목에 대해 단 하나의 항목이있는 사이드 팝업 메뉴와 거의 같은 목록의 항목 옆에 팝업 버튼이 표시되는 것에 대한 언급이있는 것 같습니다.

아래에 현재 프로토 타입 코드가 포함되었습니다. "licenseHoverButton"을 목록 항목 내에 표시 할 수 있지만 옆에 표시하는 방법을 모르겠습니다.

<html> 
<head> 
    <title></title> 
    <link href="styles/kendo.common.min.css" rel="stylesheet" /> 
    <link href="styles/kendo.default.min.css" rel="stylesheet" /> 
    <script src="js/jquery-1.7.2.min.js"></script> 
    <script src="js/kendo.all.min.js"></script> 
</head> 
<body> 

    <div id="example" class="k-content"> 

     <div class="demo-section"> 
      <h2>Licenses</h2> 
      <input id="licenses" style="width: 400px;"/> 
     </div> 

     <script id="template" type="text/x-kendo-tmpl"> 
      <div class="licenseListItem"> 
       # if (data.expired) { # 
        <p class="licenseName">#=data.name# (Expired)</p> 
        <button class="licenseHoverButton">Remove</button> 
       #} else { # 
        <p class="licenseName">#=data.name#</p> 
        <button class="licenseHoverButton">Rename</button> 
       #} # 
       <p class="licenseUsage">#=data.remaining#/#=data.total#GB</p> 

      </div> 
     </script> 

     <script> 
      $(document).ready(function() { 

       var mydata = [{ "name":"License Name", "remaining":"24", "total":"60", "expired":false}, 
           { "name":"1234-1234-1234-1234", "remaining":"60", "total":"60", "expired":false}, 
           { "name":"Old License Name", "remaining":"2", "total":"60", "expired":true}]; 
       $("#licenses").kendoComboBox({ 
        dataTextField: "name", 
        dataValueField: "name", 
        filter:"startswith", 
        template: kendo.template($("#template").html()), 
        dataSource: mydata 
       }); 

       var combobox = $("#licenses").data("kendoComboBox"); 
      }); 

     </script> 

     <style scoped>     
      .demo-section { 
       width: 400px; 
       padding: 30px; 
      } 
      .demo-section h2 { 
       text-transform: uppercase; 
       font-size: 1.2em; 
       margin-bottom: 10px; 
      } 
      #licenses-list .k-item { 
       overflow: hidden; 
      } 
      #licenses-list .k-item .licenseHoverButton{ 
       display: none; 
      } 
      #licenses-list .k-item.k-state-hover .licenseHoverButton { 
       display: block; 
      } 
      #licenses-list .k-item.k-state-hover .licenseUsage { 
       display: none; 
      } 
      #licenses-list p { 
       margin: 0; 
      } 
     </style> 
    </div> 

</body> 
</html>

출처

2013-08-02 Matt Dietrich

툴팁을 사용하면 어떨까요? http://jsfiddle.net/vojtiik/BfyPf/1/ 는 ("제거"버튼을 인라인 항목과 그것을 가지고,하지만 당신은 내가 추측하고 후에 무엇을하지?)

<script id="btnTemplate" type="text/x-kendo-template"> 
       <button class="licenseHoverButton">Rename</button> 
    </script> 

    var tooltip = $('.licenseName').kendoTooltip({ 
     position: "right", 
     content: kendo.template($("#btnTemplate").html()) 
    }).data("kendoTooltip");

출처

2013-08-02 16:31:16 Vojtiik

불행하게도, 버튼을 클릭하면 콤보 상자를 닫습니다. 드롭 다운을 열어서 항목 텍스트를 편집 가능하게 유지할 수 있습니까? (나는 초기 질문에서 언급 한 최종 목표를 언급하고있다.) –

툴팁에있는 버튼에 클릭 핸들러를 추가 할 수 없기 때문에 툴팁은 유용한 결과가 아니다. $ { 'licenseHoverButton'). ('클릭', function (e) { alert ('clicked'); }); –

마우스를 가져다 대면 KendoComboBox의 항목 옆에 버튼이 표시됩니다.

답변

관련 문제