title: How to stop propagation when click to custom button in kendo ui grid header
body: <p>I have a kendo grid. I use headerTemplate to add custom button to column header. </p>
  
  <pre><code>$("#grid").kendoGrid({
    sortable: true,
    columns: [
        {
            field: 'test',
            title: 'My test',
            headerTemplate: '&lt;span class="column-edit fa fa-pencil"&gt;&lt;/span&gt;'
        },
        {
            field: 'my_column',
            title: 'My column'
        }
    ],
    dataSource: [
        {test: '3', my_column: 4}, 
        {test: '4', my_column: 4}, 
        {test: '6', my_column: 2}, 
        {test: '7', my_column: 1}, 
        {test: '7', my_column: 9}
    ]
  });
  $(document).on('click', '.column-edit', function(e){
      e.stopPropagation();
      e.preventDefault();
      alert('edit');
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/anhnt/UtcQa/" rel="nofollow">This is my fiddle</a></p>
  
  <p>My question is: How to prevent sort trigger when user click to pencil icon? My code didn't work as expected.</p>
  
  <p>Many thanks,</p>
  
  <p>Anh Nguyen </p>