CODEWITHSUNDEEP
javascriptasp.net
anhtv13
anhtv13

Reputation: 1808

Type 'System.Web.UI.WebControls.GridView' does not have a public property named 'script'

This is my aspx code. Simply, it has a gridview that I want to add some javascipt code.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="MainForm.aspx.cs" 
Inherits="GUI_MainForm" EnableSessionState="True" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">
<div style="float:left">
    <asp:Label runat="server" ID="label1"></asp:Label>
</div>
<div style="float:right">
    <asp:GridView ID="gridviewFriend" Width="200px" runat="server" BorderStyle="None" ShowHeader="False" OnRowDataBound ="gridviewFriendRowDataBound">            
        <script type="text/javascript" >
            function onMouseOver(rowIndex) {
                var gv = document.getElementById("gridviewFriend");
                var rowElement = gv.rows[rowIndex];
                rowElement.style.backgroundColor = "#c8e4b6";
                rowElement.cells[1].style.backgroundColor = "green";
            }

            function onMouseOut(rowIndex) {
                var gv = document.getElementById("gridviewFriend");
                var rowElement = gv.rows[rowIndex];
                rowElement.style.backgroundColor = "#fff";
                rowElement.cells[1].style.backgroundColor = "#fff";
            }
</script>           
    </asp:GridView>
</div>
</asp:Content>

I don't know why when I insert some javascript code, it shows error:

Type System.Web.UI.WebControls.GridView does not have a public property named script

.

Upvotes: 1

Views: 8364

Answers (3)

Drazen Bjelovuk
Drazen Bjelovuk

Reputation: 5472

You're putting your Javascript inside the GridView server tag. Move it outside and adjust it to something like this:

<asp:GridView ID="gridviewFriend" Width="200px" runat="server" BorderStyle="None" ShowHeader="False" OnRowDataBound ="gridviewFriendRowDataBound">
</asp:GridView>        
<script type="text/javascript" >
    var gridRows = document.getElementById('gridviewFriend').rows;

    for (var i = 0; i < gridRows.length; i++) {
        gridRows[i].onmouseover = function() { changeColor.call(this, "#c8e4b6", "green"); };
        gridRows[i].onmouseout  = function() { changeColor.call(this, "fff", "fff"); };
    }

    function changeColor(general, firstCell) {
        this.style.backgroundColor = general;
        this.cells[1].style.backgroundColor = firstCell;
    }
</script>

Or better yet, toss it all together and add this CSS to your stylesheet:

#gridviewFriend tr {
    background-color: "fff";
}

#gridviewFriend tr:hover {
    background-color: "#c8e4b6";
}

#gridviewFriend tr:hover > td:nth-child(2) {
    background-color: "green";
}

Upvotes: 1

codeandcloud
codeandcloud

Reputation: 55210

Please remove the script tag and do this in your RowDataBound event.

protected void gridviewFriendRowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#c8e4b6';");
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#fff';");
    }
}

Framework is your friend!

Upvotes: 1

Naveed Butt
Naveed Butt

Reputation: 2901

You are doing it the wrong way. Try doing it the way this article describes.

http://www.aspsnippets.com/Articles/How-to-change-GridView-Row-Color-on-Mouseover-in-ASPNet.aspx

You need to place the script tag in your <head> section of the page, or in your case the "HeadContent" section, like this:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <script type="text/javascript">
        $(function () {
            $("[id*='gridviewFriend'] td").hover(function () {
                $("td", $(this).closest("tr")).addClass("hover_row");
            },function(){
                $("td", $(this).closest("tr")).removeClass("hover_row");
            });
        });
    </script>
</asp:Content>

Upvotes: 0

Related Questions