Grid column header attach event handler

[Nilesh]

Hello ,

What is the best practice to attach event handler on the column header of Grid.
I have found following way.
$("th[role='columnheader']"), function () {
    // logic
});

Please suggest the data binding way to attach the event handler on the Grid column header.

Best Regards,
Nilesh Padbidri​

[Radoslav]

Hi Nilesh,

Thank you for contacting us.

Please check out the following stackoverflow tread which elaborates on the same matter: http://stackoverflow.com/questions/9730277/jquery-event-handlers-whats-the-best-method

Also you can attach the event handler to the grid header’s cells in the dataBound event.

If you need further assistance, do not hesitate to contact us again.

Regards,
Radoslav
Telerik

 

 

[Nilesh]

Hi Radoslav,  

Please suggest the data binding way to attach the event handler on the Grid column header. 

 

Best Regards,

Nilesh Padbidri​

[Radoslav]

Hi Nilesh,

You can use jquery.on to attach event to the header cell:

dataBound: function(e) {
      $("th[role='columnheader']").on("click", function(ev){alert("clicked");});
},

On the following link I created a small example which demonstrates it:
http://dojo.telerik.com/AzaKe

I hope this helps.

Regards,
Radoslav
Telerik

 

 

[Nilesh]

Hi Radoslav's,

Your suggested solution work as non data binding solution.
As kendo is MVVM framework.
Rule of MVVM framework.
1. viewModel can not access the view directly.
2. View can not access the Model directly.

So in our project we are not accessing the view in the viewModel.
means we are not accessing any jquery object in the viewModel
example : 
dataBound: function(e) {
      $("th[role='columnheader']").on("click", function(ev){alert("clicked");});
},

Please suggest solution as per the rule of MVVM framework.

Best Regards,
Nilesh Padbidri

[Radoslav]

Hi Nilesh,

In MVVM scenario you can use following code snippet just after binding to view model:

kendo.bind($("#example"), viewModel);

$("th[role='columnheader']").on('click',function(){
   alert("clicked");
});

Also on the following link I attached a small example.
http://dojo.telerik.com/IfOPo

I hope this helps.

Regards,
Radoslav
Telerik