Rich content editor

6 posts, 0 answers
  1. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 18 Aug Link to this post

    What would be a good approach to allow for rich content editing for each slide, basically want to have a dynamic amount of slides depending on images in a folder that will be a background image for the slide. Then each slide needs to have a layer of rich content that can be edited per slide.

     

    Can i create slides (server side) per images in folder and inside the slide dynamically create a radeditor that has the image as background and store the content in my database and make sure i pause the slide on mouseover (when editor is in edit mode) to allow for editing. or is there any better approach to this? anyone done something similar?

     

    Christian

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 18 Aug Link to this post

    Hello Christian,

    I would define the ItemTemplate of the rotator as needed to show the content beautifully and set the PauseOnMouseOver property to true.

    I would then use the ItemClick event to add/show a RadEditor on the page where the user can change the content and click a Save button to store the data to the location where the rotator data source reads.

    Or, the client-side OnClientItemClicked event and show a popup with the editor and corresponding data. You can even toggle a CSS class on the item that shows/hides the editor if you had defined it in the ItemTemplate.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 19 Aug in reply to Marin Bratanov Link to this post

    Hi Marin,

    I'm sold on your idea and decided to use the OnClientItemClicked event to display a editor, really appreciate the suggestion.

    However, I'm facing difficulties with the rotator to simply make it responsive with a div and background image set as background-size:cover.

     

    No matter what i do I'm either getting very small items when debugging the internal rrItem class, or it wont cover the entiry width (not expanding width of image above image size, which cover should do).

     

    i can get it working without using the rotator as a static image using the same container, so its something to do with the internal class that overrides what i want to accomplish.

     

    i have a datasource with a few images (all the same size of 2560x410) and the following code,

    <div id="rotatorContainer">
        <telerik:RadRotator ID="rotator" runat="server" Width="100%" Height="410px" RotatorType="Buttons" ItemWidth="100%">
        <Items>
            <telerik:RadRotatorItem>
                 
            </telerik:RadRotatorItem>
        </Items>
     
        <ItemTemplate>
                    <div class="rotatorBackgroundContainer">
                    <div id="rotatorContentContainer">
                        <%# DataBinder.Eval(Container.DataItem,"content") %>
                    </div>
        </ItemTemplate>
    </telerik:RadRotator>
    </div>

     

    .rotatorItemContainer{
        height:410px;
        width:900px;
    }
     
    .rotatorBackgroundContainer{
        background:url('../images/rotators/home/3.png') no-repeat transparent;
        height:410px;
        background-size:cover;
     
    }
     
    #rotatorContentContainer{
        height:100%;
        width:100%;
    }

     

    I want to get each item (and content div) to cover the whole width of the screen which may sound simple enough but im just lost..

     

     

  5. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 19 Aug Link to this post

    If i look at the rendered source i can see that the rrItemsList has a width of 70px(?), if i set this to 100% each rrItem is still limited to 70px unless i add width 100% to each rrItem class but then it looses its positioning and each item gets aligned vertically and the flow between each slide is wrong. hope this explains my issues better.

     

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 19 Aug Link to this post

    Hello Christian,

    Rotator items have width in pixels. The rotator itself may get 100% width, but this has some requirements and limitations as described in the documentation: http://docs.telerik.com/devtools/aspnet-ajax/controls/rotator/mobile-support/fluid-capabilities.

    I suggest you take a look at the ImageGallery control to see if it will fit your needs: http://demos.telerik.com/aspnet-ajax/image-gallery/examples/overview/defaultcs.aspx. It also offers templates if you need more complex content: http://demos.telerik.com/aspnet-ajax/image-gallery/examples/functionality/templates/defaultcs.aspx.

    Here is a basic example:

    <telerik:RadImageGallery runat="server" ID="RadImageGallery1"  ImagesFolderPath="~/images" Width="100%"></telerik:RadImageGallery>

    You can use a template, add a data-* attribute  from the data source with the needed info to the clickable element in order to show additional text/controls/popups and know which one it is.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 15 Sep in reply to Marin Bratanov Link to this post

    100% width not working well when page is inside masterpage.

    got 3 images in my rotator, each has a width of 900px. if I set my width to 100%, may page will have a horizontal scroll bar and when you slide it will show all 3 images. I'm guessing my body content page with becomes 2700px.

    Any workaround for rotator with masterpage using 100% width?

    Thanks in advance!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017