Save state of gridview when using JavaScript filtering in asp.net c#

Question

I'm using javascript to filter my gridview and it works great. The problem is when I click on the gridview to edit an item, it postback and the filtered table is now unfiltered. How can I keep the state of the gridview when using the javascript filter?

Javascript:

<script type="text/javascript">
    function myFunction() {
        //Searcing the table 
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("<%=txtSearch.ClientID %>");
         filter = input.value.toUpperCase();
         table = document.getElementById("<%=gridList.ClientID %>");
        tr = table.getElementsByTagName("tr");

        // 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");

            if (td.length > 0) { // to avoid th 

                //Search the specific column
                if (
                    td[0].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[1].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[2].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[3].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[4].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>

ASP:

<asp:TextBox ID="txtSearch" runat="server" class="form-control" Visible="true" Width="250px" placeholder="Enter Search Term..." onkeyup="myFunction()"/>

<asp:GridView ID="gridList" runat="server" HorizontalAlign="left" ShowHeader="True" AutoGenerateColumns="false" GridLines="None"
    OnRowEditing="gridList_RowEditing" OnRowCancelingEdit="gridListt_RowCancelingEdit" OnRowUpdating="gridList_RowUpdating">
    <Columns>
        <asp:TemplateField ItemStyle-HorizontalAlign="left" HeaderText="User">
            <ItemTemplate>
                <asp:Label ID="user" Visible="true" runat="server" Text='<%# Eval("User") %> ' />
            </ItemTemplate>

            <EditItemTemplate>
                <asp:TextBox ID="txtUser" class="form-control" runat="server" Text='<%# Eval("User") %> '></asp:TextBox>
            </EditItemTemplate>

        </asp:TemplateField>

        <asp:CommandField ButtonType="Link" ShowEditButton="true" ShowDeleteButton="true" HeaderText="Modify"
            EditText="<span style='font-size: 20px; color: #27ae60;'><span class='glyphicons glyph-edit'></span></span>"
            DeleteText="<span style='font-size: 18px; color: #c0392b;'><span class='glyphicons glyph-bin'></span></span>"
            CancelText="<span style='font-size: 20px; color: #7f8c8d;'><span class='glyphicons glyph-remove-2'></span></span>"
            UpdateText="<span style='font-size: 20px; color: #2980b9;'><span class='glyphicons glyph-floppy-saved'></span></span>" />
    </Columns>
</asp:GridView>

c# editing a row for example:

protected void gridListt_RowEditing(object sender, GridViewEditEventArgs e)
{
    gridListGiftList.EditIndex = e.NewEditIndex;
    //I need to somehow load the filtered javascript state of the table here rather than the full table
    DataSet dsList = objuser.GetList(0);
    gridList.DataSource = dsList.Tables[0];
    gridList.DataBind();
}

HBlackorby · Accepted Answer · 2020-01-27 15:56:23Z

1

+50

Assuming txtSearch is an ASP.NET control, it should retain its state on a postback. I'm assuming the search box doesn't get cleared out when you save a row.

Why not just run myFunction() on window.onload in addition to the button click event that already runs it.. Then add a conditional in it to check for blank search values before executing your code:

    function myFunction() {
    //Searcing the table 
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("txtSearch");
    filter = input.value.toUpperCase();
    table = document.getElementById("gridList");
    tr = table.getElementsByTagName("tr");
    if (input.value != "") {
       for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        if (td.length > 0) { // to avoid th 
            //Search the specific column
            if (  td[0].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[1].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[2].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[3].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[4].innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }           
       }
    }
    else {
            for (i = 0; i < tr.length; i++) {
                tr[i].style.display = "";
            }
        }
    }    
    window.onload = myFunction;

edited Jan 27, 2020 at 15:56

answered Jan 24, 2020 at 17:16

HBlackorby

1,3361 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Charles Xavier Over a year ago

It works good but if I try to re-search, it'll only show results from the filtered search results and not from the full gridview.

HBlackorby Over a year ago

Add an else check then to the if conditional. I've updated my code above.

HBlackorby Over a year ago

Can you update your code with your search box and with the JavaScript that binds the function to it? You are only providing code snippets. I don't see the box or associated function binding to know how the search is being executed.

Charles Xavier Over a year ago

sorry I just added it.

HBlackorby Over a year ago

There was an issue with the }, sorry. I updated it above, and you can see the working JS here: codepen.io/hblackorby/pen/YzPMNvJ

|

VDWWD · Accepted Answer · 2020-01-24 17:49:44Z

0

Assuming your txtSearch looks like this

<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>

Then you simply have to check in code behind if there is a PostBack and if the TextBox has a Value. Then use ScriptManager to execute myFunction() again. I've placed the code in Page_Load, but you could also place it in gridListt_RowEditing

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack && !string.IsNullOrEmpty(txtSearch.Text))
    {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "reFilter", "myFunction()", true);
    }
}

However if you are doing self build sorting and filtering stuff on a html table, I would recommend looking into DataTables.net

answered Jan 24, 2020 at 17:49

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

2 Comments

Charles Xavier Over a year ago

It works good but if I try to re-search, it'll only show results from the filtered search results and not from the full gridview.

VDWWD Over a year ago

It works fine here.... But again, use DataTables.net! Much easier and cleaner that self build solutions. It saves states in cookies so even if the user navigates away and comes back the filter is still active.

Jin Thakur · Accepted Answer · 2020-01-29 20:11:49Z

0

Please try following. There should be no post back on grid view.Even edit should happen through api methods via Ajax.

As someone mentioned use https://datatables.net/ it is a good approach. Instead of using gridview use api enabled solution

The other way is when you filter anything save it in a hidden field and read it from server side post back and implement same filtering from server side (harder way).

I cannot provide code at this time.But I had implemented it in past.

answered Jan 29, 2020 at 20:11

Jin Thakur

2,81322 silver badges16 bronze badges

Collectives™ on Stack Overflow

Save state of gridview when using JavaScript filtering in asp.net c#

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related