Adding Filter to Gridview Header for some of the columns
I have a Gridview in which the column header has merged rows and columns and sorting on some of the columns. I have to add filtering to 6 of the 11 columns. Two of the columns will just be text filtering for the other 4 columns are dates and need to search a date range.
What I have found is that I can add a HeaderTemplate to the column and include a text box in at least the text columns that need to be searched. I added this to one of the columns and the text box is not appearing. This column had to have 2 rows merged and I added a LinkButton for sorting. I don't know if this is a good approach or possible. Lastly, I don't know how to do the date range using this method. I don't know if it is possible to put 2 textboxes in the header template within one column or is there a better way.
This is my current Gridview:
<asp:GridView ID="SectionGridView" runat="server" AllowSorting="True" AutoGenerateColumns="False" Caption="Section Information" CaptionAlign="Top"
CssClass="grid" HorizontalAlign="Left" ShowFooter="True" AllowPaging="True" PageSize="4" ShowHeaderWhenEmpty="true"
OnPageIndexChanging="SectionGridView_PageIndexChanging" OnRowDataBound="SectionGridView_RowDataBound" OnRowCommand="SectionGridView_RowCommand"
OnRowCancelingEdit="SectionGridView_RowCancelingEdit" OnRowEditing="SectionGridView_RowEditing" OnRowUpdating="SectionGridView_RowUpdating"
OnRowDeleting="SectionGridView_RowDeleting" OnRowCreated="SectionGridView_RowCreated" OnSorting="SectionGridView_Sorting">
<Columns>
<asp:TemplateField HeaderText="SectionID" SortExpression="SectionID" >
<ItemTemplate>
<asp:Label ID="sgvLblSectionID" runat="server" Text='<%# Bind("SectionID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CourseID" ControlStyle-Width="20px">
<EditItemTemplate>
<asp:DropDownList ID="sgvDdlCourseID" runat="server" ></asp:DropDownList>
<asp:Label ID="sgvEditLblCourseID" runat="server" Visible="false" Text='<%# Bind("CourseID") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="sgvLblCourseID" runat="server" Text='<%# Bind("CourseID") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="sgvInsertCourseID" runat="server" ReadOnly="true" Width="90%"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name" SortExpression="Name">
<HeaderTemplate>
<asp:TextBox runat="server" ID="txtBoxNameFilter" AutoPostBack="true" OnTextChanged="txtBoxNameFilter_TextChanged">
</asp:TextBox>
</HeaderTemplate>
<EditItemTemplate>
<asp:TextBox ID="sgvEditName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValEditName" ControlToValidate="sgvEditName" runat="server"
ErrorMessage="Required field." ValidationGroup="EditSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValEditName" ControlToValidate="sgvEditName" runat="server"
ErrorMessage="Maximum length is 255." ValidationGroup="EditSectionValidation" ValidationExpression="^.{1,255}$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="sgvLblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="sgvInsertName" runat="server" Width="90%"></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValInsertName" ControlToValidate="sgvInsertName" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValInsertName" ControlToValidate="sgvInsertName" runat="server"
ErrorMessage="Maximum length is 255." ValidationGroup="InsertSectionValidation" ValidationExpression="^.{1,255}$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</FooterTemplate>
<HeaderStyle ForeColor="Black" />
</asp:TemplateField>
<asp:TemplateField HeaderText="SKU" SortExpression="SKU">
<EditItemTemplate>
<asp:TextBox ID="sgvEditSKU" runat="server" Text='<%# Bind("SKU") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValEditSKU" ControlToValidate="sgvEditSKU" runat="server"
ErrorMessage="Required field." ValidationGroup="EditSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValEditSKU" ControlToValidate="sgvEditSKU" runat="server"
ErrorMessage="Enter alphanumeric, hyphen, or forward slash. Maximum length is 100." ValidationGroup="EditSectionValidation" ValidationExpression="^[\w-/]{1,100}$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="sgvLblSKU" runat="server" Text='<%# Bind("SKU") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="sgvInsertSKU" runat="server" Width="90%"></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValInsertSKU" ControlToValidate="sgvInsertSKU" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValInsertSKU" ControlToValidate="sgvInsertSKU" runat="server"
ErrorMessage="Enter alphanumeric, hyphen, or forward slash. Maximum length is 100." ValidationGroup="InsertSectionValidation" ValidationExpression="^[\w-/]{1,100}$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</FooterTemplate>
<HeaderStyle ForeColor="Black" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Open Date" SortExpression="RegistrationOpen">
<EditItemTemplate>
<asp:TextBox ID="sgvEditRegOpenDate" runat="server" CssClass="datepick" Text='<%# Bind("RegistrationOpen", "{0:MM-dd-yyyy}") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="sgvLblRegOpenDate" runat="server" Text='<%# Bind("RegistrationOpen", "{0:MM-dd-yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="sgvInsertRegOpenDate" runat="server" CssClass="datepick" Width="90%" ></asp:TextBox>
</FooterTemplate>
<HeaderStyle ForeColor="Black" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Close Date" SortExpression="RegistrationClose">
<EditItemTemplate>
<asp:TextBox ID="sgvEditRegCloseDate" runat="server" CssClass="datepick" Text='<%# Bind("RegistrationClose", "{0:MM-dd-yyyy}") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="sgvLblRegCloseDate" runat="server" Text='<%# Bind("RegistrationClose", "{0:MM-dd-yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="sgvInsertRegCloseDate" runat="server" CssClass="datepick" Width="90%"></asp:TextBox>
</FooterTemplate>
<HeaderStyle ForeColor="Black" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Start Date" SortExpression="SectionStart">
<EditItemTemplate>
<asp:TextBox ID="sgvEditSecStartDate" runat="server" CssClass="datepick" Text='<%# Bind("SectionStart", "{0:MM-dd-yyyy}") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="sgvLblSecStartDate" runat="server" Text='<%# Bind("SectionStart", "{0:MM-dd-yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="sgvInsertSecStartDate" runat="server" CssClass="datepick" Width="90%"></asp:TextBox>
</FooterTemplate>
<HeaderStyle ForeColor="Black" />
</asp:TemplateField>
<asp:TemplateField HeaderText="End Date" SortExpression="SectionEnd">
<EditItemTemplate>
<asp:TextBox ID="sgvEditSecEndDate" runat="server" CssClass="datepick" Text='<%# Bind("SectionEnd", "{0:MM-dd-yyyy}") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="sgvLblSecEndDate" runat="server" Text='<%# Bind("SectionEnd", "{0:MM-dd-yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="sgvInsertSecEndDate" runat="server" CssClass="datepick" Width="90%"></asp:TextBox>
</FooterTemplate>
<HeaderStyle ForeColor="Black" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Member">
<EditItemTemplate>
<asp:TextBox ID="sgvEditMemberPrice" runat="server" Text='<%# Bind("MemberPrice", "{0:f}") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValEditMemberPrice" ControlToValidate="sgvEditMemberPrice" runat="server"
ErrorMessage="Required field." ValidationGroup="EditSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValEditMemberPrice" ControlToValidate="sgvEditMemberPrice" runat="server"
ErrorMessage="Enter currency format." ValidationGroup="EditSectionValidation" ValidationExpression="^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="sgvLblMemberPrice" runat="server" Text='<%# Bind("MemberPrice", "{0:C}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="sgvInsertMemberPrice" runat="server" Width="90%"></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValInsertMemberPrice" ControlToValidate="sgvInsertMemberPrice" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValInsertMemberPrice" ControlToValidate="sgvInsertMemberPrice" runat="server"
ErrorMessage="Enter currency format." ValidationGroup="InsertSectionValidation" ValidationExpression="^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</FooterTemplate>
<HeaderStyle ForeColor="Black" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Non-member">
<EditItemTemplate>
<asp:TextBox ID="sgvEditNonMemberPrice" runat="server" Text='<%# Bind("NonMemberPrice", "{0:f}") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValEditNonMemberPrice" ControlToValidate="sgvEditNonMemberPrice" runat="server"
ErrorMessage="Required field." ValidationGroup="EditSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValEditNonMemberPrice" ControlToValidate="sgvEditNonMemberPrice" runat="server"
ErrorMessage="Enter currency format." ValidationGroup="EditSectionValidation" ValidationExpression="^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="sgvLblNonMemberPrice" runat="server" Text='<%# Bind("NonMemberPrice", "{0:C}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="sgvInsertNonMemberPrice" runat="server" Width="90%"></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValInsertNonMemberPrice" ControlToValidate="sgvInsertNonMemberPrice" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValInsertNonMemberPrice" ControlToValidate="sgvInsertNonMemberPrice" runat="server"
ErrorMessage="Enter currency format." ValidationGroup="InsertSectionValidation" ValidationExpression="^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</FooterTemplate>
<HeaderStyle ForeColor="Black" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ShowHeader="False">
<EditItemTemplate>
<asp:Button ID="sgvUpdateButton" runat="server" CausesValidation="True" ValidationGroup="EditSectionValidation" CommandName="Update" Text="Update"></asp:Button>
<asp:Button ID="sgvCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:Button>
</EditItemTemplate>
<ItemTemplate>
<asp:Button ID="sgvEditButton" runat="server" CausesValidation="false" CommandName="Edit" Text="Edit" Width="40%"></asp:Button>
<asp:Button ID="sgvDeleteButton" runat="server" CausesValidation="false" CommandName="Delete" Text="Delete"
OnClientClick="return confirm('Are you sure you want to delete this Section Information?')" Width="40%"></asp:Button>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<FooterTemplate>
<asp:Button ID="sgvBtnAdd" runat="server" CommandName="Add" Text="Add Section" Width="90%" CausesValidation="true" ValidationGroup="InsertSectionValidation" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<tr>
<td colspan="11" style="text-align:center;">
No section data was found for this course. Sections can be added to this course by clicking the 'Add Section' Button.
</td>
</tr>
<tr>
<td></td>
<td><asp:TextBox ID="sgvInsertCourseID" runat="server" ReadOnly="true" Width="90%"></asp:TextBox></td>
<td><asp:TextBox ID="sgvInsertName" runat="server" Width="90%"></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValInsertNameEmpty" ControlToValidate="sgvInsertName" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValInsertNameEmpty" ControlToValidate="sgvInsertName" runat="server"
ErrorMessage="Maximum length is 255." ValidationGroup="InsertSectionValidation" ValidationExpression="^.{1,255}$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</td>
<td><asp:TextBox ID="sgvInsertSKU" runat="server" Width="90%"></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValInsertSKUEmpty" ControlToValidate="sgvInsertSKU" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValInsertSKUEmpty" ControlToValidate="sgvInsertSKU" runat="server"
ErrorMessage="Enter alphanumeric, hyphen, or forward slash. Maximum length is 100." ValidationGroup="InsertSectionValidation" ValidationExpression="^[\w-/]{1,100}$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</td>
<td><asp:TextBox ID="sgvInsertRegOpenDate" runat="server" CssClass="datepick" Width="90%"></asp:TextBox></td>
<td><asp:TextBox ID="sgvInsertRegCloseDate" runat="server" CssClass="datepick" Width="90%"></asp:TextBox></td>
<td><asp:TextBox ID="sgvInsertSecStartDate" runat="server" CssClass="datepick" Width="90%"></asp:TextBox></td>
<td><asp:TextBox ID="sgvInsertSecEndDate" runat="server" CssClass="datepick" Width="90%"></asp:TextBox></td>
<td><asp:TextBox ID="sgvInsertMemberPrice" runat="server" Width="90%"></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValInsertMemberPriceEmpty" ControlToValidate="sgvInsertMemberPrice" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValInsertMemberPriceEmpty" ControlToValidate="sgvInsertMemberPrice" runat="server"
ErrorMessage="Enter currency format." ValidationGroup="InsertSectionValidation" ValidationExpression="^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</td>
<td><asp:TextBox ID="sgvInsertNonMemberPrice" runat="server" Width="90%"></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqFieldValInsertNonMemberPriceEmpty" ControlToValidate="sgvInsertNonMemberPrice" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertSectionValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegExpValInsertNonMemberPriceEmpty" ControlToValidate="sgvInsertNonMemberPrice" runat="server"
ErrorMessage="Enter currency format." ValidationGroup="InsertSectionValidation" ValidationExpression="^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</td>
<td><asp:Button ID="sgvBtnAddEmpty" runat="server" CommandName="Add" Text="Add Section" Width="90%" CausesValidation="true" ValidationGroup="InsertSectionValidation" /></td>
</tr>
</EmptyDataTemplate>
</asp:GridView>
UPDATE I removed my merging functionality to add the HeaderTemplate. I got the text boxes to filter the grid data. I am not searching for a solution to filter using date ranges.
Does anybody know of a control that I can add to the gridview that will allow a user to filter by a range of dates? If that is not possible, another way to filter by a date range.
UPDATE I could not find a control with allows a user to pick a date range. Instead I added 2 textboxes and a label in between them 'To'.
UPDATE The grid can filter the start date but not a range because after the user enters the start date, the data is filtered and the text in the box is cleared. It is OK for the query to run but I would like to keep the text in the start date and tab to the end date text box so the user can enter a range. I tried resetting the start date after the query is run but it does not appear. Can I make the query run, keep the text in the start box and have the cursor to the end date?