Dear All, 

need help for make view table like image below,

many thanks for the help

Hi Sudarki,

 Do you want to make this a dynamic functionality? Meaning, depending on the content of the table then merge two/more rows per column? If yes that I don't know that there is a forge component for that and nothing out of the box! But someone correct me if I am wrong, I would love also to know!


 Hi Sukardi,

 Here is a quick a dirty solution, mind you this is not standard functionality a so you will have to commit to several losses of standard Outssytems functionality to have a table merge vertically cells with equal values!

 1- Create your screen.

 2- Create your table.

 3- In the column cell you wish to merge equal values do an inline as follows: data-id = "key" + value of the current cell!

 4- In the screen insert an expression anywhere

 5- write the following in the expression 

//merge cells in key column
function mergerKey() {    
    // prevents the same attribute is used more than once Ip
    var idA = [];
    // finds all cells id column Key
    $('td[data-id^=""key""]').each(function () {
        var id = $(this).attr('data-id');
        // prevents the same attribute is used more than once IIp
        if ($.inArray(id, idA) == -1) {
            // finds all cells that have the same data-id attribute
            var $td = $('td[data-id=""' + id + '""]');
            //counts the number of cells with the same data-id
            var count = $td.size();
            if (count > 1) {
                //If there is more than one
                //then merging                                
                $td.attr('rowspan', count);



6- Set the expression property: escape content to 'No".

 7- Make sure only the column that is being merged has the list sort column availbale, you wont be able to sort by other columns!

Tell me if you have any problems with implementation!


Oke man, thanks for your opinion, I'll try it.