Other ways to change label colors besides ColorPickerExtender

Question

Is there another way to change color of labels on a web page and save the labels color into database besides using the ColorPickerExtender, as shown below? I asked this because using ColorPickerExtender displays the color code inside a Textbox, so that it can be saved. When the color code is saved into database, it can be fetched and used to change the labels color in other pages. But the ColorPickerExtender does not really look nice in the front end design. That's why I asked for any other possible feature

Javascript

Accepted Answer

Hi @Donald Symmons

Try ew-color-picker:

Best regards,

Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer

Ok, so at the end of the day, the goal here matters.

Say I want to color some "City" or "project name". Or maybe even some project status.

Then it makes sense to write a bit of code for such a goal.

So, say I want a custom color for "citys" in my system.

Say, I build this grid:

colorgird So, above is this simple grid:

And the code behind is also rather simple:

Dim rstData As New DataTable

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadGrid()
    Else
        rstData = Session("rstData")
    End If
End Sub
Sub LoadGrid()
    rstData = MyRst("SELECT * FROM tblCityColor")
    Session("rstData") = rstData
    GridColors.DataSource = rstData
    GridColors.DataBind()
End Sub
Protected Sub cmdSave_Click(sender As Object, e As EventArgs)
    For Each gRow As GridViewRow In GridColors.Rows
        With rstData.Rows(gRow.RowIndex)
            Dim ColorBox As TextBox = gRow.FindControl("txtColor")
            .Item("Color") = ColorBox.Text
            Dim txtCity As TextBox = gRow.FindControl("txtCity")
            .Item("City") = txtCity.Text
        End With
    Next
    SaveData(rstData, rstData.TableName)
    ' display the grid of hotels
    Response.Redirect("~/Grids/Hotels.aspx")
End Sub

Now, in the page that shows the Grid of hotels?

Well, I simple left join in our color table, and thus how have a "color" for each city.

This:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadData()      ' first time grid load
    End If
    If RBColor.SelectedIndex = 1 Then
        AddCss("~/Content/DarkMode.css")
    End If
End Sub
Sub LoadData()

    Dim strSQL As String =
        "SELECT *, Color FROM tblHotelsA 
        LEFT JOIN tblCityColor on tblCityColor.City = tblHotelsA.City"
    GVHotels.DataSource = MyRst(strSQL)
    GVHotels.DataBind()
End Sub

So, now on row data bind, I can set the background color of the city cell.

this code:

Protected Sub GVHotels_RowDataBound(sender As Object, e As GridViewRowEventArgs)

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim gData As DataRowView = e.Row.DataItem
        If Not IsDBNull(gData("Color")) Then
            e.Row.Cells(2).Style.Add("background-color", gData("Color"))
        End If
    End If
End Sub

However, while the above approach is fine for say setting a color for a given value?

If you goal is to "theme" the page, and change many controls?

Then you want to use a style sheet. They are "amazing" and are designed for this.

Note in above, I have a radio button choice called dark mode.

No need to write a WHOLE bunch of code to change all the controls and their colors.

Just a SUPER simple sheet, set background color, grid line color (tr td elemements) and that of a button.

The style sheet is this:

    body {


        background-color: black;
        color: skyblue;
        border: 1px solid green;
    }
    button {
        background-color: lightskyblue;
    }
    input {
        background-color: lightskyblue;
        border-radius:15px;
        padding:5px;
    }
    tr td {
        border-color: skyblue;
    }

How simple the above is. So, now, when I click on the dark mode button, everything changes like this:

darkmo So, for a theme, or having to change lots of controls? We don't write code for that anymore, and we have css style sheets. So, it really depends on your goal here. If you wanting to change a LOT of controls and have some "theme" choice? Then of course we don't write that code, but will setup some styles for the page.

However, for a "individual" setting like some city, project status, or whatever? Then yes, it makes sense to save such data in a database, and use such color values when you render such data to the page.

I can post a bit more code. So, much of the trick here is finding a color picker that you like, and the REAL issue is there are too many to choose from!

Share via

Other ways to change label colors besides ColorPickerExtender

1 additional answer

Your answer