HtmlFormatProvider Numbered Lists off by 1

4 posts, 1 answers
  1. Ralph
    Ralph avatar
    9 posts
    Member since:
    Feb 2014

    Posted 24 Mar 2014 Link to this post

    Our application contains HTML data that does not display properly in the RadRichTextBox when importing with the HtmlFormatProvider.

    For example, our HTML looks like the following using Internet Explorer:

    1. Item one
       1. Item one sub one
       2. Item one sub two
    2. Item two
       1. Item two sub one
       2. Item two sub two

    In the RadRichTextBox is looks like the following:

    0. Item one
       0. Item one sub one
       1. Item one sub two
    1. Item two
       0. Item two sub one
       1. Item two sub two

    I constructed the same list in Telerik RadRichTextBox and exported with the HtmlFormatProvider.  I noticed that the <ul> added start="1" and the <li> added value="1".

    It appears that the Telerik editor depends on "start" and "value" attributes set properly in order to maintain the correct numbering when reloading the data.

    Is there are way to prevent the zero based ordering without modifying my existing HTML?

    Below is the original HTML data:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html
       PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI; COLOR: #000000; DIRECTION: ltr">
    <p style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Numbered</span>
    </p>
    <p style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    &nbsp;
    </p>
    <ol style="LIST-STYLE-TYPE: decimal; MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px" type="1">
    <li>
    <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item one</span>
    </div>
    </li>
    <li>
    <ol style="LIST-STYLE-TYPE: decimal" type="1">
    <li>
    <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item one sub one</span>
    </div>
    </li>
    <li>
    <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item one sub two</span>
    </div>
    </li>
    </ol>
    </li>
    <li>
    <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item two</span>
    </div>
    </li>
    <li>
    <ol style="LIST-STYLE-TYPE: decimal" type="1">
    <li>
    <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item two sub one</span>
    </div>
    </li>
    <li>
    <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item two sub two</span>
    </div>
    </li>
    </ol>
    </li>
    </ol>
    <p style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    &nbsp;
    </p>
    <p style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Last line.</span>
    </p>
    </body>
    </html>
  2.
  3. Ralph
    Ralph avatar
    9 posts
    Member since:
    Feb 2014

    Posted 24 Mar 2014 Link to this post

    Another issue regarding this same HTML is when I then export the data with:
    string xhtml = new HtmlFormatProvider().Export(Document);

    When the HTML is viewed with Internet Explorer is looks like this:

    1. Item one
    2.
       1. Item one sub one
       2. Item one sub two
    3. Item two
    4.
       1. Item two sub one
       2. Item two sub two

    It appears that the exporter has addeed <li> tag around the nested lists.

    Our application contains reporting feature that display the HTML the same way Internet Explorer display the HTML.  When this modified HTML is reloaded in the RadRichTextBox with:  Document = new HtmlFormatProvider().Import(xhtml);
    I notice that the extra parent list items are not visible as they are in Internet Explorer.

    Is there a way I can prevent this?

    Below it the HTML that is created by the exporter (NOTE: I have added the //****... comments to make it easier to read):

    <p style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Numbered</span>
    </p>
    <p style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    &nbsp;
    </p>
    <ol style="LIST-STYLE-TYPE: decimal; MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px" type="1">
    <li>
    <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item one</span>
    </div>
    </li>
    <li> //********************** NOTE: Then ordered list is contained in "<li>" tags!!!!!!!!!!!
     <ol style="LIST-STYLE-TYPE: decimal" type="1">
     <li>
     <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
     <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item one sub one</span>
     </div>
     </li>
     <li>
     <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
     <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item one sub two</span>
     </div>
     </li>
     </ol>
    </li> //********************** NOTE: Then ordered list is contained in "<li>" tags!!!!!!!!!!!
    <li>
    <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item two</span>
    </div>
    </li>
    <li> //********************** NOTE: Then ordered list is contained in "<li>" tags!!!!!!!!!!!
     <ol style="LIST-STYLE-TYPE: decimal" type="1">
     <li>
     <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
     <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item two sub one</span>
     </div>
     </li>
     <li>
     <div style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
     <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Item two sub two</span>
     </div>
     </li>
     </ol>
    </li> //********************** NOTE: Then ordered list is contained in "<li>" tags!!!!!!!!!!!
    </ol>
    <p style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    &nbsp;
    </p>
    <p style="MARGIN-BOTTOM: 0px; DIRECTION: ltr; MARGIN-TOP: 0px">
    <span style="FONT-SIZE: 16pt; FONT-FAMILY: Segoe UI">Last line.</span>
    </p>
    </body>
    </html>
  5. Answer
    Yancho
    Admin
    Yancho avatar
    72 posts

    Posted 26 Mar 2014 Link to this post

    Hi Ralph,

    Thank you for getting to us with this!

    I will comment on your questions successively.

    Regarding the first question about the zero based ordering, indeed this is a bug in RadRichTextBox. I logged the issue in our to-do list and we will do our best to fix it as soon as possible. I’m afraid that the only possible way to solve it is to modify your existing HTML. You should set the “start” attribute of the nested <ol> list to 1.

    As to your second question about adding <li> tag around the nested lists, this is a known behavior but our investigation shows that it works correctly in all modern browsers (Internet Explorer as well). Currently, there is no way to prevent adding this tag. This issue is already added in our to-do list. At this point the implementation of this is not scheduled. 

    The Telerik points in your account have been updated in appreciation of your involvement.

    Let me know if you have other comments or questions.

    Regards,
    Yancho
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  7. Ralph
    Ralph avatar
    9 posts
    Member since:
    Feb 2014

    Posted 26 Mar 2014 in reply to Yancho Link to this post

    Thanks for your reply.

    Regarding the first question, I will add the "start" attribute as suggested.

    Regarding the second question, I discovered that we had some HTML clean up code that removed the style for <li> tags.  I noticed that the style was style="list-style-type: none;".  It appears that "none;" indicates that the item number should not be rendered and that the <li> is merely a container for the nexted ordered list <ol>.  I will be changing our code to resolve the problem.
  8.
Back to Top