JavaScript for GridView Row Level

Wednesday, February 25, 2009

Introduction:

I was working in a project where I need to calculate price according to the number of food selected from a drop down list and this will be client site operation. In that article in am writing code on how to access every row and cell from JavaScript, and also write some small operation using these row and cell.

Source Code Click here to download Source Code

Background:

Writing JavaScript is important in grid view where many operation is coming on dropdownlist clicking so needed to use JavaScript to make is faster and user friendly.

Code Step by Step:

Create a grid view first which will load data from database. here is the code of GridView

     
<asp:GridView ID="myGrid" runat="server" AutoGenerateColumns="False" ShowFooter="true">

    <Columns>

        <asp:TemplateField>

            <ItemTemplate>

                <asp:CheckBox runat="server" ID="chkIT" onClick="changeColor(this)"/>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField>

            <ItemTemplate>

                <asp:DropDownList ID="DropDownList1" runat="server" onchange="showData(this)">

                    <asp:ListItem Selected="True" Text="1" Value="1"></asp:ListItem>

                    <asp:ListItem Text="2" Value="2"></asp:ListItem>

                    <asp:ListItem Text="3" Value="3"></asp:ListItem>

                    <asp:ListItem Text="4" Value="4"></asp:ListItem>

                    <asp:ListItem Text="5" Value="5"></asp:ListItem>

                </asp:DropDownList>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Id"> 

            <ItemTemplate>

                <asp:Label ID="lblData" runat="server" Text='<%# Bind("Id") %>'></asp:Label>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Name">

            <ItemTemplate>

                <asp:Label ID="lblData" runat="server" Text='<%# Bind("Name") %>'></asp:Label>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Price/Unit">

            <ItemTemplate>

                <asp:Label ID="lblData" runat="server" Text='<%# Bind("Price") %>'></asp:Label>

            </ItemTemplate>

            <FooterTemplate>

                <asp:Label ID="lblTotalPrice" runat="server" Text="Total"></asp:Label>

            </FooterTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Price">

            <ItemTemplate>

                <asp:Label ID="lblPrice" runat="server" Text='<%# Bind("Price") %>'></asp:Label>

            </ItemTemplate>

            <FooterTemplate>

                <asp:Label ID="lblTotalPrice" runat="server" Text=""></asp:Label>

            </FooterTemplate>

        </asp:TemplateField>

    </Columns>

</asp:GridView>

here from the grid view I have called 2 JavaScript method to

1. showData(this) is called from onchange metod of drop down list which is in the Item Template of GridView. This method is showing change value using javascript

2. changeColor(this) is called from onClick method of Check box this is just to show how to set style form JavaScript in a row of GridView.

here is the JavaScript Code is working for GridView

    
<script language="javascript" type="text/javascript">

function showData(dropdown) 

{

    //get dropdownlist

    var myindex  = dropdown.selectedIndex;

    var SelValue = dropdown.options[myindex].value;

    //get the row of the drop down list

    var row = getParentRow(dropdown);

    var newRate;

    //set value in the cell of grid view

    if (isFireFox()) 

    {  

        newRate = row.cells[4].textContent * SelValue;

    }

    else 

    {

        newRate = row.cells[4].innerText * SelValue;

    }

    row.cells[5].innerHTML = newRate;

    //get gridview

    var gridViewCtlId = '<%=myGrid. ClientID%>';

    var grid = document.getElementById(gridViewCtlId);

    var gridLength = grid.rows.length;

    var sum = 0;

    //calculate sum of the prices looping through the gridview and operation in every cell

    for (var i = 1; i < gridLength-1; i++) 

    {

        if (isFireFox()) {

            sum = sum + parseInt(grid.rows[i].cells[5].textContent);

        }else {

            sum = sum + parseInt(grid.rows[i].cells[5].innerText);

        }

    }

    grid.rows[gridLength-1].cells[5].innerHTML = sum;

}

function getParentRow(obj)

{

    while(obj.tagName != "TR")

    {

        if(isFireFox())

        {

            obj = obj.parentNode;

        }

        else

        {

            obj = obj.parentElement;

        }

    }

    return obj;

}

function isFireFox()

{

    return navigator.appName == "Netscape";

}

function changeColor(obj) 

{

    var rowObject = getParentRow(obj);

    if (obj.checked) {

        rowObject.style.backgroundColor = 'Yellow';

    }else {

        rowObject.style.backgroundColor = '';

    }

}

</script>

Good piece of Code!! Ashraf

kinjalin - Wednesday, March 18, 2009 11:33:35 AM

Neat and exactly what I need now. Can I ask more? :)

Dani - Thursday, June 11, 2009 4:54:22 PM

Hi Dany, Please ask me if you have any query :)

Ashrafur Rahaman - Thursday, June 11, 2009 5:55:02 PM

lllllllllllllllllll

Ahaaaaaaaaaaaaaa - Monday, August 17, 2009 11:28:52 AM

hi,
your article is very helpful. Thanks. In all your article u used different keywords for Firefox and other browsers. where can i get these information like which browser supports what keywords. Please advise me. Im a "Newbie".

Sb Vivek - Wednesday, December 30, 2009 8:39:37 AM

Very Good. Just what i was looking for.
Can you pl tell me why the ' while(obj.tagName != "TR") ' loop for?

bcs - Thursday, December 31, 2009 8:14:47 AM

Super article brother

Srikanth - Tuesday, March 23, 2010 9:09:22 AM

And how about adding some more pictures? I’m not trying to offend anyone, content is really nice. Just as I’ve heard visitors acquire info much more effective if they see some useful images.

Lenny Tayfon

block mobile phone signal - Wednesday, May 12, 2010 6:50:16 PM

Thanks a lot

it is help full subject

Mushari - Friday, May 21, 2010 8:00:23 AM

Javascript for gridview row level.. Great! :)

weblogs.asp.net - Wednesday, June 1, 2011 7:28:37 PM

Yes there should realize the opportunity to RSS commentary, quite simply, CMS is another on the blog.

tryecrot - Sunday, August 28, 2011 7:08:09 AM

I am going to try and use this code to alter images as the dropdown is chnaged but this should give me the build blocks I require to do so! thanks

Plumber Chelmsford - Monday, May 21, 2012 11:41:21 AM

great for this article

londonladies - Monday, October 15, 2012 1:57:46 AM

MiqjZMEY mkvyYHTao miaawufunl BTNgLidgs jgbhst WleTDGCTdjb EcdhONDR ezlpDJAiv LyowKQXZ fahkRJPbv

nemonsursedge - Thursday, November 8, 2012 6:10:31 PM

HjnoMAXX tgqdWXXwp pbexqlhvzg OFKoAhlap nuhtdq VegILMQIspq ZrwcENHG iedtTFFim ZftbFFKZ ydgfNFViu

barSmorabourb - Monday, November 12, 2012 1:47:32 PM

EiquPSPO alxdLIFzl tsmxrnasmk MHLnCxiea vzfpnl BueRYEQXjca PhcaWKRB aglzDNMhe MqaqJPQY esnuPJUue

MiveveLaw - Tuesday, November 13, 2012 4:43:07 AM

It's in fact very difficult in this busy life to listen news on Television, so I only use world wide web for that reason, and take the latest information.

Wilde - Sunday, February 3, 2013 3:12:18 PM

At this time it sounds like Wordpress is the best blogging platform out there
right now. (from what I've read) Is that what you're using on your blog?

Frey - Sunday, February 10, 2013 12:56:13 PM

Visit online auction bridge sites like Ebay where you ll be capable to you'll have the two near significant things you motivation and be able to wait for rescuers to find you. Mini endurance Kit-First AidA recycled altoids box or Likewise sized metallic element box makes pentad major categories - intellectual nourishment, clothes, communication, transport, and tools. I Personally like the 1 litre to get and complete your urban camping gear.

Rayburn - Tuesday, March 5, 2013 12:46:34 PM

insistent use of survival skills or Fishing
trip can too become an emergency brake. The logic is to keep everything uncomplicated to take Constituent in
a turn of Christchurch's red zoned CBD. At the top of the list are that your survival gear is stored in good order so that nothing can crawl in and set up housework.

Ramsey - Tuesday, March 5, 2013 3:55:49 PM

Informative article, exactly what I was looking for.

Lumpkin - Friday, March 15, 2013 10:49:51 AM

you are really a good webmaster. The web site loading speed
is incredible. It sort of feels that you're doing any unique trick. Also, The contents are masterpiece. you've done a great process on this matter!

Chamberlin - Tuesday, March 19, 2013 6:00:39 AM

It's enormous that you are getting thoughts from this paragraph as well as from our dialogue made at this place.

Doty - Saturday, March 23, 2013 11:50:39 PM

Pretty great post. I simply stumbled upon your weblog and wished to mention that I've really loved browsing your weblog posts. After all I will be subscribing to your feed and I'm hoping you write once more very
soon!

Velazquez - Sunday, March 24, 2013 10:18:12 PM

24 Comments