Customizing Styles Gallery in the Ribbon

9 posts, 1 answers
  1. Lester
    Lester avatar
    1 posts
    Member since:
    Mar 2013

    Posted 04 Apr 2013 Link to this post

    Hello,

    I've had the need to programmatically customize and lock the provided Styles Gallery to set of my choosing.

    I need to do this in order to lock the users into a predefined set of styles.  I intend the result to be exported as html, and it would be nice on the design surface that what the user sees matches (as close as I can) preexisting css rules.  I like the existing WYSIWYG feature, but for the current project at hand that is irrelevant right now.

    Are there any plans to expose the APIs for the styles gallery?  Am I missing something obvious if this is already doable?

    Thanks,

    Lester
  2. Answer
    Petya
    Admin
    Petya avatar
    975 posts

    Posted 09 Apr 2013 Link to this post

    Hello Lester,

    The styles shown in the Styles Gallery of the predefined UI are the same as those in the document's StyleRepository. You can read all about styles and how to create a custom one in this help article and about the UI here.

    Additionally, you can remove one of the default styles like this:
    this.editor.Document.StyleRepository.Remove("Heading1");However, plea
    However, you should be aware that there are some styles, namely Normal, TableNormal, TableGrid and Hyperlink, which are internally used and removing them might cause unexpected crashes. What you can do in this regard is simply set their IsPrimary property to false, which will hide them to from the Quick Styles:
    this.editor.Document.StyleRepository.GetValueOrNull("Hyperlink").IsPrimary = false;

    This should be enough to verify that users will not be able to use them if you also remove the Change Styles button from the ribbon, which invokes the ManageStylesDialog. 

    Please note that StyleRepository is a property of RadDocument, so once you change the document in the editor or create a new one, previously removed styles might again be present in the gallery. In order to achieve the desired result for all documents you should execute the code mentioned above in the DocumentChanged event handler of RadRichTextBox.

    I hope the provided information is helpful! Let me know if I can be of further assistance.

    Regards,
    Petya
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Dmitry
    Dmitry avatar
    20 posts
    Member since:
    Apr 2011

    Posted 25 Jun 2014 in reply to Petya Link to this post

    Hello Petya!
    I am trying to do similar thing - customize styles available via Styles Gallery.
    I've tried to do as you directed topic starter, but when I receive DocumentChanged event - StylesRepository does not contain Header1..6 and some other styles in it. If I add my own Header1..3 styles, later someone is overwriting them in that collection. The only 2 things that work:
    - change "normal" style (since it exists in StylesRepository at the moment of event)
    - set "Hyperlink" style IsPrimary property to false (same - works because style exists at the moment of event)

    Can you tell me - if anything changed in that logic (when and how can I add/remove/change styles in styles gallery) since your original post here?

    Regards, Dmitry.
  5. Boby
    Admin
    Boby avatar
    595 posts

    Posted 26 Jun 2014 Link to this post

    Hello Dmitry,
    We recently added the concept of built-in styles - they are added to the repository only as metadata and are created on demand. Hyperink and Heading1-6 are such styles.

    By default, GetValueOrNull adds the style in the repository, so if you first invoke this method, you can then remove the style with the Remove method.

    Regards,
    Boby
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  6. Dmitry
    Dmitry avatar
    20 posts
    Member since:
    Apr 2011

    Posted 26 Jun 2014 in reply to Boby Link to this post

    Can you please provide an example how to do this?
  7. Boby
    Admin
    Boby avatar
    595 posts

    Posted 30 Jun 2014 Link to this post

    Hi Dmitry,
    What I meant was that you can first get the style - this will ensure that it is added to the repository - and then remove it, for example:
    string heading2StyleId = RadDocumentDefaultStyles.GetHeadingStyleNameByIndex(2);
    var heading2Style = this.radRichTextBox.Document.StyleRepository.GetValueOrNull(heading2StyleId);
     
    this.radRichTextBox.Document.StyleRepository.Remove(heading2StyleId);


    Regards,
    Boby
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  8. C
    C avatar
    43 posts
    Member since:
    Jul 2014

    Posted 03 Jul 2014 in reply to Boby Link to this post

    This code from http://www.telerik.com/forums/how-to-programatically-insert-a-table-of-contents
    creates and adds a new style to the MS Word styles list.

    StyleDefinition paragraphStyle = new StyleDefinition();
    paragraphStyle.Type = StyleType.Paragraph;
    paragraphStyle.BasedOn = this.radRichTextBox.Document.StyleRepository[RadDocumentDefaultStyles.GetHeadingStyleNameByIndex(1)];

    paragraphStyle.ParagraphProperties.Background = Colors.Red;paragraphStyle.DisplayName = "myStyle";
    paragraphStyle.Name = "myStyle"; this.radRichTextBox.Document.StyleRepository.Add(paragraphStyle);

    http://www.telerik.com/forums/how-to-programatically-insert-a-table-of-contents
  9. Robert
    Robert avatar
    4 posts
    Member since:
    Nov 2012

    Posted 12 Dec 2014 in reply to Boby Link to this post

    I'm experiencing the exact same situation as Dmitry, 

    1.string heading2StyleId = RadDocumentDefaultStyles.GetHeadingStyleNameByIndex(2);
    2.var heading2Style = this.radRichTextBox.Document.StyleRepository.GetValueOrNull(heading2StyleId);
    3.this.radRichTextBox.Document.StyleRepository.Remove(heading2StyleId);

    I've tried the above code provided and it didn't remove Heading 2 from my quick styles. Is this a known issue and is there another method for removing styles?
    Thanks,
    Robert
  10. Todor
    Admin
    Todor avatar
    168 posts

    Posted 17 Dec 2014 Link to this post

    Hello Robert,

    In order to hide a style from the quick styles gallery, you could set its IsPrimary property to false. This indicates the property will be no longer visible in the gallery. However, the provided code-snippet should also works, so please, ensure you that you are not adding the removed style after the code execution. If this is not the case, you can try to isolate the issue and send it to us as a demo project.

    Please note that in the current implementation of the RadRichTextBox there isn't a way to remove the style from ManageStylesDialog. That dialog is shown when you click on the 'Change Styles' button next to the gallery in the RibbonUI.


    Regards,
    Todor
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready