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

Grid custom commands not working

5 Answers 557 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 17 Jul 2012, 02:09 AM
$(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

Sort by
0
Rosen
Telerik team
answered on 17 Jul 2012, 07:01 AM
Hi Mike,

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.

All the best,
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
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.

 
0
Rosen
Telerik team
answered on 19 Jul 2012, 08:20 AM
Hello Mike,

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
answered on 24 Jul 2012, 02:23 PM
I'm having an identical problem:

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
answered on 25 Jul 2012, 12:30 AM
Well Rosen's solution of using
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.
Tags
Grid
Asked by
Mike
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Mike
Top achievements
Rank 1
Matt
Top achievements
Rank 1
Share this question
or