Kendo Grid .NET Core Template with JSON - json

Question

I have a Kendo grid template that looks like this...
#(Html.Kendo().Grid<AuditDictionaryViewModel>()
.Name("ConferenceCourseAuditGrid")
.Columns(columns =>
{
columns.Template("#:Course.CourseName#").Title("Course Name");
columns.Template("#:IsDeleted#").Title("Is Deleted");
columns.Bound(c => c.CreatedBy).Title("Created By");
columns.Bound(c => c.CreateDateTime).Format("{0:MM/dd/yyyy hh:mm:ss tt}").Title("Create Date Time");
columns.Bound(c => c.UpdatedBy).Title("Updated By");
columns.Bound(c => c.UpdateDateTime).Format("{0:MM/dd/yyyy hh:mm:ss tt}").Title("Update Date Time");
}).Sortable()...
Where it says Course.CourseName...I'm trying to access a nested property on one of my JSON properties. The JSON that I'm getting back from the Network tab looks like this...
{
"Data": [{
"CreateDateTime": "2020-10-21T10:44:33.6716231-04:00",
"UpdateDateTime": null,
"CreatedBy": "hao.nguyen#kizan.com",
"UpdatedBy": null,
"ConferenceId": 1,
"CourseId": 1,
"IsDeleted": false,
"Course": "{\"LevelId\":5,\"Level\":null,\"CourseName\":\"Course Name...2\",\"CourseDescription\":\"Course Description...2\",\"IsRequired\":true,\"CreditHours\":2.0000,\"IsElective\":false,\"IsLocallyApproved\":false,\"TreatAsLevel5Elective\":false,\"OtherProvider\":false,\"NameProvider\":\"\",\"DisplayOrder\":2,\"IsCharterCourse\":false,\"IsNewCourse\":true,\"MandatoryTrainingTopicId\":null,\"MandatoryTrainingTopic\":null,\"MandatoryCheck\":false,\"CharterTopicCourses\":null,\"TopicCourses\":null,\"ConferenceCourses\":null,\"CreatedBy\":\"unknown\",\"UpdatedBy\":null,\"CreateDateTime\":\"2020-10-19T15:48:40.8230887\",\"UpdateDateTime\":null,\"Id\":1}"
}, {
"CreateDateTime": "2020-10-21T10:44:34.7188373-04:00",
"UpdateDateTime": null,
"CreatedBy": "hao.nguyen#kizan.com",
"UpdatedBy": null,
"ConferenceId": 1,
"CourseId": 3,
"IsDeleted": false,
"Course": "{\"LevelId\":null,\"Level\":null,\"CourseName\":\"Course Name...4\",\"CourseDescription\":\"Course Description...4\",\"IsRequired\":false,\"CreditHours\":0.5000,\"IsElective\":true,\"IsLocallyApproved\":false,\"TreatAsLevel5Elective\":false,\"OtherProvider\":false,\"NameProvider\":\"\",\"DisplayOrder\":4,\"IsCharterCourse\":false,\"IsNewCourse\":false,\"MandatoryTrainingTopicId\":null,\"MandatoryTrainingTopic\":null,\"MandatoryCheck\":false,\"CharterTopicCourses\":null,\"TopicCourses\":null,\"ConferenceCourses\":null,\"CreatedBy\":\"unknown\",\"UpdatedBy\":null,\"CreateDateTime\":\"2020-10-19T15:48:40.8230887\",\"UpdateDateTime\":null,\"Id\":3}"
}, {
"CreateDateTime": "0001-01-01T00:00:00",
"UpdateDateTime": "2020-10-22T14:46:28.5255395-04:00",
"CreatedBy": null,
"UpdatedBy": "hao.nguyen#kizan.com",
"ConferenceId": 1,
"CourseId": 2,
"IsDeleted": true,
"Course": "{\"LevelId\":null,\"Level\":null,\"CourseName\":\"Course Name...3\",\"CourseDescription\":\"Course Description...3\",\"IsRequired\":false,\"CreditHours\":3.0000,\"IsElective\":true,\"IsLocallyApproved\":false,\"TreatAsLevel5Elective\":false,\"OtherProvider\":false,\"NameProvider\":\"\",\"DisplayOrder\":3,\"IsCharterCourse\":false,\"IsNewCourse\":false,\"MandatoryTrainingTopicId\":null,\"MandatoryTrainingTopic\":null,\"MandatoryCheck\":false,\"CharterTopicCourses\":null,\"TopicCourses\":null,\"ConferenceCourses\":null,\"CreatedBy\":\"unknown\",\"UpdatedBy\":null,\"CreateDateTime\":\"2020-10-19T15:48:40.8230887\",\"UpdateDateTime\":null,\"Id\":2}"
}, {
"CreateDateTime": "2020-10-21T10:44:34.7188373",
"UpdateDateTime": "2020-10-22T14:46:29.0453815-04:00",
"CreatedBy": "hao.nguyen#kizan.com",
"UpdatedBy": "hao.nguyen#kizan.com",
"ConferenceId": 1,
"CourseId": 3,
"IsDeleted": true,
"Course": "{\"LevelId\":null,\"Level\":null,\"CourseName\":\"Course Name...4\",\"CourseDescription\":\"Course Description...4\",\"IsRequired\":false,\"CreditHours\":0.5000,\"IsElective\":true,\"IsLocallyApproved\":false,\"TreatAsLevel5Elective\":false,\"OtherProvider\":false,\"NameProvider\":\"\",\"DisplayOrder\":4,\"IsCharterCourse\":false,\"IsNewCourse\":false,\"MandatoryTrainingTopicId\":null,\"MandatoryTrainingTopic\":null,\"MandatoryCheck\":false,\"CharterTopicCourses\":null,\"TopicCourses\":null,\"ConferenceCourses\":null,\"CreatedBy\":\"unknown\",\"UpdatedBy\":null,\"CreateDateTime\":\"2020-10-19T15:48:40.8230887\",\"UpdateDateTime\":null,\"Id\":3}"
}],
"Total": 4,
"AggregateResults": null,
"Errors": null
}
The other columns show up fine, but retrieving the nested properties from Course doesn't work. I think I need a way to escape the quotes from the nested property or something in order to get that value?

Answer 1

The Course property seems to be an encoded JSON, try to decode it:
columns.Template("# let course = JSON.parse(data.Course); ##: course.CourseName#").Title("Course Name");
A better approach is to use DataSource's schema.parse event. Create a custom DataSource like:
#(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.DataSource(dataSource => dataSource
.Custom()
.Schema(schema => schema
.Parse(#<text>function (data) {
data.forEach(item => item.Course = JSON.parse(item.Course));
return data;
}</text>)
)
)
)
Then you can use columns.Template("#:Course.CourseName#") on your template.