I put custom stuff like textboxes and labels onto my list view via <JSLink>
tag in Schema.xml
. Additionally, I colorize list items <tr>
background based on a field value. It all has to be done client side.
Anyway, it all works flawlessly with one exception: if I limit the items my list view displays, the textboxes I added to the view still exist, however, the list items themselves don't have background color anymore. If I remove this paging and only get one continuous list view, it works.
This is how it looks like if I initially load the page:
And this is how it looks like once I change the page:
Notice how the background isn't yellow anymore even though all 4 list items satisfy criteria for highlighting them.
I already tried attaching a change()
even receiver to the <td>
that contains the page numbers, but it won't fire.
Anybody know how to refresh my JS when the page is changed?
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function (ctx) {
currentContext = new SP.ClientContext.get_current();
activitiesList = currentContext.get_web().get_lists().getByTitle('Activities');
var query = new SP.CamlQuery();
#create query
listItems = activitiesList.getItems(query);
currentContext.load(listItems);
currentContext.executeQueryAsync(onGetItems, onFail);
}
});
});
var currentContext;
var activitiesList;
var listItems;
var properties;
var contentBox;
var color;
function handlePageLegend() {
}
function onGetItems() {
var count = listItems.get_count();
if (count > 0) {
getProperties();
}
}
function onFail() {
console.log("Legend handler failed to initialize.");
}
function addPageLegend() {
contentBox = document.getElementById('DeltaPlaceHolderMain');
var span = document.createElement('span');
var input = document.createElement('input');
var container = document.createElement('div');
input.type = "text";
input.id = "colorLegend";
input.disabled = true;
input.style["width"] = '10px';
input.style["backgroundColor"] = color;
container.style["text-align"] = 'right';
container.appendChild(input);
var desc;
if (SP.Res.lcid == 1031)
desc = document.createTextNode('Farbe der Konflikttermine - ');
else
desc = document.createTextNode('Color of conflicting appointments - ');
container.insertBefore(desc, container.childNodes[0]);
contentBox.insertBefore(container, contentBox.childNodes[1]);
}
function onGetProperties() {
try {
color = properties.get_item('legendcolor');
}
catch (err) {
if (SP.Res.lcid == 1031)
console.log('Die Listeneigenschaft "legendcolor" wurde nicht in den Listeneigenschaften gefunden.');
else
console.log('Property "legendcolor" was not found in list properties.');
return;
}
if (color != undefined) {
if($('#colorLegend').length == 0)
addPageLegend();
var rows = ctx.ListData.Row;
for (var i = 0; i < rows.length; i++) {
var rowId = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowId);
row.style.backgroundColor = color;
}
}
}
function getProperties() {
properties = activitiesList.get_rootFolder().get_properties();
currentContext.load(properties);
currentContext.executeQueryAsync(onGetProperties, onFail);
}
Also tried what is described here