Wiring Up javascript to the "Edit" and "Delete" grid commands

[Sam]

good morning everyone,

how are you?  I am currently using the licensed version of Kendo UI Complete for ASP.NET MVC (Q2 2012) and trying to figure out how to wire up javascript to the "Edit" and "Delete" grid commands.  the following is the code i have:

@(Html.Kendo().Grid<UserViewModel>()

                .Name("grdAllUsers")

                .Columns(columns =>

                {

                    columns.Bound(o => o.Id)

                        .Visible(false);

                    columns.Bound(o => o.UserName)

                        .Width(150);

                    columns.Bound(o => o.EmailAddress)

                        .Width(275);

                    columns.Bound(o => o.IsActive)

                        .Width(75)

                        .Filterable(false)

                        .HtmlAttributes(new { style = "text-align: center;" })

                        .ClientTemplate("<input readonly='readonly' type='checkbox' disabled='disabled' name='chkIsActive#=Id#' id='chkIsActive#=Id#' #= IsActive? \"checked='checked'\" : \"\" # />");

                    columns.Command(command =>

                    {

                        command.Edit();

                        command.Destroy();

                    });

                })

                .DataSource(dataSource =>

                {

                    dataSource.Ajax()

                        .Model(model => model.Id(o => o.Id)) // DataKey

                        .PageSize(15)

                        .Read(read => read.Action("Read", "Users"));

                        //.Destroy(destroy => destroy.Action("", ""));

                })

                .Pageable(paging =>

                {

                    paging.Numeric(true)

                        .Info(true)

                        .PreviousNext(true)

                        .Refresh(true);

                })

                .Sortable()

                .Filterable()

            )

i don't want to use the "Custom" command.

command.Custom("blah").Click("");

is there a way to do this, wiring up javascript to the grid "Edit" and "Delete" commands???

Thank you very much for all your help.

have a great day.

[OnaBai]

If what you need is to execute a function when the grid enters in edit mode then you can find here (look for edit event) or do you want to "replace" the edit event by yours?

[Vladimir Iliev]

Hi Sam,

 

In your case you should use the Remove and Edit events of the Grid to call a custom function. 

Grid definition:

.Events(e =>
{
    e.Edit("onEdit");
    e.Remove("onRemove");
})

JavaScript:

function onEdit(e) {
    //Logic to be executed on Edit event
}

function onRemove(e) {
    //Logic to be executed on Remove event
}

Kind Regards,
Vladimir Iliev
the Telerik team

[Sam]

thank you ALL for your help.  you are right Vladimir, I could use the "Edit" and "Remove" events of the Grid.  I accidentally missed those two events there.  I must have overlooked them by accident.  

[Sam]

Good morning everyone,

I have another question concerning this.  From the code below (same code of this original post):

@(Html.Kendo().Grid<UserViewModel>()

                .Name("grdAllUsers")

                .Columns(columns =>

                {

                    columns.Bound(o => o.Id)

                        .Visible(false);

                    columns.Bound(o => o.UserName)

                        .Width(150);

                    columns.Bound(o => o.EmailAddress)

                        .Width(275);

                    columns.Bound(o => o.IsActive)

                        .Width(75)

                        .Filterable(false)

                        .HtmlAttributes(new { style = "text-align: center;" })

                        .ClientTemplate("<input readonly='readonly' type='checkbox' disabled='disabled' name='chkIsActive#=Id#' id='chkIsActive#=Id#' #= IsActive? \"checked='checked'\" : \"\" # />");

                    columns.Command(command =>

                    {

                        command.Edit();

                        command.Destroy();

                    });

                })

                .DataSource(dataSource =>

                {

                    dataSource.Ajax()

                        .Model(model => model.Id(o => o.Id)) // DataKey

                        .PageSize(15)

                        .Read(read => read.Action("Read", "Users"));

                        //.Destroy(destroy => destroy.Action("", ""));

                })

                .Pageable(paging =>

                {

                    paging.Numeric(true)

                        .Info(true)

                        .PreviousNext(true)

                        .Refresh(true);

                })

                .Sortable()

                .Filterable()

            )

the part of the code:

columns.Command(command =>

                    {

                        command.Edit();

                        command.Destroy();

                    });

I need to click on the edit or delete button of a grid row and be able to take the user to an edit or delete page.  it won't be inline editing or deleting or a popup modal to edit or delete.  it will take the user to an entirely new edit or delete page.  is there an easy way to do this based on the code above?  unless it's done through the below code where it is wiring up the javascript:

.Events(e =>

{

    e.Edit("onEdit");

    e.Remove("onRemove");

})

thank you all for your help.  you guys are the best!!!

[Vladimir Iliev]

Hi Sam,


Basically you should define custom command which redirects the user on click to another page. Also the custom command can submit the data from the current row to the other's page controller if initial filtering is needed.

e.g.:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(e => e.FirstName);
        columns.Bound(e => e.LastName);
        columns.Bound(e => e.Title);
        columns.Command(command => command.Custom("Edit").Click("onEdit"));
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("CustomCommand_Read", "Grid"))
     )
)

<script type="text/javascript">
    function onEdit(e) {
        //Prevent automatic redirect if needed
        e.preventDefault();

        //Select current data Item
        var currentDataItem = $("#Grid").data("kendoGrid").dataItem($(e.currentTarget).closest("tr"));

        //Submit needed data to another controller
        //e.g.: To load another Grid which is filtered to show only current row
    }
</script>

Wish you a great day.

Kind Regards,
Vladimir Iliev
the Telerik team

[Sam]

lets say something failed in my "onEdit" eventhandler javascript method that's wired up to the "Edit" button of the grid.  how do i prevent the edit functionality from proceeding forward, how do i prevent an inline edit of the row?  i tried the following and it doesn't work:

onEdit: function (e) {

            e.preventDefault();
  return false;          
        }

thank you very much

[Vladimir Iliev]

Hi Sam,

 
You can disable the Grid editing by setting the Editable Enabled option to false or either remove the Editable option from the Grid configuration.

e.g.:

.Editable(e => e.Enabled(false))

Kind Regards,
Vladimir Iliev
the Telerik team

[Sam]

unfortunately, 

.Editable(e => e.Enabled(false))

disables the edit functionality of the out-of-the box "Edit" command button which is not exactly what i want to do.

ultimately, i went with the custom command.

command.Custom("editRecord")

                    .Text(" ")

                    .SendDataKeys(true)

                    .SendState(true)

                    .HtmlAttributes(new { actionName = "Edit" })

                    .Click("onEdit");

Since there was no way to get access to the name of the "ActionMethod" i needed to call on a post back, i added an attribute called "actionName" and hard coded the name of the action method.  In the javascript, i manually build the url that would take the user to a different page/view when the button is clicked.

onEdit: function (e) {

 

    e.preventDefault();

 

    var actionName = e.currentTarget.attributes["actionName"];

 

    // Row of the grid.

    var dataRow = $(e.currentTarget).closest("tr");

 

    // Data item of the row.

    var dataItem = dataRow != null ? this.dataItem($(e.currentTarget).closest("tr")) : null;

 

    if (actionName != null &&

        dataItem != null) {

 

        var url = window.location + "/" + actionName.value + "/" + dataItem.Id;

        window.location = url;

    }

 

    return false;

}

i could not use the "Action" method of the "command.Custom()" , where I could specify the controller name and action name, but that method can only be used for server side binding.  i am using ajax/client-side binding for my grid.  

command.Custom("editRecord").Action("actionName", "controllerName")

thank you all for your help on this matter. 

have a great day.