Javascript code is not working as expected for hiding column

Question

I have a Gridview in which I want to hide a column based on some condition. So for that I have written a js code which is below

function GridExpInfo_ClientInsert() {
    var rowVal = GridExpInfo.Rows.length - 1;
    for (i = 0; i < GridExpInfo.Rows.length; i++) {
        if (GridExpInfo.Rows[i].Cells[7].Value == "" || GridExpInfo.Rows[i].Cells[7].Value == "0") {
            document.getElementById('GridExpInfo_ob_GridExpInfoBodyContainer_ctl33_'+rowVal+'_ctl00_'+rowVal+'_Button1_'+rowVal+'').style.display = "none";
        } else {                        
        }
    } 
}

It works fine, till there is one row added. But if I go to add second row what happens is the first row again gets show and the second(current) rows gets hide.

So how to hide all the rows whose values consist of 0

Because `rowValue` is always the value of the last item in the list, you are effectively looping through, checking the value of each row and always assigning the visibility on the last row item — Corporalis, Oct 27 '16 at 12:52
@Corporalis: Yes, it takes always the last item. Any other way to crack this logic of getting ID dynamically.. — Nad, Oct 27 '16 at 12:53
As you can't use `document.getElementsByClassName`, I'm guessing it's an earlier version of IE. Might be worth checking [this](http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie) out. Then you could use the answer @gh9 provided — Corporalis, Oct 27 '16 at 12:59
@Corporalis: Actually I cracked it by own, anyways thanks a lot..! — Nad, Oct 27 '16 at 13:01

gh9 · Answer 1 · 2016-10-27T13:55:27.480

0

It looks like you are trying to hide a column in a page that inherits a Master Page from asp.net. If that is the case ct133 and ct100 names will 100% change as you modify the page.

You should just assign them a CSS CLASS and hide/show every element with that CSS CLASS

In vanilla JS

document.getElementsByClassName('HideThisColumn')[0].style.visibility = 'hidden';

with JQUERY

 $(".HideThisColumn").hide();

EDIT Per OP's comment My Version is To Low According to Mozilla Developer Network IE 9+ has the ability to use this function. Are you stating you are developing against IE 8?

edited Oct 27 '16 at 13:55

answered Oct 27 '16 at 12:50

gh9

10,169
10
63
96

But, I dont get `document.getElementsByClassName` as my version is low – Nad Oct 27 '16 at 12:51
What is your version of IE? – gh9 Oct 27 '16 at 13:55
The version which I am using is `IE8` – Nad Oct 27 '16 at 13:56

score 0 · Answer 2 · answered Oct 27 '16 at 13:11

Hmm try to break you code down more simply:

(assume obj.rows.length = 5)
clientInsert () {
    var rowVal = (5 - 1) = 4;
    for ( var i = 0; i < 5; i++ ) {
       // first Iteration...
       if ( obj.rows [ 0 ].cells [ 7 ].value == '' ||
            obj.rows [ 0 ].cells [ 7 ].value == "0" ) {
         var id = 'id_' + 4 + 'moreId_' + 4; // 'id_4_moreId_4'
         document.getElementById ( id ) = "none";
       }
       // second Iteration...
       if ( obj.rows [ 1 ].cells [ 7 ].value == '' ||
            obj.rows [ 1 ].cells [ 7 ].value == "0" ) {
         var id = 'id_' + rowVal + 'moreId_' + rowVal;
         // ID is always 'id_4_moreId_4'
         document.getElementById ( id ) = "none";
       }
    }
}

So as far as I can see, you're always selecting the same DOM element; your ID never changes.

One thing, getting away from IDs seems to be more "modern". Tagging those target DOM elements with a common CSS style would let you use a straightforward selector and not have to mess around with all that ID stuff. Maybe that doesn't work in your context, but something to consider.

score 0 · Accepted Answer · answered Oct 28 '16 at 06:13

After a quite research and trying, I finally cracked this logic. Here is what I did and it worked for me.

function GridExpInfo_ClientInsert() {
        var rowVal = "0";                  // assigned variable with value as 0
        for (i = 0; i < GridExpInfo.Rows.length; i++) {                
            rowVal = i;                   // assigning values which always takes the value of i
            if (GridExpInfo.Rows[i].Cells[7].Value == "" || GridExpInfo.Rows[i].Cells[7].Value == "0") {
                 document.getElementById('GridExpInfo_ob_GridExpInfoBodyContainer_ctl33_' + rowVal + '_ctl00_' + rowVal + '_Button1_' + rowVal + '').style.display = "none";
             }
            else {
            }
        }
    }

Javascript code is not working as expected for hiding column

3 Answers3