[Solved] grid edit function from dynamic menu

[Eva]

I have a grid with a menu control embedded.  I would like to have the Edit button on this embedded menu act just as an edit button on the grid row would act.  The view is:
@(Html.Telerik().Grid<StandardSetViewModel>()
    .Name("StandardSets")
    .DataKeys(k => k.Add(o => o.ID))
    .ToolBar(cmd =>
    {
        cmd.Insert().ButtonType(GridButtonType.ImageAndText);
    })
    .DataBinding(dataBinding => dataBinding.Ajax()
        .OperationMode(GridOperationMode.Client)
        .Delete("_StandardSetsDeleteAjax", "StandardSet")
        .Insert("_StandardSetsInsertAjax", "StandardSet")
        .Select("_StandardSetsAjax", "StandardSet")
        .Update("_StandardSetsUpdateAjax", "StandardSet")
    )
    .Columns(columns =>
    {
        columns.Bound(c => c.State)
            .Filterable(false)
            .Title(String.Empty)
            .ClientTemplate("<img alt='<#= StateString #>' height='24' src='"
                + Url.Content("~/Content/Common/Images/Icons/")
                + "<#= StateString.toLowerCase() #>.png' width='24' />")
            .Width(48);
        columns.Bound(c => c.ID);
        columns.Bound(c => c.Bureau);
        columns.Bound(c => c.Program)
            .ClientTemplate("<#= Program #>"
                + "<button class=\"grid-row-action-button right\" style=\"display: none\" onclick=\"Grid_showRowAction(event, '<#= ID #>');\">&#9660;</button>"
                + Html.Telerik().Menu()
                    .Name("rowActionMenu_<#= ID #>")
                    .HtmlAttributes(new { style = "display: none; z-index: 999;" })
                    .Orientation(MenuOrientation.Vertical)
                    .Items(items =>
                    {
                        items.Add()
                            .Text("Edit")
                            .ImageUrl("~/Content/Common/Images/Icons/edit.png")
                            .ImageHtmlAttributes(new { style = "width: 24px; height: 24px;" })
                            .Url("/ReviewContentManager/StandardSet#");
                        items.Add()
                            .Text("<#= IsEnabled ? \"Disable\" : \"Enable\" #>")
                            .ImageUrl("~/Content/Common/Images/Icons/<#= IsEnabled ? \"block\" : \"accept\" #>.png")
                            .ImageHtmlAttributes(new { style = "width: 24px; height: 24px;" })
                            .Action("ToggleEnable", "StandardSet", new { id = "<#= ID #>" });  
                    })
            );           
        columns.Bound(c => c.Title);
        columns.Bound(c => c.CreatedDate).Format("{0:d}");
        columns.Command(commands => { commands.Edit().ButtonType(GridButtonType.Image); commands.Delete().ButtonType(GridButtonType.Image); });
    })
    .DetailView(details => details.ClientTemplate(
        Html.Telerik().TabStrip()
            .Name("TabStrip_<#= ID #>")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Versions").Content(
                    Html.Telerik().Grid<StandardSetViewModel>()
                        .Name("Versions_<#= ID #>")
                        .DataKeys(k => k.Add(o => o.ID))
                        .DataBinding(dataBinding => dataBinding.Ajax()
                            .Select("_VersionsForStandardSetAjax", "StandardSet", new { id = "<#= ID #>" })
                        )
                        .Columns(columns =>
                        {
                            columns.Bound(c => c.ID);
                            columns.Bound(c => c.Title);
                            columns.Bound(c => c.CreatedDate).Format("{0:d}");
                            columns.Bound(c => c.Description);
                        })
                        .ClientEvents(events => events
                            .OnDataBound("VersionsGrid_onDataBound")
                        )
                        .Filterable(filtering => filtering.Enabled(true))
                        .Sortable(sorting => sorting.Enabled(true).SortMode(GridSortMode.SingleColumn))
                        .ToHtmlString()
                );
                items.Add().Text("Clients").Content("TODO:  Add Clients"
                );
            })
            .ToHtmlString()
    ))   
    .ClientEvents(events => events
        .OnLoad("Grid_onLoad")
        .OnDataBound("Grid_onDataBound")
        .OnEdit("Grid_onEdit")
        .OnError("Grid_onError")
        .OnRowSelect("Grid_onRowSelect")
    )
    .ColumnContextMenu()
    .Editable(editing => editing.Enabled(true).Mode(GridEditMode.PopUp))
    .Filterable(filtering => filtering.Enabled(true))
    .Groupable(grouping => grouping.Enabled(false))
    .KeyboardNavigation()
    .Pageable(paging => paging.Enabled(false))
    .Scrollable(scrolling => scrolling.Enabled(true))
    .Selectable(selecting => selecting.Enabled(true))
    .Sortable(sorting => sorting.Enabled(true).SortMode(GridSortMode.SingleColumn))
)

I tried simply putting the Url generated for the button in the Url property of the Menu Item but when it is clicked nothing happens at all.  What would be the best way of going about doing this?
Thanks!

[Petur Subev]

Hello Eva,

Thank you for contacting us. To switch the Grid in edit mode, you can use the client API's editRow method and pass the row you want to edit. To get the row you can use the client event onSelect of the Menu and traverse up to the <tr> element and pass it to the editRow method of the Grid.
In your particular scenario the code should look like this:

the View:

//...
.Items(items =>
{
       //...
    items.Add()
        .Text("Edit")
        .ImageUrl("~/Content/Common/Images/Icons/edit.png")
        .ImageHtmlAttributes(new { style = "width: 24px; height: 24px;" });
        //.Url("/ReviewContentManager/StandardSet#"); //you do not need this anymore
})
.ClientEvents(events=>events.OnSelect("menuSelect"))

the event handler:

function menuSelect(e) {
    if (e.item.textContent=='Edit') {
        $('#StandardSets').data('tGrid').editRow($(e.currentTarget).parent().parent());
    }
}

I hope this helps.


Regards,
Petur Subev
the Telerik team

[Eva]

Thank you Petur!  It worked like a charm.  Very straightforward as well.  This will be easy to duplicate now for other functions I want to perform.  Really nice!

[Right]

Hay,

Could you send us the code (a .zip file).

Thanxs.

[Eva]

All the significant code for this is in this forum post.  There really isn't anything else to give you that I can think of.