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

ClientTemplate column problem

5 Answers 225 Views

Grid

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

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

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>

Accepted