Link to home
Start Free TrialLog in
Avatar of dekempeneer
dekempeneerFlag for Belgium

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 ?
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++;
}

Open in new window

Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

Hi dekempeneer,
>>..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_RowDataBound(ByVal sender As Object, _
  ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.Attributes.Add("onload","javascript:blink(this.id);")
    End If
End Sub

More details for RowDataBound event
http://msdn.microsoft.com/en-us/library/aa479342.aspx
Avatar of dekempeneer

ASKER

And how I run this Sub ?
Do I need to an onload in the <asp:GridView id="CompGV"  ??
I added
OnDataBound="productsGridView_RowDataBound" > to my gridview, but then I get :

BC30408: Method 'Public Sub productsGridView_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs)' does not have the same signature as delegate 'Delegate Sub EventHandler(sender As Object, e As System.EventArgs)'.

It is not OnDataBound="productsGridView_RowDataBound".  It should be
OnRowDataBound="productsGridView_RowDataBound".
OK, my bad.

But it still does not do the fade-text with the text within the gridview?
But the javascript is ok, or at least it works for the text within the div.
But not for the text within the gridview.
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?
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.
I added some code which I use to fill the gridview.

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>

Open in new window

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?
Well the datasource seemed to be the easiest way.
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.RegisterStartupScript(this.GetType(), "FadeDiv", "var divPH=document.getElementById('divPH').innerHTML;fnDoFade();", true);

Add a javascript script function in the head section of the ASPX page.
function fnDoFade(){
    var obj=document.getElementById('divMain');
    obj.filters[0].Apply();
    document.getElemenyById('divPH').innerHTML=(document.getElemenyById('divPH').innerHTML!="" ? "" : divPH);
    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>

Open in new window

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."
Oh Sorry, you are using VB.Net, if so
replace the Page.ClientScript..... with
Page.ClientScript.RegisterStartupScript(Me.GetType(), "FadeDiv", "var divPH=document.getElementById('divPH').innerHTML;fnDoFade();", true)
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"
??
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);
}

Open in new window

Sorry man, still nothing happening .
I have tested and then posted the working code.  I am sorry, I couldn't  actually understand your requirement.
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.
Problem it seems not to be able to attach such files here
I added .txt to all files and zipped that, I hope you can use the files by just removing the .txt again
Company.zip
Ok, Remove
     Page.ClientScript.RegisterStartupScript(Me.GetType(), "FadeDiv", "var divPH=document.getElementById('divPH').innerHTML;fnDoFade();", true)
from Company.aspx.vb, and add below
     <script>
        var divPH=document.getElementById('divPH').innerHTML;fnDoFade();
      </script>

Is this what you desired?
BEFORE </asp:Content> in the Company.aspx page.
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 :)
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.
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.
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.
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.
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.
Yes, you can see it at the url I pasted before.
ASKER CERTIFIED SOLUTION
Avatar of CB_Thirumalai
CB_Thirumalai
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.Microsoft.Fade ???
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>
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 ?
Replace
   FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00);
To
   FILTER: progid:DXImageTransform.Microsoft.Fade(Duration=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
Thank you very much