Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 620
  • Last Modified:

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

0
dekempeneer
Asked:
dekempeneer
  • 23
  • 19
  • 2
1 Solution
 
David H.H.LeeCommented:
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
0
 
dekempeneerAuthor Commented:
And how I run this Sub ?
Do I need to an onload in the <asp:GridView id="CompGV"  ??
0
 
dekempeneerAuthor Commented:
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)'.

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
CB_ThirumalaiCommented:
It is not OnDataBound="productsGridView_RowDataBound".  It should be
OnRowDataBound="productsGridView_RowDataBound".
0
 
dekempeneerAuthor Commented:
OK, my bad.

But it still does not do the fade-text with the text within the gridview?
0
 
dekempeneerAuthor Commented:
But the javascript is ok, or at least it works for the text within the div.
But not for the text within the gridview.
0
 
dekempeneerAuthor Commented:
x com, can you help me out here ?
0
 
CB_ThirumalaiCommented:
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?
0
 
dekempeneerAuthor Commented:
Yes that is ok too, there will probably also be one cell filled anyway so.
0
 
CB_ThirumalaiCommented:
How do you intend to update the GridView?  Do you use UpdatePanel?  Or all the operation are in the client-side.
0
 
dekempeneerAuthor Commented:
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

0
 
CB_ThirumalaiCommented:
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?
0
 
dekempeneerAuthor Commented:
Well the datasource seemed to be the easiest way.
I want it to happen when the page is loaded.
0
 
CB_ThirumalaiCommented:
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

0
 
dekempeneerAuthor Commented:
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."
0
 
CB_ThirumalaiCommented:
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)
0
 
dekempeneerAuthor Commented:
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"
0
 
dekempeneerAuthor Commented:
??
0
 
CB_ThirumalaiCommented:
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

0
 
dekempeneerAuthor Commented:
Sorry man, still nothing happening .
0
 
CB_ThirumalaiCommented:
I have tested and then posted the working code.  I am sorry, I couldn't  actually understand your requirement.
0
 
dekempeneerAuthor Commented:
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 :) ?
0
 
CB_ThirumalaiCommented:
Ok. It should also be helpful if you define the exact requirement.
0
 
David H.H.LeeCommented:
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.
0
 
dekempeneerAuthor Commented:
Problem it seems not to be able to attach such files here
0
 
dekempeneerAuthor Commented:
I added .txt to all files and zipped that, I hope you can use the files by just removing the .txt again
Company.zip
0
 
CB_ThirumalaiCommented:
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.
0
 
dekempeneerAuthor Commented:
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 :)
0
 
CB_ThirumalaiCommented:
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.
0
 
dekempeneerAuthor Commented:
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.
0
 
CB_ThirumalaiCommented:
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.
0
 
dekempeneerAuthor Commented:
Look, I don't care how it is done, as long as it works :)
0
 
CB_ThirumalaiCommented:
Then try doing what i have suggested and let me know.
0
 
CB_ThirumalaiCommented:
Eventhough this is the longest thread that i have worked with, I am determined to help you in getting a solution.
0
 
dekempeneerAuthor Commented:
Well that is what I had in the beginning, but then there happens nothing.
0
 
CB_ThirumalaiCommented:
Are you sure that you have data inside the GridView.  If you do not have data, then you won't see the GridView.
0
 
dekempeneerAuthor Commented:
Yes, you can see it at the url I pasted before.
0
 
CB_ThirumalaiCommented:
Sorry for delay.  This is a working code that I have tested with the files you have posted. after much thought i was able to do that.  let me say you the instruction.  Start from where you were before when I suggested the above code.  But, the code is required.

1. In Company.aspx.vb, in the Page_Load, change it as below.
         Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
2. In Company.aspx.vb, Remove CompGV_RowDataBound OR GridView1_RowDataBound code.
3. In the Masterpage4.master, change it as
         onload="Get_Cookie('Language');" and remove the rest.
4. In the Masterpage4.master, before </body></html> END tag, add this
       <script type="text/javascript" language="javascript">
              var divPH=document.getElementById('divPH').innerHTML;
              fnDoFade();
              blink('warning');
       </script>
5. Change the fnDoFade() javascript function inside fade.js as below (just replace)
function fnDoFade(){
    var obj=document.getElementById('divMain'),child=document.getElementById('divPH');
    var height=obj.offsetHeight;
    obj.style.height=height+"px";
    child.innerHTML="";
    obj.filters[0].apply();
    child.innerHTML=divPH;
    obj.filters[0].play();
}
6. In the Company.aspx, change the Grid View tag as below, making sure you remove the OnRowDataBound (I have not removed it purposefully to make sure you do it)
<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>
7. If you have the below code in the Page_Load accidentally, make sure you remove it
Page.ClientScript.RegisterStartupScript(Me.GetType(), "FadeDiv", "var divPH=document.getElementById('divPH').innerHTML;fnDoFade();", true)
0
 
dekempeneerAuthor Commented:
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 ???
0
 
CB_ThirumalaiCommented:
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>
0
 
dekempeneerAuthor Commented:
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 ?
0
 
CB_ThirumalaiCommented:
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
0
 
dekempeneerAuthor Commented:
Thank you very much
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 23
  • 19
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now