This is a migrated thread and some comments may be shown as answers.

ClientTemplate column problem

5 Answers 143 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 2
Dan asked on 15 May 2014, 04:48 PM
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"))
)

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 16 May 2014, 12:17 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Dan
Top achievements
Rank 2
answered on 19 May 2014, 12:47 PM
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>
0
Accepted
Dimiter Madjarov
Telerik team
answered on 19 May 2014, 01:04 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Dan
Top achievements
Rank 2
answered on 19 May 2014, 01:40 PM
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
0
Dimiter Madjarov
Telerik team
answered on 19 May 2014, 01:46 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Dan
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Dan
Top achievements
Rank 2
Share this question
or