I'm evaluating Kendo web to use in hosting CRUD functionality in a DNN razor module - connecting to jsonp data. I'm doing my initial page tests using an ASP.Net Web Site (Razor v2), but will port to a DNN razor module after the proof-of-concept. I've written a jsonp Get() webservice and have successfully displayed the results in a KendoUI grid. Now I am trying to display a composite column in the grid, populated with a concatenation of multiple data elements (Name: first, middle, last) using the schema parse function. So far, I haven't succeeded, and when I debug the Javascript in Firefox, it appears that the parse function isn't being called.
Any help would be appreciated. Using the code below, the grid displays and is populated with data for all columns except the ContactName column.
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "ServiceProvidersAgencyContacts";
}
<h2>ServiceProvidersAgencyContacts</h2>
@section Styles{
<link href="~/Kendo/2013.2.716/Styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Kendo/2013.2.716/Styles/kendo.default.min.css" rel="stylesheet" />
}
<div id="example" class="k-content">
<div id="grid"></div>
</div>
@section Scripts{
<script src="~/kendo/2013.2.716/Scripts/kendo.web.min.js"></script>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td class="contactName">
<span class="description">Name : #: LasttName#, #: First Name#</span>
<span class="title">#: Title #</span>
</td>
</tr>
</script>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://CSDWebServices/ServiceProvidersRestWS/agencycontacts/60001",
dataType: "jsonp"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
AgencyCode: { type: "string" },
FirstName: { type: "string" },
MiddleName: { type: "string" },
LastName: { type: "string" },
Suffix: { type: "string" },
TitleId: { type: "number" },
Email: { type: "string" },
Phone: { type: "string" },
IsContactEnergy: { type: "Boolean" },
IsContactCSBG: { type: "Boolean" },
Title: { type: "string" },
ContactName: { type: "string" }
},
parse: function (data) {
$each(data.items, function (index, value) {
item.value.ContactName = kendo.format("{1} {2} {3} {4}",
value.FirstName,
value.MiddleName,
value.LastName,
value.Suffix);
});
return data;
}
}
},
pageSize: 20,
serverPaging: false,
serverFiltering: true,
serverSorting: false
},
height: 430,
filterable: true,
sortable: true,
pageable: true,
columns: [
{
field: "ContactName",
title: "Contact Name",
width: 30
}, {
field: "FirstName",
title: "First Name",
width: 10
}, {
field: "LastName",
title: "Last Name",
width: 10
}, {
field: "Suffix",
title: "Suffix",
width: 10
}, {
field: "Email",
title: "Email",
width: 10
}, {
field: "Phone",
title: "Phone",
width: 10
}
]
});
});
</script>
}
Any help would be appreciated. Using the code below, the grid displays and is populated with data for all columns except the ContactName column.
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "ServiceProvidersAgencyContacts";
}
<h2>ServiceProvidersAgencyContacts</h2>
@section Styles{
<link href="~/Kendo/2013.2.716/Styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Kendo/2013.2.716/Styles/kendo.default.min.css" rel="stylesheet" />
}
<div id="example" class="k-content">
<div id="grid"></div>
</div>
@section Scripts{
<script src="~/kendo/2013.2.716/Scripts/kendo.web.min.js"></script>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td class="contactName">
<span class="description">Name : #: LasttName#, #: First Name#</span>
<span class="title">#: Title #</span>
</td>
</tr>
</script>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://CSDWebServices/ServiceProvidersRestWS/agencycontacts/60001",
dataType: "jsonp"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
AgencyCode: { type: "string" },
FirstName: { type: "string" },
MiddleName: { type: "string" },
LastName: { type: "string" },
Suffix: { type: "string" },
TitleId: { type: "number" },
Email: { type: "string" },
Phone: { type: "string" },
IsContactEnergy: { type: "Boolean" },
IsContactCSBG: { type: "Boolean" },
Title: { type: "string" },
ContactName: { type: "string" }
},
parse: function (data) {
$each(data.items, function (index, value) {
item.value.ContactName = kendo.format("{1} {2} {3} {4}",
value.FirstName,
value.MiddleName,
value.LastName,
value.Suffix);
});
return data;
}
}
},
pageSize: 20,
serverPaging: false,
serverFiltering: true,
serverSorting: false
},
height: 430,
filterable: true,
sortable: true,
pageable: true,
columns: [
{
field: "ContactName",
title: "Contact Name",
width: 30
}, {
field: "FirstName",
title: "First Name",
width: 10
}, {
field: "LastName",
title: "Last Name",
width: 10
}, {
field: "Suffix",
title: "Suffix",
width: 10
}, {
field: "Email",
title: "Email",
width: 10
}, {
field: "Phone",
title: "Phone",
width: 10
}
]
});
});
</script>
}