This is a migrated thread and some comments may be shown as answers.

RadRichTextBox cause major performance loss

5 Answers 310 Views

RichTextBox

This is a migrated thread and some comments may be shown as answers.

Fredrik asked on 28 Jun 2013, 07:29 AM

Hello i have a data source with 8 entites that each has a string property containing html
I want to display these in readonly ritchtextbox within a radgridview

it takes around 15 -20 seconds to load the content and after it loaded it slows down the whole site
what causes this performance loss?

<controls:RadGridView x:Name="RadGridView"

ItemsSource="{Binding Entities, Mode=TwoWay}" AutoGenerateColumns="False" SelectionMode="Single"

CanUserSelect="true" RowIndicatorVisibility="Collapsed" CanUserFreezeColumns="False"

CanUserInsertRows="True" ShowInsertRow="True" >

<controls:RadGridView.Columns>

<controls:GridViewDataColumn Header="Tekst" >

<controls:GridViewDataColumn.CellTemplate>

<DataTemplate >

<telerik:RadRichTextBox x:Name="richTextBox" IsReadOnly="True" IsEnabled="False" IsContextMenuEnabled="False" IsImageMiniToolBarEnabled="False" IsSpellCheckingEnabled="False" IsTrackChangesEnabled="False">

<telerik:RadRichTextBox.Resources>

<telerikHtml:HtmlDataProvider x:Key="HtmlDataProvider" RichTextBox="{Binding ElementName=richTextBox}" Html="{Binding p_FullTekst, Mode=TwoWay}" />

</telerik:RadRichTextBox.Resources>

</telerik:RadRichTextBox>

</DataTemplate>

</controls:GridViewDataColumn.CellTemplate>

</controls:GridViewDataColumn>

</controls:RadGridView.Columns>

</controls:RadGridView>

5 Answers, 1 is accepted

answered on 03 Jul 2013, 06:25 PM

Hi Fredrik,

RadRichTextBox is a relatively heavy control due to the complex functionality it supports. The performance generally depends on the number of rich text boxes that are created, the content they handle and the way their container measures them.

I tried several cases using your code and about 50 rich text boxes on a page of a grid view. The only thing that caused a performance as bad as the one you mention was if the HTML input contained large paragraphs. The DataTemplate of the CellTemplate measures the rich text box in Infinity Width and in this case the control's visualization is disabled. It cannot calculate what UIElements it must create, so it creates them all. Hence the performance toll.

The only solution to this problem is to set some fixed Width or MaxWidth to the control, so that it can make use of its virtualization. You could also verify that the HTML input uses new paragraphs and not just line breaks.

On a side note, you should declare the HtmlDataProvider outside of the resources of the RichTextBox, e.g.:

<DataTemplate >

<Grid>

<telerikHtml:HtmlDataProvider RichTextBox="{Binding ElementName=richTextBox}" Html="{Binding p_FullTekst, Mode=TwoWay}" />

<telerik:RadRichTextBox MaxWidth="800" x:Name="richTextBox" IsReadOnly="True" IsEnabled="False" IsContextMenuEnabled="False" IsImageMiniToolBarEnabled="False" IsSpellCheckingEnabled="False" IsTrackChangesEnabled="False" />

</Grid>

</DataTemplate>

Otherwise its context will not be properly updated when scrolling and the content of the rich text boxes will be messed up (the 5th RadRichTextBox may show the content of the 1st and so on).

I hope this answers your question!

Regards,
Iva Toteva
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>

answered on 28 Jan 2014, 06:52 AM

Hi Iva,

I have a fairly simple high-level project management tool in which I want to enable rich content for the project description. I do not need a full-blown Word like interface, only bullets, numbering, bold/underline and spell checking. The RadRichTextBox is an "overkill" in terms of its functionality, but seemed like my only option in the Telerik control suite. However, placing the control in a RadWindow shown with .ShowDialog results in extremely long load times on first load (nearly 10s!!!!), yes subsequent loads are much faster but such a long delay cannot work in production. If I remove only the RadRichTextBox, the RadWindow load is nearly instantaneous.

ProjectEditorView.xaml

<UserControl x:Class="Apps.Dashboard.View.ProjectEditorView"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:telerikXaml="clr-namespace:Telerik.Windows.Documents.FormatProviders.Xaml;assembly=Telerik.Windows.Documents.FormatProviders.Xaml"

xmlns:common="clr-namespace:Apps.Common;assembly=Apps.Common"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:ignore="http://www.ignore.com"

mc:Ignorable="d"

d:DesignHeight="400"

d:DesignWidth="400">

<UserControl.Resources>

<common:EnumViewModel x:Name="ProjectStatusEnum" EnumType="Server.Domain.ProjectStatus"/>

<common:EnumViewModel x:Name="TaskStatusEnum" EnumType="Server.Domain.WorkItemStatusEnum"/>

<common:EnumViewModel x:Name="TaskPriorityEnum" EnumType="Server.Domain.PriorityEnum" />

<common:EnumViewModel x:Name="TaskCertaintyEnum" EnumType="Server.Domain.CertaintyEnum" />

<common:EnumViewModel x:Name="TaskSizeEnum" EnumType="Server.Domain.SizeEnum" />

<common:EnumViewModel x:Name="FlagStatusEnum" EnumType="Server.Domain.FlagStatus" />

</UserControl.Resources>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="30" />

<RowDefinition Height="125" />

<RowDefinition Height="30" />

<RowDefinition Height="*" />

<RowDefinition Height="30" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="100" />

<ColumnDefinition Width="300" />

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0" Margin="5" Text="Code" />

<TextBox Grid.Row="0" Grid.Column="1" Margin="3" Text="{Binding Path=ProjectCode, Mode=TwoWay}" />

<TextBlock Grid.Row="1" Grid.Column="0" Margin="5" Text="Name" />

<TextBox Grid.Row="1" Grid.Column="1" Margin="3" Text="{Binding Path=ProjectName, Mode=TwoWay}" />

<TextBlock Grid.Row="2" Grid.Column="0" Margin="5" Text="Description" />

<Grid Grid.Row="2" Grid.Column="1" Margin="3">

<Grid.RowDefinitions>

<RowDefinition Height="25" />

<RowDefinition Height="90" />

</Grid.RowDefinitions>

<telerik:RadToolBar Grid.Row="0">

<telerik:RadButton Command="{Binding ElementName=editor, Path=CutCommand}" ToolTipService.ToolTip="Cut" >

<telerik:RadButton.Content>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/cut.png" />

</telerik:RadButton.Content>

</telerik:RadButton>

<telerik:RadButton Command="{Binding ElementName=editor, Path=CopyCommand}" ToolTipService.ToolTip="Copy" >

<telerik:RadButton.Content>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/copy.png" />

</telerik:RadButton.Content>

</telerik:RadButton>

<telerik:RadButton Command="{Binding ElementName=editor, Path=PasteCommand}" ToolTipService.ToolTip="Paste" >

<telerik:RadButton.Content>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/paste.png" />

</telerik:RadButton.Content>

</telerik:RadButton>

<telerik:RadToolBarSeparator/>

<telerik:RadToggleButton Command="{Binding ElementName=editor, Path=ToggleBoldCommand}" ToolTipService.ToolTip="Bold" >

<telerik:RadToggleButton.Content>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/bold.png" />

</telerik:RadToggleButton.Content>

</telerik:RadToggleButton>

<telerik:RadToggleButton Command="{Binding ElementName=editor, Path=ToggleItalicCommand}" ToolTipService.ToolTip="Italic" >

<telerik:RadToggleButton.Content>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/italic.png" />

</telerik:RadToggleButton.Content>

</telerik:RadToggleButton>

<telerik:RadToggleButton Command="{Binding ElementName=editor, Path=ToggleUnderlinCommand}" ToolTipService.ToolTip="Underline" >

<telerik:RadToggleButton.Content>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/underline.png" />

</telerik:RadToggleButton.Content>

</telerik:RadToggleButton>

<telerik:RadSplitButton CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=DropDownContent.SelectedColor}" Command="{Binding ElementName=editor, Path=ChangeFontHighlightColorCommand}" ToolTipService.ToolTip="Highlight">

<telerik:RadSplitButton.DropDownContent>

<telerik:RadColorSelector Name="highlightColorSelector" NoColorVisibility="Collapsed" Command="{Binding ElementName=editor, Path=ChangeFontHighlightColorCommand}" SelectedColor="Yellow" />

</telerik:RadSplitButton.DropDownContent>

<Grid>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/highlight.png" Stretch="None" />

<Rectangle Height="4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">

<Rectangle.Fill>

<SolidColorBrush Color="{Binding Path=SelectedColor, ElementName=highlightColorSelector}" />

</Rectangle.Fill>

</Rectangle>

</Grid>

</telerik:RadSplitButton>

<telerik:RadToolBarSeparator />

<telerik:RadToggleButton Command="{Binding ElementName=editor, Path=ToggleBulletsCommand}" ToolTipService.ToolTip="Bullets" >

<telerik:RadToggleButton.Content>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-bullets.png" />

</telerik:RadToggleButton.Content>

</telerik:RadToggleButton>

<telerik:RadToggleButton Command="{Binding ElementName=editor, Path=ToggleNumberedCommand}" ToolTipService.ToolTip="Numbering" >

<telerik:RadToggleButton.Content>

<Image Source="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-numbered.png" />

</telerik:RadToggleButton.Content>

</telerik:RadToggleButton>

</telerik:RadToolBar>

<telerikXaml:XamlDataProvider Xaml="{Binding Path=ProjectDescription, Mode=TwoWay}"

RichTextBox="{Binding ElementName=editor}" />

<telerik:RadRichTextBox x:Name="editor"

Grid.Row="1"

LayoutMode="Flow"

IsImageMiniToolBarEnabled="False"

IsSelectionMiniToolBarEnabled="False"

IsTrackChangesEnabled="False"

IsSpellCheckingEnabled="True" />

</Grid>

<TextBlock Grid.Row="3" Grid.Column="0" Margin="5" Text="Manager" />

<telerik:RadComboBox Grid.Row="3"

Grid.Column="1"

Margin="3"

ItemsSource="{Binding Path=Projects.Persons, Source={StaticResource Locator}}"

SelectedItem="{Binding Path=ProjectManager, Mode=TwoWay}"

DisplayMemberPath="FullName"/>

<TextBlock Grid.Row="4" Grid.Column="0" Margin="5" Text="Owner" />

<telerik:RadComboBox Grid.Row="4"

Grid.Column="1"

Margin="3"

ItemsSource="{Binding Path=Projects.Persons, Source={StaticResource Locator}}"

SelectedItem="{Binding Path=ProjectOwner, Mode=TwoWay}"

DisplayMemberPath="FullName"/>

<TextBlock Grid.Row="5" Grid.Column="0" Margin="5" Text="Sponsor" />

<telerik:RadComboBox Grid.Row="5"

Grid.Column="1"

Margin="3"

ItemsSource="{Binding Path=Projects.Persons, Source={StaticResource Locator}}"

SelectedItem="{Binding Path=ProjectSponsor, Mode=TwoWay}"

DisplayMemberPath="FullName"/>

<TextBlock Grid.Row="6" Margin="3" Text="Flagged" />

<telerik:RadComboBox Grid.Row="6"

Grid.Column="1"

Margin="3"

ItemsSource="{Binding Source={StaticResource FlagStatusEnum}, Path=Values}"

DisplayMemberPath=""

SelectedItem="{Binding FlagStatus, Mode=TwoWay}" />

<telerik:RadExpander Grid.Row="7" Grid.ColumnSpan="2" Header="Project Management Info">

<telerik:RadExpander.Content>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="30" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="100" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Margin="5" Text="Status" />

<telerik:RadComboBox Grid.Row="0"

Grid.Column="1"

Margin="3"

ItemsSource="{Binding Source={StaticResource ProjectStatusEnum}, Path=Values}"

DisplayMemberPath=""

SelectedItem="{Binding Path=Status, Mode=TwoWay}" />

<TextBlock Grid.Row="1" Margin="5" Text="Start" />

<telerik:RadDatePicker Grid.Row="1" Grid.Column="1" Margin="3" SelectedDate="{Binding Path=StartDate, Mode=TwoWay}" DisplayFormat="Short" />

<TextBlock Grid.Row="2" Margin="5" Text="End" />

<telerik:RadDatePicker Grid.Row="2" Grid.Column="1" Margin="3" SelectedDate="{Binding Path=EndDate, Mode=TwoWay}" DisplayFormat="Short" />

<TextBlock Grid.Row="3" Margin="5" Text="Progress" />

<StackPanel Orientation="Horizontal" Grid.Row="3" Grid.Column="1" Margin="3" >

<telerik:RadNumericUpDown Width="50" Minimum="0" Maximum="100" SmallChange="1" LargeChange="10" IsEditable="False" Value="{Binding Path=Progress, Mode=TwoWay}" ValueFormat="Numeric" NumberDecimalDigits="0" />

<TextBlock Margin="5" VerticalAlignment="Center" Text="%" />

</StackPanel>

</Grid>

</telerik:RadExpander.Content>

</telerik:RadExpander>

<StackPanel Grid.Row="8" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Right">

<telerik:RadButton Margin="3" Content="OK" Width="50" CornerRadius="5" Click="OkButton_Click"/>

<telerik:RadButton Margin="3" Content="Cancel" Width="50" CornerRadius="5" Click="CancelButton_Click"/>

</StackPanel>

</Grid>

</UserControl>

ProjectEditorView.xaml.cs:

using System.Windows;

using System.Windows.Controls;

using Telerik.Windows.Controls;

using Telerik.Windows.Documents.Model;

namespace Apps.Dashboard.View

{

/// <summary>

/// Description for ProjectEditorView.

/// </summary>

public partial class ProjectEditorView : UserControl

{

/// <summary>

/// Initializes a new instance of the ProjectEditorView class.

/// </summary>

public ProjectEditorView()

{

InitializeComponent();

this.Loaded += ProjectEditorView_Loaded;

}

void ProjectEditorView_Loaded(object sender, RoutedEventArgs e)

{

Section firstSection = this.editor.Document.Sections.First;

Span firstSpan = (firstSection.Blocks.First as Paragraph).Inlines.First as Span;

firstSpan.FontStyle = FontStyles.Normal;

firstSpan.FontSize = 11;

}

private void OkButton_Click(object sender, RoutedEventArgs e)

{

var win = this.Parent as RadWindow;

if (win != null)

{

win.DialogResult = true;

win.Close();

}

private void CancelButton_Click(object sender, RoutedEventArgs e)

{

var win = this.Parent as RadWindow;

if (win != null)

{

win.DialogResult = false;

win.Close();

}

ProjectVM.cs:

using System;

using GalaSoft.MvvmLight;

using GalaSoft.MvvmLight.Command;

using Apps.Common.Controls;

using Server.Domain;

using System.ComponentModel.DataAnnotations;

namespace Apps.Dashboard.ViewModel

{

public class ProjectVM : ViewModelBase

{

public ProjectVM()

{

this.StartDate = DateTime.Today;

this.EndDate = DateTime.Today;

this.Progress = 0.0;

this.Status = ProjectStatus.Unspecified;

this.FlagStatus = Server.Domain.FlagStatus.None;

}

public ProjectVM(Project proj)

{

this.DomObj = proj;

this.ProjectCode = proj.ProjectCode;

this.ProjectName = proj.ProjectName;

this.ProjectDescription = proj.ProjectDescription;

this.ProjectManager = proj.ProjectManager;

this.ProjectOwner = proj.ProjectOwner;

this.ProjectSponsor = proj.ProjectSponsor;

this.Progress = proj.Progress;

this.FlagStatus = proj.FlagStatus;

this.Status = proj.Status;

this.StartDate = proj.StartDate;

this.EndDate = proj.EndDate;

}

public Project DomObj { get; set; }

private string _projectCode;

public string ProjectCode

{

get { return _projectCode; }

set

{

if (value == null) return;

if (value != _projectCode)

{

_projectCode = value;

RaisePropertyChanged("ProjectCode");

}

private string _projectName;

[Required(AllowEmptyStrings = false, ErrorMessage = "Project name is required")]

public string ProjectName

{

get { return _projectName; }

set

{

if (value == null) return;

if (value != _projectName)

{

_projectName = value;

RaisePropertyChanged("ProjectName");

}

private string _projectDescription;

public string ProjectDescription

{

get { return _projectDescription; }

set

{

if (value == null) return;

if (value != _projectDescription)

{

_projectDescription = value;

RaisePropertyChanged("ProjectDescription");

}

private DateTime? _startDate;

public DateTime? StartDate

{

get { return _startDate; }

set

{

if (value == null) return;

if (value != _startDate)

{

_startDate = value;

RaisePropertyChanged("StartDate");

}

private DateTime? _endDate;

public DateTime? EndDate

{

get { return _endDate; }

set

{

if (value == null) return;

if (value != _endDate)

{

_endDate = value;

RaisePropertyChanged("EndDate");

}

private double? _progress;

public double? Progress

{

get { return _progress; }

set

{

if (value == null) return;

if (value != _progress)

{

_progress = value;

RaisePropertyChanged("Progress");

}

private Person _projectManager;

public Person ProjectManager

{

get { return _projectManager; }

set

{

if (value == null) return;

if (value != _projectManager)

{

_projectManager = value;

RaisePropertyChanged("ProjectManager");

}

private Person _projectOwner;

public Person ProjectOwner

{

get { return _projectOwner; }

set

{

if (value == null) return;

if (value != _projectOwner)

{

_projectOwner = value;

RaisePropertyChanged("ProjectOwner");

}

private Person _projectSponsor;

public Person ProjectSponsor

{

get { return _projectSponsor; }

set

{

if (value == null) return;

if (value != _projectSponsor)

{

_projectSponsor = value;

RaisePropertyChanged("ProjectSponsor");

}

private ProjectStatus _status;

public ProjectStatus Status

{

get { return _status; }

set

{

if (value == null) return;

if (value != _status)

{

_status = value;

RaisePropertyChanged("Status");

}

private FlagStatus? _flagStatus;

public FlagStatus? FlagStatus

{

get { return _flagStatus; }

set

{

if (value == null) return;

if (value != _flagStatus)

{

_flagStatus = value;

RaisePropertyChanged("FlagStatus");

}

Add Project Command in ViewModel.cs:

#region Command cmdAddProject

private RelayCommand _cmdAddProject;

public RelayCommand cmdAddProject

{

get

{

if (_cmdAddProject == null)

{

_cmdAddProject = new RelayCommand(() => DoAddProject(), () => CanAddProject());

}

return _cmdAddProject;

}

private bool CanAddProject()

{

//TODO: Impelement CanExecute Logic

return true;

}

private void DoAddProject()

{

this.IsBusy = true;

var win = new RadWindow();

var vm = new ProjectVM();

win.DataContext = vm;

var vw = new View.ProjectEditorView();

win.ResizeMode = ResizeMode.NoResize;

win.Header = "New Project";

win.Content = vw;

win.WindowStartupLocation = WindowStartupLocation.CenterScreen;

win.Closed += addProject_Closed;

win.ShowDialog();

}

private void addProject_Closed(object sender, WindowClosedEventArgs e)

{

var win = sender as RadWindow;

if (win != null)

{

if (win.DialogResult==true)

{

var vm = win.DataContext as ProjectVM;

if (vm != null)

{

var p = new Server.Domain.Project();

p.ProjectGuid = Guid.NewGuid();

p.IsActive = true;

p.ProjectCode = vm.ProjectCode;

p.ProjectName = vm.ProjectName;

p.ProjectDescription = vm.ProjectDescription;

p.ProjectManager = vm.ProjectManager;

p.ProjectOwner = vm.ProjectOwner;

p.ProjectSponsor = vm.ProjectSponsor;

p.Progress = vm.Progress;

p.FlagStatus = vm.FlagStatus;

p.Status = vm.Status;

p.StartDate = vm.StartDate;

p.EndDate = vm.EndDate;

Projects.AddNewItem(p);

RefreshProjectsByStatus();

}

this.IsBusy = false;

}

#endregion

answered on 30 Jan 2014, 02:36 PM

Hi,

We are unaware of any differences in the behavior of RadRichTextBox when running the application from Visual Studio and the application is deployed. The only thing that comes to mind is that maybe from Visual Studio you were running the application in Debug mode instead of Release.

When it comes to the initial loading time of the control, this might be due to the use of MEF. To improve the startup time you can try changing the default catalog as described in this help article. Additionally, you might omit some of the types which you are not planning on using in your project (context menu, dialogs, etc.).

On a side note, I noticed the way you are modifying content in RadRichTextBox when the control is loaded. Please note that changing document elements of a measured document directly (by accessing them through the Sections, Blocks, Inlines, etc. collections) is not recommended. Instead, I'd suggest selecting the respective content and calling one of RadRichTextBox's methods (ChangeFontSize(), ChangeFontStyle()).

I hope this helps! Let me know if you have other questions or comments.

Regards,
Petya
Telerik

answered on 12 Jul 2017, 12:26 PM

document.png

Hi,

We are using the RadRitchTextBox in our application for preparing the document.we have implemented the smart note feature so user should be able to select the predefined option/text by simply clicking on the smart note links in document.so we are using XamlFormatProvider's import and export functions. we observe that when our document size is big and number of smart note links are more in document then import and export function is taking lot of time.

Is there any option by setting we should be able to improve the performance our app?

please ref the attached file for smart note links in document.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

RadRichTextBox cause major performance loss

5 Answers, 1 is accepted