Thank you in advance for any feedback!
I got a table with a template binding, and I am using this table as a grid.
I would like to be able to group the data, but when dragging column to group no data is being returned.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.mobile.min.css" />
<link rel="stylesheet" href="css/FHFAFlexApp.css" />
<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>
<script type="text/javascript" src="__vti_fhfa/environment.js"></script>
<script type="text/javascript" src="scripts/FHFA/FHFAGlobals.js"></script>
<script type="text/javascript" src="scripts/FHFA/fhfa.vm.js"></script>
<script type="text/javascript" src="scripts/auditObjects.js"></script>
<script type="text/javascript" src="scripts/VM/auditVM.js"></script>
<script type="text/javascript" src="scripts/FHFA/fhfa.object.js"></script>
<script type="text/javascript" src="scripts/Elements/splitterObj.js"></script>
<script type="text/javascript" src="scripts/Elements/DragObj.js"></script>
<script type="text/javascript" src="scripts/webServiceCalls.js"></script>
<script type="text/javascript" src="scripts/workflowGlobals.js"></script>
<script type="text/javascript" src="scripts/default.js"></script>
</head>
<body>
<div id="app-main">
<div id="vertical">
<div>
<header>
Audit Logs
<div class="app-version">v. <span data-bind="text: appVersion"></span></div>
</header>
</div>
<div id="middlePane" style="width: 100%">
<div id="horizontal" style="height: 100%; width: 100%">
<div>
<div id="left-pane">
<p>
Inner splitter :: left pane
</p>
</div>
</div>
<div>
<div class="vertical" style="height: 100%; width: 100%">
<div id="center-top">
<div class="pane-content">
<div>
<table id="grid" class="app-list" cellpadding="0" cellspacing="0" style="width:100%">
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr id="columns">
<th class="nowrap, column" ><a id="col1" class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditTypeID">Type</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditDate">Date</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="applicationName">Application</a></th>
<th class="nowrap, column" ><a id="col4" class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditUser">User</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="iPAddress">IP Address</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditDescription">Description</a></th>
</tr>
</thead>
<tbody data-bind="source: audit.items" data-template="loglist-row-template"></tbody>
</table>
<div data-bind="visible: audit.hasNone" class="app-noitems">There are no items to display.</div>
<script id="loglist-row-template" type="text/x-kendo-template">
<tr class="app-list-row app-list-hoverEnabled">
<td class="app-list-cell"><span data-bind="text: auditTypeID"></span></td>
<td class="app-list-cell"><span data-bind="datetimeText: auditDate"></span></td>
<td class="app-list-cell"><span data-bind="text: applicationName"></span></td>
<td class="app-list-cell"><span data-bind="text: auditUser"></span></td>
<td class="app-list-cell"><span data-bind="text: iPAddress"></span></td>
<td class="app-list-cell"><span data-bind="text: auditDescription"></span></td>
</tr>
</script>
</div>
</div>
</div>
<div id="center-bottom">
<div class="pane-content">
<table style="width: 100%">
<tr>
<th class="vHeading">AuditID:</th>
<td class="app-list-cell"><span data-bind="text: auditID"></span></td>
</tr>
<tr>
<th class="vHeading">Type:</th>
<td class="app-list-cell"><span data-bind="text: auditTypeID"></span></td>
</tr>
<tr>
<th class="vHeading">Date:</th>
<td class="app-list-cell"><span data-bind="datetimeText: auditDate"></span></td>
</tr>
<tr>
<th class="vHeading">Application:</th>
<td class="app-list-cell"><span data-bind="text: applicationName"></span></td>
</tr>
<tr>
<th class="vHeading">User:</th>
<td class="app-list-cell"><span data-bind="text: auditUser"></span></td>
</tr>
<tr>
<th class="vHeading">IP Address:</th>
<td class="app-list-cell"><span data-bind="text: iPAddress"></span></td>
</tr>
<tr>
<th class="vHeading">Description:</th>
<td class="app-list-cell"><span data-bind="text: auditDescription"></span></td>
</tr>
<tr>
<th class="vHeading">AdditionalInfo:</th>
<td class="app-list-cell"><span data-bind="text: auditID"></span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<p>
Outer splitter : bottom pane (non-resizable, non-collapsible)
</p>
</div>
</div>
<script>
$(document).ready(function() {
splitterObj(); // split Web Page in sections
$("#grid").kendoGrid({
groupable: true,
reorderable: true,
sortable: true,
columns: [{
field: "auditTypeID",
title: "Type"
},
{
field: "auditDate",
title: "Date",
},
{
field: "applicationName",
title: "Application",
},
{
field: "auditUser",
title: "User"
},
{
field: "iPAddress",
title: "IP Address"
},
{
field: "auditDescription",
title: "Description"
}]
});
//var cols = document.querySelectorAll('#columns .column');
//[].forEach.call(cols, function (col) {
// col.addEventListener('dragstart', handleDragStart, false);
// col.addEventListener('dragenter', handleDragEnter, false);
// col.addEventListener('dragover', handleDragOver, false);
// col.addEventListener('dragleave', handleDragLeave, false);
// col.addEventListener('drop', handleDrop, false);
// col.addEventListener('dragend', handleDragEnd, false);
//});
//var dropTg = document.querySelectorAll('.group');
//dropAreaFn(dropTg);
});
</script>
<style>
#vertical {
height: 100%;
margin: 0 auto;
}
#middle-pane {
background-color: rgba(60, 70, 80, 0.10);
}
#bottom-pane {
background-color: rgba(60, 70, 80, 0.15);
}
#left-pane, #center-pane, #right-pane {
background-color: rgba(60, 70, 80, 0.05);
}
.pane-content {
padding: 0 10px;
}
</style>
</div>
</body>
</html>