locked
JQuery plugin to filter Gridview RRS feed

  • Question

  • User-809753952 posted

    Can anyone suggest a jquery plugin which can  filter  a gridview on cloumns?  The gridview is populated by a Sql datasource and it has its own sorting and pagination properties.

    Tuesday, September 22, 2020 9:04 AM

All replies

  • User-939850651 posted

    Hi mnmhemaj,

    Can anyone suggest a jquery plugin which can  filter  a gridview on cloumns?  The gridview is populated by a Sql datasource and it has its own sorting and pagination properties.

    According to your description, if you want to achieve these requirements, I think you could try to use DataTables.

    There are many examples, please refer to them.

    If I misunderstood what you mean, please let me know.

    Best regards,

    Xudong Peng

    Wednesday, September 23, 2020 8:26 AM
  • User-809753952 posted

    Hi XuDong

    Thanks for you reply. I tried that Datatables. But it is not working properly for me. I find it a little bit difficult to customize. As ASP.NET Gridview has its own sort, paging and filtering, I would like to use it. But I need an elegant css style like Datatable. 

     

    Wednesday, September 23, 2020 8:58 AM
  • User-939850651 posted

    Hi mnmhermaj,

    I find it a little bit difficult to customize. As ASP.NET Gridview has its own sort, paging and filtering, I would like to use it. But I need an elegant css style like Datatable. 

    If you need a suitable css style, I think you can get something you want from the Bootstrap table. And you could define the CssStyle property of ASP.NET GridView to apply these styles.

    A simple example:

    <head runat="server">
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
            .table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.03)}
        </style> <title></title> </head> <body> <form id="form1" runat="server"> <div class="container"> <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" Width="500" CellPadding="6" CssClass="table table-striped table-bordered table-hover"> <Columns> <asp:BoundField DataField="id" HeaderText="id" ItemStyle-CssClass="table-active"/> <asp:BoundField DataField="Name" HeaderText="Name"/> <asp:BoundField DataField="Age" HeaderText="Age"/> <asp:BoundField DataField="Gender" HeaderText="Gender"/> <asp:BoundField DataField="City" HeaderText="City"/> </Columns> </asp:GridView> </div> </form> </body>

    Result:

    You could also make some modifications to its style to achieve what you want.

    Best regards,

    Xudong Peng

    Friday, September 25, 2020 7:12 AM