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
0
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
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
Hi Nilesh,
You can use jquery.on to attach event to the header cell:
On the following link I created a small example which demonstrates it:
http://dojo.telerik.com/AzaKe
I hope this helps.
Regards,
Radoslav
Telerik
You can use jquery.on to attach event to the header cell:
dataBound:
function
(e) {
$(
"th[role='columnheader']"
).on(
"click"
,
function
(ev){alert(
"clicked"
);});
},
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
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
Hi Nilesh,
In MVVM scenario you can use following code snippet just after binding to view model:
Also on the following link I attached a small example.
http://dojo.telerik.com/IfOPo
I hope this helps.
Regards,
Radoslav
Telerik
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!