JQuery Search on Specific Gridview Columns when Using BoundField

Question

I am an intern at a company that has given me an assignment of creating a website that can access and manipulate company databases. It allows coworkers to easily study what code clients are using. The following problem has stumped the other developers and me.

Currently, the jQuery search works when no buttons or the "All" button is clicked, and searches the whole tables. The other buttons do not search yet. It does recognize the buttons, so it enters the if/else if statements, but does not recognize the name/class of the button.

The GridViews have the data bound to them using GrdiView.DataSource and DataBind() after selecting a name from a drop down list and use a get/set method for each column. As such, I was using BoundField with the DataField property rather than TemplateField.

Question: Is there a way to assign a name/class/value to a BoundField so jQuery could find the column cells? Or, is there a way to make TemplateField work?

$(document).on("keyup", function ()
{
    SearchGrid('<%=txtSearchBox.ClientID%>', '<%=grdIniData1.ClientID%>', 
    '<%=grdIniData2.ClientID%>');

    function SearchGrid(txtSearch, grd1, grd2)
    {           
      if ($("input:radio[name=Section]").is(":checked"))
        {
        //Tried adding a CSS class to BoundField 'Section' and calling
        $('.Section').each(function (i)
        {
            alert("hello");
            $("Section").quicksearch("[id*=grdList] tr:not(:has(th))",
            {
               'testQuery': function (query, txt, row)
                {
                  return $(row).children(":eq(" + i")").text().toLowerCase().
                  indexOf(query[0].toLowerCase()) != -1;
                }
             });
          });
      }

     else if ($("input:radio[name=Name]").is(":checked"))
     {
        //For name and IniValue, tried accessing by BoundField name
        //Unsure how to name BoundField so jQuery can access
        $('#name').each(function ()
        {
           if ($("Name").find('td').eq(1).text() != "")
           {
              $(this).index();
           }
         });
      }
      else if ($("input:radio[name=IniValue]").is(":checked"))
      {
         var searchKey = $("[id *=" + txtSearch + " ]").val().toLowerCase();
         $("#grd1 tr td:nth-child(2)").each(function ()
         {
            var cellText = $(("input:radio[name=IniValue]").
            is(":checked")).text().toLowerCase();
            if (cellText.indexOf(searchKey) >= 0)
            {
               $("[id *=" + grd1 + " ]").parent().show();
            }
            else
            {
               $("[id *=" + grd1 + " ]").parent().hide();
            }
         });
      }
      else 
      {
         //Code is functional after this point
       }

<asp:GridView ID="grdIniData2" runat="server" AllowSorting="True" AutoGenereateColumns="false" AutoSizeColumnsMode="AllCellsExceptHeader" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="0" GridLines="Vertical" OnRowDataBound="grdIniData2_RowDataBound" OnSelectedIndexChanged="ddlClientList2_SelectedIndexChanged" OnSorting="grdIniData2_Sort" Font-Bold="True" Font-Names="Sylfaen" Font-Size="24px">
    <Columns>
        <asp:BoundField DataField="Section" HeaderText="Section" SortExpression="Section" ControlStyle-CssClass="Section" />
        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
        <asp:BoundField DataField="INIValue" HeaderText="INIValue" SortExpression="IniValue" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:BoundField DataField="Exposed" HeaderText="Exposed" />
        <asp:BoundField DataField="DataType" HeaderText="DataType" />
        <asp:BoundField DataField="DataFormat" HeaderText="DataFormat" />
    </Columns>
</asp:GridView>

VDWWD VDWWD · Accepted Answer · 2017-07-20T17:40:38

You can assign classes to a BoundField.

<asp:BoundField DataField="DataFormat" HeaderText="DataFormat"
    ItemStyle-CssClass="MyCLass"
    HeaderStyle-CssClass="MyHeaderCLass" />

JQuery Search on Specific Gridview Columns when Using BoundField

1 Answers