[Solved] Grid HyperLink

[Michael]

Hello everyone,

I am converting razor syntax to MVVM and facing a challenge with the current grid that I am working on.  My grid is working, however, I am attempting to add a hyperlink to a menteeFullName, which loading the Mentee/Edit Controller ID.  Your help would be greatly appreciated - thanks Michael 

Here is my razor syntax

@(Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.MenteeFullName).Title("Name").Width(40).Filterable(false).ClientTemplate(
                "<a href='" + Url.Action("Edit", "Mentee", new { ID = "#=MenteeId#" }) + "'>#=MenteeFullName#</a>");
            columns.Bound(c => c.MenteeType).Title("Mentee Type").Width(40);
            columns.Bound(c => c.InstitutionName).Title("Training Period Institution").Width(30);
            columns.Bound(c => c.YearStarted).Format("{0:dd/MM/yyyy}").Title("Training Period Start Year").Width(60);
            columns.Bound(c => c.YearEnded).Format("{0:dd/MM/yyyy}").Title("Training Period End Year").Width(60);
            columns.Bound(c => c.CompletedDegree).Title("Completed Degree").Width(40);
        })
)
</div>
<script>
    $(function () {
        var grid = $("#grid").data("kendoGrid");
    });
</script>

Here is my working code
 

<div id="menteeGrid" data-role="grid"
         data-editable="false"
         data-selectable="true"
         data-scrollable="true"
         data-sortable="true"
         data-pageable="false"
         data-columns="[
                       { 'field': 'ID'},
                       {title:'Name','field': 'menteeFullName'},
                       {title:'Mentee Type','field': 'menteeType'},
                       {title:'Training Period Institution','field': 'institutionName'},
                       {title:'Training Period Start Year','field': 'yearStarted'},
                       {title:'Training Period End Year','field': 'yearEnded'},
                       {title:'Completed Degree','field': 'completedDegree'},
         ]"
         data-bind="source: menteesGridView">
    </div>

<script>
    $(document).ready(function () {
        var menteeVm = kendo.observable($.extend({
            menteesGridView: new kendo.data.DataSource({
                type: "json",
                serverFiltering: true,
                transport: {
                    read: {
                        url:'@Url.Content("~/CommonData/GetMenteeList")',
                        datatype:"json",
                        data: {
                            name: function(){
                                return $("#menteeGrid").data("grid").value();
                            }
                        }
                    }
                }
            }),
        },@(Html.ToJson(Model))));
        kendo.bind($("#mentee-view"), menteeVm);
        $("#menteeGrid").data("kendoGrid").hideColumn(0);
    })
</script>

[Rosen]

Hello Michael,

You can specify the column template as external template, similar to the following:

 

{title:'Name','field': 'menteeFullName', template: kendo.template($('#fullNameTemplate').html()) }

<script id="fullNameTemplate" type="text/x-kendo-template">
    <a href='@Url.Action("Edit", "Mentee")/#=MenteeId#'>#=menteeFullName#</a>
</script>

 

Regards,
Rosen
Telerik

 

 

[Michael]

Hi Rosen,

Thanks for the follow up code.  I made small modification to your script and got it to work.
​

<script id="fullNameTemplate" type="text/x-kendo-template">
        <a href='/Mentee/Edit/#= menteeId #'>
            #= menteeFullName #
        </a>
    </script>

{title:'Name','field': 'menteeFullName',  template: kendo.template($('#fullNameTemplate').html())},