locked
filling a textbox and search and find in gridview RRS feed

 > 

  • Question

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

    hello,

    i'm working with asp.net webforms and i have a gridview filled by sqldatasource ( i don't have code behinf to fill it ) and i want to search in a textbox by any thing i fill the textbox and being selected on the gridview 

    Thanks in advance.

    Omar.

    Wednesday, September 5, 2018 5:04 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi Omar27,

    According to your description, I suggest that you could write a search function in JS.

    The key point is to filter the datas which are displayed on page.

    I've made a sample on my side, and for more details, you could refer to the code below.

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript">
        function Search_Gridview(strKey) {
            var strData = strKey.value.toLowerCase().split(" ");
            var tblData = document.getElementById("<%=gvw.ClientID %>");
            var rowData;
            for (var i = 1; i < tblData.rows.length; i++) {
                rowData = tblData.rows[i].innerHTML;
                var styleDisplay = 'none';
                for (var j = 0; j < strData.length; j++) {
                    if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
                        styleDisplay = '';
                    else {
                        styleDisplay = 'none';
                        break;
                    }
                }
                tblData.rows[i].style.display = styleDisplay;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <br />
            Search :
            <asp:TextBox ID="TextBox5" runat="server" Font-Size="20px" onkeyup="Search_Gridview(this)"></asp:TextBox>
            <br />
            <asp:GridView ID="gvw" runat="server" CssClass="table table-bordered table-striped"
                BorderWidth="1px" BorderStyle="None" BorderColor="#DEBA84" ClientIDMode="Static" AllowPaging="True" AllowSorting="True" 
                AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
                <HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#428bca"></HeaderStyle>
                <Columns>
                    <asp:TemplateField HeaderText="Eid" SortExpression="Eid">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Eid") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("Eid") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Ename" SortExpression="Ename">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Ename") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("Ename") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="age" SortExpression="age">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("age") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label3" runat="server" Text='<%# Bind("age") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="sex" SortExpression="sex">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("sex") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label4" runat="server" Text='<%# Bind("sex") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EmployeeManagementConnectionString %>" SelectCommand="SELECT * FROM [tb_info]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 17, 2018 9:53 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    Omar27

    i'm working with asp.net webforms and i have a gridview filled by sqldatasource ( i don't have code behinf to fill it ) and i want to search in a textbox by any thing i fill the textbox and being selected on the gridview 

    Search is a common application feature and covered in the Getting Started and Working with Data tutorials found by clicking the learn link above.  I recommend going through a few tutorials to learn the basics.

    https://docs.microsoft.com/en-us/aspnet/web-forms/overview/presenting-and-managing-data/model-binding/sorting-paging-and-filtering-data

    https://www.asp.net/web-forms

    https://www.asp.net/web-forms/overview/presenting-and-managing-data

    If you are having a problem with code that you wrote, then post the code so we can have a basic idea of what you're doing.

    Wednesday, September 5, 2018 5:10 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi Omar27,

    According to your description, I suggest that you could write a search function in JS.

    The key point is to filter the datas which are displayed on page.

    I've made a sample on my side, and for more details, you could refer to the code below.

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript">
        function Search_Gridview(strKey) {
            var strData = strKey.value.toLowerCase().split(" ");
            var tblData = document.getElementById("<%=gvw.ClientID %>");
            var rowData;
            for (var i = 1; i < tblData.rows.length; i++) {
                rowData = tblData.rows[i].innerHTML;
                var styleDisplay = 'none';
                for (var j = 0; j < strData.length; j++) {
                    if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
                        styleDisplay = '';
                    else {
                        styleDisplay = 'none';
                        break;
                    }
                }
                tblData.rows[i].style.display = styleDisplay;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <br />
            Search :
            <asp:TextBox ID="TextBox5" runat="server" Font-Size="20px" onkeyup="Search_Gridview(this)"></asp:TextBox>
            <br />
            <asp:GridView ID="gvw" runat="server" CssClass="table table-bordered table-striped"
                BorderWidth="1px" BorderStyle="None" BorderColor="#DEBA84" ClientIDMode="Static" AllowPaging="True" AllowSorting="True" 
                AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
                <HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#428bca"></HeaderStyle>
                <Columns>
                    <asp:TemplateField HeaderText="Eid" SortExpression="Eid">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Eid") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("Eid") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Ename" SortExpression="Ename">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Ename") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("Ename") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="age" SortExpression="age">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("age") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label3" runat="server" Text='<%# Bind("age") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="sex" SortExpression="sex">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("sex") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label4" runat="server" Text='<%# Bind("sex") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EmployeeManagementConnectionString %>" SelectCommand="SELECT * FROM [tb_info]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 17, 2018 9:53 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1171043462 posted

    For proper Searching with Highlight on Keypress, you will need to use jquery AJAX

    Search GridView with Paging on TextBox KeyPress using jQuery in ASP.Net

    and for SqlDataSource search refer

    Filter GridView with TextBox using FilterExpression in SqlDataSource in ASP.Net

    Monday, September 17, 2018 1:56 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2094959909 posted

    Jenifer Jiang 

    Thanks for your help that worked

    Tuesday, September 18, 2018 7:56 PM