Click here to Skip to main content
14,865,476 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
if have a gridiew in the below format

id | name |value
1 |priya |test
1 |vinu |test


I want it to be in below format
id | name |value
|priya |test
1 |vinu |test


how can I do this in java script

What I have tried:

I have tried with row span which is not working
Posted
Updated 3-Apr-16 22:48pm
Comments
jaket-cp 4-Apr-16 4:27am
   
Can you supply the javascript code and possibly the generated markup, so we can let you know where you are going wrong.
If you are using rowspan, you will need to remove the td/cells of the the ones added by the rowspan - hope that makes sense.
spriyanair 4-Apr-16 4:53am
   
<script type="text/javascript">
function test() {
debugger;
var rowscount = document.getElementById('<%=gvCustomers.ClientID%>').rows.length;
var grid= document.getElementById('<%=gvCustomers.ClientID%>');
for (i = rowscount - 1 ; i > 0; i--) {

var row = grid.rows[i].cells;
var previousRow = grid.rows[i-1].cells;
if (row[0].innerHTML == previousRow[0].innerHTML) {

if (previousRow[0].rowSpan == 0)
{

if (row[0].rowSpan == 0) {
previousRow[0].rowSpan += 2;
}
else {
previousRow[0].rowSpan = row.Cells[0].rowSpan + 1;
}
row[0].Visible = false;

}

}

}

}
</script>

1 solution

try this sample, add jquery reference to it.


code behind:

C#
DataTable dt = new DataTable();
           dt.Columns.Add("id");
           dt.Columns.Add("name");
           dt.Columns.Add("value");
           dt.Rows.Add(1, "priya", "test");
           dt.Rows.Add(1, "vinu", "test");
           dt.Rows.Add(2, "ram", "test");
           dt.Rows.Add(3, "set", "test");
           dt.Rows.Add(3, "set", "test");
           dt.Rows.Add(4, "set", "test");
           GridView1.DataSource = dt;
           GridView1.DataBind();


JavaScript
<script>
        $(function () {
            var clientId = '<%= GridView1.ClientID%>'
            var tds = $('#' + clientId + ' tr ').find('td:nth(0)');
            
            var temp = []; j = 0;
            for (var i = 1; i <= tds.length; i++) {
                debugger;

                var prev = $(tds[i - 1]);
                var curr = $( tds[i]);
                if(j==0)
                temp.push(prev);
                if (prev.text() == curr.text()) {
                    temp.push(curr);
                    j++;
                }
                else {
                    $(temp[0]).attr('rowspan', temp.length );
                    for (var k = 1; k < temp.length; k++) {
                        temp[k].remove();
                    }
                    temp = [];
                    j = 0;
                } 
            } 
        }); 

    </script>
   
v2
Comments
spriyanair 4-Apr-16 5:14am
   
thank you.This a very big helpBut unfortunately its only working for first id.Could you plz tell me hw to do it for all the ids
Karthik_Mahalingam 4-Apr-16 5:32am
   
you want to merge only first column right ?
spriyanair 4-Apr-16 5:38am
   
yes first column only. But one small issue its is not merging for the last id.
Karthik_Mahalingam 4-Apr-16 5:42am
   
ok i will check and correct it.
Karthik_Mahalingam 4-Apr-16 7:03am
   
try updated solution.

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900