Rank 1
Hello I am trying to make the column that gets data from a database have a linkable modal. For privacy reasons full copy of the code isn't available. However I have cropped up this segment in particular since this is the issue I am trying to fix. I can already bind data from the datasource to a column and data displays correctly when I remove the parts to make it "linkable". hence this is why you might notice some of the parts are in comments. Simply put I need to make the column display the data from the database then make it linkable pointing to a view and a controller. Hopefully someone will be able to answer the soonest. Thanks in advance!
.Name("MarkOutGrid")
.Columns(columns =>
{
columns.Bound(p => p.MarkOutId)
.ClientTemplate("<input name=\"checkedRecords\" type=\"checkbox\" primaryId=\"#=MarkOutId#\" value=\"MarkOutId\" title=\"checkedRecords\" />")
.Width(30).Groupable(false).Sortable(false).Filterable(false)
.Title(" ");
//columns.Bound(p => p.UnitsSoldPerDay).ClientTemplate("<a href='" +
// Server.UrlDecode(Url.Action("AddNewMarkOut", "MarkOut")) + "'>TEST</a >")
// .Width(500).Groupable(false);
columns.Bound(p => p.UnitsSoldPerDay).Title("Units Sold Per Day")
.ClientTemplate("<a href='AddNewMarkOut','MarkOut'></a>")
.Width(500).Groupable(false);
columns.Bound(p => p.MarkOutGoal).Title("Mark Out Goal (%)").Width(500).Groupable(false);
@*(p => p.ProductID).Template(@< text >
@Html.ActionLink("Show Product Details", "ProductDetails", new { id = @item.ProductID }) >
</ text >); *@
//kendo telerik sample url action code
//columns.Bound(p => p.ProductID).ClientTemplate(
// "<a href='" +
// Url.Action("ProductDetails", "Product") +
// "/#= ProductID #'" +
// ">Show Product Details</a>"
//);
})
1 Answer, 1 is accepted
Hello Santiago,
The Action Link Component doesn't get rendered in the Kendo Template but you can achieve the desired behavior with the use of the @Url.Action method.
To do that, extract the template into a separate script tag:
<script id="link" type="text/x-kendo-template">
<a href="@Url.Action("About","Home")">#=data.Freight#</a>
</script>columns.Bound(p => p.Freight).ClientTemplateId("link");The reason there is difference in the behavior is the inline template gets attached directly to the Grid and is evaluated on the client.
On the other hand templates placed in script tags have their Razor syntax resolved on the server before they are added to the Grid's column and evaluated on the client-side.
I hope the information above is helpful in resolving the issue.
Regards,
Stoyan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi Santiago,
You can add the target="_blank" attribute to the anchor tag to open the link in a new browser tab.
<script id="link" type="text/x-kendo-template">
<a target="_blank" href="@Url.Action("About","Home")">#=data.Freight#</a>
</script>Alternatively, if you have a Telerik UI Window Component on the page:
- Add a class to the anchor tag
- Select the class and handle its click event
- (optional) In the handler get the dataItem of the row to be able to use its Id
- Get the client-side of the Window Component and open it with its open method
<script id="link" type="text/x-kendo-template"> <a class="link" href="@Url.Action("About","Home")">#=data.Freight#</a> </script> <script> $(".link").on("click", function(e){ var grid = $("#gridName").data("kendoGrid"); var row= $(e.currentTarget).parent().parent(); var dataItem = grid.dataItem(row); var modal = $("#window").data("kendoWindow"); modal.open(); }) </script>
Please give these suggestions a try and let me know how they work on your side.
Rank 1