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

Rich content editor

5 Answers 43 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 18 Aug 2016, 11:08 AM

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

5 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 18 Aug 2016, 11:42 AM

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.
0
Christian
Top achievements
Rank 1
answered on 19 Aug 2016, 07:13 AM

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..

 

 

0
Christian
Top achievements
Rank 1
answered on 19 Aug 2016, 07:55 AM

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.

 

0
Marin Bratanov
Telerik team
answered on 19 Aug 2016, 11:04 AM

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.
0
RJ
Top achievements
Rank 1
answered on 15 Sep 2016, 08:18 PM

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!

Tags
Rotator
Asked by
Christian
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Christian
Top achievements
Rank 1
RJ
Top achievements
Rank 1
Share this question
or