[Solved] Unable to format custom grid cell with dots ring style waiting bar

[Toby]

Hi,

I have a requirement to show a column congtaining waiting bar dot rings in a grid view.

I have the currentcode which defines the custom cell and also the custom column

//////////////////////////////////////
// custom cell
//////////////////////////////////////

public class WaitingDotsRingCellElement : GridDataCellElement
{
    private RadWaitingBarElement waitingElement;
    private DotsRingWaitingBarIndicatorElement ringElement;


    public WaitingDotsRingCellElement ( GridViewColumn column, GridRowElement row )
        : base ( column, row )
    {
    }


    protected override void CreateChildElements ( )
    {
        base.CreateChildElements ();

        ringElement = new DotsRingWaitingBarIndicatorElement ();

        ringElement.DotRadius = 4;
        ringElement.LastDotRadius = 1;
        ringElement.Radius = 10;
        ringElement.ElementCount = 8;
        ringElement.NumberOfColors = 4;
        ringElement.ElementColor = Color.Red;

        waitingElement = new RadWaitingBarElement ();
        waitingElement.WaitingIndicators.Clear ();
        waitingElement.WaitingSpeed = 40;
        waitingElement.WaitingStyle = WaitingBarStyles.DotsRing;
        waitingElement.WaitingIndicators.Add (ringElement );

        Children.Add ( waitingElement );
    }


    protected override void SetContentCore ( object value )
    {
        if ( Value != null && Value != DBNull.Value )
        {
            if ( Convert.ToInt32 ( Value ) == 0 )
            {
                waitingElement.StopWaiting ();
            }
            else if ( Convert.ToInt32 ( Value ) == 1 )
            {
                waitingElement.StartWaiting ();
            }

        }
    }


    public override bool IsCompatible ( GridViewColumn data, object context )
    {
        return data is WaitingDotsRingColumn && context is GridDataRowElement;
    }


    protected override Type ThemeEffectiveType
    {
        get
        {
            // Ensures the cell inherits grid cell styling
            return typeof ( GridDataCellElement );
        }
    }
} // WaitingDotsRingCellElement


//////////////////////////////////////
// custom column
//////////////////////////////////////


public class WaitingDotsRingColumn : GridViewDataColumn
{
    public WaitingDotsRingColumn(string fileName ) : base(fileName)
    {
    }


    public override Type GetCellType ( GridViewRowInfo row )
    {
        if ( row is GridViewDataRowInfo )
        {
            return typeof ( WaitingDotsRingCellElement );
        }
        return base.GetCellType ( row );
    }
} // WaitingDotsRingColumn

My issue is that the properties "radius" and "element count" are not being set correctly, however other properties such as element color are being set correctly.

My grid view row height is being set to 32 via gridView.TableElement.RowHeight

In addition, how do i get rid of the "button" effect appearing in the cell background?

Kind regards
Toby

[Nadya | Tech Support Engineer]

Hello, Toby,

Thank you for sharing your custom implementation for the WaitingDotsRingCellElement and WaitingDotsRingColumn. I was able to use these custom classes in my sample project and observe what you have described.

Regarding the WaitingDotsRingCellElement, I would like to note that there is no need to WaitingIndicators.Clear() and then add a new DotsRingWaitingBarIndicatorElement because when you specify WaitingBarStyles.DotsRing, it automatically creates DotsRingWaitingBarIndicatorElement. Hence, there is no need to add it manually. You can access the built-in DotsRingWaitingBarIndicatorElement from the WaitingIndicators[0] collection and cast it to DotsRingWaitingBarIndicatorElement.

Also, to take effect, you should set the Radius and ElementCount properties after the RadWaitingBarElement is fully initialized. This is why you can set the DotsRingWaitingBarIndicatorElement's properties in the cell constructor, instead of CreateChildElements(). 

To remove the gray background ("button" effect), you can set the waitingElement.BackColor and GradientStyle.

I modified the WaitingDotsRingCellElement to reflect the above-mentioned changes. Here is the updated code snippet:

public class WaitingDotsRingCellElement : GridDataCellElement
{
    private RadWaitingBarElement waitingElement;
    private DotsRingWaitingBarIndicatorElement ringElement;


    public WaitingDotsRingCellElement(GridViewColumn column, GridRowElement row)
        : base(column, row)
    {

        DotsRingWaitingBarIndicatorElement ringElement = waitingElement.WaitingIndicators[0] as DotsRingWaitingBarIndicatorElement;
        ringElement.DotRadius = 4;
        ringElement.LastDotRadius = 1;
        ringElement.Radius = 10;
        ringElement.ElementCount = 8;
        ringElement.NumberOfColors = 4;
        ringElement.ElementColor = Color.Red;

        //apply transparent background to the waiting bar element to make it blend with the cell background
        waitingElement.GradientStyle = GradientStyles.Solid;
        waitingElement.BackColor = Color.Transparent;
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        waitingElement = new RadWaitingBarElement();
        waitingElement.WaitingSpeed = 40;
        waitingElement.WaitingStyle = WaitingBarStyles.DotsRing;
        Children.Add(waitingElement);
    }

    protected override void SetContentCore(object value)
    {
        if (Value != null && Value != DBNull.Value)
        {
            if (Convert.ToInt32(Value) == 0)
            {
                waitingElement.StopWaiting();
            }
            else if (Convert.ToInt32(Value) == 1)
            {
                waitingElement.StartWaiting();
            }

        }
    }


    public override bool IsCompatible(GridViewColumn data, object context)
    {
        return data is WaitingDotsRingColumn && context is GridDataRowElement;
    }


    protected override Type ThemeEffectiveType
    {
        get
        {
            // Ensures the cell inherits grid cell styling
            return typeof(GridDataCellElement);
        }
    }
} // WaitingDotsRingCellElement

I hope this helps. Please let me know if you have any other questions.

Regards,
Nadya | Tech Support Engineer
Progress Telerik