dekempeneer
asked on
Style gridview
Hello, I made a div where the text fades in. No I want to replace the hard-coded/typed text by a gridview (or something like it). But it does not work.
I have a fade.js file (see code), a masterpage with <body onload="blink('warning');" > and a childpage with : <div id="warning" style="color:#dce7ec"> blablabla </div>. Tthis works.
But now I want to do the same with the text in the gridview. But how can I do this ?
I have a fade.js file (see code), a masterpage with <body onload="blink('warning');"
But now I want to do the same with the text in the gridview. But how can I do this ?
fade.js :
function blink(elementid)
{
colorarray = Array('#EEEEEE','#DDDDDD','#CCCCCC','#BBBBBB','#AAAAAA','#999999','#888888','#777777','#666666','#555555','#444444','#333333','#222222','#111111','#000000');
i=0;
if (i< (colorarray.length -1)) // function is now independent of length of array
{
setInterval ("changecolor('"+elementid+"')",100);
}
else
{
clearInterval ( changecolor );
}
}
function changecolor(x)
{
var x= document.getElementById(x);
if (x != null)
{
x.style.color = colorarray[i];
}
i++;
}
ASKER
And how I run this Sub ?
Do I need to an onload in the <asp:GridView id="CompGV" ??
Do I need to an onload in the <asp:GridView id="CompGV" ??
ASKER
I added
OnDataBound="productsGridV iew_RowDat aBound" > to my gridview, but then I get :
BC30408: Method 'Public Sub productsGridView_RowDataBo und(sender As Object, e As System.Web.UI.WebControls. GridViewRo wEventArgs )' does not have the same signature as delegate 'Delegate Sub EventHandler(sender As Object, e As System.EventArgs)'.
OnDataBound="productsGridV
BC30408: Method 'Public Sub productsGridView_RowDataBo
It is not OnDataBound="productsGridV iew_RowDat aBound". It should be
OnRowDataBound="productsGr idView_Row DataBound" .
OnRowDataBound="productsGr
ASKER
OK, my bad.
But it still does not do the fade-text with the text within the gridview?
But it still does not do the fade-text with the text within the gridview?
The below links may be useful
http://www.javascriptkit.com/filters/fadetransition.shtml
http://www.javascriptkit.com/howto/showie42.shtml
http://www.javascriptkit.com/filters/fadetransition.shtml
http://www.javascriptkit.com/howto/showie42.shtml
ASKER
But the javascript is ok, or at least it works for the text within the div.
But not for the text within the gridview.
But not for the text within the gridview.
ASKER
x com, can you help me out here ?
Is it that you want the each text in each cell to do a fade effect? I am not sure of the logic behind this. Is it not ok to get the entire GridView to fade out?
ASKER
Yes that is ok too, there will probably also be one cell filled anyway so.
How do you intend to update the GridView? Do you use UpdatePanel? Or all the operation are in the client-side.
ASKER
I added some code which I use to fill the gridview.
Is that an answer to your question ?
Is that an answer to your question ?
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table><tr><td ><br />
<asp:GridView id="CompGV" runat="server" AutoGenerateColumns="true" DataSourceid="CompDS" selectedindex="0" ShowHeader="False" CellPadding="1" GridLines="None" Width="100%" BorderWidth="0px" ForeColor="#dce7ec" OnRowDataBound="CompGV_RowDataBound" >
</asp:GridView>
</td></tr></table>
<asp:AccessDataSource id="CompDS" DataFile="data\database.mdb" runat="server" SelectCommand="SELECT * FROM tblCompany order by id">
</asp:AccessDataSource>
</asp:Content>
ok, fine. you use a data source to populate the grid. When do you want the fade effect to happen? automatically or during an client-side event (using javascript). When the effect happens what will be the state of the page?
ASKER
Well the datasource seemed to be the easiest way.
I want it to happen when the page is loaded.
I want it to happen when the page is loaded.
ok, can you try this. place the below code in Code Snippet instead of the Table tag and add this to the page_load. Try this if it works.
Page.ClientScript.Register StartupScr ipt(this.G etType(), "FadeDiv", "var divPH=document.getElementB yId('divPH ').innerHT ML;fnDoFad e();", true);
Add a javascript script function in the head section of the ASPX page.
function fnDoFade(){
var obj=document.getElementByI d('divMain ');
obj.filters[0].Apply();
document.getElemenyById('d ivPH').inn erHTML=(do cument.get ElemenyByI d('divPH') .innerHTML !="" ? "" : divPH);
obj.filters[0].Play();
setTimeout("fnDoFade()", 1800);
}
Page.ClientScript.Register
Add a javascript script function in the head section of the ASPX page.
function fnDoFade(){
var obj=document.getElementByI
obj.filters[0].Apply();
document.getElemenyById('d
obj.filters[0].Play();
setTimeout("fnDoFade()", 1800);
}
<table><tr><td ><br />
<div id="divMain" style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00);"><div id="divPH">
<asp:GridView id="CompGV" runat="server" AutoGenerateColumns="true" DataSourceid="CompDS" selectedindex="0" ShowHeader="False" CellPadding="1" GridLines="None" Width="100%" BorderWidth="0px" ForeColor="#dce7ec" OnRowDataBound="CompGV_RowDataBound" >
</asp:GridView>
</div></div>
</td></tr></table>
ASKER
Ok,
I added the div and gridview to my company.aspx page. I added the javascript to my fade.js for which I have a <script src="fade.js"> in my head of the masterpage.
I also added the Pae.clientscript.... in my Protected Sub Page_Load in my company.aspx.vb page.
But here I get now an error saying : "Name 'this' is not declared."
I added the div and gridview to my company.aspx page. I added the javascript to my fade.js for which I have a <script src="fade.js"> in my head of the masterpage.
I also added the Pae.clientscript.... in my Protected Sub Page_Load in my company.aspx.vb page.
But here I get now an error saying : "Name 'this' is not declared."
Oh Sorry, you are using VB.Net, if so
replace the Page.ClientScript..... with
Page.ClientScript.Register StartupScr ipt(Me.Get Type(), "FadeDiv", "var divPH=document.getElementB yId('divPH ').innerHT ML;fnDoFad e();", true)
replace the Page.ClientScript..... with
Page.ClientScript.Register
ASKER
Ah learned already then that in c## it is this and in VB it is me :)
Anyway, the gridview-text is not fading. It just stays on it's ForeColor="#dce7ec"
Anyway, the gridview-text is not fading. It just stays on it's ForeColor="#dce7ec"
ASKER
??
Sorry for delayed response. a slight change in the javascript function. Use this
function fnDoFade(){
var obj=document.getElementById('divMain');
var height=obj.offsetHeight;
obj.filters[0].apply();
if(document.getElementById('divPH').innerHTML!=""){
document.getElementById('divPH').innerHTML="";
obj.style.height=height+"px";
}else{
document.getElementById('divPH').innerHTML=divPH;
}
obj.filters[0].play();
window.setTimeout("fnDoFade()", 1800);
}
ASKER
Sorry man, still nothing happening .
I have tested and then posted the working code. I am sorry, I couldn't actually understand your requirement.
ASKER
Can I send you the files maybe, so you can see, as I use a masterpage, a .js, a chidpage plus childpage-codefile. Maybe the combination is not ok :) ?
Ok. It should also be helpful if you define the exact requirement.
Hi dekempeneer,
Sorry for late reply due to my heavy routine tasks. I'm out of track this thread. It's looking close to the front gate of the solution. Perhaps you can post/attach your current tested files here. I believe CB_Thirumalai is able to assist you on the problem. Cheers.
Sorry for late reply due to my heavy routine tasks. I'm out of track this thread. It's looking close to the front gate of the solution. Perhaps you can post/attach your current tested files here. I believe CB_Thirumalai is able to assist you on the problem. Cheers.
ASKER
Problem it seems not to be able to attach such files here
ASKER
I added .txt to all files and zipped that, I hope you can use the files by just removing the .txt again
Company.zip
Company.zip
Ok, Remove
Page.ClientScript.Register StartupScr ipt(Me.Get Type(), "FadeDiv", "var divPH=document.getElementB yId('divPH ').innerHT ML;fnDoFad e();", true)
from Company.aspx.vb, and add below
<script>
var divPH=document.getElementB yId('divPH ').innerHT ML;fnDoFad e();
</script>
Is this what you desired?
BEFORE </asp:Content> in the Company.aspx page.
Page.ClientScript.Register
from Company.aspx.vb, and add below
<script>
var divPH=document.getElementB
</script>
Is this what you desired?
BEFORE </asp:Content> in the Company.aspx page.
ASKER
Not really :)
You can see it at : http://www.nemoto-international.com/company.aspx
The text that is faded in ok, iss the hard-coded text.
After that there is the text from the gridview, but it does not really do the same :)
You can see it at : http://www.nemoto-international.com/company.aspx
The text that is faded in ok, iss the hard-coded text.
After that there is the text from the gridview, but it does not really do the same :)
ok, based on the code that you posted, you want the GridView also do the Blink continuously as the hard-coded text does, right? If so, give me some time, let me reframe your function and post it. Do let me know ASAP. The response may be delayed.
ASKER
well not continuously.
Only from blank to black, so a fade-in. And then stop.
As if the text comes from nothing.
As does the hard-coded text. It does not repeat.
Only from blank to black, so a fade-in. And then stop.
As if the text comes from nothing.
As does the hard-coded text. It does not repeat.
Remove all that I have suggested.
Will it be OK to bring, the <asp:Gridview inside the <div id="warning" and remove
blink('CompGV');
from the body tag in the master page. This will ensure that the fade-in will be uniform.
Will it be OK to bring, the <asp:Gridview inside the <div id="warning" and remove
blink('CompGV');
from the body tag in the master page. This will ensure that the fade-in will be uniform.
ASKER
Look, I don't care how it is done, as long as it works :)
Then try doing what i have suggested and let me know.
Eventhough this is the longest thread that i have worked with, I am determined to help you in getting a solution.
ASKER
Well that is what I had in the beginning, but then there happens nothing.
Are you sure that you have data inside the GridView. If you do not have data, then you won't see the GridView.
ASKER
Yes, you can see it at the url I pasted before.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hello,
I really appreciate the effort you put in it, but it still does nothing.
Does it maybe have anything to do now with the progid:DXImageTransform.Mi crosoft.Fa de ???
I really appreciate the effort you put in it, but it still does nothing.
Does it maybe have anything to do now with the progid:DXImageTransform.Mi
Do Grid View tag look like below?
<asp:GridView id="CompGV" runat="server" AutoGenerateColumns="true" DataSourceid="CompDS" selectedindex="0" ShowHeader="False" CellPadding="1" GridLines="None" Width="100%" BorderWidth="0px" >
</asp:GridView>
<asp:GridView id="CompGV" runat="server" AutoGenerateColumns="true"
</asp:GridView>
ASKER
Ah yes, the ForeColor="#dce7ec" was still in the code.
Now it is working, thank you very much for your work.
Last question , how can I slow the fading down ?
Now it is working, thank you very much for your work.
Last question , how can I slow the fading down ?
Replace
FILTER: progid:DXImageTransform.Mi crosoft.Fa de(Overlap =1.00);
To
FILTER: progid:DXImageTransform.Mi crosoft.Fa de(Duratio n=3);
The duration can be adjusted based on the number. the more the number, the more the duration. More info on this can be found at below link. Hope this has helped.
http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx
FILTER: progid:DXImageTransform.Mi
To
FILTER: progid:DXImageTransform.Mi
The duration can be adjusted based on the number. the more the number, the more the duration. More info on this can be found at below link. Hope this has helped.
http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx
ASKER
Thank you very much
>>..I want to do the same with the text in the gridview.
You can invoke the same js function for the preferred gridview's column during RowDataBound event.
eg:
Sub productsGridView_RowDataBo
ByVal e As System.Web.UI.WebControls.
If e.Row.RowType = DataControlRowType.DataRow
e.Row.Attributes.Add("onlo
End If
End Sub
More details for RowDataBound event
http://msdn.microsoft.com/en-us/library/aa479342.aspx