Search code examples
c#asp.net-mvcrazorkendo-uikendo-tabstrip

Kendo Tabstrip tab with close button


I have a kendo tabstrip with close button. The problem is that I can't get the button click event to close that tab.

 @(Html.Kendo().TabStrip()
  .Name("test")
  .Items(tabstrip =>
  {
     tabstrip.Add().Text("")
     .Selected(true)
     .ContentHtmlAttributes(new { style = "overflow: auto;" })
     .Content("");
  })
  .SelectedIndex(0)
  )

<script>
  tab.append({
    text: "" + name + " <input type='button' id='ddddd'>X</input> ",
    contentUrl: content,
    encoded: false
    //imageUrl: "/Images/close.png" <span class='tabdelete k-button'><span class=' k-icon k-i-close' ></span></span>
   })

 $("#ddddd").click(function () {
    alert("done");
 });
</script>

Solution

  • Try This

    <input type='button' class="button" id='ddddd'>X</input>
    
    
       <script type="text/javascript">
            $(function(){
                 //replace your selector if u need ID
                  //$('body').on('click', '#buttonID', function () {
                $('body').on('click', '.button', function () {
    
                    alert('ddsda');
                });
            });
            </script>