[Solved] CSS Property Border-Color not working in HTML DIV

Last Reply 3 months ago By dharmendr

Posted 3 months ago

hello,

Change Border color of DIV inside ASP.Net ListView based on condition using jQuery

this snippet is not working.

can you check please in validation tag if add alert it works but it is not apply css red to row of listview

please advice

You are viewing reply posted by: dharmendr 3 months ago.
Posted 3 months ago Modified on 3 months ago

Hi nauna,

By default the border-width is 0 and border-style is none.

So you need to set them to border-width:1px and border-style:solid.

You can combine all the border properties into one as below.

border:1px solid red

Check the below example.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=AIzaSyBE1J5Pe_GZXBR_x9TXOv6TU5vtCSmEPW4"></script>
<script type="text/javascript">
    $(function () {
        $("div[class=pickup]").each(function () {
            var textbox1 = $(this).find('[id*=TextBox1]');
            var textbox2 = $(this).find('[id*=TextBox2]');
            ApplyAutoComplete(textbox1);
            ApplyAutoComplete(textbox2);
        });
    });
    function ApplyAutoComplete(input) {
        google.maps.event.addDomListener(window, 'load', function () {
            var places;
            for (var i = 0; i < input.length; i++) {
                places = new google.maps.places.Autocomplete(input[i]);
            }
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var mesg = "Address: " + address;
            });
        });
    }
    function Validate() {
        $("div[class=pickup]").each(function (index) {
            var textbox1 = $(this).find('[id*=TextBox1]').val();
            if (textbox1 != '') {
                var textbox2 = $(this).find('[id*=TextBox2]').val();
                if (textbox2 == '') {
                    $(this).css("border", "2px solid red");
                } else {
                    $(this).css("border", "");
                }
            } else {
                $(this).css("border", "");
            }
        });
        return false;
    }
</script>
<div>
    <asp:ListView ID="ListView1" runat="server">
        <ItemTemplate>
            <div class="pickup">
                Id :
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("CustomerId") %>'></asp:Label>
                PickUp :
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                Origin :
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </div>
        </ItemTemplate>
    </asp:ListView>
    <asp:Button Text="Save" runat="server" OnClientClick="return Validate()" />
</div>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("CustomerId", typeof(int)) });
        dt.Rows.Add(1);
        dt.Rows.Add(2);
        dt.Rows.Add(3);
        this.ListView1.DataSource = dt;
        this.ListView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("CustomerId", GetType(Integer))})
        dt.Rows.Add(1)
        dt.Rows.Add(2)
        dt.Rows.Add(3)
        Me.ListView1.DataSource = dt
        Me.ListView1.DataBind()
    End If
End Sub

Screenshot