ClientTemplate column problem

[Dan]

I have a grid with ClientTemplate columns which render to buttons for navigating to other MVC pages.  The first column renders to:
<td role="gridcell"><a href="/WebPortal/Patient/GetPatient/500507" class="btn btn-sm">View Patient</a></td>

However, when I add the .Events parameter, then the ClientTemplate columns do not work and render as:
<td>500507</td>

I want to execute a DataBound event but it messes up the columns.  Any ideas?  Code follows:
​

@(Html.Kendo().Grid(Model)
        .Name("PatientSearchGrid")
        .Columns(columns =>
        {
            columns.Bound(e => e.LName).Title("Last Name");
            columns.Bound(e => e.FName).Title("First Name");
            columns.Bound(e => e.ReferralDate);
            columns.Bound(e => e.Status);
            columns.Bound(e => e.ID).Hidden();
            columns.Bound(e => e.ID).ClientTemplate(
                "<a href='" + Url.Action("GetPatient", "Patient") + "/#= ID #'" + "class='btn btn-sm'>View Patient</a>"
                ).Width(110).Title("");
            columns.Bound(e => e.ID).ClientTemplate(
                "<a href='" + Url.Action("CreateAccount", "Patient") + "/#= ID #'" + "class='btn btn-sm'>Create Account</a>"
                ).Width(127).Title("");
        })
        .HtmlAttributes(new { style = "height: 390px;" })
        .Pageable(pageable => pageable

            .PageSizes(true).PageSizes(new int[] { 20, 50, 100 })
            .ButtonCount(5))
        .Sortable()
        .Filterable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Sort(s => s.Add(n => n.LName))
            .PageSize(20)
            .ServerOperation(false))
        //.Events(events => events.DataBound("dataBound"))
)

[Dimiter Madjarov]

Hello Dan,


Is there a dataBound JavaScript function defined on the page?
E.g.

.Events(e => e.DataBound("dataBound"))


function dataBound(){
}

If the function is not defined, the Grid initialization will fail.

Regards,
Dimiter Madjarov
Telerik

 

 

[Dan]

Yes, I have a dataBound function.  It's not fleshed out yet as it is messing up the grid.  Here it is:
​

<script>
    function dataBound(e) {
        alert("here");
        var rows = this.table.find("tr[role='row']");
        for (var i = 0; i < rows.length; i++) {
            var model = this.dataItem(rows[i]);
            //if (model.EmployeeID % 2 == 0) {
                //$(rows[i]).find(".k-grid-custom").contents().last()[0].textContent = 'New Text';
            //}

        }
    }
</script>

[Dimiter Madjarov]

Hello Dan,


The provided information is not enough for us to state the exact reason for the strange behavior. Please send us a small isolated example, which demonstrates the issue, so we could inspect it locally and provide further assistance.

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

 

 

[Dan]

Hey, hey.  Something just occurred to me.  I had the grid and the dataBound function both in a partial view.  I moved the function to the parent view file, and it works.  So, probably stupidity on my part.  Thanks for your help.

Dan

[Dimiter Madjarov]

Hello Dan,


I am glad that the issue is resolved. Do not hesitate to contact us again if further problems arise.

Have a great day!

Regards,
Dimiter Madjarov
Telerik