Notes Field in Template

4 posts, 0 answers
  1. Bryan
    Bryan avatar
    28 posts
    Member since:
    Oct 2014

    Posted 23 Jun 2015 Link to this post

    So I'm trying to move some of my data binding to templates to allow conditional formatting, but I've noticed something when binding a notes field directly to a <p> tag vs. rendering it in the Template. The binding adds <br> tags in place of the carriage returns so the notes format correctly; the template does not.

     Here's the template:

             # if(PeopleNotes != null && PeopleNotes != '' ) { # <div class='inputWrapper' id='main_notes'>
            <label for='main_notesInput'>Notes</label>
            <p id='NoteField'>#:  PeopleNotes #</p>
            </div> # } #

     

    Which doesn't include the <br> tag, vs:

                    <div class="inputWrapper" id="main_notes">
                        <label for="main_notesInput">Notes</label>
                        <p id="NoteField" data-bind="text: selectedPerson.PeopleNotes"></p>
                    </div>

     which does. Suggestions?

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 25 Jun 2015 Link to this post

    Hi,

    the text binder passes through jQuery .text method, which automatically converts new lines to <BR> elements.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Bryan
    Bryan avatar
    28 posts
    Member since:
    Oct 2014

    Posted 25 Jun 2015 in reply to Petyo Link to this post

    OK. How would I get that formatting in the template? I can't use the string replace 

    .replace(/(?:\r\n|\r|\n)/g, '<br />')

    to return the same result, since it results in an invalid template. Can I pass it through the JQuery text method in the template? Doesn't seem to work for me.

  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 26 Jun 2015 Link to this post

    Hi,

    the approach you have taken seems correct and works here.
    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready