none
JSLink not working when using any list ViewStyles other than default. RRS feed

  • Question

  • Hi,

    I have a custom field and i am doing client side rendering of it using JSLink for ListView form. I started by applying the JSLink in custom field class.

    public override string JSLink
    {
         get { return myJSLinkPath; }
         set { base.JSLink = value; }
    }

    Everything seems to work fine and i can see my custom field get rendered properly. Till this point i was using the default sharepoint list view style. After sometime i decided to use the shaded listview style which is <ViewStyle ID="17" /> to get the alternating row color style in my list. After applying this style, my JSLink stopped working, infact it is not even registered on page now. I have tried different ways to set JSLink property like it is mentioned in the following link but it didnt worked.

    http://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html

    So my question is, how to apply JSLink while using the shaded (or any other) viewstyle?



    • Edited by Arham Muslim Saturday, April 12, 2014 5:18 PM added more description to title
    Friday, April 4, 2014 9:36 PM

Answers

  • Arham,

    When you register your display template, I'm guessing you're using both ListTemplateID and BaseViewID in the registration code?

    It's likely that the BaseViewID is different for the Shaded ViewStyle. You should still see your code registered on the page in the Head element, but when it runs I think the registration is getting ignored.

    Using the debugger in IE or chrome should allow you to step through the Display Template registration and double check what the value of BaseViewID should be.

    You can of course override this if you want, I use a similar method in a blog post on fixing the clash with multiple web parts and JSLink on a page which may help you.

    http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues-with-jslink-and-display-templates-a-solution/

    I'll give this a test on my dev environment when I get home and see if I get the same results when adding the JSLink through the webpart properties.

    ##EDIT##

    Ok, I tried this at home using a Field Display Template and it worked on all the different styles, however this was with the JSLink deployed through the list view web part properties, not declaratively in the field declaration.

    It does prove however that it's not the BaseViewID causing the problem.

    ##/EDIT##

    Paul.


    Please ensure that you mark a question as Answered once you receive a satisfactory response. This helps people in future when searching and helps prevent the same questions being asked multiple times.



    Tuesday, April 15, 2014 3:24 PM

All replies

  • Hi,

    Thank you for your question. I am trying to involve someone familiar with this topic to further look at this issue. There might be some time delay. Appreciate your patience. Thank you for your understanding and support.

    Thanks,

    Linda Li


    Linda Li
    TechNet Community Support

    Thursday, April 10, 2014 8:18 AM
  • Hi Arham,

    please have a check this example:

    http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

    http://zimmergren.net/technical/sp-2013-using-the-spfield-jslink-property-to-change-the-way-your-field-is-rendered-in-sharepoint-2013


    Regards,
    Aries
    Microsoft Online Community Support


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    Thursday, April 10, 2014 10:11 AM
  • Hi Aries,

    Thanks for reply. As per your suggestion i went through the given links again but both of them are talking about how to create javascript file for CSR and how to apply them.

    Like i have said in my original post, i am able to apply the custom javascript file via JSLink property and i can see the field being rendered as per my needs on ListView page.  But this only works as long as i am using the default viewstyle. As soon as I change the ViewStyle of ListView page to shaded(<viewstyle id="17"/>), javascript stops working. If I turn back to default ViewStyle, javascript starts to work again.

    So my question is how to apply JSLink to a ListView page which is not using the default ViewStyle? In my case i want to use shaded style on the ListView page and also get my custom field rendered using custom javascript.

    Regards,

    Arham

    Saturday, April 12, 2014 5:17 PM
  • Hi Arham,

    please let us know your build number of the sharepoint that you have.

    and perhaps you can try different viewstyle other than 17 or shaded, for testing purposes.

    and please let us know the result of the testing.


    Regards,
    Aries
    Microsoft Online Community Support


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    Monday, April 14, 2014 5:10 AM
  • Hi Aries,

    The SharePoint 2013 build number I am using is:

    vti_encoding:SR|utf8-nl
    vti_extenderversion:SR|15.0.0.4569
    

    About trying different styles, I have tried almost all the available styles and JSLink didnt worked with any of them. What I found out is that if i add the line  <ViewStyle ID="17" />  in my list definition schema.xml than JSLink stops to work and if i remove this line it stats working with standard list view style.

    Regards,

    Arham

    Tuesday, April 15, 2014 9:24 AM
  • Arham,

    When you register your display template, I'm guessing you're using both ListTemplateID and BaseViewID in the registration code?

    It's likely that the BaseViewID is different for the Shaded ViewStyle. You should still see your code registered on the page in the Head element, but when it runs I think the registration is getting ignored.

    Using the debugger in IE or chrome should allow you to step through the Display Template registration and double check what the value of BaseViewID should be.

    You can of course override this if you want, I use a similar method in a blog post on fixing the clash with multiple web parts and JSLink on a page which may help you.

    http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues-with-jslink-and-display-templates-a-solution/

    I'll give this a test on my dev environment when I get home and see if I get the same results when adding the JSLink through the webpart properties.

    ##EDIT##

    Ok, I tried this at home using a Field Display Template and it worked on all the different styles, however this was with the JSLink deployed through the list view web part properties, not declaratively in the field declaration.

    It does prove however that it's not the BaseViewID causing the problem.

    ##/EDIT##

    Paul.


    Please ensure that you mark a question as Answered once you receive a satisfactory response. This helps people in future when searching and helps prevent the same questions being asked multiple times.



    Tuesday, April 15, 2014 3:24 PM
  • Hi Arham,

    did you ever find a solution to this problem?

    I also encounter that the code from JSLink is never called if another than the default-style is selected in the view. Also if I check the network-panel of firebug or IE developer tools the clienttemplates.js is loaded by browser only in default-style.

    Greetings

    Tuesday, August 30, 2016 8:41 AM
  • As soon as i enter a value in the webpart-properties (external list with shaded style), the rendering is set bnack to the default. Even if the referenced Javascript-file does not contain any functions.
    Monday, November 21, 2016 9:58 AM