FlexGrid Cell style

Posted by: nzd on 1 November 2022, 9:21 pm EST

  • Posted 1 November 2022, 9:21 pm EST

    Hello,

    Is there a way to set different BorderColors on a cell in unbound under the PrepareCellStyle?

    I currently only see this from C1Style:

    style.BorderColor

    And would like something like the BorderWidth:

    style.BorderWidth = new C1Thickness(cell.BorderWidthLeft ?? 1, cell.BorderWidthTop ?? 1, cell.BorderWidthRight ?? 1, cell.BorderWidthBottom ?? 1);

    Regards,

    Nikolas

  • Posted 3 November 2022, 11:26 pm EST

    Hi Nikolas,

    Please find the following code for styling the border width and color:

    [code]public class MyCellFactory : GridCellFactory

    {

    public override void PrepareCellStyle(GridCellType cellType, GridCellRange range, C1Style style, C1Thickness internalBorders)

    {

    base.PrepareCellStyle(cellType, range, style, internalBorders);

    if(cellType == GridCellType.Cell )

    {

    C1Thickness borderWidth = ((C1Thickness)style.BorderWidth);

    var leftBorder = borderWidth.Left !=null ? 5.0 : borderWidth.Left;

    style.BorderWidth = new C1Thickness(leftBorder, 2, 2, 2);

    style.BorderColor = C1Color.PaleGreen;

    }

        }
    }[/code]
    

    In your case, the cell might be null.

    Regards,

    Manish Gupta

  • Posted 3 November 2022, 11:45 pm EST - Updated 3 November 2022, 11:50 pm EST

    Hello Manish,

    I would like a separate color on each border, like this:

    LeftBorder = Green

    TopBorder = Yellow

    RightBorder = Red

    BottomBorder = Blue

    Regards,

    Nikolas

  • Posted 8 November 2022, 8:52 pm EST

    Hi,

    The desired behavior cannot be achieved directly and based on some conditions.

    For this, we need to set the CellStyle in the FlexGrid tag and set the border in PrepareCellStyle. Also, set the BorderColor to null.

    Further, we need to set the cell margin to 0. Please refer to the following code snippet for reference:

      <FlexGrid  CellFactory="factory" CellStyle="@("border-top-color:red;border-bottom-color:blue;border-left-color:green;border-right-color:black;")">
    </FlexGrid>
    
     public class MyCellFactory : GridCellFactory
        {
            public override void PrepareCellStyle(GridCellType cellType, GridCellRange range, C1Style style, C1Thickness internalBorders)
            {
                base.PrepareCellStyle(cellType, range, style, internalBorders);
                if(cellType == GridCellType.Cell )
                {
                    C1Thickness borderWidth = ((C1Thickness)style.BorderWidth);
                    var leftBorder = borderWidth.Left !=null  ? 5.0 : borderWidth.Left; 
                    style.BorderWidth = new C1Thickness(7, 7, 10, 10);
                    style.BorderColor = null;
    
                }
    
            }
        }
    
    <style>
        .flexgrid-cell{
             margin:0 !important;
        }
    </style>

    Regards,

    Manish Gupta

  • Posted 8 November 2022, 9:19 pm EST - Updated 8 November 2022, 9:24 pm EST

    Hello again,

    This works, but is it possible to set the colors on specific cells?

    So that one cell has following:

    LeftBorder = Green

    TopBorder = Yellow

    RightBorder = Red

    BottomBorder = Blue

    And another cell has following:

    LeftBorder = Blue

    TopBorder = Black

    RightBorder = Purple

    BottomBorder = Green

    Regards,

    Nikolas

  • Posted 9 November 2022, 8:23 pm EST

    Hi Nikolas.

    We are sorry for the inconvenience, we are able to replicate the issue at our end and there is no way for your requirement.

    We have raised a query with the internal tracking id C1-5231

    Hope it helps!

    Regards,

    Manish Gupta

  • Posted 21 March 2023, 8:57 pm EST

    Hi Nikolas,

    The issue can be fixed now, with the CSS class setting using the CellFactory.

    Alternative is the configure the CellStyle property:

    <FlexGrid CellStyle="@(new C1.Blazor.Core.C1Style("border-top: thick double #32a1ce !important; border-bottom: 3px solid !important;"))"/> 
    


    or configure cell via GridCellFactory:

    class CustomCellFactory : GridCellFactory
    {
        public override void PrepareCellStyle(GridCellType cellType, GridCellRange range, C1Style style, C1Thickness internalBorders)
        {
            base.PrepareCellStyle(cellType, range, style, internalBorders);
            style["border-top"] = " thick double #32a1ce !important;";
            style["border-left"] = " thick double red !important;";
        }
    }

    Hope it helps!

    Regards,

    Manish Gupta

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels