none
Visual Web Part with GridView: Grouping task items horizontally as opposed to vertically

    Pregunta

  • Hi

    I am looking to achieve  the following on a processed task list. 

    W/C date

    Title

    20/04/12

    Task 1

    Task 2

    Task 3

    27/04/12

    Task 4

    So far in my Visual Web Part,  I have able to 

    1) create an ordered source with the each row having the w/c datetime and the task.title

    2) I have populated my GridView 

    <asp:GridView ID="DataGridView" runat="server" OnRowDataBound="DataGridView_RowDataBound"  AutoGenerateColumns="false">
    
    
        <Columns>
            <asp:TemplateField HeaderText="W/C">
                <ItemTemplate>
                    <asp:Panel ID="TimelineGroupPanel" runat="server" Direction="LeftToRight">
    
                       <asp:Label ID="lblWC" runat="server" Text='<%#Eval("W/C", "{0:MM/dd/yyyy}")%>'></asp:Label> 
                       
                    </asp:Panel>
                        
                          <%#Eval("Title")%>
                    
               </ItemTemplate>
    
    
            </asp:TemplateField>
    
    
    
        </Columns>
        
    </asp:GridView>

    3) next I want to group by the w/c date and I have been able to do this using the label field using the _RowDataBound handler

            protected void DataGridView_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                GridViewRow row = e.Row;
                if (e.Row.RowType == DataControlRowType.Header)
                {
                    // placeholder in case I need this  
                }
                else if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    
                    // discover the label with the current week commencing date in the current row
                    Label wcGrpLabel = (Label)e.Row.FindControl("lblWC");
                    string wcGrpLabelText = wcGrpLabel.Text;             // get the date representation of the date
                    string wcGrpTitle = this.currentWeekCommencingText;  // get the current week commencing text we want to group by
    
                   
                    
                    // compare the txt value against what e hold in our private instance var - could use ViewState[]
                    if (wcGrpTitle == wcGrpLabelText)
                    {
                        // hide the w/c label as we already have it. 
                        wcGrpLabel.Visible = false;      //  hide it
                        wcGrpLabel.Text = string.Empty;  // and blank it
    
    
                    }
                    else
                    {
                        // ok looks like we have a new grp label
                        wcGrpTitle = wcGrpLabelText;
                        this.currentWeekCommencingText = wcGrpTitle;  // we now have a new group header to compare against
                        wcGrpLabel.Visible = true;      //  hide it
    
                    }
    
    
    
            }

    I just wondered what changes I need to make get the the grouped tasks alongside the w/ date . the tasks can be in table cells or simple <li> items.. 

    Daniel


    • Editado DanTheManXX miércoles, 02 de mayo de 2012 11:58
    miércoles, 02 de mayo de 2012 11:56

Respuestas

  • Are you just needing to manage the formatting of the HTML to achieve the layout?  It would be easiest to use a table like so

    <table>

    <tr><th>w/c</th><th>title</th></tr>

    <tr><td rowspan=3>04/20/12</td><td>task1</td></tr>

    <tr><td>task2</td></tr>

    <tr><td>task3</td></tr>

    <tr><td rowspan=1>04/27/12</td><td>task4</td></tr>

    </table>

    The trick part is knowing that when writing the first record you know how many rows it should span.

    Depending on where you are getting your list from you could write some LINQ that processes it to group by w/c and find the count and then use that during the binding.

    • Marcado como respuesta Shimin Huang lunes, 14 de mayo de 2012 1:49
    sábado, 12 de mayo de 2012 6:53

Todas las respuestas

  • Are you just needing to manage the formatting of the HTML to achieve the layout?  It would be easiest to use a table like so

    <table>

    <tr><th>w/c</th><th>title</th></tr>

    <tr><td rowspan=3>04/20/12</td><td>task1</td></tr>

    <tr><td>task2</td></tr>

    <tr><td>task3</td></tr>

    <tr><td rowspan=1>04/27/12</td><td>task4</td></tr>

    </table>

    The trick part is knowing that when writing the first record you know how many rows it should span.

    Depending on where you are getting your list from you could write some LINQ that processes it to group by w/c and find the count and then use that during the binding.

    • Marcado como respuesta Shimin Huang lunes, 14 de mayo de 2012 1:49
    sábado, 12 de mayo de 2012 6:53
  • Craig

    Thanks for replying.   Funny you should mention that approach, I did previously use it with  DataView web part using <xsl:attibute name="rowspan"  and using the group total to determine the size of the grouped area. This was rejected by the client as they wanted the dates processed and this was beyond what I could achieve with XLST 1.0. Hence, the need for coding up  custom Visual Web Part with a GridView user control.

    In the above Visual Web Part I was able to create a group by formatting by selectively hiding subsequent same group label text values by grammatically applying a css class to the cell in question. In which case it removed the default border style and hides the cell as it is continuation of the current group. 

     Label wcGrpLabel = (Label)e.Row.FindControl("lblWC");
                    string wcGrpLabelText = wcGrpLabel.Text;             // get the date representation of the date
                    string wcGrpTitle = this.currentWeekCommencingText;  // get the current week commencing text we want to group by
    
                   
                    ULSLogger.LogMsg("DataGridView_RowDataBound :" + "wcGrpLabelText" + wcGrpLabelText  + " wcGrpTitle " + wcGrpTitle);
                    // compare the txt value against what e hold in our private instance var - could use ViewState[]
                    if (wcGrpTitle == wcGrpLabelText)
                    {
                        // hide the w/c label as we already have it. 
                        wcGrpLabel.Visible = false;      //  hide it
                        wcGrpLabel.Text = string.Empty;  // and blank it
                        row.CssClass="GridViewRowNoGroup";  // hide the row border
    
    
                    }

     I was a bit disappointed I could not achieve this with a ListView control . templates and DIVs .  In short not having to format my group by with code! 

    Regards

    Daniel Westerdale



    martes, 15 de mayo de 2012 10:29