JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<div class="manageSubjects">
<div class="advancedSearchToggle">
<input type="button" value="Clear Filters" id="<%=this.ClientID %>_inputClearFilter" />
<input type="checkbox" id="<%= this.ClientID %>_chkAdvancedSearch" name="<%= this.ClientID %>_chkAdvancedSearch" />
<label for="<%= this.ClientID %>_chkAdvancedSearch">Advanced Search</label>
</div>
<table id="<%= this.ClientID %>_dataTable" class="searchTable">
<thead />
<tbody />
<tfoot>
<tr />
</tfoot>
</table>
</div>
JavaScript
// Format function for date values in the DataTable.
var <%= this.ClientID %>_dateFormat = function (data, type, fullDataSource) {
var m = moment.utc(data);
if (m.isValid())
return m.format('MM/DD/YYYY');
else
return '–';
}
// Format function for the data entry URL in the DataTable.
var <%= this.ClientID %>_dataEntryUrlFormat = function (data, type, fullDataSource) {
return "<a href='http://" + data + "'><img src='<%= this.PortalSettings.ActiveTab.SkinPath %>images/iconEnterData.gif' /></a>";
}
//Display the expand collpase column in manage subjects.
var <%=this.ClientID%>_expandCollpaseColumnFormat= function (data, type, fullDataSource) {
return "<img src='<%= ControlPath %>expand.jpg' ></img>";
};
// Format function for any column in the DataTable.
// Displays the value within <strong> tags.
var <%= this.ClientID %>_strongFormat = function (data, type, fullDataSource) {
return "<strong>" + data + "</strong>";
};
var <%= this.ClientID %>__aoColumns;
var <%= this.ClientID %>__aoFilters=[];
function <%= this.ClientID %>_getAOColumns() {
var columns = <%= Newtonsoft.Json.JsonConvert.SerializeObject(this.Columns()) %>;
var aoColumns;
$.ajax({
type: "GET",
url: "<%= this.ColumnsUrl() %>",
dataType: "json",
success: function (json) {
aoColumns = json;
aoColumns.sort(function (x, y) {
var xIndex = columns.indexOf(x.mData);
var yIndex = columns.indexOf(y.mData);
return xIndex - yIndex;
}); },
async: false
});
// Set format functions for certain columns.
$.each(aoColumns, function (index, value) {
value.sSearchType = value.sType;
switch (value.mData) {
case...