Auto-scrolling specific gridview cell on webpage

Question

I was wondering if it was possible to auto-scroll a specific column of cells (left to right) in a gridview in asp.net/c#.

I have a gridview filled from a database, and there's a column that can have certain cells anywhere from 1 character up to 100 characters. all other columns are pretty close in length (varying only 2-3 characters maximum). For this column right now, i have it doing this

        <ItemTemplate>
           <div style ="overflow: auto;">
           <asp:Label ID="Label7" runat="server" Text='<%# Bind("[QA Msg]") %>' Width="100"></asp:Label>
           </div>
        </ItemTemplate>

Which is fine if somebody wants to view it themselves, but this is up on a display and both the database and this page are updated automatically, so automatically scrolling text in this column would be the best solution that I can think of. If anybody knows how I could do this, or has another solution (wrapping pushes some of the lower rows off the screen so that doesn't work) it would be appreciated.

Thank you!

EDIT: clarifying my question, Currently these gridview cells down this column have scroll-bars to manually scroll if necessary. I am looking for a way to make the text scroll through automatically on a loop (possibly with javascript?)

Like this? http://stackoverflow.com/questions/10547797/very-simple-very-smooth-javascript-marquee — Steve Greene, Jul 20 '15 at 16:37

nelek · Answer 1 · 2015-07-20T18:24:15.417

Here, I made example using css and js

css

.divCC 
{
   width:100px; white-space:nowrap; overflow:hidden;
}
.divCnt
{
  width: 100px; white-space: nowrap;
  overflow: hidden;
  box-sizing:border-box;
  animation:marquee 5s linear; /*infinite*/
}
@keyframes marquee 
{
  0%   { text-indent: 0px }
  100% { text-indent: -100px }
}

js :

function animDiv() {
            var pp = document.getElementById('gvQAMsg').getElementsByTagName('div');
            if (pp != null) {
                for (var i = 0; i < pp.length; i++) {
                    if (pp[i].className == 'divCC') {
                        var rr = pp[i].getElementsByTagName('span');
                        if (rr[0].offsetWidth > pp[i].clientWidth) {
                            pp[i].className = 'divCnt';
                        }
                    }
                }
            }
        }

html :

<body onload="animDiv();">
<asp:GridView ID="gvQAMsg" runat="server" AutoGenerateColumns="False" EnableModelValidation="True" DataSourceID="*your_SqlDataSource*" > 
     <Columns>
      <asp:TemplateField HeaderText="QA Msg" SortExpression="[QA Msg]">
        <ItemTemplate>
         <div class="divCC">
          <asp:Label ID="Label7" runat="server" Text='<%# Bind("[QA Msg]")%>'></asp:Label>
          </div>
          </ItemTemplate>
        </asp:TemplateField>  
     </Columns>
    </asp:GridView>
</body>

I just don't know how to achieve this without js.

So, onload start animDiv function. Function search all divs inside GridView, check is className="divCC" of div. If it is, then compare div and span widths. If span is wider than div className is replaced for divCnt which have animation.

You'll see in css for animation You can add infinite and animation will never stop. This example is with autoscroll text which is wider then div container only once.

This is not so clean code, but...

I hope so this is what You need.

Update : jsfiddle simulation

The problem with this if I'm understanding it is that it would animate every cell larger than a certain size in the whole gridview would it not? I need it to animate on cells in the "QA Msg" column. Is there some way to only make it animate that single column? — msd94, Jul 20 '15 at 17:54
@user3361936 Yes, use this `divCC` class only for `QA Msg` column. `js` will check and animate `span/label` only which is child of `div` with `divCC` class. Every else `div` (who doesn't have `divCC` class) will not be proceeded. For other columns, which don't need animation, place some else `class` **but not** `divCC`. — nelek, Jul 20 '15 at 17:57

Auto-scrolling specific gridview cell on webpage

1 Answers1