This is a migrated thread and some comments may be shown as answers.

Prevent sorting action on custom column's header's item

2 Answers 12 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ivan
Top achievements
Rank 2
Veteran
Iron
Ivan asked on 11 Dec 2020, 11:41 PM

Hello!
Please help: i have custom column's grid header that contains CheckBox and column's title
The column is sortable.

A checkbox calls a specific method, but clicking on it also triggers a sort.
How to prevent sorting when clicking a specific component in a column header?

<GridColumn Filed="nameof(CrmViewElements)">
  <HeaderTemplate>
    <div class="row">
      <div class="col d-flex align-items-center">
        <div style="padding-right: 1rem; cursor: pointer" data-toggle="tooltip" data-placement="bottom" title="Show all elements">
          <TelerikCheckBox @bind-Value="@showAllComponents" />
        </div>
        <span>Elements</span>
      </div>
    </div>
  </HeaderTemplate>
</GridColumn>

2 Answers, 1 is accepted

Sort by
0
Accepted
Nadezhda Tacheva
Telerik team
answered on 16 Dec 2020, 03:32 PM

Hi Ivan,

The reason behind this behavior is called Event Bubbling, also known as one of the event Propagation phases.

Clicking the checkbox event fires up to its parent element (in this case the column header) and also triggers the event called in the parent (the sorting).

A common approach to reduce that bubbling is to use the stopPropagation feature in the child element. That will result in triggering only the desired event from child.

To better illustrate this solution I have created this knowledge base article that also has a simple example with a checkbox in the header template. 

I hope you will find the above information useful.

Regards,
Nadezhda
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ivan
Top achievements
Rank 2
Veteran
Iron
answered on 19 Dec 2020, 04:44 PM
Thank you for reply!!
Tags
Grid
Asked by
Ivan
Top achievements
Rank 2
Veteran
Iron
Answers by
Nadezhda Tacheva
Telerik team
Ivan
Top achievements
Rank 2
Veteran
Iron
Share this question
or