locked
Gridview filter using jquery ajax without postback in asp.net RRS feed

All replies

  • User2101416554 posted

    Thanks i would like to do filter using dropdownlist how the link has mentioned ? Any tutorial is appreciated ...

    Thursday, February 20, 2020 10:28 AM
  • User2101416554 posted

    Thank i need the same in asp.net not with asp.net mvc ...

    Thursday, February 20, 2020 11:24 AM
  • Thursday, February 20, 2020 1:48 PM
  • User475983607 posted

    The UpdatePanel is specifically designed for use with server controls which require the ASP.NET page life cycle.  If you remove the UpdatePanel then you'll also need to redesign the entire web from page.  Can you explain why you want to make this rather large design change?  what problem does this change solve?

    Thursday, February 20, 2020 1:58 PM
  • User2101416554 posted

    The UpdatePanel is specifically designed for use with server controls which require the ASP.NET page life cycle.  If you remove the UpdatePanel then you'll also need to redesign the entire web from page.  Can you explain why you want to make this rather large design change?  what problem does this change solve?

    I have select2 dropdown list which get disappeared when update panel postback happens and i want to do using jquery as well.

     <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
    <ContentTemplate>
    
     <script src="app-assets/vendors/js/forms/select/select2.full.min.js" type="text/javascript"></script>
        <script src="app-assets/js/scripts/forms/select/form-select2.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="app-assets/vendors/css/forms/selects/select2.min.css">
        
          <script type="text/javascript">
              $(function () {
                  initdropdown();
              })
    
              function initdropdown() {
    
                  $('#DrpCustomer').select2();
    
              }
    </script>
    
        <script type="text/javascript">
            System.Application.add_load(initdropdown);
        </script>
    
    
     <asp:DropDownList ID="DrpCustomer" runat="server" class="select2 form-control success">
                                 
     </asp:DropDownList>
    
    
     <script src="app-assets/vendors/js/forms/select/select2.full.min.js" type="text/javascript"></script>
        <script src="app-assets/js/scripts/forms/select/form-select2.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="app-assets/vendors/css/forms/selects/select2.min.css">
    
    </ContentTemplate>
    <Triggers>  
    
    
    
    </Triggers>
    </asp:UpdatePanel>
    

    Friday, February 21, 2020 3:58 AM
  • User-1330468790 posted

    Hi, umerfaiz123@outlook.com,

     

    I have read the link you posted 

    https://forums.asp.net/t/2156799.aspx?Filter+Gridview+Data+Without+Postback+.

    I understand the reason why you don't want to use update panel as you said "the list disappeared when update panel postback happens". However, the dropdown list should not be disappeared when update panel postbacks, which I will show you in the below code. 

    How you could use update panel:

    As @mgebhard said, update panel is designed for server controls and you can just put the gridview in and dropdownlist outside. The grid view will be filtered by the selected value of the dropdownlist and executes the content withouth refresh the whole page.

    Error in your code for the drop down list:

    There is an error in your code which could be the reason of the problem you had. In your code, if you want to initiate the dropdown list with select2(), you should use the ClientID property of the dropdown list control instead of directly using "#DrpCustomer" because the id will be different from that you create in .aspx page. 

     

    You could find more details in below code.

    .aspx Page

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    
        <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    
        <script type="text/javascript">
            $(function () {
                initdropdown();
            })
    
            function initdropdown() {
    
                $('#<%= DrpCustomer.ClientID %>').select2();
    
            }
        </script>
    
    <asp:DropDownList ID="DrpCustomer" runat="server" class="select2 form-control success" AutoPostBack="true" OnSelectedIndexChanged="DrpCustomer_SelectedIndexChanged"> </asp:DropDownList> <asp:UpdatePanel ID="UpdatePanel1" runat="server" > <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="customer" HeaderText="Customer"/> <asp:BoundField DataField="group" HeaderText="Group"/> </Columns> </asp:GridView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="DrpCustomer" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> </asp:Content>


    Code-behind:

            // Data table is used for the data simulation
    private static DataTable _gvdt = null; public static DataTable GridViewDT { get { if(_gvdt == null) { _gvdt = new DataTable(); _gvdt.Columns.Add("customer", typeof(string)); _gvdt.Columns.Add("group", typeof(string)); _gvdt.Rows.Add("customer1", "A"); _gvdt.Rows.Add("customer2", "A"); _gvdt.Rows.Add("customer3", "B"); _gvdt.Rows.Add("customer4", "B"); _gvdt.Rows.Add("customer5", "C"); _gvdt.Rows.Add("customer6", "C"); } return _gvdt; } } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindGridView(""); BindDropDownList(); } }
    private void BindDropDownList() { DrpCustomer.DataTextField = "customer"; DrpCustomer.DataValueField = "customer"; DrpCustomer.DataSource = GridViewDT; DrpCustomer.DataBind(); } private void BindGridView(string customer) { if(customer == "") { GridView1.DataSource = GridViewDT; GridView1.DataBind(); } else { GridView1.DataSource = GetFilterData(customer); GridView1.DataBind(); } } private DataTable GetFilterData(string filter) { DataTable result = new DataTable(); result.Columns.Add("customer", typeof(string)); result.Columns.Add("group", typeof(string)); foreach (DataRow row in GridViewDT.Rows) { if(row["customer"].ToString() == filter) { result.Rows.Add(row["customer"],row["group"]); } } return result; } protected void DrpCustomer_SelectedIndexChanged(object sender, EventArgs e) { string filter = DrpCustomer.SelectedValue; BindGridView(filter); }

    Demo:

    Hope this can help you.

    Best regards,

    Sean

    Saturday, February 22, 2020 3:20 AM