[Solved] Merge cell

[Cuong]

Hi!

I'm looking for a solution for my problem.
Because more than 1 cell in a row (those cell places next to each others) have the same data, so I have to merge those cells and make context menu for each merged-cell.
But with the context menu later, I wonder any you guys know a solution for merging cells?
May be placing only one cell and change the colspan value?
Or placing an overlay item cover all the necessary cells? (must be the worst scenario)

Any head-ups would be nice!
Thanks in advance.

[Petur Subev]

Hello Cuong,

Instead of merging cells you can display the result from 2-3 columns into single one by creating a template column.
e.g.

columns.Template(
           @<text>
               @item.FirstName @item.Lastname
           </text>
       ).Title("Picture");

Regards,
Petur Subev
the Telerik team

[Cuong]

Thank Petur for replying.
Actually I don't want to display the result from 2-3 columns into single one.
I want to display the result from 2-3 cells into single one.
Other cells in the same column may display their value normally.

[Petur Subev]

Hello again Cuong,

Basically you already mentioned the possible workarounds. You can take advantage of the OnRowDataBound event if your Grid is configured to use Ajax binding and modify the row (merge cells etc.) based on some of the properties of the dataItem.
Both the row and dataItem are exposed by the event argument object of the OnRowDataBound event.
I hope this helps.

All the best,
Petur Subev
the Telerik team

[Cuong]

I think I get some of your ideas.
And I think I will use CellAction to modify colspan of some cells and make some cells hidden

[Cuong]

Hi again
So I try using OnRowDataBound and here is my javascript function:

function onRowDataBound(e) {
        var cells = e.row.cells;
        var dataItem = e.dataItem;

        for (var i = 1; i < cells.length; i++) {
            var span = dataItem.ReservationDetailsList[i - 1].Span;
            if (span != 1) {
                cells[i].ColSpan = span; // does not work
                cells[i].BgColor = "red"; // does not work
                cells[i].innerHTML = cells[i].ColSpan; // does work
                for (var j = 1; j < span; j++) {
                    cells[i + j].ColSpan = 0; // does not work
                    cells[i + j].innerHTML = cells[i + j].ColSpan; // does work
                }
            }
        }
    }

As you see, some LOCs can't manage to work.
I attached the result interface.
I think some members of HTMLTableCellElement like: ColSpan or BgColor, ... have been reseted to their default values after this js function finish running.

Is there a way to make my function works?
Thanks in advance.

[Petur Subev]

Hello again Cuong,

Please note that your question is not related to our MVC extensions, but to general JavaScript knowledge, which is out of the scope of our support service. Nevertheless, you can easily set the colspan attribute with jQuery e.g.

function onRowDataBound(e) {
        $(e.row.cells[0]).attr('colspan', 2);
        $(e.row.cells[1]).remove();
}

All the best,
Petur Subev
the Telerik team

[btdq]

Dear Subev,


Regarding your sample code:

columns.Template(

           @<text>

               @item.FirstName @item.Lastname

           </text>

       ).Title("Picture");
Can you show me how to create such template column in Winform RadGridView.
My table has 3 columns such "Firstname, LastName, Birthday".
Now I load this table into a Gridview, but I like to have one additional column called "Fullname" in this Gridview.
So, is it possible !? And how to do it?

Thank you in advance for your advice.

Quang Bui