Search code examples
c#asp.netgridview-sorting

How to allow GridView sort and display text as link


I want to be able to allow the user to sort through by clicking on each header of the following GridView

<asp:GridView OnSorting="yourTasksGV_Sorting" AllowSorting="true" ID="yourTasksGV" runat="server" ClientIDMode="Static" EmptyDataText="There is no data to display"></asp:GridView>

I am populating the above from a SQL query:

string query = @"SELECT  CT.ATTR2739 'Task Name'
                ,UG.USERGROUPNAME 'Department'
                ,CT.ATTR2812 'Status'
                ,CT.ATTR2752 'Due Date'
                ,'http://dvmag/appnet/workview/objectPop.aspx?objectid=' + CAST(CT.OBJECTID AS VARCHAR) + '&classid=1224' 'Link'
            FROM HSI.RMOBJECTINSTANCE1224 CT LEFT JOIN HSI.USERGROUP UG on CT.FK2743 = UG.USERGROUPNUM
            WHERE CT.ACTIVESTATUS = 0";

using (SqlConnection conn = new SqlConnection(connString))
{
    try
    {
        SqlCommand cmd = new SqlCommand(query, conn);

        // create data adapter
        SqlDataAdapter da = new SqlDataAdapter(query, conn);
        // this will query your database and return the result to your datatable
        da.Fill(taskData);
        //conn.Close();
        yourTasksGV.DataSource = taskData;
        yourTasksGV.DataBind();

    }
    catch (Exception ex)
    {
        string error = ex.Message;
    }
}

Which displays the following:

enter image description here

  • How can I make it so that the Task Name, Department, Status, Due Date, and Link are clickable which will sort ASC/DESC?
  • How can I make the Link rows all links with the display to be the Task Name? (ex: <a href="http://...objectid=8087&classid=1224">Test Event 1</a>)

I changed my GridView to this:

<asp:GridView OnSorting="yourTasksGV_Sorting" AllowSorting="true" ID="yourTasksGV" runat="server" ClientIDMode="Static" EmptyDataText="There is no data to display">
                        <Columns>
                            <asp:BoundField DataField="Text" HeaderText="Task Name" SortExpression="TaskName" />
                            <asp:BoundField DataField="Text" HeaderText="Department" SortExpression="DepartmentName" />
                            <asp:BoundField DataField="Text" HeaderText="Status" SortExpression="TheStatus" />
                            <asp:BoundField DataField="Text" HeaderText="Due Date" SortExpression="DueDate" />
                            <asp:BoundField DataField="Link" HeaderText="Complete Task" SortExpression="CompleteTask" />
                        </Columns>
                    </asp:GridView>

And this is what showed up:

enter image description here


Solution

  • Add columns explicitly as shown here: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.columns(v=vs.110).aspx

    Your DataTextFields must align with the column names - not "Text" or "Link" (unless Text and Link are valid column names).

    This will allow you to specify the column type as a hyperlink. Rather than including your full link in the query, use the DataNavigateUrlFormatString in the HyperLinkField. The HyperLinkField allows you to define the DataNavigateUrlField and the DataTextField separately.

    See http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.hyperlinkfield(v=vs.110).aspx

    To make columns sortable, be sure to set the SortExpression on the column.

    When defining columns in this way, you must also set AutoGenerateColumns to false on the GridView.

    <asp:GridView OnSorting="yourTasksGV_Sorting" AllowSorting="true" ID="yourTasksGV" runat="server" ClientIDMode="Static" EmptyDataText="There is no data to display" AutoGenerateColumns ="False">
        <Columns>
            <asp:BoundField DataField="Task Name" HeaderText="Task Name" SortExpression="TaskName" />
            <asp:BoundField DataField="Department" HeaderText="Department" SortExpression="DepartmentName" />
            <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="TheStatus" />
            <asp:BoundField DataField="Due Date" HeaderText="Due Date" SortExpression="DueDate" />
            <asp:HyperLinkField DataNavigateUrlFields="Link" DataTextField="Task Name" DataNavigateUrlFormatString="http://...objectid={0}&classid=12240" HeaderText="Complete Task" SortExpression="CompleteTask" />
        </Columns>
    </asp:GridView>
    

    Then, change the SELECT portion of your query to something like this:

    SELECT  
    CT.ATTR2739 'Task Name'
    ,UG.USERGROUPNAME 'Department'
    ,CT.ATTR2812 'Status'
    ,CT.ATTR2752 'Due Date'
    ,CT.OBJECTID 'Link'