Switch Image on RadioButton Select

2 posts, 0 answers
  1. Jan
    Jan avatar
    31 posts
    Member since:
    Mar 2014

    Posted 16 Feb 2018 Link to this post

    I'm using the rie_onImageLoading Method to load a serverside Image into the control at Page_Load. Now, when selecting another RadioButton of the list, I would like to load another image (preferably with Ajax/RadAjaxManager without postback) into the control. How can I achieve it? All other controls have sth. like "DataSource", but I'm afraid the RIE doesn't have it...
  2. Vessy
    Admin
    Vessy avatar
    2037 posts

    Posted 19 Feb 2018 Link to this post

    Hi Jan,

    I have just ansered your support ticket on the matter and will advise that will cotinue our conversation there. For convenience I am pasting my answer here:

    It is enough to change the ImageUrl of the ImageEditor in order to change the edited image. For example:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadImageEditor1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadRadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
        <Items>
            <telerik:ButtonListItem Text="Image1" Selected="true" />
            <telerik:ButtonListItem Text="Image2" />
        </Items>
    </telerik:RadRadioButtonList>
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" RenderMode="Lightweight" ImageUrl="~/Images/image1.jpg" Width="790" Height="430px">
    </telerik:RadImageEditor>
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (RadioButtonList1.SelectedIndex == 0)
        {
            RadImageEditor1.ImageUrl = "~/Images/image1.jpg";
        }
        else
        {
            RadImageEditor1.ImageUrl = "~/Images/image2.jpg";
        }
    }


    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top