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

1 Answer 51 Views
Forum suggestions Getting started with ASP.NET Miscellaneous Telerik Trainer
Santiago III
Top achievements
Rank 1
Santiago III asked on 02 Sep 2022, 02:25 PM

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!

                                .Columns(columns =>
                                columns.Bound(p => p.MarkOutId)
                                .ClientTemplate("<input name=\"checkedRecords\" type=\"checkbox\" primaryId=\"#=MarkOutId#\" value=\"MarkOutId\" title=\"checkedRecords\" />")
                                .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>")
                                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

Sort by
Telerik team
answered on 07 Sep 2022, 11:14 AM

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>

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.

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.

Santiago III
Top achievements
Rank 1
commented on 14 Sep 2022, 08:55 AM

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 
Telerik team
commented on 14 Sep 2022, 02:33 PM

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>

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>
        $(".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");
Please give these suggestions a try and let me know how they work on your side.
Santiago III
Top achievements
Rank 1
commented on 16 Dec 2022, 07:32 AM

Sorry for the late reply I got quite busy and totally forgot about this thread. Thanks for taking time to help :)
Forum suggestions Getting started with ASP.NET Miscellaneous Telerik Trainer
Asked by
Santiago III
Top achievements
Rank 1
Answers by
Telerik team
Share this question