How to insert a DropDownList inside the GridView's first header

Question

0.00/5 (No votes)

See more:

I have the following ASP.net page which displays a table with some DropDownList and right underneath another table (GridView) with the data which will be filtered through the DropDownLiad from the first table:

XML

<table class="taskGridView" runat="server">
                                <tr>
                                    <td>
                                        <asp:DropDownList ID="ddlTaskName" CssClass="chosen-select" DataSourceID="dsPopulateTaskName" AutoPostBack="true" DataValueField="Task Name" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlTaskName_onSelectIndexChanged">
                                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="dsPopulateTaskName" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand=""></asp:SqlDataSource>
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlService" CssClass="chosen-select" DataSourceID="dsPopulateService" AutoPostBack="true" DataValueField="Service" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlService_onSelectIndexChanged">
                                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="dsPopulateService" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand=""></asp:SqlDataSource>
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlStatus" CssClass="chosen-select" DataSourceID="dsPopulateStatus" AutoPostBack="true" DataValueField="Status" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlStatus_onSelectIndexChanged">
                                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="dsPopulateStatus" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand=""></asp:SqlDataSource>
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlDueDate" CssClass="chosen-select" DataSourceID="dsPopulateDueDate" AutoPostBack="true" DataValueField="Due Date" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlDueDate_onSelectIndexChanged">
                                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="dsPopulateDueDate" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand=""></asp:SqlDataSource>
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlOwner" CssClass="chosen-select" DataSourceID="dsPopulateOwner" AutoPostBack="true" DataValueField="Owner" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlOwner_onSelectIndexChanged">
                                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="dsPopulateOwner" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand=""></asp:SqlDataSource>
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlClient" CssClass="chosen-select" DataSourceID="dsPopulateClient" AutoPostBack="true" DataValueField="Client" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlClient_onSelectIndexChanged">
                                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="dsPopulateClient" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand=""></asp:SqlDataSource>
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlSite" CssClass="chosen-select" DataSourceID="dsPopulateSite" AutoPostBack="true" DataValueField="Site" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlSite_onSelectIndexChanged">
                                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="dsPopulateSite" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand=""></asp:SqlDataSource>
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlPractice" CssClass="chosen-select" DataSourceID="dsPopulatePractice" AutoPostBack="true" DataValueField="Practice" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlPractice_onSelectIndexChanged">
                                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="dsPopulatePractice" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand=""></asp:SqlDataSource>
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlProvider" CssClass="chosen-select" DataSourceID="dsPopulateProvider" AutoPostBack="true" DataValueField="Provider" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlProvider_onSelectIndexChanged">
                                            <asp:ListItem Text="All" Value="%"></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="dsPopulateProvider" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand=""></asp:SqlDataSource>
                                    </td>
                                </tr>
                            </table>
                            <asp:GridView ShowHeaderWhenEmpty="false" AlternatingRowStyle-BackColor="#EBE9E9" AutoGenerateColumns="false" OnSorting="yourTasksGV_Sorting" AllowSorting="true" ID="yourTasksGV" runat="server" ClientIDMode="Static" EmptyDataText="You currently have no tasks assigned to you" OnRowDataBound="yourTasksGV_RowDataBound" OnRowCreated="yourTasksGV_RowCreated">
                                <Columns>
                                    <asp:HyperLinkField Target="_self" DataNavigateUrlFields="Task Detail" DataTextField="Task Name" DataNavigateUrlFormatString="" HeaderText="Task Detail" SortExpression="Task Name" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Service" HeaderText="Service" SortExpression="Service" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Due Date" HeaderText="Due" SortExpression="Due Date" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Owner" HeaderText="Owner" SortExpression="Owner" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Client" HeaderText="Client" SortExpression="Client" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Site" HeaderText="Site" SortExpression="Site" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Practice" HeaderText="Practice" SortExpression="Practice" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Provider" HeaderText="Provider" SortExpression="Provider" ItemStyle-CssClass="taskTableColumn" />
                                </Columns>
                            </asp:GridView>

I have the following code-behind to populate the DropDownList and the GridView:

C#

protected void Page_Load(object sender, EventArgs e)
{
	strMainQuery = @""; //main query string

	strForDropDownList = @"  "; //just the FROM query

	dsPopulateTaskName.SelectCommand = @"SELECT DISTINCT [ATTR2739] 'Task Name'" + strForDropDownList;
	dsPopulateService.SelectCommand = @"SELECT DISTINCT SE.ATTR2821 'Service'" + strForDropDownList;
	dsPopulateStatus.SelectCommand = @"SELECT DISTINCT [ATTR2812] 'Status'" + strForDropDownList;
	dsPopulateDueDate.SelectCommand = @"SELECT DISTINCT CONVERT(VARCHAR(14), [ATTR2752], 110) 'Due Date'" + strForDropDownList;
	dsPopulateOwner.SelectCommand = @"SELECT DISTINCT [REALNAME] 'Owner'" + strForDropDownList;
	dsPopulateClient.SelectCommand = @"SELECT DISTINCT [ATTR2815] 'Client'" + strForDropDownList;
	dsPopulateSite.SelectCommand = @"SELECT DISTINCT [ATTR2819] 'Site'" + strForDropDownList;
	dsPopulatePractice.SelectCommand = @"SELECT DISTINCT [ATTR2817] 'Practice'" + strForDropDownList;
	dsPopulateProvider.SelectCommand = @"SELECT DISTINCT [ATTR2919] 'Provider'" + strForDropDownList;

	if (!Page.IsPostBack)
	{
		ViewState["sortOrder"] = "Asc";
		ViewState["sortExp"] = "Due Date";
		PullData("Due Date", "Asc", true);
	}
}

public void PullData(string sortExp, string sortDir, bool blOnLoad)
{
	query = "";
	DataTable taskData = new DataTable();
	connString = @""; //connection string

	if (!blOnLoad)
	{
		if (ddlTaskName.SelectedIndex > 0)
		{
			strClause += " AND CT.ATTR2739 LIKE '%" + ddlTaskName.SelectedItem.Text + "%'";
		}
		else
		{
			strClause += " AND (CT.ATTR2739 LIKE '%' OR CT.ATTR2739 IS NULL)";
		}
		//... the rest of the IF/ELSE clause for the other DropDownList goes here


		if (ddlTaskName.SelectedIndex == 0 && ddlService.SelectedIndex == 0 && ddlStatus.SelectedIndex == 0 && ddlDueDate.SelectedIndex == 0 && ddlOwner.SelectedIndex == 0 && ddlClient.SelectedIndex == 0 && ddlSite.SelectedIndex == 0 && ddlPractice.SelectedIndex == 0 && ddlProvider.SelectedIndex == 0)
		{
			query = strMainQuery + " WHERE CT.ACTIVESTATUS = 0";
		}
		else
		{
			query = strMainQuery + " WHERE CT.ACTIVESTATUS = 0" + strClause;
		}
	}
	else
	{
		query = strMainQuery + " WHERE CT.ACTIVESTATUS = 0";
	}

	using (SqlConnection conn = new SqlConnection(connString))
	{
		try
		{
				//run query and populate the DataView
				//and bind to the GridView
		}
		catch (Exception ex)
		{
			string error = ex.Message;
		}
	}
}

What is happening is since the DropDownList is in a separate table than the GridView, the column doesn't match up and here is a link to see the image: http://pbrd.co/1qb9mXK[^]

How can I, instead of adding it to a different table, add it right above the sorting header links like in the picture shown above?

I tried the following but it didn't work:

I deleted the DropDownList table and added the following script on document.ready event:

JavaScript

var fromList = " FROM HSI.RMOBJECTINSTANCE1224 CT \
            LEFT JOIN HSI.RMOBJECTINSTANCE1232 S ON CT.ATTR2846 = S.ATTR2821 \
            LEFT JOIN HSI.USERACCOUNT UA ON S.FK2852 = (UA.USERNUM * -1) \
            LEFT JOIN HSI.RMOBJECTINSTANCE1251 PXC ON PXC.FK2924 = CT.OBJECTID \
            LEFT JOIN HSI.RMOBJECTINSTANCE1249 P ON PXC.FK2923 = P.OBJECTID \
            LEFT JOIN HSI.RMOBJECTINSTANCE1248 PRXC ON PRXC.FK2912 = CT.OBJECTID \
            LEFT JOIN HSI.RMOBJECTINSTANCE1230 PR ON PR.OBJECTID = PRXC.FK2911 \
            LEFT JOIN HSI.RMOBJECTINSTANCE1247 SXC ON SXC.FK2908 = CT.OBJECTID \
            LEFT JOIN HSI.RMOBJECTINSTANCE1229 SI ON SI.OBJECTID = SXC.FK2907 \
            LEFT JOIN HSI.RMOBJECTINSTANCE1231 C ON CT.FK2927 = C.OBJECTID \
            LEFT JOIN HSI.RMOBJECTINSTANCE1232 SE ON CT.FK2940 = SE.OBJECTID \
        WHERE CT.ACTIVESTATUS = 0 ";

    var theDropTR = '<tr>\
                        <th>\
                            <asp:DropDownList ID="ddlTaskName" CssClass="chosen-select" DataSourceID="dsPopulateTaskName" AutoPostBack="true" DataValueField="Task Name" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlTaskName_onSelectIndexChanged">\
                                <asp:ListItem Text="All" Value="%"></asp:ListItem>\
                            </asp:DropDownList>\
                            <asp:SqlDataSource ID="dsPopulateTaskName" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2739] \'Task Name\' ' + fromList + '"></asp:SqlDataSource>\
                        </th>\
                        <th>\
                            <asp:DropDownList ID="ddlService" CssClass="chosen-select" DataSourceID="dsPopulateService" AutoPostBack="true" DataValueField="Service" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlService_onSelectIndexChanged">\
                                <asp:ListItem Text="All" Value="%"></asp:ListItem>\
                            </asp:DropDownList>\
                            <asp:SqlDataSource ID="dsPopulateService" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT SE.ATTR2821 \'Service\' ' + fromList + '"></asp:SqlDataSource>\
                        </th>\
                        <th>\
                            <asp:DropDownList ID="ddlStatus" CssClass="chosen-select" DataSourceID="dsPopulateStatus" AutoPostBack="true" DataValueField="Status" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlStatus_onSelectIndexChanged">\
                                <asp:ListItem Text="All" Value="%"></asp:ListItem>\
                            </asp:DropDownList>\
                            <asp:SqlDataSource ID="dsPopulateStatus" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2812] \'Status\' ' + fromList + '"></asp:SqlDataSource>\
                        </th>\
                        <th>\
                            <asp:DropDownList ID="ddlDueDate" CssClass="chosen-select" DataSourceID="dsPopulateDueDate" AutoPostBack="true" DataValueField="Due Date" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlDueDate_onSelectIndexChanged">\
                                <asp:ListItem Text="All" Value="%"></asp:ListItem>\
                            </asp:DropDownList>\
                            <asp:SqlDataSource ID="dsPopulateDueDate" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT CONVERT(VARCHAR(14), [ATTR2752], 110) \'Due Date\' ' + fromList + '"></asp:SqlDataSource>\
                        </th>\
                        <th>\
                            <asp:DropDownList ID="ddlOwner" CssClass="chosen-select" DataSourceID="dsPopulateOwner" AutoPostBack="true" DataValueField="Owner" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlOwner_onSelectIndexChanged">\
                                <asp:ListItem Text="All" Value="%"></asp:ListItem>\
                            </asp:DropDownList>\
                            <asp:SqlDataSource ID="dsPopulateOwner" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [REALNAME] \'Owner\' ' + fromList + '"></asp:SqlDataSource>\
                        </th>\
                        <th>\
                            <asp:DropDownList ID="ddlClient" CssClass="chosen-select" DataSourceID="dsPopulateClient" AutoPostBack="true" DataValueField="Client" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlClient_onSelectIndexChanged">\
                                <asp:ListItem Text="All" Value="%"></asp:ListItem>\
                            </asp:DropDownList>\
                            <asp:SqlDataSource ID="dsPopulateClient" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2815] \'Client\' ' + fromList + '"></asp:SqlDataSource>\
                        </th>\
                        <th>\
                            <asp:DropDownList ID="ddlSite" CssClass="chosen-select" DataSourceID="dsPopulateSite" AutoPostBack="true" DataValueField="Site" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlSite_onSelectIndexChanged">\
                                <asp:ListItem Text="All" Value="%"></asp:ListItem>\
                            </asp:DropDownList>\
                            <asp:SqlDataSource ID="dsPopulateSite" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2819] \'Site\' ' + fromList + '"></asp:SqlDataSource>\
                        </th>\
                        <th>\
                            <asp:DropDownList ID="ddlPractice" CssClass="chosen-select" DataSourceID="dsPopulatePractice" AutoPostBack="true" DataValueField="Practice" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlPractice_onSelectIndexChanged">\
                                <asp:ListItem Text="All" Value="%"></asp:ListItem>\
                            </asp:DropDownList>\
                            <asp:SqlDataSource ID="dsPopulatePractice" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2817] \'Practice\' ' + fromList + '"></asp:SqlDataSource>\
                        </th>\
                        <th>\
                            <asp:DropDownList ID="ddlProvider" CssClass="chosen-select" DataSourceID="dsPopulateProvider" AutoPostBack="true" DataValueField="Provider" runat="server" Width="100%" Font-Size="11px" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlProvider_onSelectIndexChanged">\
                                <asp:ListItem Text="All" Value="%"></asp:ListItem>\
                            </asp:DropDownList>\
                            <asp:SqlDataSource ID="dsPopulateProvider" runat="server" ConnectionString="<%$ ConnectionStrings:gvConnString %>" SelectCommand="SELECT DISTINCT [ATTR2919] \'Provider\' ' + fromList + '"></asp:SqlDataSource>\
                        </th>\
                    </tr>';

    $("#yourTasksGV tr:first").after(theDropTR);

But because I am calling those DropDownList on Page_Load in my code-behind, I get a The name '{DropDownList ID}' does not exist in current context

I also tried adding the DropDownList in the RowCreated function here:

C#

if (e.Row.RowType == DataControlRowType.Header)
			{
				GridView hGrid = (GridView)sender;
				GridViewRow gvrRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
				TableHeaderCell tcCell = new TableHeaderCell();
				tcCell.Text = @"<asp:DropDownList ID='ddlTaskName2' CssClass='chosen-select' DataSourceID='dsPopulateTaskName2' AutoPostBack='true' DataValueField='Task Name' runat='server' Width='100%' Font-Size='11px' AppendDataBoundItems='true' OnSelectedIndexChanged='ddlTaskName_onSelectIndexChanged'>
                                            <asp:ListItem Text='All' Value='%'></asp:ListItem>
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID='sPopulateTaskName2' runat='server' ConnectionString='<%$ ConnectionStrings:gvConnString %>' SelectCommand=\""SELECT [actionname] from [baolp].[hsi].[action]\""></asp:SqlDataSource>";
				tcCell.ColumnSpan = 1;
				gvrRow.Cells.Add(tcCell);

				TableHeaderCell tcCell2 = new TableHeaderCell();
				tcCell2.Text = "TEST #2";
				tcCell2.ColumnSpan = 1;
				gvrRow.Cells.Add(tcCell2);


				yourTasksGV.Controls[0].Controls.AddAt(0, gvrRow);
}

But as you can see from the image, it is a blank header cell which did not execute to display the DropDownList.

How can I edit my code-behind/asp.net/javascript which will allow me to insert the DropDownList inside the GridView rather than create a separate table so that the column match up?

Posted 29-Aug-14 3:41am

Member 10850583

Add a Solution

Comments

ChauhanAjay 29-Aug-14 9:57am

Do you mean that the dropdownlist will be the header in the gridview

Member 10850583 29-Aug-14 10:03am

Yes, if you look at the image link I posted, the empty header row for each column. That's where I would like to put them so it always stays within the same width.

ChauhanAjay 29-Aug-14 10:06am

Just have a look at this link
http://www.codeproject.com/Questions/419124/Dropdownlist-in-header-template-of-gridview
hope it is helpful

Member 10850583 29-Aug-14 10:36am

I already have the filter. I am looking for assistance to place them inside the GridView

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

j snooze · Answer 1 · 2014-08-29T11:04:00

You need to make that column a template field in your aspx xhtml code instead of a bound field or a hyperlink column. Notice that the Item template replaces the bound field.

<asp:templatefield>
 <headertemplate>
    <asp:dropdownlist id="ddlTaskName" runat="server">
</headertemplate>
<itemtemplate><asp:label id="lblTaskname" runat="server" text="<%# Eval("TaskName") >">;</itemtemplate>
</asp:templatefield>