Javascript runtime error: unable to set property 'classname' of undefined or null reference

Question

0.00/5 (No votes)

See more:

Unable to set property 'className' of undefined or null reference.

When i click the selected row in a grid i am getting the following error. It should fire gridview_selectedIndexChanged() event. but it will not fire anything. rather than it will shoe the below error.

Error : JavaScript runtime error: Unable to set property 'className' of undefined or null reference.

Error code :

ASPX Page

  var gridviewID = "<%=grdSearch.ClientID%>";         var gridview = null;

        var selectedRowIndex = -1;

        $(document).ready(function () {             gridview = $('#' + gridviewID);

        });

        function RowMouseOver(rowIndex) {             if (selectedRowIndex == rowIndex) return;

            var gridviewID = "<%=grdSearch.ClientID%>";             $('#' + gridviewID)[0].rows[rowIndex + 1].className = 'GridviewScrollItemHover';

        }

        function RowMouseOut(rowIndex) {             if (selectedRowIndex == rowIndex) return;

            var gridviewID = "<%=grdSearch.ClientID%>";             $('#' + gridviewID)[0].rows[rowIndex + 1].className = 'GridviewScrollItem';

        }

        function RowSelect(rowIndex) {             if (selectedRowIndex == rowIndex) return;

            RowReset(selectedRowIndex);

            selectedRowIndex = rowIndex;

            var gridviewID = "<%=grdSearch.ClientID%>";             $('#' + gridviewID)[0].rows[rowIndex + 1].className = 'GridviewScrollItemSelected';

        }

        function RowReset(rowIndex) {

            var gridviewID = "<%=grdSearch.ClientID%>";             $('#' + gridviewID)[0].rows[rowIndex + 1].className = 'GridviewScrollItem';

        }

ASPX.Vb

 

If e.Row.RowType = DataControlRowType.DataRow Then

               

If e.Row.RowType <> DataControlRowType.DataRow Then

                   

Return

               

End If

                e.Row.Attributes(

"onmouseover") = String.Format("RowMouseOver({0});", e.Row.RowIndex)

                e.Row.Attributes.Add(

"style", "cursor:pointer;")

                e.Row.Attributes(

"onmouseout") = String.Format("RowMouseOut({0});", e.Row.RowIndex)

                e.Row.ToolTip =

"Click to select row"

                e.Row.Attributes(

"onclick") = String.Format("RowSelect({0});", e.Row.RowIndex)

           

End If


my Requirment is :

When i selecte the particular row, it should highlight the row in diff color at the same time the index value should get display in another gridview

pls. help me to solve this problem. i am unable to find out exact solution for this.

What I have tried:

function RowReset(rowIndex) {
$('#' + gridviewID +'tbody > tr').eq(rowindex+1).addClass('GridviewScrollItem');
}

But, not working...

Posted 21-Apr-17 1:45am

gani7787

Updated 21-Apr-17 2:00am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2017-04-21T02:00:00

Solution 1

Validate the object for null value before accessing the members of the object

var row = $('#' + gridviewID)[0].rows[rowIndex + 1]
if(row1 != null){
     row1.className = 'Your Class Name'
}

Posted 21-Apr-17 2:00am

Karthik_Mahalingam

Comments

gani7787 21-Apr-17 9:08am

Thanks for your reply,

but, gridview_selectedIndexchanged not firing after using this code...

Karthik_Mahalingam 21-Apr-17 11:58am

this has nothing to do with the server event. you might be missing something.

gani7787 24-Apr-17 1:27am

Thanks.

Now i solved the rowindex error.

But, mainly i have two important points to discuss.

Scenario : when i selected the row in gridview1, then it should bring all the employee records in gridview2 based on gridview1 index selection.

Problem_1 : In gridview i have "n" number of rows. when i select then it should maintain the same position even if scrolling the rows. the below code is working for selected rows maintain the same postion. But, SeletedIndex Changed Event not Firing

e.Row.Attributes("onmouseover") = String.Format("RowMouseOver({0});", e.Row.RowIndex)

e.Row.Attributes("onmouseout") = String.Format("RowMouseOut({0});", e.Row.RowIndex)
e.Row.Attributes("onclick") = String.Format("RowSelect({0});", e.Row.RowIndex) (event not Firing)

Problem_2 : Suppose selected row not maintain the same position,but, it will bring all the records in gridview2. It means selectedIndexchanged is firing. The below code is working for that.

e.Row.Attributes("onmouseover") = String.Format("RowMouseOver({0});", e.Row.RowIndex)
e.Row.Attributes("onmouseout") = String.Format("RowMouseOut({0});", e.Row.RowIndex)
'e.Row.Attributes("onclick") = String.Format("RowSelect({0});", e.Row.RowIndex) (event not Firing)
e.Row.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(grdSearchResult, "Select$" + e.Row.RowIndex.ToString())) (event firing).

My scenario is, i want to maintain selected row in the same position also it should fire the selectedIndexchanged event (both scenario).

Below is the common script

var gridviewID = "<%=grdSearchResult.ClientID%>";
var gridview = null;

var selectedRowIndex = -1;

$(document).ready(function () {
gridview = $('#' + gridviewID);

});

function RowMouseOver(rowIndex) {
if (selectedRowIndex == rowIndex) return;

var gridviewID = "<%=grdSearchResult.ClientID%>";
$('#' + gridviewID)[0].rows[rowIndex + 1].className = 'GridviewScrollItemHover';

}

function RowMouseOut(rowIndex) {
if (selectedRowIndex == rowIndex) return;

var gridviewID = "<%=grdSearchResult.ClientID%>";
$('#' + gridviewID)[0].rows[rowIndex + 1].className = 'GridviewScrollItem';

}

function RowSelect(rowIndex) {
if (selectedRowIndex == rowIndex) return;

RowReset(selectedRowIndex);

selectedRowIndex = rowIndex;

var gridviewID = "<%=grdSearchResult.ClientID%>";
$('#' + gridviewID)[0].rows[rowIndex + 1].className = 'GridviewScrollItemSelected';

}

function RowReset(rowIndex) {
var row = $('#' + gridviewID)[0].rows[rowIndex + 1]
if (row != null) {
row.className = 'GridviewScrollItem'
}

}

where is the problem....?