HELP! I need to make a column that retrieves data from a database linkable.

[Santiago III]

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>"
                                    //);
                                })

[Stoyan]

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

[Santiago III]

thank you for your help it is now working! Can I add another question with regards to this? How do I call a modal/window in this same situation? Thank you very much 

[Stoyan]

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:

1. Add a class to the anchor tag
2. Select the class and handle its click event
3. (optional) In the handler get the dataItem of the row to be able to use its Id
4. 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.

[Santiago III]

Sorry for the late reply I got quite busy and totally forgot about this thread. Thanks for taking time to help :)