RichTextBox StylesGallery is empty - How do I restore default styles?

[Hans]

Hello Telerik,

 

I am using a RadRichTextBox to display a HTML document containing help information. This document is editable for system administrators, in which case a RadRichTextBoxRibbonUI is displayed to help the user edit the document. When the user saves the document, the RadDocument is exported back to HTML and stored on the server so that it can be viewed by the other users.

When the document is imported to a RadDocument and displayed in the RadRichTextBox, the StylesGallery is empty. It contains only 1 style, which is presumably the default "you have some text so here is 1 style for the text that is in your document"-style. I have copied the entire RadRichTextBoxRibbonUI XAML from your online demo, and stripped away some sections that are not needed (like the ability to create comments on the document). I have only removed entire tabs or sections, not "parts" of the XAML.

How can I restore the default styles, like you have in your RadRichTextBox demo? I am looking for the full "Microsoft Word" set of default document styles (the blue ones :), to be more precise). A solution where I can manually "reset" the StylesGallery is good enough.

 

Kind regards,

Beijerinc (on behalf of Hans)

 

PS: There was also a TableStylesGallery in the demo, but I cannot find this in our DLL's. We are using 2013.2.724.1050. Has this been added in a later version?

[Tanya]

Hi Beijerinc,

We are not aware of similar behavior - when a document without styles is imported in the RadRichTextBox, the default set of styles is shown in the StylesGallery. That is why I would like to ask you to share with us a sample document, which could help to reproduce this behavior and try to find what causes it.

The TableStylesGallery is released with Q3 2013 and couldn't be used in earlier versions.

Regards,
Tanya
Telerik

[Hans]

Hello Tanya,

 After creating a sample project and noticing it was actually working, I did some digging in the StylesGallery class. I noticed it was retrieving its QuickStyles from its style sheet and cast it to RadRibbonGallery. It turns out we had a custom style on the RadRibbonGallery that messed up the quick styles. Would've been nice if you could've pointed me in a general direction though. Regardless, this part of the Ribbon is working now.

I noticed that when working with a table in my RadRichTextBox, the table-specific ribbon tabs weren't showing up. They also happen to do this in my mini test project. Do I need to manually hook this up? How does it know when to display the tabs, what mechanism should I be looking for?

Kind regards,
Beijerinc (on behalf of Hans)

[Tanya]

Hi Beijerinc,

I am glad to hear that you managed to resolve the issue.

Now straight to the next question:
The "Table Tools" tabs should be added to the XAML as any other of the tabs with the RadRibbonContextualGroup.IsActive property bound to the CurrentEditingContext.Type property of RadRichTextBox. The EditingContextTypeToBoolConverter will convert the value to Boolean when the user switches between different editing contexts.

You could check this demo in our SDK repository to see how the tabs are added to the RadRichTextBoxRibbonUI.

Hope this is helpful.

Regards,
Tanya
Telerik

[Hans]

Hello Tanya,

You've been a big help. Turns out I accidentally removed the following section while copying from the Telerik demo:

<telerik:RadRichTextBoxRibbonUI.ContextualGroups>
    <telerik:RadRibbonContextualGroup x:Name="TableTools" Header="Tables">
        <telerik:RadRibbonContextualGroup.IsActive>
            <Binding Converter="{StaticResource EditingContextTypeToBoolConverter}" Mode="OneWay" Path="AssociatedRichTextBox.CurrentEditingContext.Type">
                <Binding.ConverterParameter>
                    <telerik:EditingContextTypes>Table</telerik:EditingContextTypes>
                </Binding.ConverterParameter>
            </Binding>
        </telerik:RadRibbonContextualGroup.IsActive>
    </telerik:RadRibbonContextualGroup>
</telerik:RadRichTextBoxRibbonUI.ContextualGroups>

 

Onto the next challenge: we have a custom style for the tab control as well as the ribbon (mostly). The tabs in the ribbon at least look different from the default Telerik ribbons, but when the contextual tabs are displayed, they revert back to their old style. I'm assuming this happens because they are separate controls, or at least separetly styled. How can I style the contextual tabs for the Table Tools? Also, how can I define which color to use when highlighting the contextual tab group?

One last quirk: we open a control with the ribbon collapsed and the rich text box set to read only. However, when the user clicks the edit button, the ribbon is displayed, but the contextual tab for the Table Tools is immediately visible. Strange as it is, it also has our own tab style instead of the contextual tab style. Any idea's as to why this is happening, or what I should look into for this?

Kind regards,
Beijerinc (on behalf of Hans)

[Todor]

Hello Beijerinc,

When you desire to achieve different look of the contextual tabs than the default one, you should set the RadRibbonView's (in particular RadRichTextBoxRibbonUI) ContextualTabsStyle property. As a value you could specify the desired style for the contextual ribbon tabs. 

If you like to change the tab's color when it is shown, you should set the Color property of the corresponding RadRibbonContextualGroup defined in XAML of your application (e.g. MainPage.xaml).

I'm not sure what your exact scenario is, but you also might have to change the default RadRibbonContextualGroup control style.

Regarding the other issue related with the changing the read-only mode of the RadRichTextBox - I've tried to reproduce it, but to no avail. It will be much easier for us to find what might causes it if you can isolate it in a sample demo project and send it to us.

Looking forward to your reply.

Regards,
Todor
Telerik

[Hans]

Hello Todor,

I managed to fix the faulty contextual tab style. It took me a while to realize that the RibbonView (or RadRichTextBoxRibbonUI?) manually set the Background property of the tab to Transparent when the tab is displayed as a contextual tab. This made the style look significantly different from the style I had defined, which made me question whether or not my style was being applied at all. After I stopped routing the Background property to the Template controls, the tab displayed as expected.

I still have not found the reason why the contextual tab is initially displayed. I have tried to reproduce this in a sample project, but I was unable to do so. Perhaps this means the problem is style related? I have tried setting the contextual tab to Visibility="Collapsed", hoping the RibbonView would make it visible. This did happen, however now the content of the tab is gone and the tab is displayed with a width of 2 pixels.

As I am unable to reproduce this quirk in a sample project, I would like to know how the RibbonView handles the contextual tabs and which properties are set on the tab. Hopefully, armed with this information, I could find a work-around for the quirk. Can you provide this information?

Kind regards,
Beijerinc (on behalf of Hans)

[Todor]

Hi Beijerinc,

I'm glad you managed to resolve the style issues.

About the contextual tab activation - you should handle the RadRibbonContextualGroup's IsActive property. As you can see in the XAML of the RadRichTextBox demo, an 'EditingContextTypeToBoolConverter' converter is used in order to be determined whether the tab is active or not. Please, try to declare and use own converter to handle the tab activation. 

I hope this helps.
If you have further questions, I'll be glad to assist you.

Regards,
Todor
Telerik