Both CSR [Client-Side Rendering] and MDS [Minimal Download Strategy] are new concepts in SharePoint 2013. I recently had a chance to work on an issue concerning CSR and MDS, which I thought I’d share through this post so that it is helpful for the developer community.
Now to the problem we ran into and the fix for it.
When you download the sample provided through the link and deploy it to a SharePoint 2013 team site as is, you’ll notice that you see a new CustomFieldList list. If you browse to it, you’ll see the list as shown in Image 1 below. That’s CSR in action! Oh and remember to reset IIS after you deploy this solution. Since we are deploying a field type, that’s a requirement. Or else, you’ll see an error complaining the field type is not properly installed, which will lead you in the wrong direction should you choose to troubleshoot it!
This all works well! Now to the actual issue. If you click on any other link such that it would navigate you out of this list (for e.g., click the Home link in the left navigation) and hit the CustomFieldList back, you’ll see same list as shown in Image 2 below.
Oops, the color are gone!
You can disable MDS which is a web feature as shown in Image 3 below.
But what if you want the best of both the worlds?
You need to register this file for CSR-override on MDS enabled sites. You need to do two modifications to achieve this.
First, you need to change the anonymous entry point function to a function with an entry point signature. Then, you need to call RegisterModuleInit() function to register an override of this code on MDS enabled sites. Below is how the same CSRFieldType.js file looks with these changes.
RegisterModuleInit("CSRAssets/CSRFieldType.js", RegisterFavoriteColor); // CSR-override for MDS enabled site
RegisterFavoriteColor(); //CSR-override for MDS disabled site (because we need to call the entry point function in this case whereas it is not needed for anonymous functions)
To explain the RegisterModuleInit() call out a bit…
RegisterModuleInit("/_catalogs/masterpage/CSRFieldType.js", RegisterFavoriteColor); // CSR-override for MDS enabled site
I haven’t been able to explore much into this approach, but I understand this will probably be the approach for solutions targeted towards O365. So, I will dig into it and pull up another post when I figure it out.