This is a migrated thread and some comments may be shown as answers.

Style error when merging cells in RadGrid

3 Answers 24 Views
Grid
This is a migrated thread and some comments may be shown as answers.
park
Top achievements
Rank 1
park asked on 18 Dec 2020, 07:43 AM

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.
                }
            }
        }

3 Answers, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 22 Dec 2020, 12:11 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
park
Top achievements
Rank 1
answered on 03 Mar 2021, 05:45 AM
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.
0
Doncho
Telerik team
answered on 05 Mar 2021, 03:59 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
park
Top achievements
Rank 1
Answers by
Doncho
Telerik team
park
Top achievements
Rank 1
Share this question
or