Action Links in Grid

[John]

Scenario - Asp.net Core, Razor Pages     

If i have no Controller (using razor pages), is there a way to bind a column to a clientTemplate that contain some sort of Action Link or Navigation link?

I need this so a user can simple click on a link on a row in the grid whicj then does the usual "Edit, Details, Delete"

 

If i was to not have telerik grid and just us a table it would look like this:

 <td>
                <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |
                <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

 

[John]

i am almost thee with this but not quite...

 

columns.Bound(p => p.Id).ClientTemplate("<a asp-page='./ Edit' asp-route-id='@item.Id'>Edit</a>");

[Stefan]

Hello, John,

The issue occurs because the client template is evaluated on the client where the page does not have access to the RazoPages asp-page attributes.

Currently, the action links can be set in the following format:

https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-use-action-links

The other option will be to directly set the href over the anchor element:

.ClientTemplate("<a href=./Edit>Edit</a>");

Regards,
Stefan
Progress Telerik

[TESSA]

I have seen many queries on Grid custom action links,most of them cover Ajax calls, not many explaining with multiple parameters when using Model binding. 

Here is full page  sample  with BindTo(Model)  

This was done in ,NET Core 3.1  VS2019 MVC project

 

 

@using GridTestActionLink.ViewModels
@using Kendo.Mvc.UI
@model IEnumerable<GridTestActionLink.ViewModels.Users>

@{ ViewData["Title"] = "Index"; }

<h1>Index</h1>

@(Html.Kendo().Grid<Users>()
    .Name("gridUsers")
    .Columns(columns =>
    {
        columns.Bound(c => c.UserId).ClientTemplate("<a href='" + Url.Action("LinkPage", "Home", new {UserId = "#=UserId#", UserName="#=UserName#"}) + "'>#=UserName#</a>");
    columns.Bound(c => c.UserName);
      

    })
    .HtmlAttributes(new { style = "height: 650px;" })
    .Scrollable()
    .Pageable(page =>
    {
        page.Refresh(true)
            .PageSizes(true)
            .ButtonCount(5);
    })
    .ToolBar(t => t.Search())
    .Sortable()
    .BindTo(Model)
    )

[Petar]

Hi Tessa,

Thank you for sharing the example with the community!

Your post will surely help someone who wants to use Action links inside the Grid which data is populated using "BindTo(Model)".

Regards,
Petar
Progress Telerik

[Stefan]

With the given hints (for MVC), we found that the following seems to be the best and closest implementation to the 'asp-page' syntax:

columns.Bound(column => column.Id).ClientTemplate("<a href='" + @Url.Page("./Details", new { id = "#= Id #" }) + "'>Details</a>");

[Petar]

Hey, Stefan.

Thank you for sharing the approach that you used!