Theme FlexGrid / SplitButton

Posted by: fsegui on 25 February 2024, 11:56 pm EST

  • Posted 25 February 2024, 11:56 pm EST

    Hi,

    I’ve got two questions regarding C1 controls.

    1/ SplitButton arrow

    Is it possible to change the arrow color by code for C1SplitButton? We have defined colors using the Theme but for some we want to change dynamically the colors.

    2/ FlexGrid cell borders

    When editing some cells we would like to apply an inside border to show what cells can be edited and also change this border color if when leaving edit mode, content is incorrect.

    Is that something possible?

    Thanks

    Florent

  • Posted 26 February 2024, 7:37 pm EST

    Hi Florent,

    Question 1: how did you change the arrow color in theme designer? If it is possible in the theme, you can also change it by code, but I don’t know enough about themes to see the place where this is set.

    Question 2: some time ago, I created a sample which demonstrates how to render custom borders for cells: https://github.com/WolfgangHG/C1FlexGridEnhancements/tree/main/C1FlexGrid452BorderPainter

    Does this help in your situation? Or do you need the border when the cell is in edit mode?

    Best regards

    Wolfgang

  • Posted 27 February 2024, 8:02 pm EST

    Hello Florent,

    Apologies for the delayed response.

    We are sorry, but there is no direct way to change the color of the C1SplitButton’s arrow. You will have to use a C1Theme. For more information on creating and using a C1Theme please refer to https://developer.mescius.com/componentone/docs/win/online-themes/QSCreatingaCustomTheme.html#step2.

    You can change the color of the arrow programmatically as follows:

    // Get theme by name. 
    var theme = C1ThemeController.GetThemeByName("MyTheme", false);
    if (theme != null)
    {
        // Get the color property at the specified path.
        if (theme.Children.GetItemByPath("C1Input\\C1SplitButton\\Buttons\\Default\\ArrowColor") is ColorProp prop)
        {
            prop.Value = Color.FromArgb(_rnd.Next(256), _rnd.Next(256), _rnd.Next(256));
        }
        C1ThemeController.ApplyThemeToControlTree(this, theme);
    }


    To change the cell border’s color, you can utilize the Border property in CellStyle. Refer to the below code to see how to set the border color if the value is correct (in the editable column) in the AfterEdit event:

    [code]//add style for editable column

    var style = c1FlexGrid1.Styles.Add(“editable”);

    style.Border.Color = Color.LightBlue;

    style.Border.Width = 2;

    c1FlexGrid1.Cols[“editable”].Style = style;

    //add a style for correctValues

    style = c1FlexGrid1.Styles.Add(“correctVal”);

    style.Border.Color = Color.LightGreen;

    style.Border.Width = 2;

    private void C1FlexGrid1_AfterEdit(object sender, C1.Win.C1FlexGrid.RowColEventArgs e)

    {

    if(e.Col == c1FlexGrid1.Cols[“editable”].Index)

    {

    if (int.TryParse(c1FlexGrid1[e.Row, e.Col].ToString(), out _))

    {

    c1FlexGrid1.SetCellStyle(e.Row, e.Col, c1FlexGrid1.Styles[“correctVal”]);

    }

    else

    {

    c1FlexGrid1.SetCellStyle(e.Row, e.Col, c1FlexGrid1.Styles[“incorrectVal”]);

    }

    }

    }[/code]

    In the sample, we have set styles for editable or non-editable columns. If you intend to set style for specific cells only, then you can use SetCellStyle() for each cell or cell range.

    If you want to display a border over a complete cell, then you’ll have to use the OwnerDrawCell event to draw borders manually.

    Please refer to the attached sample for implementation. (see FlexGrid_SplitButton.zip)

    Regards,

    Uttkarsh.

Need extra support?

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

Learn More

Forum Channels