JSLink override fields - can I gain control over TD?

Question

I have an external list, I'm modify fields using: SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);

Basically this modifies the text inside the TD (see code below)

<td class="ms-cellstyle ms-vb2">Rep Job</td>
<td class="ms-cellstyle ms-vb2">517951</td>
<td class="ms-cellstyle ms-vb2">10008</td>
<td class="ms-cellstyle ms-vb2">0</td>

I'd like to know if I can gain access to the TD, so I can modify it's class values and add new styles to it.

Basically I'm trying to figure out the limitation of the JSLink over the list view on what I can change and which I cannot.

Thanks!

Edit: Just thinking I can use a JQuery select to alter any controls on the page. Just wondering if there's a "Post Rendering" kind of event I can use?

score 2 · Accepted Answer · answered Sep 13 '13 at 13:41

2

Edit: Just thinking I can use a JQuery select to alter any controls on the page. Just wondering if there's a "Post Rendering" kind of event I can use?

Yes, there is a post rendering object available when using JSLink.

Example:

    var YourNameSpace = YourNameSpace || {};

    YourNameSpace.SomeCustomRendering = function() {
    var overrideCtx = {};

    overrideCtx.OnPostRender = YourNameSpace.postRenderHandler;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

    }

    YourNameSpace.postRenderHandler = function(ctx) {
     // some code
    }

answered Sep 13 '13 at 13:41

Anders Aune

6,268
1
22
31

Thanks Anders, just wondering if SP provides anything to gain control over the TD? (rather than using the postRender). like anything in the TemplateManager can handle that TD? thanks again!! :) – Kris Sep 16 '13 at 05:16
1

umh, I think its possible using the ctx.CurrentFieldSchema.css property when overriding a fields views. But I haven't tried that before, maybe worth checking out – Anders Aune Sep 16 '13 at 06:43
Thanks Anders, that works! Just wondering how did you find this out? basically I'm trying to figure out the limitations of SP, so I know what's possible and not possible.. if you could provide some more guidance would be great!! thanks again!! :) – Kris Sep 16 '13 at 23:51
I was just looking on the ctx object in debug during the override for properties. Biggest problem with a lot of SP "features" is the documentation, hard to find or not existing hehe – Anders Aune Sep 17 '13 at 05:34

score 1 · Answer 2 · answered Sep 13 '13 at 12:23

The standard post rendering event would be $(document).ready(). With Sharepoint sometimes you need JQuery(document).ready() as the $ means something else by default in Sharepoint.

As for modifying classes, jquery has the .addClass() and .removeClass() methods.

Best part is, you can put any jquery, javascript or style code right on the page using the Content Editor Web Part and it will work on any part of the page, even the parts rendered by the master page template (just be careful, you can break a page this way.) I've used this to restyle pages when I wasn't given access to full site branding and features.

It may also be worth your time to check out the spservices jquery library http://spservices.codeplex.com/. You can use it to access spservices straight from the page.

Also, the guy who created the spservices library has more advice on getting jquery to execute at the proper time during page loading. Check out his documentation in the above link. Sometimes its tricky. You're kind of fighting what Sharepoint wants to do.

Thanks methodOverload! just wondering if SP provides anything to gain control over the TD? (rather than using the postRender). like anything in the TemplateManager can handle that TD? thanks again!! :) — Kris, Sep 16 '13 at 05:16
Yeah, I just realized what you were really asking and I don't have access to that kind of stuff. I have to do kludgy workarounds. Sounds like Anders has you covered. — methodOverload, Sep 16 '13 at 12:33
Sure! Thanks anyway!! :) your answer can be helpful in other situations.. — Kris, Sep 16 '13 at 23:47

score 0 · Answer 3 · edited Apr 13 '17 at 12:41

Do not apply CSR Override in QuickEdit Mode

I have been working on a similar issue and you might find the code I have posted useful.

I found that I could modify the renderCtx object before calling the default body render method myself which allowed me to 'hack' the renderCtx.ListSchema.Field object.

In my case I removed a whole field from the collection and put it back after calling the RenderBodyTemplate(renderCtx) but you might find the same hook works for setting the values that you need.

JSLink override fields - can I gain control over TD?

3 Answers3