+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / Generic Content: Attributes not working

Generic Content: Attributes not working

4 posts, 0 answered
  1. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    21 Dec 2009
    Link to this post
    Hi,

    We're trying to get the ability to take a generic content module, drop it on to a page and apply different make-up to it, but none of the properties work including CssClass. We've tried every one of the other appearance properties and nothing works, border, border-color, backcolor, height, width, nothing. 

    The module doesn't even render any HTML that surrounds the text so I'm not sure how these properties would be applied to it anyway. 

    What's up with that? 

    Regards,
    Jacques
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    21 Dec 2009
    Link to this post
    Hi J.Hov,

    The module cannot be dropped on a page, so I assume that you are talking about Generic Content control which has properties. However, the GenericContent control inherits from WebControl which implements border, border-color, backcolor, height, width etc. More information at MSDN. The Generic content control ( by default) does not render any tags in the end html that could be associated with these properties. Possible solution is adding a div tag with class property and styling the div through your theme stylesheet.

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    21 Dec 2009
    Link to this post
    Thanks you for correcting me Ivan (Module vs Control) I will try not to make that mistake again.

    So in the Generic Content control whilst editing you have a list that you can apply elements like H1, H2, Normal, Menu, etc. to highlighted text. Is it possible to control that list and add the Divs we require? 

    Regards,
    Jacques
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    21 Dec 2009
    Link to this post
    Hi J.Hov,

    It is possible. Below is sample code and the steps.

    1. Map GenericContentDesigner.ascx template
    2. Create a new dropdown in the RadEditor's declaration
    3. After adding the custom dropdown to the editor's toolbar, you should attach a function to the editor's OnClientCommandExecuting, the arguments of which will give you reference to the selected dropdown name and value.

    <div class="ctrlPropsGeneric">
    <telerik:RadEditor   OnClientCommandExecuting="OnClientCommandExecuting"
        runat="server"
        ID="textEditor"
        ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
        ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"   
        Skin="Black"   
        NewLineBr="False"
        Height="360px"
        Width="98%"
        ContentFilters="EncodeScripts,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent">
        <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
        <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
        <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
        <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
        <CssFiles>
            <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
        </CssFiles>
        <Tools>
        <telerik:EditorToolGroup>
        <telerik:EditorTool Name="ToggleScreenMode" />
         </telerik:EditorToolGroup>
         <telerik:EditorToolGroup>
        <telerik:EditorDropDown  Name="TEST" Text="TEST">
        <telerik:EditorDropDownItem Name="somename" Value="myclass"/>
        </telerik:EditorDropDown>
         
         </telerik:EditorToolGroup>
        </Tools>
    </telerik:RadEditor>

    4. Add the js function to replace the content

    <script type="text/javascript">
        function OnClientCommandExecuting(editor, args) {
            var name = args.get_name();
            var val = args.get_value();
            var selection = editor.getSelectionHtml();
            if (name == "TEST") {
                editor.pasteHtml("<div class='" + val + "'>" + selection);
                args.set_cancel(true);
            }
        }
     
     
    </script>

    Now the content that has been marked in the RadEditor will be wrapped in a div with name from our value once we change the index of the custom DropDown ( in our case this is "myclass").

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Register for webinar
4 posts, 0 answered