mvc grid custom command to call actionLink with parameter from grid

5 posts, 2 answers
  1. Jon Smith
    Jon Smith avatar
    2 posts
    Member since:
    Mar 2011

    Posted 23 Apr 2013 Link to this post

    Hi,

    I have an NVC4 kendo grid in which I want to place a button which, when pressed, will call an ActionLink with an ID taken from a column in the current row. In my case this will jump to a new page to display a map of the location by calling the MVC action method via the URL ~/Controller/ShowMap?Id=123 (if the Id was 123)

    I have found columns.Command method and have written the following code
    @(Html.Kendo().Grid(Model)
              .Name("SchemeResults")
              .Columns(columns =>
                           {
                               columns.Bound(p => p.Id).Hidden();
                               columns.Bound(p => p.SchemeName);
                               columns.Command(command => command.Custom( "Map") .Click("GotoMap"));
                           })
              .Pageable()
              )
    This successfully calls the JavaScript function "GotoMap", but I can't find a method of getting the ID from the event.

    Please could you advise me on the best way to implement this feature.
  2. Answer
    Jon Smith
    Jon Smith avatar
    2 posts
    Member since:
    Mar 2011

    Posted 23 Apr 2013 Link to this post

    I fixed it. I was going about it the wrong way. Here is the code in case anyone else wants the answer
    @(Html.Kendo().Grid(Model)
              .Name("SchemeResults")
              .Columns(columns =>
                           {
                               columns.Bound(p => p.Id).Hidden();
                               columns.Bound(p => p.SchemeName);
                               columns.Template(c => @Html.ActionLink("Map", "TestMap", new { id = c.Id, }));
                           })
              .Pageable()
              )
    This displays a link, but because Template takes a string you can format it how you want.
  3. Answer
    Jon Smith
    Jon Smith avatar
    2 posts
    Member since:
    Mar 2011

    Posted 01 May 2013 Link to this post

    I should point out that the above answer above does not work with Ajax bound grids (took me a while to find this out!). I rooted around and found a thread which discussed this here. The BEST solution is right at the end by Craig, which is much nicer than some of the answers give, even ones from Telerik!

    I repeat what Craig said to save you going there. Craig says:

    Just thought I'd add to this thread with a solution I found.
    columns.Bound(o => o.Name).ClientTemplate(@Html.ActionLink("#=Name#", "Edit", new { ID = "#=ID#" }).ToHtmlString());

    Using the ActionLink helper (rather than hard coding the tags) means we can tap into the routing system, making maintenance a lot  easier later on.

    Thanks Craig. That solved my problem nicely.
  4. Rachel
    Rachel avatar
    3 posts
    Member since:
    Aug 2014

    Posted 19 Dec 2014 Link to this post

    Thank you so much! 
  5. John
    John avatar
    1 posts
    Member since:
    Oct 2015

    Posted 10 Apr Link to this post

    To add onto what Jon Smith's answer, you can still use html tags as opposed to the ActionLink helper.  This is useful if you want to have custom classes or add icons etc.

    columns.Bound(p => p.Id).ClientTemplate("<a href='" + @Url.Action("Index", "Invoice", new { id = "#=Id#" }) + "' class='btn btn-primary'><i class='fa fa-eye'></i>  View</a>" ).Width(90);

     

    Note:  You can also define your own helpers to use in these scenarios, but this would be the 'quick and dirty' way of customizing the button.

Back to Top