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

Customize GridViewCalculatorColumn

3 Answers 133 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 13 Nov 2017, 10:11 PM

I want to create a custom calculator edit column based off the GridViewCalculatorColumn class (or RadCalculatorDropDownElement Class), but need some help getting started.  I need to remove several buttons, including the memory buttons and the decimal button (only positive integers are allowed), and round to an integer when %, SqRt, or another operation generates a decimal.

In addition I need to add a property that will pass in a default value, and add a button which will display this default value as its button text, and when pressed will replace the value with the default (each row could have its own default).

Please let me know if there is an example similar available, or any guidance that would help.

Thanks

3 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 15 Nov 2017, 07:19 AM
Hello, Mark,

Thank you for writing.  

RadGridView offers a GridViewCalculatorColumn which allows editing numbers using a popup with a calculator. In the CellEditorInitialized event, you can customize the activated editor and hide some unnecessary buttons or add some new buttons. Here is a sample code snippet demonstrating how to hide several buttons and add a new one which Click event manipulates the value in the RadCalculatorEditor
public RadForm1()
{
    InitializeComponent();
 
    GridViewCalculatorColumn column = new GridViewCalculatorColumn("Calculator column");
    this.radGridView1.Columns.Add(column);
    this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
    this.radGridView1.Rows.Add(3.14159);
    this.radGridView1.Rows.Add(2.71828);
    this.radGridView1.Rows.Add(1.41421);
    this.radGridView1.Rows.Add(0.57721);
    this.radGridView1.Rows.Add(4.66920);
    this.radGridView1.Rows.Add(3.27582);
    this.radGridView1.Rows.Add(0.56714);
 
    this.radGridView1.CellEditorInitialized += radGridView1_CellEditorInitialized;
}
 
private void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
    RadCalculatorEditor calculator = e.ActiveEditor as RadCalculatorEditor;
    if (calculator != null)
    {
        RadCalculatorEditorElement calcElement = calculator.EditorElement as RadCalculatorEditorElement;
        calcElement.CalculatorContentElement.ButtonMplus.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        calcElement.CalculatorContentElement.ButtonMminus.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        calcElement.CalculatorContentElement.ButtonMS.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        calcElement.CalculatorContentElement.ButtonMR.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        calcElement.CalculatorContentElement.ButtonMC.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        calcElement.CalculatorContentElement.ButtonSqrt.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
 
        RadCalculatorDigitButtonElement myButton = new RadCalculatorDigitButtonElement("ABC");
        myButton.Click += myButton_Click;
        calcElement.CalculatorContentElement.GridLayout.Children.Insert(0, myButton);
    }
}
 
int defaultValue = 5;
 
private void myButton_Click(object sender, EventArgs e)
{
    RadCalculatorDigitButtonElement myButton = sender as RadCalculatorDigitButtonElement;
    ((RadCalculatorContentElement)myButton.Parent.Parent).CalculatorElement.Value = defaultValue;
}

Note that this is just a approach and it may not cover all possible cases. Feel free to modify it in a way which suits your requirement best.

I hope this information helps. Should you have further questions I would be glad to help.

 Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Mark
Top achievements
Rank 1
answered on 30 Nov 2017, 04:08 PM

Thanks a lot for this answer!  I have been playing with it for the last several weeks and have hit a few walls that I hope you can help me with.  Below is my CellEditorInitialized event.  I have two calculator edit columns and need different custom buttons for each.  It appears adding a new Digit Button at index 0 just pushes it on the stack of buttons.  I created a loop that attempts to look at the button text of the first buttons in the stack and remove them as necessary.  Not sure if there is a better way to reset the calculator each time it enters this event.

Also, When I try to add two custom buttons, only the first will show. I'm not sure if it is a formatting thing, but I can find any properties where I specifically set the location of button, or if it will truly only add one custom button.  Please advise.

And thanks again for you initial response.

 

    Private Sub radGVLifeCycle_CellEditorInitialized(sender As Object, e As GridViewCellEventArgs) Handles radGVLifeCycle.CellEditorInitialized

        Dim calculator As RadCalculatorEditor = TryCast(e.ActiveEditor, RadCalculatorEditor)
        If calculator IsNot Nothing Then
            Dim calcElement As RadCalculatorEditorElement = TryCast(calculator.EditorElement, RadCalculatorEditorElement)
            calcElement.CalculatorContentElement.ButtonMplus.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
            calcElement.CalculatorContentElement.ButtonMminus.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
            calcElement.CalculatorContentElement.ButtonMS.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
            calcElement.CalculatorContentElement.ButtonMR.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
            calcElement.CalculatorContentElement.ButtonMC.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
            calcElement.CalculatorContentElement.ButtonSqrt.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
            calcElement.CalculatorContentElement.ButtonPercent.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
            calcElement.CalculatorContentElement.ButtonReciprocal.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
            calcElement.CalculatorContentElement.ButtonSign.Visibility = Telerik.WinControls.ElementVisibility.Collapsed

            'THIS IS DONE TO RESET THE CALCULATOR CONTROL EACH TIME
            Dim bLoop As Boolean = True
            Do While bLoop
                Dim btn As RadCalculatorDigitButtonElement = TryCast(calcElement.CalculatorContentElement.GridLayout.Children.Item(0), RadCalculatorDigitButtonElement)
                If btn IsNot Nothing Then
                    Select Case btn.Text
                        Case "SqFt", "Est", "Calc"
                            calcElement.CalculatorContentElement.GridLayout.Children.RemoveAt(0)
                        Case Else
                            bLoop = False
                    End Select
                Else
                    bLoop = False
                End If
            Loop

            If e.Column.Name = "QuantityEdit" Then
                Dim btnSqFt As New RadCalculatorDigitButtonElement("SqFt")
                btnSqFt.Name = "btnSqFt"
                AddHandler btnSqFt.Click, AddressOf btnSqFt_Click
                calcElement.CalculatorContentElement.GridLayout.Children.Insert(0, btnSqFt)
            End If
            If e.Column.Name = "RemainingLifeEdit" Then
                'ONLY THE FIRST BUTTON APPEARS - HOW TO GET THEM TO APPEAR SIDE-BY-SIDE
                Dim btnCalc As New RadCalculatorDigitButtonElement("Calc")
                AddHandler btnCalc.Click, AddressOf btnCalc_Click
                calcElement.CalculatorContentElement.GridLayout.Children.Insert(0, btnCalc)
                Dim btnEst As New RadCalculatorDigitButtonElement("Est")
                AddHandler btnEst.Click, AddressOf btnEst_Click
                calcElement.CalculatorContentElement.GridLayout.Children.Insert(0, btnEst)
            End If

        End If

    End Sub

 

 

0
Hristo
Telerik team
answered on 05 Dec 2017, 08:32 AM
Hi Mark,

Thank you for writing back.

The calculator editor has a special GridLayout object which is responsible for the layout of the child. It exposes RowIndex and ColumnIndex rad-properties which need to be set for each of the child elements added to it. You can add multiple button elements this way: 
private void RadGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
    RadCalculatorEditor calculator = e.ActiveEditor as RadCalculatorEditor;
    if (calculator != null)
    {
        RadCalculatorEditorElement calcElement = calculator.EditorElement as RadCalculatorEditorElement;
        calcElement.CalculatorContentElement.ButtonMplus.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        calcElement.CalculatorContentElement.ButtonMminus.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        calcElement.CalculatorContentElement.ButtonMS.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        calcElement.CalculatorContentElement.ButtonMR.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        calcElement.CalculatorContentElement.ButtonMC.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        calcElement.CalculatorContentElement.ButtonSqrt.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
 
        RadCalculatorDigitButtonElement myButton = new RadCalculatorDigitButtonElement("ABC");
        myButton.SetValue(GridLayout.RowIndexProperty, 0);
        myButton.SetValue(GridLayout.ColumnIndexProperty, 0);
        calcElement.CalculatorContentElement.GridLayout.Children.Add(myButton);
 
        RadCalculatorDigitButtonElement myButton2 = new RadCalculatorDigitButtonElement("DEF");
        myButton2.SetValue(GridLayout.RowIndexProperty, 0);
        myButton2.SetValue(GridLayout.ColumnIndexProperty, 1);
        calcElement.CalculatorContentElement.GridLayout.Children.Add(myButton2);
 
        myButton.Click += myButton_Click;
        myButton2.Click += myButton_Click;
    }
}

As to the loop, you will need to perform check of the added child elements every time you open the editor depending on your actual scenario. If it can fit your local setup instead of removing the elements you no longer need you can hide them by setting their Visibility property. 

I am attaching my test project as well as a short video showing the result on my end.

I hope this helps. Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
GridView
Asked by
Mark
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Mark
Top achievements
Rank 1
Hristo
Telerik team
Share this question
or