Hi
I am kinda stuck while trying to populate my Kendo Grid using Dynamic data list (List<ExapndoObject>).
I am working on ASP.NET Core MVC project and My Page Model code is successfully creating a list of data with Dynamic columns and values using the following code:
Page Model Code:
public async Task<IActionResult> OnGetGridDataAsync(string startDate, string endDate)
{
//Populating Dynamic List
var dataList = new List<System.Dynamic.ExpandoObject>();
var apiData = API call for data
foreach (var data in apiData)
{
dynamic newObject = new ExpandoObject();
newObject.Student = data.StudentName; //Student Column
var attendanceDays = API call for data
foreach (var attendanceDay in attendanceDays)
{
if (attendanceDay.Date >= DateTime.Parse(startDate) && attendanceDay.Date <= DateTime.Parse(endDate))
{
var attendanceSessionAttend = API call for data
var attendanceSession = API call for data
var SessionName = attendanceSession.Name + " (" + attendanceDay.Date.ToString("dd MMM") + ")";
AttendanceStatusDto attendanceStatus = null;
if (attendanceSessionAttend[0].AttendanceStatusId != null)
{
attendanceStatus = API call for data
AddProperty(newObject, SessionName, attendanceStatus.Code);
}
else
{
AddProperty(newObject, SessionName, "");
}
}
}
dataList.Add(newObject);
}
return new JsonResult(dataList);
}
private static void AddProperty(dynamic attendanceObject, string columnName, string columnValue)
{
var attendanceObjectDict = attendanceObject as IDictionary<string, object>;
if(attendanceObjectDict.ContainsKey(columnName))
{
attendanceObjectDict[columnName] = columnValue;
}
else
{
columnName = columnName.Replace(" ",String.Empty);
attendanceObjectDict.Add(columnName, columnValue);
}
}
JQuery code:
function populateGrid() { $.ajax({ type: "GET", url: '?handler=GridDate', data: { 'startDate': firstday.toDateString(), 'endDate': lastday.toDateString() }, contentType: "application/json; charset=utf-8", success: function (result) { // notify the data source that the request succeeded console.log(result); generateGrid(result); }, error: function (result) { // notify the data source that the request failed options.error(result); } }); } function generateGrid(response) { var gridOptions = { dataSource: response }; $("#AttendanceTable").kendoGrid(gridOptions); var grid = $("#AttendanceTable").data("kendoGrid"); };
when running the project, It is showing only the Student Column but other dynamic columns are showing 'Invalid Template error'
Invalid template:'<tr class="k-master-row" data-uid="#=data.uid#" role='row'><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? '<span class="k-dirty"></span>' : '' ##:data.Student==null?'':data.Student#</td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? '<span class="k-dirty"></span>' : '' ##:data.MondaySession(28Feb)==null?'':data.MondaySession(28Feb)#</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr class="k-master-row" data-uid="'+(data.uid)+'" role=\'row\'><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.Student==null?'':data.Student)+'</td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.MondaySession(28Feb)==null?'':data.MondaySession(28Feb))+'</td></tr>';}return $kendoOutput;'
Below is the console view of the page with data:
Please help me out.
Hi, Nurul,
Thank you for the provided code snippets and error message. The usual cause for the "invalid template" error is an unescaped "#" in one of the Grid templates.
// Example with a column template columns: [ {template: "<a href='#'>#:columnValue#</a>"} ]
The highlighted part of the example will cause the error to appear. In order to resolve the problem you need to escape the hash literal:
columns: [ {field: "columnField", template: "<a href='\\#'>#:columnField#</a>"} ]
Unfortunately, it is hard for me to determine the exact location of the problematic template without seeing the Grid configuration and Grid generation code. Could you please provide them as well?
Best Regards,
Georgi