1

I'm trying to use client side rendering to fix the width of the columns for my sharepoint (2013) list.

I've picked up the code from https://kogzee.wordpress.com/2013/10/21/sharepoint-2013-using-client-side-rendering-jslink-to-change-column-widths-in-lists/

But it does not work.

So my code is

(function () {
 // Initialize the variable that stores the objects.
 var overrideCtx = {};
 overrideCtx.Templates = {};
 overrideCtx.OnPostRender = postRenderHandler;

 // Register the template overrides.
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
 })();

// The postRenderHandler attends the OnPostRender event
 function postRenderHandler(ctx) {
$("div[name='Comments1']").css("width","80px");
$("div[name='Comments2']").css("width","80px");
}

The console debugger comes up with the error

SCRIPT1006: Expected ')'

Within the debugger, the code looks like -

 $(�div[name=�Comments1�]�).css(�width�, �80px�);
 $(�div[name=�Comments2�]�).css(�width�, �80px�);

this doesn't seem quite right! I've tried replacing the single quotes with double quotes and the other way around.

Suggestions on what I might have done wrong?

Thanks

7
  • Seems the encoding of the file is off, have you tried recreating it in an new empty text file? Also, try to switch to ' and see if those are better encoded Jul 10 '15 at 7:11
  • I've changed my code to $('div[name="Comments1"]').css("width",'380px'); $('div[name="Comments2"]').css("width",'380px'); no more boxes, no more debug errors, but it still isn't changing the width.
    – southskies
    Jul 10 '15 at 7:18
  • I have checked all combinations on the CSS parameters .. "" on width '' on the amount and visa versa. I have added an alert into the postRenderHandler, and yes it is going through that code...
    – southskies
    Jul 10 '15 at 7:36
  • If it executes the code, and nothing still happens to your divs you must have something wrong in your selectors, or do not have jQuery defined Jul 10 '15 at 7:57
  • no.. JQuery isn't defined...
    – southskies
    Jul 10 '15 at 8:10
0

I've added in the JQuery command...

(function () { (window.jQuery || document.write('<script   src="oursites.../jquery-1.11.3.js"><;\/script>'));

Also the detail lines had to be like this:

$('div[name="Comments"]').css('width',"270px"); $('div[name="Program_x0020_Details"]').css('width',"270px"); 

and it works fine. Thanks everyone for your help!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.