locked
Group Gridview based on corresponding values in column RRS feed

  • Question

  • User1406973109 posted

    Good day all,

    Please I have a gridview below and would like to group it based on first column in the gridview, also I would like to display as header the value of the grouped column

    This is what I have:

    Subject Option Rating
    ASSERTIVENESS Expresses Ideas/Feelings MS
    ASSERTIVENESS Expresses Own Needs MS
    ASSERTIVENESS Not Easily Intimidated By Peers MS
    ATTENTIVENESS Ask Questions e.g. Who, What, Why etc. AS
    ATTENTIVENESS Pays Attention During Lesson MS
    ATTENTIVENESS Understands Question(s) MS
    COLOUR Can identify colour Red and Yellow ES
    COLOUR Can name primary colours ES
    COOPERATION WITH OTHERS Can Share with others MS
    COOPERATION WITH OTHERS Friendliness ES
    COOPERATION WITH OTHERS Plays along side others MS
    COOPERATION WITH OTHERS Takes Turns MS
    COOPERATION WITH OTHERS Willingness to work with others MS
    FEEDING HABBIT Can Eat Well ES
    FEEDING HABBIT Can Feed self with the right use of cutlery MS

    But this is what I want to achievie:

    ASSERTIVENESS RATING
    Expresses Ideas/Feelings MS
    Expresses Own Needs MS
    Not Easily Intimidated By Peers MS
    Ask Questions e.g. Who, What, Why etc. AS
    Understands Question(s) MS
    COLOUR RATING
    Can identify colour Red and Yellow ES
    Can name primary colours ES
    etc.

    This is my code so far:

    protected void grdViewPlayPrep_DataBound(object sender, EventArgs e)
            {
                GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                TableHeaderCell cell = new TableHeaderCell();
                cell.Text = row.Cells[0].Text;
                cell.ColumnSpan = 1;
                row.Controls.Add(cell);
    
                row.BackColor = ColorTranslator.FromHtml("#3AC0F2");
                grdViewPlayPrep.HeaderRow.Parent.Controls.AddAt(0, row);
            }

    Please how can I go about it.

    Thanks

    Tim

    Sunday, April 7, 2019 10:56 PM

Answers

  • User-2054057000 posted

    timotech

    yogyogi

    (document).ready(function () {
        $("#arrange").click(function (e) {
            ChangeDisplay();
            return false;
        });
    
        function ChangeDisplay() {
            var allTr = $("table tr");
            var subject = "";
    
            $(allTr).each(function (index, value) {
                if (index == 0) {
                    subject = $(value).next().find("td").eq(0).text();
                    var newRow = "<tr style='font-weight: bold'><td>" + subject + "</td><td>Rating</td></tr>";
                    $(this).after(newRow);
                    $(this).hide();
                }
                else {
                    var subjectCurr = $(value).find("td").eq(0).text();
                    if (subjectCurr != subject) {
                        var newRow = "<tr style='font-weight: bold'><td>" + subjectCurr + "</td><td>Rating</td></tr>";
                        $(this).after(newRow);
                        subject = subjectCurr;
                    }
                    $(value).find("td").eq(0).hide();
                }
            });
    
        }
    });

    In the jQuery code I am looping through all the rows of the GridView and then arranging and adding the text to it wherever needed.

    Wow yogyogi, thanks so much for your reply

    can I call this on page load without the click event, because its a report and I wouldn't have the opportunity to click a button

    Thanks so much

    Timotech

    Of course you can remove the button click and the script will run on page load. The updated code will be:

    $(document).ready(function () {
        ChangeDisplay();
        
        function ChangeDisplay() {
            var allTr = $("table tr");
            var subject = "";
    
            $(allTr).each(function (index, value) {
                if (index == 0) {
                    subject = $(value).next().find("td").eq(0).text();
                    var newRow = "<tr style='font-weight: bold'><td>" + subject + "</td><td>Rating</td></tr>";
                    $(this).after(newRow);
                    $(this).hide();
                }
                else {
                    var subjectCurr = $(value).find("td").eq(0).text();
                    if (subjectCurr != subject) {
                        var newRow = "<tr style='font-weight: bold'><td>" + subjectCurr + "</td><td>Rating</td></tr>";
                        $(this).after(newRow);
                        subject = subjectCurr;
                    }
                    $(value).find("td").eq(0).hide();
                }
            });
    
        }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 8, 2019 3:09 PM

All replies

  • User-2054057000 posted

    Hello Timotech, 

    I created this solution for you using jQuery.

    This is how it will work:

    See the below code to understand it.

    GridView code

    <asp:GridView ID="gridView" runat="server" AutoGenerateColumns="true">       
    </asp:GridView>

    <button id="arrange">Arrange</button>

    Binding of GridView in .aspx.cs page

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridView();
        }
    }
    
    void BindGridView()
    {
        DataTable dataTable = new DataTable();
        DataColumn[] dataColumn = new DataColumn[]
        {
            new DataColumn("Subject"),
            new DataColumn("Option"),
            new DataColumn("Rating"),
        };
    
        dataTable.Columns.AddRange(dataColumn);
        dataTable.Rows.Add(new object[] { "ASSERTIVENESS", "Expresses Ideas/Feelings", "MS" });
        dataTable.Rows.Add(new object[] { "ASSERTIVENESS", "Expresses Own Needs", "MS" });
        dataTable.Rows.Add(new object[] { "ASSERTIVENESS", "Not Easily Intimidated By Peers", "MS" });
        dataTable.Rows.Add(new object[] { "ASSERTIVENESS", "Ask Questions e.g. Who, What, Why etc.", "AS" });
        dataTable.Rows.Add(new object[] { "ASSERTIVENESS", "Pays Attention During Lesson", "MS" });
        dataTable.Rows.Add(new object[] { "ASSERTIVENESS", "Understands Question(s)", "MS" });
        dataTable.Rows.Add(new object[] { "COLOUR", "Can identify colour Red and Yellow", "MS" });
        dataTable.Rows.Add(new object[] { "COLOUR", "Can name primary colours", "ES" });
        dataTable.Rows.Add(new object[] { "COOPERATION WITH OTHERS	", "Can Share with others", "MS" });
        dataTable.Rows.Add(new object[] { "COOPERATION WITH OTHERS	", "Friendliness", "ES" });
        dataTable.Rows.Add(new object[] { "COOPERATION WITH OTHERS	", "Plays along side others", "MS" });
        dataTable.Rows.Add(new object[] { "COOPERATION WITH OTHERS	", "Takes Turns", "MS" });
        dataTable.Rows.Add(new object[] { "COOPERATION WITH OTHERS	", "Willingness to work with others", "MS" });
        dataTable.Rows.Add(new object[] { "FEEDING HABBIT", "Can Eat Well", "ES" });
        dataTable.Rows.Add(new object[] { "FEEDING HABBIT", "Can Feed self with the right use of cutlery", "MS" });
    
        gridView.DataSource = dataTable;
        gridView.DataBind();
    
    }
    

    Now I added the below jQuery script in the .aspx page:

    $(document).ready(function () {
        $("#arrange").click(function (e) {
            ChangeDisplay();
            return false;
        });
    
        function ChangeDisplay() {
            var allTr = $("table tr");
            var subject = "";
    
            $(allTr).each(function (index, value) {
                if (index == 0) {
                    subject = $(value).next().find("td").eq(0).text();
                    var newRow = "<tr style='font-weight: bold'><td>" + subject + "</td><td>Rating</td></tr>";
                    $(this).after(newRow);
                    $(this).hide();
                }
                else {
                    var subjectCurr = $(value).find("td").eq(0).text();
                    if (subjectCurr != subject) {
                        var newRow = "<tr style='font-weight: bold'><td>" + subjectCurr + "</td><td>Rating</td></tr>";
                        $(this).after(newRow);
                        subject = subjectCurr;
                    }
                    $(value).find("td").eq(0).hide();
                }
            });
    
        }
    });
    

    In the jQuery code I am looping through all the rows of the GridView and then arranging and adding the text to it wherever needed.

    For your reference see the below 2 jQuery methods to understand the code properly:

    1. jQuery .eq() method
    2. jQuery .find() method

    Hope it helps you.

    Regards

    Monday, April 8, 2019 11:10 AM
  • User1406973109 posted

    (document).ready(function () {
        $("#arrange").click(function (e) {
            ChangeDisplay();
            return false;
        });
    
        function ChangeDisplay() {
            var allTr = $("table tr");
            var subject = "";
    
            $(allTr).each(function (index, value) {
                if (index == 0) {
                    subject = $(value).next().find("td").eq(0).text();
                    var newRow = "<tr style='font-weight: bold'><td>" + subject + "</td><td>Rating</td></tr>";
                    $(this).after(newRow);
                    $(this).hide();
                }
                else {
                    var subjectCurr = $(value).find("td").eq(0).text();
                    if (subjectCurr != subject) {
                        var newRow = "<tr style='font-weight: bold'><td>" + subjectCurr + "</td><td>Rating</td></tr>";
                        $(this).after(newRow);
                        subject = subjectCurr;
                    }
                    $(value).find("td").eq(0).hide();
                }
            });
    
        }
    });

    In the jQuery code I am looping through all the rows of the GridView and then arranging and adding the text to it wherever needed.

    Wow yogyogi, thanks so much for your reply

    can I call this on page load without the click event, because its a report and I wouldn't have the opportunity to click a button

    Thanks so much

    Timotech

    Monday, April 8, 2019 12:23 PM
  • User-2054057000 posted

    timotech

    yogyogi

    (document).ready(function () {
        $("#arrange").click(function (e) {
            ChangeDisplay();
            return false;
        });
    
        function ChangeDisplay() {
            var allTr = $("table tr");
            var subject = "";
    
            $(allTr).each(function (index, value) {
                if (index == 0) {
                    subject = $(value).next().find("td").eq(0).text();
                    var newRow = "<tr style='font-weight: bold'><td>" + subject + "</td><td>Rating</td></tr>";
                    $(this).after(newRow);
                    $(this).hide();
                }
                else {
                    var subjectCurr = $(value).find("td").eq(0).text();
                    if (subjectCurr != subject) {
                        var newRow = "<tr style='font-weight: bold'><td>" + subjectCurr + "</td><td>Rating</td></tr>";
                        $(this).after(newRow);
                        subject = subjectCurr;
                    }
                    $(value).find("td").eq(0).hide();
                }
            });
    
        }
    });

    In the jQuery code I am looping through all the rows of the GridView and then arranging and adding the text to it wherever needed.

    Wow yogyogi, thanks so much for your reply

    can I call this on page load without the click event, because its a report and I wouldn't have the opportunity to click a button

    Thanks so much

    Timotech

    Of course you can remove the button click and the script will run on page load. The updated code will be:

    $(document).ready(function () {
        ChangeDisplay();
        
        function ChangeDisplay() {
            var allTr = $("table tr");
            var subject = "";
    
            $(allTr).each(function (index, value) {
                if (index == 0) {
                    subject = $(value).next().find("td").eq(0).text();
                    var newRow = "<tr style='font-weight: bold'><td>" + subject + "</td><td>Rating</td></tr>";
                    $(this).after(newRow);
                    $(this).hide();
                }
                else {
                    var subjectCurr = $(value).find("td").eq(0).text();
                    if (subjectCurr != subject) {
                        var newRow = "<tr style='font-weight: bold'><td>" + subjectCurr + "</td><td>Rating</td></tr>";
                        $(this).after(newRow);
                        subject = subjectCurr;
                    }
                    $(value).find("td").eq(0).hide();
                }
            });
    
        }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 8, 2019 3:09 PM
  • User1406973109 posted

    Thanks so much yogyogi, you are a life saver.

    I really appreciate.

    Regards

    Monday, April 8, 2019 3:55 PM
  • User1406973109 posted

    Hi yogyogi,

    Thanks so much for your help, please I need to do something like text-align:center for the RATING column and also colour the values such as :

    MS - sky-blue,

    ES - green

    AS - red

    NS - orange

    Please how can I do it, i'm not really a champion when it comes to jquery but i'm trying, please can you help me out.

    Thanks so much

    Tim

    Tuesday, April 9, 2019 10:12 AM
  • User1406973109 posted

    Hi yogyogi,

    Thanks so much for your help, please I need to do something like text-align:center for the RATING column and also colour the values such as :

    MS - sky-blue,

    ES - green

    AS - red

    NS - orange

    Please how can I do it, i'm not really a champion when it comes to jquery but i'm trying, please can you help me out.

    Thanks so much

    Tim

    Alright no need, I've able to resolve my problem using this code:

    $(function () {
                $(".uptable td").each(function () {
                    if ($(this).text() == 'ES') {
                        $(this).css('color', 'darkgreen');
                        $(this).css('text-align', 'center');
                    }
                });
            });

    Thanks

    Wednesday, April 10, 2019 5:10 AM