How to host a slider control in a data grid view cell, I need to get and set the slider values accordingly

Question

My data grid view should have a column with volume and which holds the slider, the slider value should be adjusted and shown in the cell when not edited.

Answer 1

Hi Ram_Ramki,
You can host TrackBar control in Windows Forms DataGridView cells, see http://msdn.microsoft.com/en-us/library/7tas5c80.aspx.
If there is anything unclear, please let me know.
Best Regards,

---

Bob Wu [MSFT]
MSDN Community Support | Feedback to us

Answer 2

Hi ,

    Thank you, I have used the same and now I am able to see integrate the trackbar into my datagridview. As of now on click on the cell only the track bar will be visible, but for me it should be visible always. Is there any way to do that.

Answer 3

Hi Ram_Ramkim
You need to paint it by overwriting the Paint method, Try my code below.

public class TrackBarColumn : DataGridViewColumn
{
    public TrackBarColumn() : base(new TrackBarCell())
    {
    }

    public override DataGridViewCell CellTemplate
    {
        get
        {
            return base.CellTemplate;
        }
        set
        {
            // Ensure that the cell used for the template is a CalendarCell.
            if (value != null && 
                !value.GetType().IsAssignableFrom(typeof(TrackBarCell)))
            {
                throw new InvalidCastException("Must be a CalendarCell");
            }
            base.CellTemplate = value;
        }
    }
}

public class TrackBarCell : DataGridViewTextBoxCell
{
    [ThreadStatic]
    private static TrackBar tb;
    public TrackBarCell()
        : base()
    {
        if (tb == null)
        {
            tb = new TrackBar();
            tb.Minimum = 0;
            tb.Maximum = 100;
        }
    }

    public override void InitializeEditingControl(int rowIndex, object 
        initialFormattedValue, DataGridViewCellStyle dataGridViewCellStyle)
    {
        // Set the value of the editing control to the current cell value.
        base.InitializeEditingControl(rowIndex, initialFormattedValue, 
            dataGridViewCellStyle);
        TrackBarEditingControl ctrl = DataGridView.EditingControl as TrackBarEditingControl;
        // Use the default row value when Value property is null.
        if (this.Value == null) 
        {
            ctrl.Value = (int)this.DefaultNewRowValue;
        }
        else
        {
            ctrl.Value = (int)this.Value;
        }
    }

    public override Type EditType
    {
        get
        {
            // Return the type of the editing control that CalendarCell uses.
            return typeof(TrackBarEditingControl);
        }
    }

    public override Type ValueType
    {
        get
        {
            // Return the type of the value that CalendarCell contains.

            return typeof(int);
        }
    }

    public override object DefaultNewRowValue
    {
        get
        {
            // Use the current date and time as the default value.
            return 0;
        }
    }

    protected override void Paint(Graphics graphics, Rectangle clipBounds, Rectangle cellBounds, int rowIndex,
        DataGridViewElementStates cellState, object value, object formattedValue, string errorText,
        DataGridViewCellStyle cellStyle, DataGridViewAdvancedBorderStyle advancedBorderStyle, DataGridViewPaintParts paintParts)
    {
        if (this.DataGridView == null)
        {
            return;
        }

        base.Paint(graphics, clipBounds, cellBounds, rowIndex, cellState, value, formattedValue, errorText, cellStyle, advancedBorderStyle,
            paintParts & ~(DataGridViewPaintParts.ErrorIcon | DataGridViewPaintParts.ContentForeground));

        Color backColor;
        bool cellSelected = (cellState & DataGridViewElementStates.Selected) != 0;
        if (PartPainted(paintParts, DataGridViewPaintParts.SelectionBackground) && cellSelected)
        {
            backColor = cellStyle.SelectionBackColor;
        }
        else
        {
            backColor = cellStyle.BackColor;
        }
        if (PartPainted(paintParts, DataGridViewPaintParts.Background))
        {
            if (backColor.A < 255)
            {
                // The NumericUpDown control does not support transparent back colors
                backColor = Color.FromArgb(255, backColor);
            }
            tb.BackColor = backColor;
        }
        tb.Value = int.Parse((string)formattedValue);
        Bitmap bmp = new Bitmap(cellBounds.Width, cellBounds.Height);
        tb.DrawToBitmap(bmp, new Rectangle(0, 0, bmp.Width, bmp.Height));
        graphics.DrawImage(bmp, cellBounds, new Rectangle(0, 0, bmp.Width, bmp.Height), GraphicsUnit.Pixel); ;
    }

    private static bool PartPainted(DataGridViewPaintParts paintParts, DataGridViewPaintParts paintPart)
    {
        return (paintParts & paintPart) != 0;
    }
}

class TrackBarEditingControl : TrackBar, IDataGridViewEditingControl
{
    DataGridView dataGridView;
    private bool valueChanged = false;
    int rowIndex;

    public TrackBarEditingControl()
    {
        this.Value = 0;
        this.Minimum = 0;
        this.Maximum = 100;
    }

    // Implements the IDataGridViewEditingControl.EditingControlFormattedValue 
    // property.
    public object EditingControlFormattedValue
    {
        get
        {
            return this.Value.ToString();
        }
        set
        {            
            if (value is int)
            {
                try
                {
                    // This will throw an exception of the string is 
                    // null, empty, or not in the format of a date.
                    this.Value = int.Parse((String)value);
                }
                catch
                {
                    // In the case of an exception, just use the 
                    // default value so we're not left with a null
                    // value.
                    this.Value = 0;
                }
            }
        }
    }

    // Implements the 
    // IDataGridViewEditingControl.GetEditingControlFormattedValue method.
    public object GetEditingControlFormattedValue(
        DataGridViewDataErrorContexts context)
    {
        return EditingControlFormattedValue;
    }

    // Implements the 
    // IDataGridViewEditingControl.ApplyCellStyleToEditingControl method.
    public void ApplyCellStyleToEditingControl(
        DataGridViewCellStyle dataGridViewCellStyle)
    {
    }

    // Implements the IDataGridViewEditingControl.EditingControlRowIndex 
    // property.
    public int EditingControlRowIndex
    {
        get
        {
            return rowIndex;
        }
        set
        {
            rowIndex = value;
        }
    }

    // Implements the IDataGridViewEditingControl.EditingControlWantsInputKey 
    // method.
    public bool EditingControlWantsInputKey(
        Keys key, bool dataGridViewWantsInputKey)
    {
        // Let the DateTimePicker handle the keys listed.
        switch (key & Keys.KeyCode)
        {
            case Keys.Left:
            case Keys.Up:
            case Keys.Down:
            case Keys.Right:
            case Keys.Home:
            case Keys.End:
            case Keys.PageDown:
            case Keys.PageUp:
                return true;
            default:
                return !dataGridViewWantsInputKey;
        }
    }

    // Implements the IDataGridViewEditingControl.PrepareEditingControlForEdit 
    // method.
    public void PrepareEditingControlForEdit(bool selectAll)
    {
        // No preparation needs to be done.
    }

    // Implements the IDataGridViewEditingControl
    // .RepositionEditingControlOnValueChange property.
    public bool RepositionEditingControlOnValueChange
    {
        get
        {
            return false;
        }
    }

    // Implements the IDataGridViewEditingControl
    // .EditingControlDataGridView property.
    public DataGridView EditingControlDataGridView
    {
        get
        {
            return dataGridView;
        }
        set
        {
            dataGridView = value;
        }
    }

    // Implements the IDataGridViewEditingControl
    // .EditingControlValueChanged property.
    public bool EditingControlValueChanged
    {
        get
        {
            return valueChanged;
        }
        set
        {
            valueChanged = value;
        }
    }

    // Implements the IDataGridViewEditingControl
    // .EditingPanelCursor property.
    public Cursor EditingPanelCursor
    {
        get
        {
            return base.Cursor;
        }
    }

    protected override void OnValueChanged(EventArgs eventargs)
    {
        // Notify the DataGridView that the contents of the cell
        // have changed.
        valueChanged = true;
        this.EditingControlDataGridView.NotifyCurrentCellDirty(true);
        base.OnValueChanged(eventargs);
    }
}

In addition, you might need to read the article below to create a custom DataGridView Column.

http://msdn.microsoft.com/en-US/library/aa730881(v=vs.80).aspx

Best Regards,

---

Bob Wu [MSFT]
MSDN Community Support | Feedback to us

Answer 4

Hi ,

   Thank you for your response, yes now i am overwriting the paint method to get the track-bar on the cell. Thank you for your support.

Best Regards,
Ram.

 

Answer 5

You’re Welcome.
Have a nice day.

---

Bob Wu [MSFT]
MSDN Community Support | Feedback to us

Answer 6

I followed the post and  used the code posted by Bob Wu-MT.
But I receive the error
TrackBarEditingControl' does not implement interface member IDataGridViewEditingControl.EditingPanelCursor

I used VS 2008, please help me to fix the error.

Many thanks

Dung Vu