2
Answers

Asp.net and jQuery

Hi Friends,
 
Iam doing one web application, in that i hav to filter gridview,
i hav done one sample gridview filter using jQuery, it works fine.
 
but whn im doing in main application i got error as "javascript runtime error:Object doesnt support property or method, quicksearch" 
 
i am getting error in this set of code: 
my code is:
   <asp:GridView ID="dgvDeplymentReport" runat="server" AutoGenerateColumns="false" OnDataBound="OnDataBound"
   HeaderStyle-BackColor="#87CEFA" OnRowDataBound="dgvDeplymentReport_RowDataBound"
   OnRowDeleting="dgvDeplymentReport_RowDeleting" OnRowEditing="dgvDeplymentReport_RowEditing">
   <Columns>
   <asp:CommandField ShowEditButton="true" ButtonType="Image" EditImageUrl="~/App_Themes/Themes/images/edit.jpg" />
   <asp:CommandField ShowDeleteButton="true" ButtonType="Image" DeleteImageUrl="~/App_Themes/Themes/images/delete.jpg" />
   <asp:BoundField DataField="COUNTRY_NM" HeaderText="CountryName" ItemStyle-Width="100" />
   <asp:BoundField DataField="LOB_NAME" HeaderText="LOBName" ItemStyle-Width="30" />
   </Columns>
   <HeaderStyle BackColor="LightSkyBlue" />
   </asp:GridView>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript" src="quicksearch.js"></script>
   <script type="text/javascript">
   $(function() {
   $('.search_textbox').each(function(i) {
   $(this).quicksearch("[id*=dgvDeplymentReport] tr:not(:has(th))", {
   'testQuery': function(query, txt, row) {
   return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
   }
   });
   });
   });
   </script>
 
same as i did in sample app as fallows:
 
   <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
   runat="server" AutoGenerateColumns="false" OnDataBound="OnDataBound">
      <Columns>
   <asp:BoundField DataField="COUNTRY_ID" HeaderText="Country ID" ItemStyle-Width="30" />
   <asp:BoundField DataField="COUNTRY_NM" HeaderText="Country Name" ItemStyle-Width="100" />
   <asp:BoundField DataField="COUNTRY_ABBRV" HeaderText="Country Abbreviation" ItemStyle-Width="100" />
   </Columns>
   </asp:GridView>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript" src="qsearch.js"></script>
   <script type="text/javascript">
   $(function () {
   $('.search_textbox').each(function (i) {
   $(this).quicksearch("[id*=GridView1] tr:not(:has(th))", {
   'testQuery': function (query, txt, row) {
   return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
   }
   }   );   
   });
   });
   </script>
 i added plugin also..
 
source code:
protected void OnDataBound(object sender, EventArgs e)
{
GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
for (int i = 0; i < GridView1.Columns.Count; i++)
{
TableHeaderCell cell = new TableHeaderCell();
TextBox txtSearch = new TextBox();
txtSearch.Attributes["placeholder"] = GridView1.Columns[i].HeaderText;
txtSearch.CssClass = "search_textbox";
cell.Controls.Add(txtSearch);
row.Controls.Add(cell);
}
GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
}
 i hav added jQry plugin also..
Pls help me
Thanks in Advance.. 
 note i referred this link:http://www.aspsnippets.com/Articles/Search-GridView-records-data-on-TextBox-KeyPress-using-jQuery-in-ASPNet.aspx
 

Answers (2)