Re: Apply style to div tag. - ASP.NET Discussion Boards

Thanks for the reply sir, but its not working. I have to actually show this div tag on onmouseover so I am using Ajax HoverMenuExtender which is also created runtime.

The problem is that I am having GridView control which is created runtime and there are 2 Template column and others are BoundField Columns. Template Column is Checkbox and Linkbutton column and on the linkbutton mouseover I have to show the summary.

I dont know where I have going wrong???

Thanks again...

Ok.
tell me where have you used my code?
please post your

bEst rEgard
pAthan

please don't forget to vote on the post that helped you.

No I can see the style when I right click view source. The problem is I have to show this div tag only on mouse over div its showing all. here is the code:

I have create a class GridViewTemplate

public class GridViewTemplate: System.Web.UI.Page, ITemplate
{
ListItemType templateType;
string columnName;
private Int32 RowItems;
ArrayList arrgvCompanyName;

public GridViewTemplate(ListItemType type, string colname)
{
templateType = type;
columnName = colname;
}

public GridViewTemplate(ListItemType type, string colname, ArrayList gvCompanyName)
{
templateType = type;
columnName = colname;
arrgvCompanyName = gvCompanyName;
}
public void InstantiateIn(System.Web.UI.Control container)
{
Literal lc = new Literal();
LinkButton lb = new LinkButton();
CheckBox chk = new CheckBox();
TextBox tb1 = new TextBox();
AjaxControlToolkit.HoverMenuExtender hme2 = new AjaxControlToolkit.HoverMenuExtender();
Panel PopupMenu = new Panel();
HtmlGenericControl divtest = new HtmlGenericControl();
HtmlImage imgTop = new HtmlImage();
HtmlImage imgBottom = new HtmlImage();

switch (templateType)
{
case ListItemType.Header:
lc.Text = "<B>" + columnName + "</B>";
if (columnName == "CheckAll")
{
container.Controls.Add(chk);
}
container.Controls.Add(lc);
break;

case ListItemType.Item:
//container.Controls.Add(tb1);
if (columnName == "CheckAll")
{
container.Controls.Add(chk);
}
//else if(columnName="CompanyName")
//{

//}
else
{
if (arrgvCompanyName.Count > 0)
{
columnName = arrgvCompanyName[RowItems].ToString();
lb.Text = columnName;
lb.CommandName = "cmd";

hme2.TargetControlID = "lb";
hme2.PopupControlID = "PopupMenu";
//hme2.PopupPosition = Center;
hme2.OffsetX = 60;
hme2.OffsetY = -15;
hme2.PopDelay = 10;

//Add Top Image For Showing Summary
imgTop.Src = "../../images/top_01.png";
imgTop.Width = 272;
imgTop.Height = 24;

//Add Sytle to div Tag
//divtest.ClientID = "dvtest";
divtest.Attributes.Add("class", "myclass");
divtest.InnerHtml = "My Summary For Testing";
//Add Bottom Image For Showing Summary
imgBottom.Src = "../../images/bottom_01.png";
imgBottom.Width = 247;
imgBottom.Height = 7;

PopupMenu.Controls.Add(imgTop);
PopupMenu.Controls.Add(divtest);
PopupMenu.Controls.Add(imgBottom);

container.Controls.Add(lb);
container.Controls.Add(PopupMenu);
RowItems++;
}
else
{
lb.Text = columnName;
lb.CommandName = "cmd";
container.Controls.Add(lb);
}
}
//container.Controls.Add(chk);
break;
}
}
}

and from code behind I am calling this as:

foreach (DataColumn objDC in myTable.Columns)
{
if (objDC.ColumnName == "CheckAll")
{
TemplateField chkColumn = new TemplateField();

chkColumn.HeaderTemplate = new GridViewTemplate(ListItemType.Header, "CheckAll");

for (int j = 0; j <= myTable.Rows.Count - 1; j++)
{
chkColumn.ItemTemplate = new GridViewTemplate(ListItemType.Item, "CheckAll");
}

gvWatchList.Columns.Add(chkColumn);
}
else if (objDC.ColumnName == "CompanyName")
{
TemplateField linkbtnColumn = new TemplateField();

linkbtnColumn.HeaderTemplate = new GridViewTemplate(ListItemType.Header, "CompanyName");

//linkbtnColumn.ItemTemplate = new GridViewTemplate(ListItemType.Item, myTable.Rows[iCompCount][1].ToString());
ArrayList score = new ArrayList(myTable.Rows.Count);
for (int j = 0; j <= myTable.Rows.Count - 1; j++)
{
score.Add(myTable.Rows[j][1].ToString());
//gvWatchList.Rows[j].Cells.Add(tt);
}

//linkbtnColumn.ItemTemplate = new GridViewTemplate(ListItemType.Item, score.ToString());
linkbtnColumn.ItemTemplate = new GridViewTemplate(ListItemType.Item, "", score);
GridViewTemplate temp = new GridViewTemplate();
temp.RowItem = score.Count;
gvWatchList.Columns.Add(linkbtnColumn);

}
else
{
BoundField bField = new BoundField();
bField.DataField = objDC.ColumnName;
bField.HeaderText = objDC.ColumnName;
gvWatchList.Columns.Add(bField);
}
}
gvWatchList.RowStyle.CssClass = "GridRowColor";
gvWatchList.HeaderStyle.CssClass = "GridHeader";
gvWatchList.AlternatingRowStyle.CssClass = "GridAlternateRowColor";
gvWatchList.CssClass = "grid-text";
gvWatchList.DataSource = myTable;
gvWatchList.DataBind();
}

this is wat I am using in User Control.

Thanks again...

If you are adding styles I would suggest using a CSS class rather than explicity adding it in code, it makes it more managable and reusable

divtest.attributes.add("class", "myclass")

and then define in a CSS file myclass with the attributes you want

div.myclass
{
text-align: right;
display: none;
overflow: auto;
scrollbar-face-color : #ffffff;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #cccccc;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #cccccc;
scrollbar-track-color : #cccccc;
scrollbar-arrow-color : #000000;
}

It also means you dont have to recompile if you need to make changes.

However, if you do need to apply it directly in code for some reason then i would suggest using the built in style property which can be strongly typed which is always nice, as follows

divtest.Style.Add(HtmlTextWriterStyle.TextAlign, "right")

or for ones which are not included in the strongly typed list use

divtest.Style.Add("scrollbar-face-color", "#000000")

Hope that helps

Thanks for the reply sir, but its not working. I have to actually show this div tag on onmouseover so I am using Ajax HoverMenuExtender which is also created runtime.

The problem is that I am having GridView control which is created runtime and there are 2 Template column and others are BoundField Columns. Template Column is Checkbox and Linkbutton column and on the linkbutton mouseover I have to show the summary.

I dont know where I have going wrong???

Thanks again...

Both sets of code provided as answers will work, and are valid ways of doing it, but you seem to have a specific implementation issue here.

Can you please just let me know what the issue is that you are having - does the div show? Is it just missing the style information?

No I can see the style when I right click view source. The problem is I have to show this div tag only on mouse over div its showing all. here is the code:

I have create a class GridViewTemplate

public class GridViewTemplate: System.Web.UI.Page, ITemplate
{
ListItemType templateType;
string columnName;
private Int32 RowItems;
ArrayList arrgvCompanyName;

public GridViewTemplate(ListItemType type, string colname)
{
templateType = type;
columnName = colname;
}

public GridViewTemplate(ListItemType type, string colname, ArrayList gvCompanyName)
{
templateType = type;
columnName = colname;
arrgvCompanyName = gvCompanyName;
}
public void InstantiateIn(System.Web.UI.Control container)
{
Literal lc = new Literal();
LinkButton lb = new LinkButton();
CheckBox chk = new CheckBox();
TextBox tb1 = new TextBox();
AjaxControlToolkit.HoverMenuExtender hme2 = new AjaxControlToolkit.HoverMenuExtender();
Panel PopupMenu = new Panel();
HtmlGenericControl divtest = new HtmlGenericControl();
HtmlImage imgTop = new HtmlImage();
HtmlImage imgBottom = new HtmlImage();

switch (templateType)
{
case ListItemType.Header:
lc.Text = "<B>" + columnName + "</B>";
if (columnName == "CheckAll")
{
container.Controls.Add(chk);
}
container.Controls.Add(lc);
break;

case ListItemType.Item:
//container.Controls.Add(tb1);
if (columnName == "CheckAll")
{
container.Controls.Add(chk);
}
//else if(columnName="CompanyName")
//{

//}
else
{
if (arrgvCompanyName.Count > 0)
{
columnName = arrgvCompanyName[RowItems].ToString();
lb.Text = columnName;
lb.CommandName = "cmd";

hme2.TargetControlID = "lb";
hme2.PopupControlID = "PopupMenu";
//hme2.PopupPosition = Center;
hme2.OffsetX = 60;
hme2.OffsetY = -15;
hme2.PopDelay = 10;

//Add Top Image For Showing Summary
imgTop.Src = "../../images/top_01.png";
imgTop.Width = 272;
imgTop.Height = 24;

//Add Sytle to div Tag
//divtest.ClientID = "dvtest";
divtest.Attributes.Add("class", "myclass");
divtest.InnerHtml = "My Summary For Testing";
//Add Bottom Image For Showing Summary
imgBottom.Src = "../../images/bottom_01.png";
imgBottom.Width = 247;
imgBottom.Height = 7;

PopupMenu.Controls.Add(imgTop);
PopupMenu.Controls.Add(divtest);
PopupMenu.Controls.Add(imgBottom);

container.Controls.Add(lb);
container.Controls.Add(PopupMenu);
RowItems++;
}
else
{
lb.Text = columnName;
lb.CommandName = "cmd";
container.Controls.Add(lb);
}
}
//container.Controls.Add(chk);
break;
}
}
}

and from code behind I am calling this as:

foreach (DataColumn objDC in myTable.Columns)
{
if (objDC.ColumnName == "CheckAll")
{
TemplateField chkColumn = new TemplateField();

chkColumn.HeaderTemplate = new GridViewTemplate(ListItemType.Header, "CheckAll");

for (int j = 0; j <= myTable.Rows.Count - 1; j++)
{
chkColumn.ItemTemplate = new GridViewTemplate(ListItemType.Item, "CheckAll");
}

gvWatchList.Columns.Add(chkColumn);
}
else if (objDC.ColumnName == "CompanyName")
{
TemplateField linkbtnColumn = new TemplateField();

linkbtnColumn.HeaderTemplate = new GridViewTemplate(ListItemType.Header, "CompanyName");

//linkbtnColumn.ItemTemplate = new GridViewTemplate(ListItemType.Item, myTable.Rows[iCompCount][1].ToString());
ArrayList score = new ArrayList(myTable.Rows.Count);
for (int j = 0; j <= myTable.Rows.Count - 1; j++)
{
score.Add(myTable.Rows[j][1].ToString());
//gvWatchList.Rows[j].Cells.Add(tt);
}

//linkbtnColumn.ItemTemplate = new GridViewTemplate(ListItemType.Item, score.ToString());
linkbtnColumn.ItemTemplate = new GridViewTemplate(ListItemType.Item, "", score);
GridViewTemplate temp = new GridViewTemplate();
temp.RowItem = score.Count;
gvWatchList.Columns.Add(linkbtnColumn);

}
else
{
BoundField bField = new BoundField();
bField.DataField = objDC.ColumnName;
bField.HeaderText = objDC.ColumnName;
gvWatchList.Columns.Add(bField);
}
}
gvWatchList.RowStyle.CssClass = "GridRowColor";
gvWatchList.HeaderStyle.CssClass = "GridHeader";
gvWatchList.AlternatingRowStyle.CssClass = "GridAlternateRowColor";
gvWatchList.CssClass = "grid-text";
gvWatchList.DataSource = myTable;
gvWatchList.DataBind();
}

this is wat I am using in User Control.

Thanks again...

From looking at the code the obvious is that you are not setting the ID property of the panel which you want to show, you are setting TargetPopupId to be 'PopupMenu' but that is the name of the object, not the Id of the control which you want to use, try adding the line

PopupMenu.Id = "PopupMenu"

It is not the div which you are trying to hide or display on the mouseover but the panel also, the div is just a control within the panel.

Really you should set the Id property for all controls you add on the page, especially if they are containers. Also im not sure what the default is but you should perhaps specifty the type of generic html control in the constuctor

HtmlGenericControl divtest = new HtmlGenericControl("Div");

Thanks for the reply sir but I have tried that also, but its not working... Frown | :(

How to create Media Player in aspx page to show my video clippings.... Any reference or suggestion is more helpful. Confused | :confused:

Thanks in Advance... Rose | [Rose]

http://www.w3schools.com/media/media_browservideos.asp[^]

My Website | Ask smart questions

Thanks for ur reference... Rose | [Rose]

Check this link

http://service.real.com/help/library/guides/production8/htmfiles/control.htm[^]

Best Regards
-----------------
Abhijit Jana
View My CodeProject Articles

"Success is Journey it's not a destination"

Thanksn for ur reference... Rose | [Rose]

Thanks for ur reply....it's working ya...but i have two video files in my application if first video is played then second video must start...is it possible? Any ideas...

Thanks in Advance... Rose | [Rose]

I want to make a mail server. through user can regstered and can send and recieve mail.the mail are sending properly. but how to recieve the mail on my MailServer.com . plz help me

shabi uz zaman wrote:
but how to recieve the mail on my MailServer.com

To receive mails from mail server requires POP3 enabled server. Try looking for some articles explaining how you can use POP3 protocol in your ASP.NET application. Also you can have a look to POP3 RFC[^] and understand how it is implemented.

My Website | Ask smart questions

Hi i am working on the Project in asp. net which is used to access remote desktops . For this i needed the source code.so send me the source code related to this project

ssunny wrote:
Hi i am working on the Project in asp. net which is used to access remote desktops .

Accessing remote desktop from ASP.NET ? Confused | :confused:

ASP.NET application works on a webserver. It can't connec t to a remote desktop. Are you talking about windows application's ?

ssunny wrote:
For this i needed the source code.so send me the source code related to this project

You have mistaken the concept of this site, my dear friend. People here is not to write source code and send it to you. We are here to help you if you have stuck up on some bit. I recommend you to read http://catb.org/~esr/faqs/smart-questions.html[^] before asking questions.

My Website | Ask smart questions

hi all,

I have a master page which includes some javascript code to get the current mouse position. i have 2 aspx pages which uses this master page and i need to use the javascript defined in master page in my two aspx pages.

How can i call them?

Thanks in advance. Smile | :)

Regards

Anuradha

call javascript onmouseover event of body of master page.
for example

<body onmouseover="functionName()"

bEst rEgard
pAthan

please don't forget to vote on the post that helped you.

hi,

thanks for your help. i used the following code

function getX(evt) {
if (document.all) { return (evt.clientX); }
return (evt.layerX);
}
function getY(evt) {
if (document.all) { return (evt.clientY); }
return (evt.layerY);
}
function getScrollX() {
if (document.all) { return (document.body.scrollLeft); }
return (window.pageXOffset);
}
function getScrollY() {
if (document.all) { return (document.body.scrollTop); }
return (window.pageYOffset);
}
function showValues(e)
{
var posx = 0;
var posy = 0;
posx= getX(e) + getScrollX();
posy= getY(e) + getScrollY();
}

and called the function showValues(event) in mousemove event of the body of master page as u described.

i need to use the variables posx and posy in my content pages.

How can it be done???

Thanks

Regards

Anuradha

anu81 wrote:
i need to use the variables posx and posy in my content pages.

Why ? After rendering and showing the page to the browser, there is no separation like Master/Content page. All will be rendered to produce a single page. So whatever client side script you are writing on Master/Content page will be in same page after rendering. So what's your problem ?

My Website | Ask smart questions

hi,

thanks for your reply. i too thought the same that the entire page is rendered and there is no difference between master and content page.

But when i access the values posx and posy in a javascript function from the content page like this,

function fnZoomImage(comment_text)
{
oDiv = document.getElementById('idPOPUP');
if (oDiv != null) window.document.body.removeChild(oDiv);

oDiv = window.document.createElement("DIV");
oDiv.style.position="absolute";
oDiv.style.visibility = "visible";
oDiv.style.padding = "1px";
oDiv.style.width = "0px";
oDiv.style.height = "0px";
oDiv.style.border = "0px";
oDiv.style.left = posx + "px";
oDiv.style.top = posy + "px";
oDiv.id = "idPOPUP";

oDiv.innerHTML = ""+
""+
" "+
""+
"

"+
" " + comment_text + "

";
window.document.body.appendChild(oDiv);
}

i get a error saying posx is undefined.

Thanks
Regards

Anuradha