[Solved] Custom column button with image calling a Javascript function. How?

[Max]

Hello all

I am trying to add a custom Command button right next to my EDIT/DELETE buttons. So far I found a good sample such as:
http://demos.telerik.com/aspnet-mvc/razor/grid/customcolumncommand

but that does not put an image on the custom button and I dont need to execute an Action.

I actually need to call a Javascript funtion which will open a window and I also need to pass the ID of the row.
How do I achieve that?

ps: I also tried to use

            columns.Command(commands =>
            {
                commands.Edit().ButtonType(buttonType);
                commands.Delete().ButtonType(buttonType);
                commands.Custom("viewDetails").Text("D");
            }).Width(150).Title("Commands");
...           .ClientEvents(events => events.OnCommand("Grid_onCommand"))

function Grid_onCommand(e) {
    if (e.name == "viewDetails") {
        alert("onCommand"); //alert is not showing
        //I also need to retrieve the row ID to use here
    }
}

Thank you
Max

[John DeVight]

Hi Max,

Looking at the API for the custom command, it looks like the only thing you can do is specify the Controller and Action.  It appears that this feature was just added in the last release (2011 Q3).  Probably a good feature request is be able to specify a javascript function.  In the meantime, I've come up with a work around to replace the href for the custom command button to call a javascript function instead.

If I have a Person model defined as follows:

public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
}

I define a Grid that is bound using AJAX.  For the custom command, I specify a "dummy" action and controller.  I also implement a client event handler for the OnRowDataBound event to call the onRowDataBound javascript function like this:

@{
    Html.Telerik().Grid<TelerikMvcGridEditingDropdown.Models.Person>()
        .Name("PeopleGrid")
        .DataKeys(keys => keys.Add(m => m.Id))
        .Columns(columns =>
        {
            columns.Bound(m => m.Name);
            columns.Command(c =>
            {
                c.Custom("viewDetails")
                    .Text("View Details")
                    .Action("Action", "Controller");
            });
        })
        .DataBinding(db => db.Ajax().Select("People", "Home"))
        .ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
        .Render();
}

Then in the onRowDataBound javascript function, I locate the custom command button and replace the href attribute.  The anchor element for the custom command button has a class associated with it that contains the name of the custom command button when the grid was defined.  In the grid above, I gave the custom command button the name "viewDetails".  So the anchor element has a class of "t-grid-viewDetails".  The onRowDataBound javascript function is passed a parameter that contains the model object being bound to the grid as well as the row that was bound to the grid.  I can use this to get the Person.Id and change the href for the anchor element to call a function called viewDetails and pass it the Person.Id like this:

onRowDataBound = function (e) {
    // Get the Person.Id
    var id = e.dataItem.Id;
    // Change the href attribute for the "View Details" button to call the javascript function
    // "viewDetails" and pass in the Person.Id.
    $(e.row).find('a.t-grid-viewDetails').attr('href', 'javascript:viewDetails(' + id + ');');
}

Now when the user clicks the "View Details" button, the viewDetails javascript function is called.  At this point, I can get the selected person by looping through the data in the grid and finding the selected person like this:

viewDetails = function (id) {
    // Get a reference to the gird.
    var grid = $('#PeopleGrid').data('tGrid');
    var person = null;
    // Loop through the grid data and locate the Person that
    // corresponds to the Id passed in.
    $.each(grid.data, function (idx, dataItem) {
        if (dataItem.Id == id) {
            person = dataItem;
            return false;
        }
    });

    alert(person.Name);
}

Hope this helps...

Regards,

John DeVight

[Max]

Ge-nius!
Thank you!!!

[Max]

mmm I thought it was working but actually it did not :(
Here is my code:

Grid_onRowDataBound = function (e) {
    var id = e.dataItem.ID;
    $(e.row).find('a.t-grid-viewDetails').attr('href', 'javascript:viewDetails(' + id + ');');
    //alert(id); //I see all ids here Okay
}

viewDetails = function (entityID) {
    var grid = $('#GridCluster').data('tGrid');
    alert(entityID); //I DONT SEE ANYTHING HERE. No Alerts are displayed when I click the button
}

Any ideas?