locked
div overflow gridview end not showing footer if i press end button in keyboard RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-807418713 posted

    Hello

    I used this in my page

      <div style="overflow-y: scroll; overflow-x: hidden; height: 400px; width: 1900px;">

        <asp:GridView ID="ItemGridView" runat="server" AutoGenerateColumns="false" 
            ShowHeader="true" AllowPaging="true"  PageSize="2" >
            <HeaderStyle BackColor="Blue" Font-Bold="true" />
<Columns >
<asp:BoundField DataField="ITEMID" HeaderText="ITEMID">
                    <ItemStyle Width="100px" />
                   <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
                </asp:BoundField>
                <asp:BoundField DataField="DSC" HeaderText="DSC" >
                     <ItemStyle Width="100px" />
                    <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" />
                </asp:BoundField>
                <asp:BoundField DataField="ACTIVE" HeaderText="ACTIVE" >
                     <ItemStyle Width="100px" />
                    <ItemStyle  HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" />
                </asp:BoundField>
            </Columns>
            <SelectedRowStyle BackColor="#FBAF29" />
        </asp:GridView>
</div>

    On load of page I'm showing more then 900 records. I want to go Gridview footer for that I'm scrolling long and long to see gridview footer last record

    My Requirment Is If i press End button in keyboard it should show me gridview last row

    Thanking You

    Tuesday, October 2, 2018 12:25 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-893317190 posted

    Hi Gopi.MCA,

    Is your  only problem is that the gridview doesn't show gridview footer?

    Have your set the griview's showFooter property to true?

    By default, its false.

    Below is my code.

     <div style="overflow-y: scroll; overflow-x: hidden; height: 400px; width: 1900px;" id="DV">

        <asp:GridView ID="ItemGridView" runat="server" AutoGenerateColumns="false"  ShowFooter="true"> 

            <HeaderStyle BackColor="Blue" Font-Bold="true" />
<Columns >

    <asp:TemplateField HeaderText="ITEMID" >
        <ItemStyle Width="100px" />
                   <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
        <ItemTemplate>
            <%# Eval("itemid") %>
        </ItemTemplate>
        <FooterTemplate>

           footer of itemid
        </FooterTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="dsc" >
        <ItemStyle Width="100px" />
                   <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
        <ItemTemplate>
            <%# Eval("dsc") %>
        </ItemTemplate>
        <FooterTemplate>

           footer of dsc
        </FooterTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="active" >
        <ItemStyle Width="100px" />
                   <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
        <ItemTemplate>
            <%# Eval("active") %>
        </ItemTemplate>
        <FooterTemplate>

           footer of active
        </FooterTemplate>
    </asp:TemplateField>
 
              
            </Columns>
            <SelectedRowStyle BackColor="#FBAF29" />
        </asp:GridView>
</div>

         <script>
             $(function () {        

         
                 $(window).keyup(function (e) {
                     
                var keyCode = window.event ? e.keyCode : e.which;
                //End Key
                         if (keyCode == 35) {
                          $('#DV').animate({ scrollTop: $('#ItemGridView').height()  }, 1200);
                  
                           
                }
                //Home Key
                     if (keyCode == 36) {
                         $('#DV').animate({ scrollTop: 0 }, 1200);


                     }     

            });


       })
   </script>

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 10, 2018 6:55 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1171043462 posted

    It can easily be done using jQuery

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type = "text/javascript">
        $(function () {
            $(window).keyup(function (e) {
                var keyCode = window.event ? e.keyCode : e.which;
                //End Key
                if (keyCode == 35) {
                    $('#DV').animate({ scrollTop: $(document).height() }, 1200);
                }
                //Home Key
                if (keyCode == 36) {
                    $('#DV').animate({ scrollTop: 0 }, 1200);
                }
            });
        });
    </script>
</head>
<body>
 <div id = "DV" style="overflow-y: scroll; overflow-x: hidden; height: 400px; width: 900px;">
FIRST<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
LAST
</div>
</body>
</html>

    Tuesday, October 2, 2018 1:19 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-807418713 posted

    Hello

    I tried above code its not showing gridview last record.. its going just 20 records that also in time consume if i press end button it has to show last record of gridview 

    $(document).height() }, 1200);

    If i press home it show perfect home

    if i press end its not showing last record

    Tuesday, October 2, 2018 3:46 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-893317190 posted

    Hi Gopi.MCA,

    You should use the height of your gridview.

      $('#DV').animate({ scrollTop: $('#ItemGridView').height()  }, 1200);

    Best regards,

    Ackerly Xu

    Wednesday, October 3, 2018 4:35 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1171043462 posted

    You need to just change document with this.

    $('#DV').animate({ scrollTop: $(this).height() }, 1200);

    Wednesday, October 3, 2018 12:53 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-807418713 posted

    Hello

    I tried Both Code Not working

    Is that any other javascript or jquery or any other code..?

    Waiting For Your Reply

    Thanking You

    Thursday, October 4, 2018 6:03 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-893317190 posted

    Hi Gopi.MCA,

    I find your code of gridview  has AllowPaging and PageSize property.It seems that you have made pagination ,why do you want to scroll at the same time?

    <asp:GridView ID="ItemGridView" runat="server" AutoGenerateColumns="false" 
            ShowHeader="true" AllowPaging="true"  PageSize="2" >

    The code should have no problem.I have made a test. 

    Below is the code.

     <div style="overflow-y: scroll; overflow-x: hidden; height: 400px; width: 1900px;" id="DV">

        <asp:GridView ID="ItemGridView" runat="server" AutoGenerateColumns="false" > 

            <HeaderStyle BackColor="Blue" Font-Bold="true" />
<Columns >
<asp:BoundField DataField="ITEMID" HeaderText="ITEMID">
                    <ItemStyle Width="100px" />
                   <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
                </asp:BoundField>
                <asp:BoundField DataField="DSC" HeaderText="DSC" >
                     <ItemStyle Width="100px" />
                    <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" />
                </asp:BoundField>
                <asp:BoundField DataField="ACTIVE" HeaderText="ACTIVE" >
                     <ItemStyle Width="100px" />
                    <ItemStyle  HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" />
                </asp:BoundField>
            </Columns>
            <SelectedRowStyle BackColor="#FBAF29" />
        </asp:GridView>
</div>
    
         <script>
             $(function () {        

         
                 $(window).keyup(function (e) {
                     console.log(e.keyCode)
                 
                       
                var keyCode = window.event ? e.keyCode : e.which;
              
                         if (keyCode == 35) {
                          $('#DV').animate({ scrollTop: $('#ItemGridView').height()  }, 1200);
                  
                           
                }
              
                     if (keyCode == 36) {
                         $('#DV').animate({ scrollTop: 0 }, 1200);


                     }     

            });


       })

    Code behind.

    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
// add 1500 recodes to the gridview
                ArrayList arrayList = new ArrayList();
                for (int i = 0; i < 1500; i++)
                {
                    arrayList.Add(new { itemid = i, dsc = i, active = "active" });
                }
                ItemGridView.DataSource = arrayList;
                ItemGridView.DataBind();
            }
        }

    The result.

    Best regards,

    Ackerly Xu

    Thursday, October 4, 2018 6:42 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1171043462 posted
    What is not working. Pls share what you have implemented.
    Thursday, October 4, 2018 6:53 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-807418713 posted

    Hello

    I Tried This Not Working Its not showing Gridview Footer

    Any Other Method..

    Thanking You

    Wednesday, October 10, 2018 6:37 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-893317190 posted

    Hi Gopi.MCA,

    Is your  only problem is that the gridview doesn't show gridview footer?

    Have your set the griview's showFooter property to true?

    By default, its false.

    Below is my code.

     <div style="overflow-y: scroll; overflow-x: hidden; height: 400px; width: 1900px;" id="DV">

        <asp:GridView ID="ItemGridView" runat="server" AutoGenerateColumns="false"  ShowFooter="true"> 

            <HeaderStyle BackColor="Blue" Font-Bold="true" />
<Columns >

    <asp:TemplateField HeaderText="ITEMID" >
        <ItemStyle Width="100px" />
                   <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
        <ItemTemplate>
            <%# Eval("itemid") %>
        </ItemTemplate>
        <FooterTemplate>

           footer of itemid
        </FooterTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="dsc" >
        <ItemStyle Width="100px" />
                   <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
        <ItemTemplate>
            <%# Eval("dsc") %>
        </ItemTemplate>
        <FooterTemplate>

           footer of dsc
        </FooterTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="active" >
        <ItemStyle Width="100px" />
                   <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
        <ItemTemplate>
            <%# Eval("active") %>
        </ItemTemplate>
        <FooterTemplate>

           footer of active
        </FooterTemplate>
    </asp:TemplateField>
 
              
            </Columns>
            <SelectedRowStyle BackColor="#FBAF29" />
        </asp:GridView>
</div>

         <script>
             $(function () {        

         
                 $(window).keyup(function (e) {
                     
                var keyCode = window.event ? e.keyCode : e.which;
                //End Key
                         if (keyCode == 35) {
                          $('#DV').animate({ scrollTop: $('#ItemGridView').height()  }, 1200);
                  
                           
                }
                //Home Key
                     if (keyCode == 36) {
                         $('#DV').animate({ scrollTop: 0 }, 1200);


                     }     

            });


       })
   </script>

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 10, 2018 6:55 AM