mvc grid custom command to call actionLink with parameter from grid

[Jon Smith]

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.

[Jon Smith]

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.

[Jon Smith]

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.

[Rachel]

Thank you so much! 

[JohnD]

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.

[John]

I'm trying to get an action link to work and it produces a URL of:
http://localhost:51422/Contract/TransactionSummary?Length=4

Instead of:
https://info.verdantcc.com/Home/TransactionSummary?contractOid=273

What am I missing?

================================================

@(Html.Kendo().Grid<Shared_ViewModels.Contract.ContractListItemVM>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ContractOid).Hidden();

            columns.Bound(c => c.ContractIDCoalesced).Width(40).Title("Contract ID")
                .ClientTemplate(@Html.ActionLink("#=ContractIDCoalesced#", "TransactionSummary", "Home", new { contractOid = "#=ContractOid#" }).ToHtmlString());

        })

        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("ContractList3_GetData", "Contract"))
        )
    .DataSource(dataSource => dataSource.Ajax()
        .PageSize(20)
        .ServerOperation(false)
        )
)

[John]

If i remove the controller name it works as expected except it sends it to the wrong controller.  How do I get this statement to work with the controller name parameter?

columns.Bound(c => c.ContractIDCoalesced).Width(40).Title("Contract ID")
        //.ClientTemplate(@Html.ActionLink("#=ContractIDCoalesced#", "TransactionSummary", "Home", new { contractOid = "#=ContractOid#" }).ToHtmlString());   <=== This doesn't work
        .ClientTemplate(@Html.ActionLink("#=ContractIDCoalesced#", "TransactionSummary", new { contractOid = "#=ContractOid#" }).ToHtmlString());  <===This works but doesn't send it to the correct controller

[John]

It looks like the controller name parameter is causing the issue.  I need to include the controller name "Home".  If I include a controller name, then the query string says, length=4.  If I remove the controller parameter, then the query string is correct except that it goes to the wrong controller. 

Is there a fix for this behavior?

[Viktor Tachev]

Hello John,

Try passing null as the last argument of Html.ActionLink and the issue should be resolved. 

columns.Bound(c => c.ContractIDCoalesced).Width(40).Title("Contract ID")
    .ClientTemplate(@Html.ActionLink("#=ContractIDCoalesced#", "TransactionSummary", "Home", new { contractOid = "#=ContractOid#" }, null).ToHtmlString());

For reference check the stackoverflow article below:

• https://stackoverflow.com/a/201341

Regards,
Viktor Tachev
Progress Telerik

[John]

It's working.  Thanks for the help.

[John]

Found a solution:

            columns.Bound(p => p.ContractOid).Width(40).Title("Contract ID")
                .ClientTemplate(
                    "<a href='" +
                        Url.Action("TransactionSummary", "Home") +
                        "?contractOid=#= ContractOid #'" +
                    ">#= ContractIDCoalesced #</a>"
                    );