You must Sign In to post a response.
  • Category: ASP.NET

    AutoCompleteExtender scolling up and down with page scolling

    AutoCompleteExtender scolling up and down with page scolling

    hi,

    I have aspx page and i am using AutoCompleteExtender. when i run
    it is display data and suppose i not selected data from AutoCompleteExtender
    and start page scolling it is automatic scrolling with page up and down.
    So i want fixed position of AutoCompleteExtender with textbox of div. I am using
    bootstrap class for div.

    <style type="text/css">
    .viewLableStyle
    {
    padding-left: 5px;
    }
    .CompletionList
    {
    margin: 0px;
    border: 1px ridge #fecd04;
    padding: 0px;
    height: auto;
    max-height: 135px;
    overflow: auto;
    background-color: #FFFFFF;
    font-family: "Droid Sans" , Arial, verdana;
    color: White;
    border-radius: 0px 0 4px 4px;
    box-shadow: -5px 1px 10px -5px #000000,0 5px 10px -5px #000000,5px 1px 10px -5px #000000;
    }
    .ListItem
    {
    color: White;
    padding-left: 1px;
    background-color: #3498db;
    }
    .ItemHighlighted
    {
    color: White;
    background-color: #34495e;
    }
    </style>


    <div class="col-sm-4 form-group">
    <b>Farmer Name</b>
    <asp:TextBox ID="tbFarmerName" runat="server" placeholder="Start typing to search..."
    CssClass="form-control">
    </asp:TextBox>
    <asp:AutoCompleteExtender ID="aceFarmerName" runat="server" TargetControlID="tbFarmerName"
    MinimumPrefixLength="1" EnableCaching="false" CompletionSetCount="0" CompletionInterval="100"
    FirstRowSelected="false" CompletionListCssClass="CompletionList" CompletionListHighlightedItemCssClass="ItemHighlighted"
    CompletionListItemCssClass="ListItem" ServiceMethod="GetAutoCompleteFarmerName"
    >
    </asp:AutoCompleteExtender>
    </div>
  • #767468
    Have you tried with position property, it specifies the type of positioning method used for an element (static, relative, fixed or absolute).
    The position property specifies the type of positioning method used for an element.
    There are four different position values:
    -static
    -relative
    -fixed
    -absolute
    Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
    see below link
    http://www.w3schools.com/css/css_positioning.asp

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #767471
    Hi,
    Please go through this:
    http://forums.asp.net/p/1252391/2329113.aspx

    Here position of textbox is reset through javascript, each time when user scroll the page.

  • #767480
    Hi,

    For fixing gridview height and width the best and simple way is using Jquery, refer below sample code to accomplish your requirement.

    Add JQuery Plugins, for this we download from below link use the below link and download the plugins.
    http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

    http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js

    http://gridviewscroll.aspcity.idv.tw/

    After download JQuery plugins call that plugins using below lines of code

    <script type="text/javascript" src="../Scripts/jquery1.8.2.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery1.9.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    gridviewScroll();
    });

    function gridviewScroll() {
    $('#<%=GV.ClientID%>').gridviewScroll({
    width: 1100,
    height: 200
    });
    }
    </script>

    and design your gridview like below

    <asp:GridView runat="server" ID="GV"
    AutoGenerateColumns="false">
    <RowStyle BackColor="#EFF3FB" />
    <PagerStyle BackColor="#2461BF" ForeColor="White"
    HorizontalAlign="Center" /<
    <HeaderStyle CssClass="GVFixedHeader" />
    <FooterStyle CssClass="GVFixedFooter" />
    <AlternatingRowStyle BackColor="White" />
    <Columns>
    <asp:TemplateField HeaderText="Material" HeaderStyle-Width="8%">
    <ItemTemplate>
    <asp:Label ID="lblMaterial" runat="server" Text='<%# Bind_Material(Convert.ToString(Eval("Material")))%>'/>
    <asp:Label ID="lblMaterial_Id" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Material_Id") %>' Visible="false"/>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Items" HeaderStyle-Width="8%" HeaderStyle-HorizontalAlign="center">
    <ItemTemplate>
    <asp:Label ID="lblItem" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Item") %>'/>
    <asp:Label ID="lblItem_Id" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Item_Id") %>' Visible="false"/>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Grade" HeaderStyle-Width="8%" HeaderStyle-HorizontalAlign="center">
    <ItemTemplate>
    <asp:Label ID="lblGrade" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Grade") %>'/>
    <asp:Label ID="lblGrade_Id" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Grade_Id") %>' Visible="false"/>
    </ItemTemplate>
    </asp:TemplateField>

    </Columns>
    </asp:GridView>



    if you want to know more details then refer below article here I explained clearly how to accomplish this task.

    http://www.dotnetspider.com/resources/45021-Scrollable-GridView-using-JQuery.aspx

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/


Sign In to post your comments