Wednesday, September 10, 2008

OboutGrid Search implementation in Content Page:

1) Add required text boxes
<table>
<tr>
<td>LoginName </td>
<td>
<asp:TextBox ID="txtLoginName" runat="server"></asp:TextBox></td>
<td>LastName </td>
<td><asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br /></td>
</tr>
<tr>
<td>FirstName </td>
<td><asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox> </td>
<td colspan="2" align=center><asp:Button ID="BtnSearch" runat="server" Text="Search Me"/></td>
</tr>
</table>

2) Add properties to get ClientId for each search textBox in Codebehind(aspx.cs file)


#region properties
/// <summary>
/// The ID of the FirstName Text Box
/// </summary>
public string FirstNameID
{
get { return txtFirstName.ClientID; }
}
/// <summary>
/// The ID of the LastName Text Box
/// </summary>
public string LastNameID
{
get { return txtLastName.ClientID; }
}
/// <summary>
/// The ID of the Login Text Box
/// </summary>
public string LoginNameID
{
get { return txtLoginName.ClientID; }
}

#endregion properties


3) Add onclick client event to search button on Page_Load event


protected void Page_Load(object sender, EventArgs e)
{
BtnSearch.Attributes["onclick"] = "filterGrid()"; //Client Side event.

if(!IsPostBack)
{
FillGrid();
}
}

4) Add filterGrid() Javascript method on ASPX page with properties defined for each text box

<script type="text/javascript">
function filterGrid() {
Grid1.addFilterCriteria('LoginId', OboutGridFilterCriteria.StartsWith, document.getElementById('<%= LoginNameID %>').value);
Grid1.addFilterCriteria('LastName', OboutGridFilterCriteria.StartsWith, document.getElementById('<%= LastNameID %>').value);
Grid1.addFilterCriteria('FirstName', OboutGridFilterCriteria.StartsWith, document.getElementById('<%= FirstNameID %>').value);
Grid1.executeFilter();
}
</script>

No comments: