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

9 posts, 0 answers
  1. Sam
    Sam avatar
    22 posts
    Member since:
    May 2012

    Posted 30 Sep 2012 Link to this post

    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.
  2. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 01 Oct 2012 Link to this post

    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?
  3. Kendo UI is VS 2017 Ready
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 03 Oct 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Sam
    Sam avatar
    22 posts
    Member since:
    May 2012

    Posted 05 Oct 2012 Link to this post

    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.  
  6. Sam
    Sam avatar
    22 posts
    Member since:
    May 2012

    Posted 11 Oct 2012 Link to this post

    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!!!
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 11 Oct 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Sam
    Sam avatar
    22 posts
    Member since:
    May 2012

    Posted 14 Oct 2012 Link to this post

    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


  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 16 Oct 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Sam
    Sam avatar
    22 posts
    Member since:
    May 2012

    Posted 18 Oct 2012 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready