popupeditor text center and popup on text click

[ab]

Hello,

I would like to know if it is possible to center the text (I have set the radtextboxitem's textalign to center but this had no effect)

 

Also I would like the popup to popup or close when i click on the text (I tried to do this in the click event but it didn't behave the way i was expecting).

 

Thank you

[Dess | Tech Support Engineer, Principal]

Hello,

Thank you for writing. 

In order to align the text in the center, set the RadPopupEditor.EditableAreaElement.TextAlignment property to ContentAlignment.MiddleCenter.

As to the question about opening/closing the popup when clicking the editable part, note that if the popup is opened and you click the editable part, the popup will automatically be closed as the popup looses focus. You can find below a sample code snippet demonstrating how to open/close the popup when clicking the editable part:

public Form1()
{
    InitializeComponent();

    this.radPopupEditor1.EditableAreaElement.TextAlignment = ContentAlignment.MiddleCenter;
    this.radPopupEditor1.PopupClosing += radPopupEditor1_PopupClosing;
    this.radPopupEditor1.MouseDown += radPopupEditor1_MouseDown;
}

bool shouldClose = false;
bool isOpened = false;

private void radPopupEditor1_PopupClosing(object sender, RadPopupClosingEventArgs args)
{
    args.Cancel = !shouldClose;
}

private void radPopupEditor1_MouseDown(object sender, MouseEventArgs e)
{
    if (!isOpened)
    {
        this.radPopupEditor1.PopupEditorElement.ShowPopup();
        isOpened = true;
    }
    else
    {
        shouldClose = true;
        this.radPopupEditor1.PopupEditorElement.ClosePopup();
        shouldClose = false;
        isOpened = false;
    }
}

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

Regards,
Dess
Telerik by Progress

[ab]

Hello Dess,

Thank you for your answers. Centering the text is now ok.

As you said "if the popup is opened and you click the editable part, the popup will automatically be closed as the popup looses focus" but the problem with

private void radPopupEditor1_PopupClosing(object sender, RadPopupClosingEventArgs args)
{
    args.Cancel = !shouldClose;
}
 is that it won't close anymore unless it is explicitly closed (and it won't close even if you click anyother application)

[Dess | Tech Support Engineer, Principal]

Hello,

Thank you for writing back. 
  
I have modified the custom code in a way to handle the case with closing the popup when clicking outside the RadPopupEditor:
  

public Form1()
{
    InitializeComponent();

    this.radPopupEditor1.EditableAreaElement.TextAlignment = ContentAlignment.MiddleCenter;
    this.radPopupEditor1.MouseDown += radPopupEditor1_MouseDown;
}

bool shouldClose = false;
bool isOpened = false;

private void radPopupEditor1_PopupClosing(object sender, RadPopupClosingEventArgs args)
{
    args.Cancel = !shouldClose;
}

private void radPopupEditor1_MouseDown(object sender, MouseEventArgs e)
{
    if (!isOpened)
    {
        this.radPopupEditor1.PopupEditorElement.ShowPopup();
        isOpened = true;
    }
    else
    {
        this.radPopupEditor1.PopupClosing += radPopupEditor1_PopupClosing;

        shouldClose = true;
        this.radPopupEditor1.PopupEditorElement.ClosePopup();
        shouldClose = false;
        isOpened = false;
        this.radPopupEditor1.PopupClosing -= radPopupEditor1_PopupClosing;
    }
}

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik by Progress

[ab]

Hello Dess,

 

Thanks again for your answer but this doesn't work either. It seems that in the gif you had to click twice to reopen the popup after you close it by clicking outside.

But thanks to your help, I think I found a solution (using the leave event of the radpopupeditor).

Could you please let me know if there is a better way or if this is ok?

Thank you very much

 

    Private shouldClose As Boolean = False
    Private isOpened As Boolean = False

    Private Sub radPopupEditor1_PopupClosing(sender As Object, args As RadPopupClosingEventArgs) Handles RadPopupEditor1.PopupClosing
        args.Cancel = Not shouldClose
        isOpened = Not shouldClose
    End Sub

    Private Sub radPopupEditor1_MouseDown(sender As Object, e As MouseEventArgs) Handles RadPopupEditor1.MouseDown

        If Not isOpened Then
            Me.RadPopupEditor1.PopupEditorElement.ShowPopup()
            isOpened = True
            shouldClose = False
        Else
            shouldClose = True
            Me.RadPopupEditor1.PopupEditorElement.ClosePopup()
        End If


    End Sub

    Private Sub RadPopupEditor1_Leave(sender As Object, e As EventArgs) Handles RadPopupEditor1.Leave
        shouldClose = True
        Me.RadPopupEditor1.PopupEditorElement.ClosePopup()

    'this has to be called because the closing event already occured and left the popup open
    End Sub

 

 

 

 

 

[Dess | Tech Support Engineer, Principal]

Hello,

Thank you for writing back. 
  
The provided code snippet seems to work when the pop-up is opened and you click another control. However, if you click on the empty space on the form, the pop-up is not closed.

In order to precisely detect where the user clicks on the form, you can use a  custom IMessageFilter and detect WM_LBUTTONDOWN. Then, you can iterate the Form.Controls collection and get whether the RadPopUpEditor is clicked considering the Cursor.Position. Otherwise, close the dropdown. The following StackOverflow thread demonstrates a sample approach: http://stackoverflow.com/questions/804374/capturing-mouse-events-from-every-component-on-c-sharp-winform

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik by Progress

[ab]

Hello Dess,

Thank you for your answer and for the explanation. Yes I noticed that there was something wrong but didn't have time to investigate. Thanks to your explanation, I'd like to propose a quick solution. Before I first post I tried a few things and I was willing to avoid checking the cursor position (I actually do that in my project for some other needs but in this case I wanted to keep things simple). Here, I prefer to simply use the mouseEnter and mouseLeave events and toggle shouldclose accordingly.

By the way, radPopupEditor should support this functionality out of the box.

 

Could you please let me know what you think of this:

Imports Telerik.WinControls.UI

Public Class myRadPopUpEditor
    Inherits RadPopupEditor
    Private shouldClose As Boolean = False
    Private isOpened As Boolean = False

    Private Sub myRadPopUpEditor_PopupClosing(sender As Object, args As RadPopupClosingEventArgs) Handles MyBase.PopupClosing
        args.Cancel = Not shouldClose
        isOpened = Not shouldClose
    End Sub

    Private Sub myRadPopUpEditor_MouseDown(sender As Object, e As MouseEventArgs) Handles MyBase.MouseDown
        If Not isOpened Then
            Me.PopupEditorElement.ShowPopup()
            isOpened = True
            shouldClose = False
        Else
            shouldClose = True
            Me.PopupEditorElement.ClosePopup()
        End If
    End Sub

    Private Sub myRadPopUpEditor_MouseLeave(sender As Object, e As EventArgs) Handles MyBase.MouseLeave
        shouldClose = True
    End Sub

    Private Sub myRadPopUpEditor_MouseEnter(sender As Object, e As EventArgs) Handles MyBase.MouseEnter
        shouldClose = False
    End Sub

    Private Sub myRadPopUpEditor_Leave(sender As Object, e As EventArgs) Handles MyBase.Leave
        shouldClose = True
        Me.PopupEditorElement.ClosePopup() 'this has to be called because the closing event already occured and left the popup open
    End Sub

End Class

[ab]

By the way, the Leave event handler is not necessary anymore.

 

Imports Telerik.WinControls.UI

Public Class myRadPopUpEditor
    Inherits RadPopupEditor
    Private shouldClose As Boolean = False
    Private isOpened As Boolean = False

    Private Sub myRadPopUpEditor_PopupClosing(sender As Object, args As RadPopupClosingEventArgs) Handles MyBase.PopupClosing
        args.Cancel = Not shouldClose
        isOpened = Not shouldClose
    End Sub

    Private Sub myRadPopUpEditor_MouseDown(sender As Object, e As MouseEventArgs) Handles MyBase.MouseDown
        If Not isOpened Then
            Me.PopupEditorElement.ShowPopup()
            isOpened = True
            shouldClose = False
        Else
            shouldClose = True
            Me.PopupEditorElement.ClosePopup()
        End If
    End Sub

    Private Sub myRadPopUpEditor_MouseLeave(sender As Object, e As EventArgs) Handles MyBase.MouseLeave
        shouldClose = True
    End Sub

    Private Sub myRadPopUpEditor_MouseEnter(sender As Object, e As EventArgs) Handles MyBase.MouseEnter
        shouldClose = False
    End Sub

End Class

[ab]

By the way, the Leave event handler is not necessary anymore.

Imports Telerik.WinControls.UI

Public Class myRadPopUpEditor
    Inherits RadPopupEditor
    Private shouldClose As Boolean = False
    Private isOpened As Boolean = False

    Private Sub myRadPopUpEditor_PopupClosing(sender As Object, args As RadPopupClosingEventArgs) Handles MyBase.PopupClosing
        args.Cancel = Not shouldClose
        isOpened = Not shouldClose
    End Sub

    Private Sub myRadPopUpEditor_MouseDown(sender As Object, e As MouseEventArgs) Handles MyBase.MouseDown
        If Not isOpened Then
            Me.PopupEditorElement.ShowPopup()
            isOpened = True
            shouldClose = False
        Else
            shouldClose = True
            Me.PopupEditorElement.ClosePopup()
        End If
    End Sub

    Private Sub myRadPopUpEditor_MouseLeave(sender As Object, e As EventArgs) Handles MyBase.MouseLeave
        shouldClose = True
    End Sub

    Private Sub myRadPopUpEditor_MouseEnter(sender As Object, e As EventArgs) Handles MyBase.MouseEnter
        shouldClose = False
    End Sub

End Class

[Dess | Tech Support Engineer, Principal]

Hello,

Thank you for writing back. 

RadPopupEditor is inspired by RadDropDownList and it supports opening/closing the pop-up by clicking the arrow button. Clicking the editable part is not designed to show/hide the pop-up. I have tested the provided code and it seems to achieve your required behavior. The code snippet seems OK. Feel free to use it.

If you have any additional questions, please let me know.

Regards,
Dess
Telerik by Progress

[ab]

Thank you Dess,

When you click the textbox of the RadDropDownList you can edit it so it makes sense to have two different behaviors between the textbox and the arrow button. In the case of the RadPopupEditor it makes less sense; If a user clicks the textbox of the radpopupeditor, he is likely willing to open it.

 

Anyway it is solved. Thank you very much for your help. Very good support.

 

(sorry for the double post but an error message was displayed after the first one but the message was posted anyway).

[Dess | Tech Support Engineer, Principal]

Hello, 

Thank you for writing back. 

I am glad that the desired requirement has already been achieved. As to the question related to clicking the text part, note that similar to RadDropDownList, the text part in RadPopupEditor can be editable which is controlled by the DropDownStyle property.

However, your feedback is greatly appreciated and if other customers have similar requests, we will consider it in the future control's improvement.

If you have any additional questions, please let me know.

Regards,
Dess
Telerik by Progress