Tuesday, August 21, 2012

ASP.NET Simple Dropdown Menu using GridView Control

Introduction

This is a simple way to create a dropdownmenu by using ASP.NET GridView Control.
We have 3 step for this solution.

ASP.NET Simple Dropdown Menu using GridView Control
Menues
New
Open
Edit
Copy
Cut
Delete

Step 1: Add CSS

Step 2: Add Script

Please import jQuery to library and add Javascript like example below.***

                //Import jQuery
                function getMenus(e) {
                    var gv = $("#" + e);
                    if ($("tr", gv).css("display") != "block") {
                        $("tr", gv).show();
                    } $("tr", gv).show();
                }
                function CloseMenusx(e) {
                    setTimeout("CloseMenus('" + e + "')", 500);
                }
                function CloseMenus(e) {
                    if (e == '') { return false; }
                    var GridView1 = document.getElementById(e);
                    var TR_Grid = GridView1.getElementsByTagName("tr")
                    for (i = 1; i < TR_Grid.length; i++) {
                        TR_Grid[i].style.display = "none";
                    }
                }
            

Step 3: Add Javascript event to Gridview

                GridView1.Attributes.Add("onmouseout", "CloseMenus('" + GridView1.ClientID + "')");
                GridView1.Attributes.Add("onmouseover", "getMenus('" + GridView1.ClientID + "')");
            
DownloadDemo here..>>

No comments:

Post a Comment