How To Create TreeView Menu with GridView
Three Images Are use in this programme :-
First we Create Table:-
CREATE proc [dbo].[sp_hyrarchyoftable]
as
begin
--syntex for declaring variables
declare @id int
declare @catname varchar(50)
declare @rel varchar(1)
declare @lev int
declare @relid int
declare @catnemrel varchar(100)
--syntex for declare cursor
declare cursorforlevel cursor fast_forward for select id,catname,rel,lev,relid from hyrarchy where relid=0
--syntex for open cursor
open cursorforlevel
--syntex for create temporary table
create table #temp1(id int,CategorName varchar(50),Relation varchar(1),Lvel int,Relation_id int,)
--fetching data row by row
fetch next from cursorforlevel into @id,@catname,@rel,@lev,@relid
--checking all rows are fetched
while @@FETCH_STATUS=0
begin
--fetched row data are inserted into temp table #temp1
insert into #temp1 values(@id,@catname,@rel,@lev,@relid)
--syntex for declare cursor
declare cursorforlevel1 cursor fast_forward for select id,catname,rel,lev,relid from hyrarchy where relid=@id
--syntex for open cursor
open cursorforlevel1
--fetching data row by row
fetch next from cursorforlevel1 into @id,@catname,@rel,@lev,@relid
--checking all rows are fetched
while @@FETCH_STATUS=0
begin
--fetched row data are inserted into temp table #temp1
insert into #temp1 values(@id,@catname,@rel,@lev,@relid)
--move data fetching in next row if all row data not fetched
fetch next from cursorforlevel1 into @id,@catname,@rel,@lev,@relid
end
close cursorforlevel1
deallocate cursorforlevel1
fetch next from cursorforlevel into @id,@catname,@rel,@lev,@relid
end
close cursorforlevel
deallocate cursorforlevel
select CategorName,Relation,Lvel,Relation_id from #temp1
end
ASPX CODE
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menuingridview.aspx.cs" Inherits="menuingridview" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type ="text/javascript">
var curval = -1, nextval = -1;
function showhiderowbyrow(obj) {
obj++;
curval = -1;
nextval = -1;
var grid = document.getElementById("GridView1");
var gc = grid.rows.length;
for (var rw = obj; rw < gc; rw++) {
if (grid.rows[rw].cells[2].innerText.replace(" ","") == 'p') {
curval++;
if (curval == 0) {
grid.rows[rw].style.display = "block";
document.getElementById('divimg' + (rw - 1).toString()).style.display = "block";
var im = document.getElementById('img' + (rw-1).toString()).src;
if (im.indexOf("p.gif") > 0) {
document.getElementById('img' + (rw - 1).toString()).src = "images/m.gif";
grid.rows[rw].style.display = "block";
}
else if (im.indexOf("m.gif") > 0) {
document.getElementById('img' + (rw - 1).toString()).src = "images/p.gif";
grid.rows[rw].style.display = "block";
}
}
}
else if (grid.rows[rw].cells[2].innerText.replace(" ", "") == 'c') {
if (curval == 0) {
var im = document.getElementById('img' + (obj - 1).toString()).src;
document.getElementById('divimg' + (rw - 1).toString()).style.display = "none";
document.getElementById('chldimg' + (rw - 1).toString()).style.display = "block";
if (im.indexOf("p.gif") > 0) {
grid.rows[rw].style.display = "none";
}
else if (im.indexOf("m.gif") > 0) {
grid.rows[rw].style.display = "block";
}
}
}
}
}
function showallrow() {
var grid = document.getElementById("GridView1");
var gc = grid.rows.length;
var hdim = document.getElementById("imgheader").src ;
if (hdim.indexOf("p.gif") > 0) {
document.getElementById("imgheader").src = "images/m.gif";
for (var rw = 1; rw < gc; rw++) {
var inrtxt = grid.rows[rw].cells[3].innerText;
if (inrtxt.replace(" ", "") == "0") {
document.getElementById('divimg' + (rw - 1).toString()).style.display = "block";
document.getElementById('chldimg' + (rw - 1).toString()).style.display = "none";
var im = document.getElementById('img' + (rw - 1).toString()).src;
if (im.indexOf("p.gif") > 0) {
document.getElementById('img' + (rw - 1).toString()).src = "images/m.gif";
}
//
}
else {
// document.getElementById('divimg' + (rw - 1).toString()).style.display = "none";
document.getElementById('divimg' + (rw - 1).toString()).style.display = "none";
document.getElementById('img' + (rw - 1).toString()).src = "images/tree.jpg";
document.getElementById('chldimg' + (rw - 1).toString()).style.display = "block";
}
grid.rows[rw].style.display = "block";
}
}
else {
document.getElementById("imgheader").src = "images/p.gif";
for (var rw = 1; rw < gc; rw++) {
var inrtxt = grid.rows[rw].cells[3].innerText;
if (inrtxt.replace(" ", "") == "0") {
//
document.getElementById('divimg' + (rw - 1).toString()).style.display = "block";
var im = document.getElementById('img' + (rw - 1).toString()).src;
//
if (im.indexOf("m.gif") > 0) {
document.getElementById('img' + (rw - 1).toString()).src = "images/p.gif";
}
grid.rows[rw].style.display = "block";
}
else {
// document.getElementById('divimg' + (rw - 1).toString()).style.display = "none";
document.getElementById('divimg' + (rw - 1).toString()).style.display = "block";
document.getElementById('img' + (rw - 1).toString()).src = "images/tree.jpg";
grid.rows[rw].style.display = "none";
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:GridView ID="GridView1" runat="server"
onrowdatabound="GridView1_RowDataBound" AutoGenerateColumns="false" GridLines="None">
<Columns>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Left" />
<HeaderTemplate>
<a href ='Javascript:showallrow();' id="hyperheader"> <img id="imgheader" alt ="" height="19px" src="images/p.gif" / ></a>
</HeaderTemplate>
<ItemTemplate>
<div id ="divimg<%# Container.DataItemIndex %>" style="height :30px; width :20px;">
<a href ='Javascript:showhiderowbyrow("<%# Container.DataItemIndex %>");' id='imga<%# Container.DataItemIndex %>'> <img id='img<%# Container.DataItemIndex %>' height="19px" alt ="" src="images/p.gif" /></a></div>
<img id='chldimg<%# Container.DataItemIndex %>' height="100%" alt ="" src="images/tree.jpg" style ="display :none ;" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText ="Root" >
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle Width ="200px" />
<ItemTemplate>
<asp:Label ID="lblcatename" Text ='<%# Eval("CategorName") %>' runat ="server" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText ="">
<HeaderStyle Width ="0px" />
<ItemTemplate>
<asp:Label ID="lblRelation" Text ='<%# Eval("Relation") %>' runat ="server" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText ="">
<HeaderStyle Width ="0px" />
<ItemTemplate>
<asp:Label ID="lblLvel" Text ='<%# Eval("Lvel") %>' runat ="server" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText ="">
<HeaderStyle Width ="0px" />
<ItemTemplate>
<asp:Label ID="lblRelation_id" Text ='<%# Eval("Relation_id") %>' runat ="server" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
C# Code
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class menuingridview : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["employyeeConnectionString"].ConnectionString);
DataSet ds;
SqlDataAdapter da;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
da = new SqlDataAdapter("Exec [sp_hyrarchyoftable]", con.ConnectionString);
ds = new DataSet();
da.Fill(ds);
GridView1.DataSource = ds.Tables[0];
GridView1.DataBind();
}
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Style.Add("background-color", "#DC143C");
e.Row.Cells[2].Style.Add("display", "none");
e.Row.Cells[2].Style.Add("width", "0px");
e.Row.Cells[3].Style.Add("display", "none");
e.Row.Cells[4].Style.Add("display", "none");
}
else if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[2].Style.Add("display", "none");
e.Row.Cells[2].Style.Add("width", "0px");
e.Row.Cells[3].Style.Add("display", "none");
e.Row.Cells[4].Style.Add("display", "none");
if (((Label)e.Row.Cells[3].Controls[1]).Text != "0")
{
e.Row.Style.Add("display", "none");
e.Row.Style.Add("background-color", "#ECF1EF");
}
else
{
//System.Drawing.Color.Maroon
e.Row.Style.Add("background-color", "#8A2BE2");
}
}
}
}
0 comments:
Post a Comment