Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. ASP.NET
  4. How to get colour template?

How to get colour template?

Scheduled Pinned Locked Moved ASP.NET
databasehelptutorialquestion
12 Posts 2 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Richard DeemingR Richard Deeming

    For Internet Explorer only:

    <object
    id="dlgHelper"
    classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b"
    width="0px"
    height="0px"></object>

    <script language="javascript">
    <!--
    function selectColor(color)
    {
    var ret = dlgHelper.ChooseColorDlg(color);
    ret = ret.toString(16);
    if (ret.length < 6)
    {
    var temp = "000000".substring(0, 6 - ret.length);
    ret = temp.concat(ret);
    }
    return "#" + ret;
    }
    //-->
    </script>

    To set the colour of an item in the list, use the background-color and color style attributes:

    <select size="1">
    <option
    value="black"
    style="background-color:black; color:white;">
    Black
    </option>
    <option
    value="green"
    style="background-color:green;">
    Green
    </option>
    </select>


    "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

    R Offline
    R Offline
    Raymond Ooi
    wrote on last edited by
    #3

    Then how can i capture which colour the user has selected? I'm working on ASP.net with C# code, can u show me the simple code? Million thanks =)

    Richard DeemingR 1 Reply Last reply
    0
    • R Raymond Ooi

      Then how can i capture which colour the user has selected? I'm working on ASP.net with C# code, can u show me the simple code? Million thanks =)

      Richard DeemingR Offline
      Richard DeemingR Offline
      Richard Deeming
      wrote on last edited by
      #4

      You would need to store the selected colour in a field on the form, and post it back to the server. For example:

      <%@ Import Namespace="System.Drawing" %>
      <script language="c#" runat="server">
      private void cmdTest_Click(object sender, EventArgs e)
      {
      Color c = ColorTranslator.FromHtml(bgcolor.Text);

      if (Color.Empty == c)
      {
          lblColor.Text = "Please select a colour!";
      }
      else
      {
          lblColor.Text = "You selected " + ColorTranslator.ToHtml(c);
          bgcolor.BackColor = c;
      }
      

      }
      </script>

      <html>
      <head>
      <title>Test Colour Picker</title>

      <script language="javascript">
      <!--
      function chooseColor()
      {
      var txt = document.getElementById('bgcolor');
      if (!txt) return;

      var color = selectColor(txt.value);
      txt.value = color;
      txt.style.backgroundColor = color;
      

      }

      function selectColor(color)
      {
      var ret = dlgHelper.ChooseColorDlg(color);
      ret = ret.toString(16);
      if (ret.length < 6)
      {
      var temp = "000000".substring(0, 6 - ret.length);
      ret = temp.concat(ret);
      }
      return "#" + ret;
      }
      //-->
      </script>

      </head>
      <body>

      <object
      id="dlgHelper"
      classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b"
      width="0px" height="0px"></object>

      <form runat="server">

      <label for="bgcolor"><u>B</u>ackground color:</label>
      <asp:textbox
      id="bgcolor" runat="server"
      text="#ffffff" accesskey="B" readonly="true" />
      <button onclick="chooseColor()">...</button>
      <br />
      <asp:button
      id="cmdTest" runat="server"
      text="Update" onclick="cmdTest_Click" />
      <br />
      <asp:literal id="lblColor" runat="server" />

      </form>
      </body>
      </html>


      "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

      "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

      R 2 Replies Last reply
      0
      • Richard DeemingR Richard Deeming

        You would need to store the selected colour in a field on the form, and post it back to the server. For example:

        <%@ Import Namespace="System.Drawing" %>
        <script language="c#" runat="server">
        private void cmdTest_Click(object sender, EventArgs e)
        {
        Color c = ColorTranslator.FromHtml(bgcolor.Text);

        if (Color.Empty == c)
        {
            lblColor.Text = "Please select a colour!";
        }
        else
        {
            lblColor.Text = "You selected " + ColorTranslator.ToHtml(c);
            bgcolor.BackColor = c;
        }
        

        }
        </script>

        <html>
        <head>
        <title>Test Colour Picker</title>

        <script language="javascript">
        <!--
        function chooseColor()
        {
        var txt = document.getElementById('bgcolor');
        if (!txt) return;

        var color = selectColor(txt.value);
        txt.value = color;
        txt.style.backgroundColor = color;
        

        }

        function selectColor(color)
        {
        var ret = dlgHelper.ChooseColorDlg(color);
        ret = ret.toString(16);
        if (ret.length < 6)
        {
        var temp = "000000".substring(0, 6 - ret.length);
        ret = temp.concat(ret);
        }
        return "#" + ret;
        }
        //-->
        </script>

        </head>
        <body>

        <object
        id="dlgHelper"
        classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b"
        width="0px" height="0px"></object>

        <form runat="server">

        <label for="bgcolor"><u>B</u>ackground color:</label>
        <asp:textbox
        id="bgcolor" runat="server"
        text="#ffffff" accesskey="B" readonly="true" />
        <button onclick="chooseColor()">...</button>
        <br />
        <asp:button
        id="cmdTest" runat="server"
        text="Update" onclick="cmdTest_Click" />
        <br />
        <asp:literal id="lblColor" runat="server" />

        </form>
        </body>
        </html>


        "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

        R Offline
        R Offline
        Raymond Ooi
        wrote on last edited by
        #5

        wow, it works great.. millions thanks =) Can i share with someone else in other forum? coz i saw that they are ppl looking for this help as well... =)

        Richard DeemingR 1 Reply Last reply
        0
        • Richard DeemingR Richard Deeming

          You would need to store the selected colour in a field on the form, and post it back to the server. For example:

          <%@ Import Namespace="System.Drawing" %>
          <script language="c#" runat="server">
          private void cmdTest_Click(object sender, EventArgs e)
          {
          Color c = ColorTranslator.FromHtml(bgcolor.Text);

          if (Color.Empty == c)
          {
              lblColor.Text = "Please select a colour!";
          }
          else
          {
              lblColor.Text = "You selected " + ColorTranslator.ToHtml(c);
              bgcolor.BackColor = c;
          }
          

          }
          </script>

          <html>
          <head>
          <title>Test Colour Picker</title>

          <script language="javascript">
          <!--
          function chooseColor()
          {
          var txt = document.getElementById('bgcolor');
          if (!txt) return;

          var color = selectColor(txt.value);
          txt.value = color;
          txt.style.backgroundColor = color;
          

          }

          function selectColor(color)
          {
          var ret = dlgHelper.ChooseColorDlg(color);
          ret = ret.toString(16);
          if (ret.length < 6)
          {
          var temp = "000000".substring(0, 6 - ret.length);
          ret = temp.concat(ret);
          }
          return "#" + ret;
          }
          //-->
          </script>

          </head>
          <body>

          <object
          id="dlgHelper"
          classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b"
          width="0px" height="0px"></object>

          <form runat="server">

          <label for="bgcolor"><u>B</u>ackground color:</label>
          <asp:textbox
          id="bgcolor" runat="server"
          text="#ffffff" accesskey="B" readonly="true" />
          <button onclick="chooseColor()">...</button>
          <br />
          <asp:button
          id="cmdTest" runat="server"
          text="Update" onclick="cmdTest_Click" />
          <br />
          <asp:literal id="lblColor" runat="server" />

          </form>
          </body>
          </html>


          "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

          R Offline
          R Offline
          Raymond Ooi
          wrote on last edited by
          #6

          By the way, do you is it possible to make each item in dropdown list has its own different background colour?

          Richard DeemingR 1 Reply Last reply
          0
          • R Raymond Ooi

            wow, it works great.. millions thanks =) Can i share with someone else in other forum? coz i saw that they are ppl looking for this help as well... =)

            Richard DeemingR Offline
            Richard DeemingR Offline
            Richard Deeming
            wrote on last edited by
            #7

            Feel free! :-D


            "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

            "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

            1 Reply Last reply
            0
            • R Raymond Ooi

              By the way, do you is it possible to make each item in dropdown list has its own different background colour?

              Richard DeemingR Offline
              Richard DeemingR Offline
              Richard Deeming
              wrote on last edited by
              #8

              Look at the second half of my original response. ;)


              "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

              "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

              1 Reply Last reply
              0
              • Richard DeemingR Richard Deeming

                For Internet Explorer only:

                <object
                id="dlgHelper"
                classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b"
                width="0px"
                height="0px"></object>

                <script language="javascript">
                <!--
                function selectColor(color)
                {
                var ret = dlgHelper.ChooseColorDlg(color);
                ret = ret.toString(16);
                if (ret.length < 6)
                {
                var temp = "000000".substring(0, 6 - ret.length);
                ret = temp.concat(ret);
                }
                return "#" + ret;
                }
                //-->
                </script>

                To set the colour of an item in the list, use the background-color and color style attributes:

                <select size="1">
                <option
                value="black"
                style="background-color:black; color:white;">
                Black
                </option>
                <option
                value="green"
                style="background-color:green;">
                Green
                </option>
                </select>


                "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

                R Offline
                R Offline
                Raymond Ooi
                wrote on last edited by
                #9

                What if i store the colour of each item in db, how can i call it out and bind it to the dropdownlist with each item in the list has different color background?? Apart from that, do you think is it possible make the same effect in a radiobuttonlist? Thanks again.. :)

                Richard DeemingR 1 Reply Last reply
                0
                • R Raymond Ooi

                  What if i store the colour of each item in db, how can i call it out and bind it to the dropdownlist with each item in the list has different color background?? Apart from that, do you think is it possible make the same effect in a radiobuttonlist? Thanks again.. :)

                  Richard DeemingR Offline
                  Richard DeemingR Offline
                  Richard Deeming
                  wrote on last edited by
                  #10

                  The list controls in the System.Web.UI.WebControls namespace don't support adding attributes to the individual items. You would need to write your own control to add support for the item styles. For example, the DropDownList would be quite simple:

                  using System;
                  using System.Drawing;
                  using System.Web.UI;
                  using System.Web.UI.WebControls;

                  public class ColorDropDownList : DropDownList
                  {
                  protected override void RenderContents(HtmlTextWriter writer)
                  {
                  bool seenSelected = false;

                      for (int i=0; i<Items.Count; i++)
                      {
                          ListItem item = Items\[i\];
                          
                          writer.AddAttribute("value", item.Value);
                          
                          if (item.Selected)
                          {
                              if (seenSelected)
                                  throw new InvalidOperationException(
                                      "Can't have multiple selected items!");
                              
                              writer.AddAttribute("selected", "selected");
                              seenSelected = true;
                          }
                          
                          item.Attributes.AddAttributes(writer);
                          
                          writer.RenderBeginTag("option");
                          HttpUtility.HtmlEncode(item.Text, writer);
                          writer.RenderEndTag();
                      }
                  }
                  

                  }

                  ...
                  // Bind the list
                  list.DataBind();

                  // Set the style attribute for each item
                  for(int i=0; i<list.Items.Count; i++)
                  {
                      ListItem item = list.Items\[i\];
                      
                      Color c = ColorTranslator.FromHtml(item.Value);
                      if (Color.Empty != c)
                      {
                          string style = "background-color: " + item.Value + ";";
                          if (c.GetBrightness() < 0.4)
                              style += "color: white;";
                          
                          item.Attributes\["style"\] = style;
                      }
                  }
                  

                  ...

                  The ListBox would be very similar - you would just need to allow multiple selected items if the SelectionMode was ListSelectionMode.Multiple. The other list controls are more complicated. You would have to override the entire rendering of the control to add support for item styles. If you wanted built-in support for data-binding the attributes, you would need to override the OnDataBinding method, which would be much more complicated.


                  "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

                  "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

                  R 1 Reply Last reply
                  0
                  • Richard DeemingR Richard Deeming

                    The list controls in the System.Web.UI.WebControls namespace don't support adding attributes to the individual items. You would need to write your own control to add support for the item styles. For example, the DropDownList would be quite simple:

                    using System;
                    using System.Drawing;
                    using System.Web.UI;
                    using System.Web.UI.WebControls;

                    public class ColorDropDownList : DropDownList
                    {
                    protected override void RenderContents(HtmlTextWriter writer)
                    {
                    bool seenSelected = false;

                        for (int i=0; i<Items.Count; i++)
                        {
                            ListItem item = Items\[i\];
                            
                            writer.AddAttribute("value", item.Value);
                            
                            if (item.Selected)
                            {
                                if (seenSelected)
                                    throw new InvalidOperationException(
                                        "Can't have multiple selected items!");
                                
                                writer.AddAttribute("selected", "selected");
                                seenSelected = true;
                            }
                            
                            item.Attributes.AddAttributes(writer);
                            
                            writer.RenderBeginTag("option");
                            HttpUtility.HtmlEncode(item.Text, writer);
                            writer.RenderEndTag();
                        }
                    }
                    

                    }

                    ...
                    // Bind the list
                    list.DataBind();

                    // Set the style attribute for each item
                    for(int i=0; i<list.Items.Count; i++)
                    {
                        ListItem item = list.Items\[i\];
                        
                        Color c = ColorTranslator.FromHtml(item.Value);
                        if (Color.Empty != c)
                        {
                            string style = "background-color: " + item.Value + ";";
                            if (c.GetBrightness() < 0.4)
                                style += "color: white;";
                            
                            item.Attributes\["style"\] = style;
                        }
                    }
                    

                    ...

                    The ListBox would be very similar - you would just need to allow multiple selected items if the SelectionMode was ListSelectionMode.Multiple. The other list controls are more complicated. You would have to override the entire rendering of the control to add support for item styles. If you wanted built-in support for data-binding the attributes, you would need to override the OnDataBinding method, which would be much more complicated.


                    "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

                    R Offline
                    R Offline
                    Raymond Ooi
                    wrote on last edited by
                    #11

                    Thanks a lot.. where can i find the related references on this? :)

                    Richard DeemingR 1 Reply Last reply
                    0
                    • R Raymond Ooi

                      Thanks a lot.. where can i find the related references on this? :)

                      Richard DeemingR Offline
                      Richard DeemingR Offline
                      Richard Deeming
                      wrote on last edited by
                      #12

                      I've not seen anything, but it's not too hard to figure out from the code for the existing controls. Have a look at http://www.saurik.com/net/exemplar/[^] and http://www.aisto.com/roeder/dotnet/[^] for tools to get at the code.


                      "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

                      "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • World
                      • Users
                      • Groups