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

Forums / Developing with Sitefinity / background color cannot be changed in poll's resultbox?

background color cannot be changed in poll's resultbox?

3 posts, 0 answered
  1. Wouter Bos
    Wouter Bos avatar
    2 posts
    Registered:
    01 Jul 2009
    19 Oct 2009
    Link to this post
    Hi,

    I'm using the poll control and it's ok, but I can't seem to alter the background color of the image in the resultbox. it's stays to be light blue.

    Does this sound familiar to anyone?
  2. Mr. Plinko
    Mr. Plinko avatar
    13 posts
    Registered:
    16 Jul 2009
    22 Oct 2009
    Link to this post
    Actually, there is a forum post about this here

    It has to do with the CSS properties of the RadChart control.


  3. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    23 Oct 2009
    Link to this post
    Hi,

    You can change the image using js. The background cannot be applied because we use images to show the results.

    1. Open the "ResultsBoxNoLegend.ascx" template.
    2. Wrap the "asp:Repeater" in "div" tags so it will be easy to find:

    <div id="Results">
                <asp:Repeater runat="server" ID="answersList" EnableViewState="true">
                    <ItemTemplate>
                        <li>
                            <asp:Literal ID="answerText" runat="server" Text='<%# Eval("Text") %>'></asp:Literal>
                            /
                            <asp:Literal runat="server" ID="percentage" />
                            <asp:Literal runat="server" ID="perentItem" Text="%"></asp:Literal>
                            <asp:Panel ID="chartPanel" runat="server"></asp:Panel>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
                </div>


    3. At the bottom of the control add the following script block:

    <script type="text/javascript">   
        var divObj = document.getElementById('Results');
        divObj.setAttribute('style', 'background-image:url("http://localhost/Libraries/extrnal/Image.sflb.ashx");"width="300px"height="21px"');    
        for (i = 0; i < divObj.childNodes.length; i++) {
            if (divObj.childNodes[i].tagName == "LI") {
                var liItem = divObj.childNodes[i];
                var itemInnerDiv = liItem.childNodes[1].childNodes[1];
                var image;
                if (itemInnerDiv.childNodes[1].tagName == "IMG") {
                    image = itemInnerDiv.childNodes[1];
                }
                else {
                    image = itemInnerDiv.childNodes[2];
                }
                image.setAttribute('style', 'border-width: 3px;');
                image.setAttribute('height', '25');
                image.setAttribute('width', '10');
            }
        
    </script>

    To change the style of the bars - edit the "style" value for  "image.setAttribute('style', 'border-width: 3px;');"

    Another option is creating a custom control that derives from PollBox and generating a custom ResultsBox.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Polls.WebControls;
    using Telerik.Web;
    using System.ComponentModel;
    using System.Web.UI;
    using Telerik.Framework.Web;
     
    /// <summary>
    /// Summary description for CustomPollsBox
    /// </summary>
    ///
     
    public class CustomPollsBoxToolBoxItem : ToolboxItem
    {
        public CustomPollsBoxToolBoxItem()
            : base(typeof(CustomPollsBox))
        {
            this.DisplayName = "CustomPollsBox";
            this.Description = "CustomPollsBox Desc";
        }
    }
     
    [System.ComponentModel.ToolboxItem(typeof(CustomPollsBoxToolBoxItem))]
     class CustomPollsBox : PollBox
    {
        public CustomPollsBox()
        {
     
            this.ResultsBox = new CustomResultsBox();
            this.ResultsBox.LayoutTemplate = ControlUtils.GetTemplate("~/Sitefinity/ControlTemplates/Polls/ResultsBoxNoLegend2.ascx", string.Empty, null)
        }
     
     
    ....
       ....
    }

    public class CustomResultsBox : Telerik.Polls.WebControls.ResultsBox
    {
        public CustomResultsBox()
        {
     
        }
     
        protected override Telerik.Web.UI.RadChart CreateRadChart()
        {
            // GENERATE NEW RAD CHART HERE
        }
    }


    Sincerely yours,
    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
3 posts, 0 answered