Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 05 Jul 2022 11:28 by ADMIN
Cory
Created on: 21 Jun 2022 13:59
Category: Editor
Type: Bug Report
3
Additional empty rows and columns appear when programmatically adding table after Editor is initialized

I upgraded my Blazor UI package to 3.3.0 to try and get rid of the multiple tbody issue with adding a table.  Now there is an even weirder problem.  Adding a table with two columns via setting the Editor's value in the code block is causing several table cells to get inserted in between and around the desired ones.

This is my long html string:

<div style="padding:20px;text-align:center;">
<table style="width:100%;"><tbody>
                <tr>					
					<td colspan="2">
						<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
							<strong>TAX YEAR 2019</strong>
						</p>
					</td>
				</tr>
			
			        <tr>
				        <td colspan="1"><p style="text-align: right"><strong>AMOUNT DUE</strong></p></td>
				        <td colspan="1"><p style="text-align: left">$562.35</p></td>
					</tr>
					<tr>
				        <td colspan="1"><p style="text-align: right"><strong>5% PENALTY</strong></p></td>
				        <td colspan="1"><p style="text-align: left">¤28.12</p></td>
					</tr>
					<tr>
				        <td colspan="1"><p style="text-align: right"><strong>INTEREST DUE</strong></p></td>
				        <td colspan="1"><p style="text-align: left">¤129.34</p></td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right"><strong>LATE FEE</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left">$105.00</p>
						</td>				        
			        </tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left;color: #3E579A;">¤824.81</p>
						</td>
					</tr>	
				
				<tr style="border:none;">
			        <td style="border:none;">
				        &nbsp;
					</td>			        
				</tr>
			
                <tr>					
					<td colspan="2">
						<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
							<strong>TAX YEAR 2020</strong>
						</p>
					</td>
				</tr>
			
			        <tr>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: right"><strong>AMOUNT DUE</strong></p>
						</td>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: left">¤323.34</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right"><strong>INTEREST DUE</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left">¤61.43</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left;color: #3E579A;">¤384.77</p>
						</td>
					</tr>					
				
				<tr style="border:none;">
			        <td style="border:none;">
				        &nbsp;
					</td>			        
				</tr>
			
                <tr>					
					<td colspan="2">
						<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
							<strong>TAX YEAR 2021</strong>
						</p>
					</td>
				</tr>
			
			        <tr>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: right"><strong>AMOUNT DUE</strong></p>
						</td>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: left">¤323.47</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right"><strong>INTEREST DUE</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left">¤19.41</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left;color: #3E579A;">¤342.88</p>
						</td>
					</tr>					
				
				<tr style="border:none;">
			        <td style="border:none;">
				        &nbsp;
					</td>			        
				</tr>
			
			<tr>
		        <td colspan="1">
			        <p style="text-align: right;color: #3E579A;"><strong>TOTAL DUE</strong></p>
				</td>
		        <td colspan="1">
			        <p style="text-align: left;color: #3E579A;">¤1,552.46</p>
				</td>
			</tr>	
			</tbody>
</table>
</div>

This is the result:

At this point I am having to downgrade to 3.2.0 in order for it to look anything near what I need it to.

Here is my modal with the Editor component.

<div class="modal fade" id="bill-modal" tabindex="-1" aria-labelledby="bill-modal-label" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-xl modal-fullscreen-lg-down">
        <div class="modal-content">
            <div class="modal-header">
	                    <h5 class="modal-title" id="redemption-bill-modal-label">Bill</h5>	              	           
	            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <TelerikEditor Id="TheEditor" @ref="@TheEditor" Value="@EditorContent" Tools="@Tools" EditMode="EditorEditMode.Iframe" Class="editor-iframe" Height="800px">
                    <EditorCustomTools>
                        <EditorCustomTool Name="MyCustomTools">
                            <div style="margin-right: 50px">
                                <TelerikButton OnClick="@Print" Icon="print" class="m-1"></TelerikButton>
                                <TelerikButton OnClick="@ExportToPdf" Icon="download" class="m-1"></TelerikButton>
                                <TelerikDropDownList Data="@SupportedExportFormats" @bind-Value="@ExportFormat" Width="auto" class="m-1"></TelerikDropDownList>
                            </div>
                        </EditorCustomTool>
                    </EditorCustomTools>
                </TelerikEditor>
            </div>
        </div>
    </div>
</div>

I'm setting the Value via an exposed method that uses some complicated code to generate that html string above.  I don't think it's necessary to have to strip out the proprietary data and paste that here, but please let me know if that would help resolve this issue.

Thanks.

6 comments
ADMIN
Nadezhda Tacheva
Posted on: 05 Jul 2022 11:28

Hi Cory and Eli,

Thank you both for the additional details!

I managed to reproduce the described behavior on my end, too. It looks like it occurs only if you are programmatically adding a table after the Editor is initialized. Initializing the component with table value does not seem to cause an issue. I've updated the reproduction for easier comparison of these two scenarios: https://blazorrepl.telerik.com/mGYLkJlF218UMpxP55.

Steps to reproduce:

  1. Run the snippet - Editor value is correctly rendered
  2. Click "Clear Editor"
  3. Click "Populate Editor"- additional empty row and cells appear

I also updated the title of the report to be a bit more specific. I see you both already added your votes - this is important as we consider the community demand when scheduling the fixes. You might as well follow the report to keep in track with its progress.

Regards,
Nadezhda Tacheva
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Cory
Posted on: 29 Jun 2022 15:06

Nadezhda Tacheva,

I'm not adding the HTML that way.  I'm setting it in the "code behind" via the "EditorContent" property.  So when I show my modal that includes the editor, I set that property like "EditorContent = giantHtmlString;" .

If I add html the way you did, then it does seem to work as expected.

Thanks!

Eli
Posted on: 28 Jun 2022 14:26

For me the extra rows appear to come as a side effect of the extra <tbody> tag bug Editor adds two <tbody> tags (telerik.com).  It was not just adding <tbody>, but was adding <tbody><tr></tr></tbody>.  Version 3.4 removes the extra <tbody> tags but leaves the <tr></tr> tags.  However, once you focus into the table all the <tr></tr> tags get filled with <td></td> tags creating additional rows.

 

This sample will demonstrate. 

https://blazorrepl.telerik.com/cmEgmWPS23QeMJLr12

 

 

 

ADMIN
Nadezhda Tacheva
Posted on: 28 Jun 2022 09:24

Hi all,

We have indeed recently received a report for additional <br> tags appearing in the table cells causing them to expand. You may follow the item here:

Additional <br> appears in the table cells on Editor reinitialization

It was initially reported to happen when the component is reinitialized. However, Eli mentions that happens also when focusing the table in the Editor. Please add any relevant details in the dedicated report to reproduce this scenario as well. A video of the reproduction might also be helpful.

As for the issue Cory reports in the current thread - I am testing with both UI for Blazor 3.3.0 and 3.4.0(latest). I open the View HTML popup to add the listed table. However, I cannot reproduce this issue - no additional cells appear (see video attached). Please let me know if I am missing something and share the exact steps to reproduce this behavior.

Thank you in advance! I look forward to hearing from you!

Regards,
Nadezhda Tacheva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Attached Files:
Eli
Posted on: 22 Jun 2022 18:49

I have mostly gone through and updated content that is not valid, fixing tables etc because what is there now is too far off normal at this point and I am not expecting a new version to "fix" the content.  However, it was normal valid HTML prior to edits with older versions of the control that initialy messed up the tables (but left it looking fine).

Eli
Posted on: 22 Jun 2022 16:48

I have seen the same thing as Cory and other problems.

This is especially true of any content that was messed up from prior Editor versions (extra tbodys).  I have also run into extra breaks and the content table resize element being added automatically to code on focus and never removing unless going in to delete manually.  New spaces seem to be added each time the table is focused. 

Create an account Log In
View
Type
Status
Category