Style error when merging cells in RadGrid

[park]

Telerik UI for ASP.NET AJAX component has been used to create a business system. I think there is a merge error in the grid control. Also, please tell us how to apply the same when changing the skin. Please refer to the picture and source code. Version: 2019.2.514.40

 

- Source Code

 

protected void RadGrid1_PreRender(object sender, EventArgs e)
        {
            for (int rowIndex = RadGrid1.Items.Count - 2; rowIndex >= 0; rowIndex--)
            {
                if (RadGrid1.Items[rowIndex][RadGrid1.Columns[0]].Text == RadGrid1.Items[rowIndex + 1][RadGrid1.Columns[0]].Text)
                {
                    RadGrid1.Items[rowIndex][RadGrid1.Columns[0]].RowSpan = RadGrid1.Items[rowIndex + 1][RadGrid1.Columns[0]].RowSpan < 2 ? 2 : RadGrid1.Items[rowIndex + 1][RadGrid1.Columns[0]].RowSpan + 1;
                    RadGrid1.Items[rowIndex + 1][RadGrid1.Columns[0]].Visible = false;

                    //RadGrid1.Items[rowIndex + 1][RadGrid1.Columns[1]].Style.Add("border-left", "solid 1px #d4d4d4");
                    //==> It appears well on the Office 2007 skin, but it has a border line on the glow skin.

                    RadGrid1.Items[rowIndex + 1][RadGrid1.Columns[1]].Style.Add("border-left", "solid 1px");
                    //==> Office2007 Skin has a line, but the color does not match, and Glow skin has a border line.
                }
            }
        }

[Doncho]

Hi Park,

Withing the built-in styles of the RadGrid control there is a style setting a "transparent" color to the left border of the first cell of each row:

.RadGrid .rgAltRow > td:first-child, 
.RadGrid .rgRow > td:first-child {
    border-left-color: transparent;
}

This style can only be overridden by setting a specific color (or none) to the left border in question. However, each Telerik skin uses specific border styles. Therefore the desired appearance cannot be achieved without applying a specific style for each Skin used.

I would suggest you use the Browser's DevTools(F12) to inspect the rendered Html elements and the applied styles and define a proper selector for a custom CSS setting the desired borders with respect to the currently used Telerik skin. Check out the first two points in the Improve Your Debugging Skills with Chrome DevTools

In the current case, I would recommend you avoid setting the border styles in the code-behind and use custom CSS instead. 

Here is an example CSS you can use to style the missing borders in Office2007 and Bootstrap:

/*Office2007*/
.RadGrid.RadGrid_Office2007 .rgAltRow > td:first-child,
.RadGrid.RadGrid_Office2007 .rgRow > td:first-child {
    border-left-color: #d0d7e5;
    border-left-width: 1px;
}

/*Bootstrap*/
.RadGrid.RadGrid_Bootstrap .rgAltRow > td:first-child,
.RadGrid.RadGrid_Bootstrap .rgRow > td:first-child {
    border-left-color: #dedede;
    border-left-width: 1px;
}

I hope this will help you find a working solution for the case.

Kind regards,
Doncho
Progress Telerik

[park]

First of all, thank you for the answer. However, this solution is not correct. Because, I provide various skins to users. Should I create a style for each skin? If you can't find a solution to this problem, I won't be upgrading the controls in the future. Because I do not know the difference between the current version (19.3.1023) and the latest version.

[Doncho]

Hi Park,

The built-in Telerik skins provide certain designs applied to the controls via stylesheets. Any of the embedded styles can be overridden according to specific requirements.

As the desired appearance is different from the default one, you can customize the output by overriding the respective styles of each Telerik skin that is used for the RadGrid. Alternatively, you can disable the embedded skins of the RadGrid and style it in any desired manner.

Kind regards,
Doncho
Progress Telerik