Filter Data in Repeater

Question

User746671234 posted

Hi, I am binding data from code behind into repeater and I want to add a drop down to filter data without postback 

Here is my code

Dim table As New DataTable
table.Columns.Add("SNo", GetType(Integer))
table.Columns.Add("Part", GetType(String))
table.Columns.Add("Balance", GetType(Integer))
table.Columns.Add("mType", GetType(String))

table.Rows.Add(1, "AMOUNT RECEIVED", 1000,"R" )
table.Rows.Add(1, "AMOUNT RECEIVED", 2000,"R" )
table.Rows.Add(1, "AMOUNT RECEIVED", 3000,"R" )
table.Rows.Add(1, "AMOUNT RECEIVED", 5000,"R" )
table.Rows.Add(1, "AMOUNT PAID", 1000,"P" )
table.Rows.Add(1, "AMOUNT PAID", 1000,"P" )
table.Rows.Add(1, "AMOUNT PAID", 1000,"P" )
table.Rows.Add(1, "AMOUNT DEDUCTED", 1000,"D" )
table.Rows.Add(1, "AMOUNT DEDUCTED", 1000,"D" )
table.Rows.Add(1, "AMOUNT DEDUCTED", 1000,"D" )

Repeater.DataSource = table
Repeater.DataBind()

My HTML Code

<table class="table table-bordered" style="">
	<thead class="thback">
        	<tr>
                	<th class="t-center">SNo</th>
                        <th class="t-center">Particulars</th>
                        <th class="t-center">Turnover</th>
			<th class="t-center">Type</th>
                </tr>
	</thead>
        <asp:Repeater ID="Repeater" runat="server">
		<ItemTemplate>
                <tr class="tbrowback">
                	<td><%#Eval("SNo")%></td>
                        <td><%#Eval("Part")%></td>
                        <td><%#Eval("Balance")%></td>                                        
                        <td><%#Eval("mType")%></td>                                        
		</tr>
		</ItemTemplate>
	</asp:Repeater>
</table>

Now I have to add a drop down which will contain types like "ALL", "R" ,"P" and "D" and I want to filter repeater data as per drop down selections. 

But I don't want post back on this page.  Can anyone suggest me any URL or any piece of code.?

Answer 1

User1535942433 posted

Hi ravininave,

Accroding to your codes,I suggest you could put them in the updatepanel and set  AutoPostBack="true" on the DropDownList.

More details ,you could refer to below codes:

ASPX:

<div>

            <asp:ScriptManager runat="server"></asp:ScriptManager>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                <ContentTemplate>

                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

                        <asp:ListItem Selected="True" Value="ALL">ALL</asp:ListItem>

                        <asp:ListItem Value="R">R</asp:ListItem>

                        <asp:ListItem Value="P">P</asp:ListItem>

                        <asp:ListItem Value="D">D</asp:ListItem>

                    </asp:DropDownList>

                    <table class="table table-bordered" style="">

                        <thead class="thback">

                            <tr>

                                <th class="t-center">SNo</th>

                                <th class="t-center">Particulars</th>

                                <th class="t-center">Turnover</th>

                                <th class="t-center">Type</th>

                            </tr>

                        </thead>

                        <asp:Repeater ID="Repeater" runat="server">

                            <ItemTemplate>

                                <tr class="tbrowback">

                                    <td><%#Eval("SNo")%></td>

                                    <td><%#Eval("Part")%></td>

                                    <td><%#Eval("Balance")%></td>

                                    <td><%#Eval("mType")%></td>

                                </tr>

                            </ItemTemplate>

                        </asp:Repeater>

                    </table>

                </ContentTemplate>

            </asp:UpdatePanel>

 

        </div>

 

Code-behind:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

    Dim table As DataTable = New DataTable()

    table.Columns.Add("SNo", GetType(Int32))

    table.Columns.Add("Part", GetType(String))

    table.Columns.Add("Balance", GetType(Int32))

    table.Columns.Add("mType", GetType(String))

    table.Rows.Add(1, "AMOUNT RECEIVED", 1000, "R")

    table.Rows.Add(1, "AMOUNT RECEIVED", 2000, "R")

    table.Rows.Add(1, "AMOUNT RECEIVED", 3000, "R")

    table.Rows.Add(1, "AMOUNT RECEIVED", 5000, "R")

    table.Rows.Add(1, "AMOUNT PAID", 1000, "P")

    table.Rows.Add(1, "AMOUNT PAID", 1000, "P")

    table.Rows.Add(1, "AMOUNT PAID", 1000, "P")

    table.Rows.Add(1, "AMOUNT DEDUCTED", 1000, "D")

    table.Rows.Add(1, "AMOUNT DEDUCTED", 1000, "D")

    table.Rows.Add(1, "AMOUNT DEDUCTED", 1000, "D")

    Repeater.DataSource = table

    Repeater.DataBind()

End Sub

 

 Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)

    Dim table As DataTable = New DataTable()

    table.Columns.Add("SNo", GetType(Int32))

    table.Columns.Add("Part", GetType(String))

    table.Columns.Add("Balance", GetType(Int32))

    table.Columns.Add("mType", GetType(String))

 

    If DropDownList1.SelectedItem.Value = "ALL" Then

        Repeater.DataSource = table

        Repeater.DataBind()

    ElseIf DropDownList1.SelectedItem.Value = "R" Then

        table.Rows.Add(1, "AMOUNT RECEIVED", 1000, "R")

        table.Rows.Add(1, "AMOUNT RECEIVED", 2000, "R")

        table.Rows.Add(1, "AMOUNT RECEIVED", 3000, "R")

        table.Rows.Add(1, "AMOUNT RECEIVED", 5000, "R")

        Repeater.DataSource = table

        Repeater.DataBind()

    ElseIf DropDownList1.SelectedItem.Value = "P" Then

        table.Rows.Add(1, "AMOUNT PAID", 1000, "P")

        table.Rows.Add(1, "AMOUNT PAID", 1000, "P")

        table.Rows.Add(1, "AMOUNT PAID", 1000, "P")

        Repeater.DataSource = table

        Repeater.DataBind()

    Else

        table.Rows.Add(1, "AMOUNT DEDUCTED", 1000, "D")

        table.Rows.Add(1, "AMOUNT DEDUCTED", 1000, "D")

        table.Rows.Add(1, "AMOUNT DEDUCTED", 1000, "D")

        Repeater.DataSource = table

        Repeater.DataBind()

    End If

End Sub

Link :https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.updatepanel?view=netframework-4.8

Result:

Best regards,

Yijing Sun

Answer 2

User746671234 posted

Yeh, but I don't want to use .NET Ajax and I've disabled viewstate on the page.  Can you suggest something like JQuery

Answer 3

User475983607 posted

But I don't want post back on this page.  Can anyone suggest me any URL or any piece of code.?

https://www.w3schools.com/howto/howto_js_filter_table.asp

Answer 4

User746671234 posted

Yes, but it's not Category Wise.  It's filtering Data.  In my case all Particulars fields have type.

Answer 5

User475983607 posted

ravininave

Yes, but it's not Category Wise.  It's filtering Data.  In my case all Particulars fields have type.

Huh?  With a few very minor changes the example code is fits your requirement perfectly.   

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="RepeaterDemo.aspx.vb" Inherits="VbWebApplication.RepeaterDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server" onchange="myFunction()">
                <asp:ListItem Text="ALL" Value="All" />
                <asp:ListItem Text="R" Value="R" />
                <asp:ListItem Text="P" Value="P" />
                <asp:ListItem Text="D" Value="D" />
            </asp:DropDownList>
        </div>
        <hr />
        <div>
            <table id="myTable" class="table table-bordered" style="">
                <thead class="thback">
                    <tr>
                        <th class="t-center">SNo</th>
                        <th class="t-center">Particulars</th>
                        <th class="t-center">Turnover</th>
                        <th class="t-center">Type</th>
                    </tr>
                </thead>
                <asp:Repeater ID="Repeater" runat="server">
                    <ItemTemplate>
                        <tr class="tbrowback">
                            <td><%#Eval("SNo")%></td>
                            <td><%#Eval("Part")%></td>
                            <td><%#Eval("Balance")%></td>
                            <td><%#Eval("mType")%></td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </table>
        </div>
    </form>

    <script>
        function myFunction() {
            // Declare variables
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("<%=DropDownList1.ClientId%>");
            filter = input.value.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");

            console.log(input);

            // Loop through all table rows, and hide those who don't match the search query
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[3];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1 | filter == "ALL") {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    </script>
</body>
</html>

Answer 6

User746671234 posted

Yes, it must work.  Thank you mate.  I will check into it and let you know