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

Grid column header attach event handler

5 Answers 656 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nilesh
Top achievements
Rank 1
Nilesh asked on 04 Aug 2015, 05:42 PM

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​

5 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 06 Aug 2015, 08:42 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nilesh
Top achievements
Rank 1
answered on 07 Aug 2015, 11:37 AM

Hi Radoslav,  

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

 

Best Regards,

Nilesh Padbidri​

0
Radoslav
Telerik team
answered on 11 Aug 2015, 07:12 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nilesh
Top achievements
Rank 1
answered on 12 Aug 2015, 05:04 PM
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
0
Radoslav
Telerik team
answered on 14 Aug 2015, 07:17 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Nilesh
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Nilesh
Top achievements
Rank 1
Share this question
or