Click here to Skip to main content
15,885,366 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
Dear Sir,

I have a textbox outside the gridview for search using autosearch. i need What ever i typed in the textbox it will be also dynamically load in the gridview.How?Please give me the example.
Posted

Hi,

Refer this link
 
Share this answer
 
Step 1:-

Add these javascript and Jquery in header section :-

JavaScript
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
        <script type="text/javascript">
      
        $(document).ready(function () {
            // The code block is used to ignore case
            $.extend($.expr[":"], {
                "containsNC": function (elem, i, match, array) {
                    return (elem.textContent || elem.innerText || "").toLowerCase
                    ().indexOf((match[3] || "").toLowerCase()) >= 0;
                }
            });
            // End The code block is used to ignore case


            //If you want to maintain case, use :contains( instead of :containsNC( below-
            $("input.selectorCSS[type=text]").keyup(function () {
                var id = $(this).attr("id");
                id = id.substring(id.lastIndexOf('_'));
                $("span[id*=" + id + "]").closest("tr").show();
                if ($.trim($(this).val()) != "")
                    $("span[id*=" + id + "]:not(:containsNC(" + $(this).val() + "))").closest("tr").hide();
            });
        });
    </script>


Step 2

HTML Code :-

XML
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:TextBox ID="FirstName" CssClass="selectorCSS" runat="server"></asp:TextBox>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label ID="FirstName" runat="server" Text='<%#Eval("FirstName")%>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:TextBox ID="MiddleName" CssClass="selectorCSS" runat="server"></asp:TextBox>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label ID="MiddleName" runat="server" Text='<%#Eval("MiddleName")%>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:TextBox ID="LastName" CssClass="selectorCSS" runat="server"></asp:TextBox>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label ID="LastName" runat="server" Text='<%#Eval("LastName")%>' />
                </ItemTemplate>
            </asp:TemplateField>

        </Columns>
    </asp:GridView>


Step 3 :-
Add these code in Page_Load section
C#
var obj = new { FirstName = "Ravi", MiddleName = "Kumar", LastName = "Singh" };
           var objList = (new[] { obj }).ToList();
           objList.Add(new { FirstName = "Rajesh", MiddleName = "Mourya", LastName = "Roy" });
           objList.Add(new { FirstName = "Rupesh", MiddleName = "Kumar", LastName = "Chaudhary" });
           objList.Add(new { FirstName = "Madhu", MiddleName = "Kumari", LastName = "Smita" });
           objList.Add(new { FirstName = "Ramesh", MiddleName = "Kr", LastName = "Maurya" });
           objList.Add(new { FirstName = "Rajiv", MiddleName = "Roy", LastName = "Singh" });
           objList.Add(new { FirstName = "Komal", MiddleName = "Mulayam", LastName = "Yadav" });
           GridView1.DataSource = objList;
           GridView1.DataBind();
 
Share this answer
 
v4

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900