$(document).ready(function () { $("#adminGrid").kendoGrid({ dataSource:dataSource, toolbar: ["create"], columns: [ { field: "name", title: "Name", width: "150px" }, { field: "description", title:"Description", width: "150px" }, { field: "logo", title:"Logo", width: "150px" }, { field: "startDate", title:"Start Date", width: "150px", format:"{0:MM/dd/yyyy}" }, { field: "endDate", title:"End Date", width: "150px", format:"{0:MM/dd/yyyy}"}, { field: "disabled", title:"Disabled", width: "50px" }, { command: { text: "Edit Tags", click:showTags }, title: " ", width: "110px" }], editable: "inline" }); // $("#mainDiv").on("click",".h-edit-tags", showAlert); }); function showAlert(e){ e.preventDefault(); alert("hello");}The click event defined in my Grid's custom button never fires when I click my custom button... what am I doing wrong?
If I assign a class to the custom button and us the jquery on function everything fires just fine.
5 Answers, 1 is accepted
0
Hi Mike,
Rosen
the Telerik team
Please verify that you are using Q2 2012 version of KendoUI. Also I have noticed that the click handler name is different than the function shown.
You may refer to this online demo, which demonstrates the functionality in question.
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike
Top achievements
Rank 1
Rank 1
answered on 19 Jul 2012, 01:31 AM
Sorry for the confusion... when I posted my question I was trying to clean up the complex function I actually have attached to the custom command and forgot to change the name. In my real code the click handler matches the function name correctly
I Debugged Kendo.all.js myself and found in v2012.2.715 you cannot have a custom command name with a space.
So the problem is that I have the name "Edit Me"
If I change it to Editme it works
the kendoGrid uses the name of the button to build the class name for the button. If it has a space it's messes up the click handler attachment. (at least in fire fox)
So your custom commands cannot handle spaces in the names. I bet the fact that I used the name "edit" in my custom command would also be a problem because Kendo uses the class k-grid-edit for all it's edit buttons.
So the bug is you cannot use spaces in custom command names.
I Debugged Kendo.all.js myself and found in v2012.2.715 you cannot have a custom command name with a space.
So the problem is that I have the name "Edit Me"
If I change it to Editme it works
the kendoGrid uses the name of the button to build the class name for the button. If it has a space it's messes up the click handler attachment. (at least in fire fox)
So your custom commands cannot handle spaces in the names. I bet the fact that I used the name "edit" in my custom command would also be a problem because Kendo uses the class k-grid-edit for all it's edit buttons.
So the bug is you cannot use spaces in custom command names.
0
Hello Mike,
Rosen
the Telerik team
Actually you have set the command text which is different then the command name. The text value will be used instead of the command name if such is not defined. Thus, you may set the text to "Edit Me" and the name to "edit-me", which should resolve the issue you are facing.
Regards,Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
Rank 1
answered on 24 Jul 2012, 02:23 PM
I'm having an identical problem:
Clicking "View Alert" never fires viewAlert(e).
var grid = $('#resultGrid').kendoGrid({ dataSource: obj, pageable: true, sortable: true, scrollable: false, columns: [ { field: "IncidentType", width: '150px', title: "Incident Type" } , { field: "Subject", } , { field: "IncidentDateString", width: '130px', title: "Incident Date", template: '#= new Date(IncidentDateString).toDateString() #' } , { command: { text: "View Alert", click: viewAlert }, title: "Go to Alert", width: '100px' } ]}).data("kendoGrid");var viewAlert = function(e) { alert(e);};Clicking "View Alert" never fires viewAlert(e).
0
Mike
Top achievements
Rank 1
Rank 1
answered on 25 Jul 2012, 12:30 AM
Well Rosen's solution of using
..will work However I think they really need to change their demo and documentation because THE DEMO tells you to use the text attribute. And in either case name and text do not support spaces. I think the control should replace the spaces with "-" if used for the button's class name by using the replace method internally.
command: { text: "View Alert", click: viewAlert,
name:"view-alert" },..will work However I think they really need to change their demo and documentation because THE DEMO tells you to use the text attribute. And in either case name and text do not support spaces. I think the control should replace the spaces with "-" if used for the button's class name by using the replace method internally.