Using Trial to Evaluate and need some theming help...

[Damien]

Hi all

I have downloaded the trial today for Winforms and the main reason for this is to be able to theme the controls so it will display the way I want it to on all versions of Windows (I am a bit picky when it comes to my user interface :) ).

I have in my application three distinct modules and each module has its own color base, green, blue and red (and buttons also have a fourth, grey). The application is currently a Flash Builder Application, so achieving the different colors was not an issue, changing it to a C# application has meant major time delays as I attempt to replicate what was so easily achievable as a Flash Builder application.

Anyway, the controls I mainly use are TextBoxes, ComboBoxes, CheckBoxes, DataGrids, Buttons and Custom popup forms. I played with the buttons today (yes I chose the easiest first) and I have this working perfectly. I then tried TextBoxes and ComboBoxes and hit a wall. The text highlight color and mouse hover over colors, I can't seem to locate to change.

Other things I currently do is that my  have alternating row colors, so do my . I also have specific row and text formatting for some  if a certain cell contains a specific qualifier.

Is it possible for a Checkbox to have an X instead of a tick?

Is this all possible with this or am I needing to look at something else?

I also would prefer the main application form to be unthemed, running as it would natively, just the controls within the application to be themed, is that possible?

Hopefully, this will be what I am after, I have tried Nevron Controls and even though it looks like that can achieve this, their documentation and examples have no meat on the bones, so it is difficult to pick up quickly without support's assistance.

thanks.

[Dimitar]

Hello Damien,

Can you share a screenshot of your current application? This will give us a better understanding of the desired look. 

The highlight (selection) color changing is supported in RadTextBoxControl only. In RadTextBox it is coming from the operating system and cannot be changed. Here is how to set it in RadTextBoxControl:

radTextBoxControl1.SelectionColor = Color.Red;

The easiest way to change the hover colors would be to edit the theme (because this would affect all controls). We have 20 themes and each one can be edited in order to suit your requirements. More information is available in the following articles:

• Using custom themes.
• Working With Repository Items
• Loading Predefined Themes

What you should do is open a predefined theme and edit the already applied styles and then use it in your application. The attached image shows where you can find the hover styles for the textbox. 

Our grid supports alternating row color and conditional formatting:

• Alternating Row Color
• Conditional Formatting Cells
  

Here is how to set the image of the checkbox:

radCheckBox1.ButtonElement.CheckMarkPrimitive.Image = Image.FromFile(@"C:\img\delete.png");

It is possible to use the standard form with our controls as well. Just add a standard form to the solution an then add any controls you want.

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik

[Damien]

Hi Dimitar

Thanks for your reply.

I have attached two images, one is what it currently looks like in the Flash Builder app and the second is the C# one using the Nevron controls (The DataGridView though is the stock standard one). The Flash Builder one has the two datagrids and the C# one just has the one.

 

Thanks for the information regarding the RadTextBoxControl, I will use that instead of the standard RadTextBox - is that something that can be set is the Style Builder also because I can't see that as an option? I was actually just looking at changing the tick symbol to an x symbol on the RadCheckBox (not using an actual image), but no biggie really if I can't.

 

I did look at all of your themes and spent a day working through the Visual Style Builder before posting. The RadDropDownList I could not get to work no matter what I tried (even opening the predefined themes). I have attached as an example the ComboBox and CheckBox that I customised with the Nevron controls, and this is the type of thing I am after. I also tried a RadMessageBox, but I couldn't find that in the Visual Style Builder to customise, is that a mix of controls?

 

I also have added some screenshots of the Flash Builder application showing a few of the controls and how they are currently themed, so you can see what I need to achieve.

 

The Hover over in a RadDropDownList and RadGridView is important, as well as the text selection highlight in all controls.

 

Thanks.

[Damien]

I just tried setting the selection of a RadTextBoxControl...

radTextBoxControl1.SelectionColor = Color.FromArgb(255, 168, 238, 196);

However the colour is actually RGB = 221,248,232 - so a faded colour, not the set colour. Is that to be expected?

Thanks

[Dimitar]

Hi Damien,

There is no option for the SelectionColor in Visual Style Builder and it should be set in code. Yes, the color is a bit faded, this is controlled by the SelectionOpacity property. 

RadMessageBox does not have separate styles, it is composed of a form and other controls and is using their styles. 

I am not sure with which parts of the drop-down list you are having trouble. Could you be more specific? What can be tricky is centering the items since this needs to be done to be using an event (because of the UI Virtualization):

private void RadDropDownList1_VisualListItemFormatting(object sender, Telerik.WinControls.UI.VisualItemFormattingEventArgs args)
{
    args.VisualItem.TextAlignment = ContentAlignment.MiddleCenter;
}

Here is how you can center the text in the textbox of the drop down list: 

radDropDownList1.DropDownListElement.EditableElement.TextBox.TextBoxItem.TextAlign = HorizontalAlignment.Center;

To change the hover color of the items in the drop-down you need to go to the ListControl. This control is used in the drop down. The attached image shows which styles should be changed. 

This can be changed in the grid as well. I have attached another image that shows where you can find the hover color of the data cells/rows.

Unfortunately, in most of the controls where a textbox is used internally, we are using a RadTextBox where the highlight color can't be changed.

Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik

[Damien]

Thanks for the guidance, I have successfully themed the DropDownList. Is there a way to set a minimum height for the list elements in the  or is this done in code?

 

I tried theming the CheckBox so that the standard, hover and press backgrounds in the checkbox itself set, but it seems to ignore the settings I make and still have the pale blue fill and blue border. I am doing this in the RadCheckBox > RadCheckBoxElement and RadCheckMark (not that there a hover and press option for this one there). Can this not be changed? Essentially I want a gradient fill like I have on the buttons and the border to remain 102,102,102.

 

I am also looking for the DateTime Picker - I can't seem to find the settings to change the hover and selection of the calendar (background, and border) - when I look at the elements and set it to show only applied repositories, nothing is showing that indicates the blue hue. Can you also set the format of the selected date to dd//mm/? And can I disable the selection of dates in the future (i.e. today's date is the latest date that can be selected, only dates prior to and including today are selectable)?

 

Can I remove the dotted inner border from the RadButton when the button has been selected/pressed?

 

If I save my theme as a package - how do I apply/use it? I have already exported the of some controls and I can add those in using the RadThemeManager and loading from file, but can't seem to see the option for the files.

 

Is it possible to view all the repository items so that I can go through each one and set it (which I assume in turn will be reflected across all the controls in the theme)?

 

Sorry for the thousands of questions, I am just excited by the possibilities and want to see as many of my standard controls themed so I can decide to make a purchase or not.

 

Since you mentioned that the RadTextBox is the default standard you use with elements that require a textbox, is that likely to change to a RadTextBoxControl so that more of it can be themed (like text selection)? I am hoping this is a possibility.

 

Thanks again, I am loving your program so far :)

 

[Dimitar]

Hi Damien,

The minimum size should be set in code:

radDropDownList1.DropDownMinSize = new Size(300, 300);

By default, the checkbox fill is not painted. To set the hover color you need to go to the MouseOver state and create new fill and set it. You need to check the ShouldPaint property as well (see attached).

Go to RadCalendar and expand up to CalendarCellElement. You will see all the states and the applied repositories (second attached image). You can set the format in the code behind. To disable particular dates set the Max/Min Date property:

radDateTimePicker1.Format = DateTimePickerFormat.Custom;
radDateTimePicker1.CustomFormat = "dd/MM";
radDateTimePicker1.MaxDate = DateTime.Now;

The focus border is controlled by the AllowShowFocusCues property:

radButton1.AllowShowFocusCues = false;

The easiest way to load the theme is by using the following approach:

ThemeResolutionService.LoadPackageFile(@"C:\ControlDefault1.tssp");
ThemeResolutionService.ApplicationThemeName = "ControlDefault1";

The theme manager is suitable when loading XML theme files.

When the Show Only Applied Repositories is unchecked all repositories are visible.

It is possible to change the RadTextBox to RadTextBoxControl in some places like when used as grid editor. I cannot say if it can be changed in all controls. Which are the ones you are interested in? Please note that SelctionColor is the only element that cannot be styled in RadTextBox.

Should you have any other questions do not hesitate to ask. 

Regards,
Dimitar
Progress Telerik

[Damien]

Thanks heaps for your assistance.

 

The TextBoxControl would be great in the DropDownList, as it looks horrible in a greenish theme and the highlighted text is the bright blue standard (see attached image). If I could even disable this for the DropDownList Textbox element, that would also be fine, that way when the popup is open it isn't highlighting the text and when it closes it isn't highlighting the text.

 

I know you mentioned that the difference between the RadTextBoxControl and the RadTextBox is the ability to change the and that just happens to be the one thing that I DO want to change :) where ever I have an input text field.

 

In relation to the CheckBox, the mouse over I want is not the entire background as shown in your post, it is just the checkmark component. If I use the Windows8 Theme as a base, it has the blue highlight and border on it. I am now trying the default base theme and maybe just changing the tick image with the method you provided. There is no way of setting it to a Font character like the "Multiplication Sign" instead of an image?

 

Are all your control touch-enabled, and if so, is that by default or will I have to code for both possibilities? I have some users with touch screens, and they will want to use that where possible.

 

The size I was meaning for the DropDown, wasn't the popup size, but the "Cell" height for each item/element - I just want it to be set to something like 22 so that the items are spread out a little more (see attached image).

 

If I enable Alternating Colors on the DropDownList - where is the second set? Can that be done in the theme, or does it need to be in code or the properties section of the control?

 

thanks again - sorry for all the questions :)

[Damien]

I have just done this with the Checkbox...

this.SaveUserDefaults.ButtonElement.CheckMarkPrimitive.Image = Properties.Resources.x;

And the X shows perfectly, but behind it is the standard green tick - how do I prevent the standard existing checkmark image from showing behind it? I am just using the ControlDefault theme on this control.

Thanks.

[Dimitar]

Hi Damien,

I have created a small project that shows how you can add a new RadTextBoxControl element to a DropDownList. 

You can unselect the text as well:

private void RadDropDownList1_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
{
    radDropDownList1.DropDownListElement.EditableElement.TextBox.TextBoxItem.SelectionLength = 0;
}

There is an issue with the checkbox and some states are missing from Visual Style Builder. I have logged this issue in our Feedback Portal. You can track its progress, subscribe for status changes and add your comment to it here. I have also updated your Telerik Points.

Until this is resolved you can set this in code:

    radCheckBox1.ButtonElement.MouseEnter += CheckMarkPrimitive_MouseEnter;
    radCheckBox1.ButtonElement.MouseLeave += CheckMarkPrimitive_MouseLeave;
}

private void CheckMarkPrimitive_MouseLeave(object sender, EventArgs e)
{

    radCheckBox1.ButtonElement.CheckMarkPrimitive.Fill.ResetValue(BorderPrimitive.BackColorProperty, ValueResetFlags.Local);


private void CheckMarkPrimitive_MouseEnter(object sender, EventArgs e)
{

    radCheckBox1.ButtonElement.CheckMarkPrimitive.Fill.BackColor = Color.Red;
}

You will be able to interact with the controls on a touchscreen just like with the mouse. You need to write code if you want a to handle a specific gesture. In addition, you can allow your users to switch to a touch-theme which is optimized for such screens:

• Touch Support 
• Touch Enabled Themes
  

There is a property for the items' height:

this.radDropDownList1.ListElement.ItemHeight = 50;

Use the following properties for the alternating color:

this.radDropDownList1.ListElement.EnableAlternatingItemColor = true;
this.radDropDownList1.ListElement.AlternatingItemColor = Color.Red;

Here is how you can remove the check element:

radCheckBox1.ButtonElement.CheckMarkPrimitive.CheckElement.ShouldPaint = false;

I hope this will be useful. 

Regards,
Dimitar
Progress Telerik

[Damien]

Thank you so much for your assistance, it has been invaluable.

 

I have set one of my DropDownLists to use a RADTextBoxControl and it works great (I added textBoxControl.TextAlign = HorizontalAlignment.Center; to Center it too). I noticed that when I typed the name the drop down opens displaying a match, and there is a drag control at the bottom - how do I get rid of that? Also, I have an event that fires when the DropDown was when typing a name and selecting the match, this isn't fired, which event do I need to include to fire my code (essentially it sets focus another control)?

 

If I click on the text area, to make the text already there become fully selected, I did the following (is this the best way)?

textBoxControl.Click += Tb_TextClick;

 

private void Tb_TextClick(object sender, EventArgs e)
{
    .SelectAll();
}

 

Thanks for the information regarding the alternating with the dropdown - there is a side effect though, the hover for the mouse is not displayed when hovering over the row with the alternate , just the row that has the standard white background. Have I done something wrong in my , or is this just the way it works for this scenario? And will that be the same when I attempt to do it on a DataGrid as well?

 

Thanks again for your assistance Dimitar.

 

Damien

[Dimitar]

Hi Damien,

This is the autocomplete functionality. Remove the following line and the KeyPress event handler to disable it:

this.radDropDownList1.AutoCompleteMode = AutoCompleteMode.Suggest;

You can use the SelectedIndexChanged event. What was the event that you were using? What was the exact moment you want it to fire?

Your code for selecting the text is OK.

Setting the color in code overrides the one set in the theme. To achieve the desired effect you can change the color in the theme programmatically:

private void RadDropDownList1_VisualListItemFormatting1(object sender, VisualItemFormattingEventArgs args)
{
    if (args.VisualItem.Data.Index %2 ==0)
    {
        args.VisualItem.SetThemeValueOverride(LightVisualElement.BackColorProperty, Color.Red, "");
        args.VisualItem.SetThemeValueOverride(LightVisualElement.GradientStyleProperty, GradientStyles.Solid, "");
    }
    else
    {
        args.VisualItem.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
        args.VisualItem.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
    }
}

Do not hesitate to contact us if you have other questions.

 

Regards,
Dimitar
Progress Telerik

[Damien]

I actually don't have this line anywhere...

this.radDropDownList1.AutoCompleteMode = AutoCompleteMode.Suggest;

I have this one...

this.radDropDownList1.DropDownListElement.AutoCompleteSuggest.AutoComplete(e);

I am happy for the DropDown to show the filtered list, I just don't want the grab area underneath the popup.

The Event I was using to set focus on another control was PopupClosed which fires whether the user selects a new item, or just opens the popup and then close it without changing the selection.

 

I will try the formatting for the dropdown, thanks for your help.

[Damien]

Okay I tried the code for the alternating rows to fix the hover.

I would like the first row to have a white background and then the alternate colour, which is the default. Using the code you provided it changes it to the first one being the colour and then the white one, however the highlight with mouse over works fine.

 

If I change it so that it changes it to the same as the default by changing this to if (args.VisualItem.Data.Index %2 !=0) then it displays how I want it (and what is the same as the default), but the hover once again stops working when it hovers over the non-white background.

 

Have I done something wrong, or is it not possible to work the way I have described it?

 

thanks.

[Damien]

When using themes I load these from a file on my system. So does that mean that the application (if running from another system) will look for these files, or does your controls embed these when the application is built?

 

I see this in the Form1.Deigner.cs file, so should I be embedding this files and using them that way, or will this be okay?

 

            //
            // radThemeManager1
            //
            themeSource1.ThemeLocation = "D:\\Users\\dpd\\Documents\\Visual Studio 2017\\Projects\\Resources\\Themes\\MyWindows8_St" +
    "eri_Repository.xml";
            themeSource2.ThemeLocation = "D:\\Users\\dpd\\Documents\\Visual Studio 2017\\Projects\\Resources\\Themes\\MyWindows8_St" +
    "eri_Telerik_WinControls_UI_RadButton.xml";
            themeSource3.ThemeLocation = "D:\\Users\\dpd\\Documents\\Visual Studio 2017\\Projects\\Resources\\Themes\\MyWindows8_St" +
    "eri_Telerik_WinControls_UI_RadDropDownList.xml";
            themeSource4.ThemeLocation = "D:\\Users\\dpd\\Documents\\Visual Studio 2017\\Projects\\Resources\\Themes\\MyWindows8_St" +
    "eri_Telerik_WinControls_UI_RadListControl.xml";
            themeSource5.ThemeLocation = "D:\\Users\\dpd\\Documents\\Visual Studio 2017\\Projects\\Resources\\Themes\\myWindows8_Re" +
    "pository.xml";
            themeSource6.ThemeLocation = "D:\\Users\\dpd\\Documents\\Visual Studio 2017\\Projects\\Resources\\Themes\\myWindows8_Te" +
    "lerik_WinControls_UI_RadButton.xml";
            this.radThemeManager1.LoadedThemes.AddRange(new Telerik.WinControls.ThemeSource[] {
            themeSource1,
            themeSource2,
            themeSource3,
            themeSource4,
            themeSource5,
            themeSource6});

[Damien]

As an update to the theme manager.

I added my files as resources in Visual Studio and set them to be an embedded resource, I then changed my themes from files to the resources and now they do not get applied to the application. Not sure what I am doing wrong, but it seems I have done something wrong.

 

I followed this article in relation to adding them...

https://docs.telerik.com/devtools/winforms/tools/theme-manager/load-themes-from-a-resource

 

Do I need to apply the theme in code and not in the visual designer?

 

Thanks.

[Damien]

Also doing this to load a package from a resource breaks my application...

 

ThemeResolutionService.LoadPackageResource("Properties.Resources.MyWindows8.tssp");

[Hristo]

Hi Damien,

Thank you for writing.

Regarding the drop-down list and the sizing grip, please make sure that the DropDownSizingMode is set to None. This will disable the resizing of the popup: 

this.radDropDownList1.DropDownSizingMode = SizingMode.None;

About the alternating color, changing the condition to if (args.VisualItem.Data.Index % 2 != 0) is working well on my end, you can refer to the attached short video. As I understand the hover color is lost on your end, this indicates that the color has not been reset. Please make sure that you resetting it as in the code snippet my colleague sent you.

About the theme manager, indeed you can use the themes as resources and embed them as per the approach in this article: https://docs.telerik.com/devtools/winforms/tools/theme-manager/load-themes-from-a-resource. Please pay attention that you need to fully qualify the name and add the namespace. For example, if the themes are located in a folder you also need to add the name of the folder. I am attaching a screenshot showing the result on my end.

With the theme resolution service, you need to load the theme files which are embedded in your application. You do not need to add them as to the .resx file. Please check the example here: https://docs.telerik.com/devtools/winforms/themes/using-custom-themes#loading-theme-package.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Progress Telerik

[Damien]

I had already tried the if (args.VisualItem.Data.Index % 2 != 0) and it didn't work. I was in the process of creating an example app to attach when I saw it worked on my example app. Comparing the two controls, in my app I had set (because I thought I had to) the  EnableAlternatingItemColor option to true, once I set that to false, it started to work as expected, but...

 

If the number of items in the DropDownList exceed the standard display quantity and therefore you need to scroll down, it looks like it should, if you then select an item from the bottom and then reopen the dropdown, all the backrounds are coloured using the alternated colour and opening and closing the dropdown makes no change, you have to close and reopen the application to reset the look. I have attached a gif to show you what I mean.

 

Also, I have set the DropDownSizingMode to None, but it still shows...

this.PracticeLocationsCombo.DropDownSizingMode = SizingMode.None;

See attached png image

I checked and it also says None in the Properties section for the control - is it possible my theme is causing the problem?

In relation to the themes from resource - there was some confusion on my part - to load an image from the resources folder I use this type of path WindowsFormsApp1.Properties.Resources.[image filename without the extension] but it looks like I have to drop the Properties part for it to work with RadThemeManager (I had already added the xml extension) - so the themes are now loading fine, and I assume the tssp loading is the same issue.

Thank you for your help, appreciate it.

[Dimitar]

Hello Damien,

I was able to reproduce the case with the alternating color. To fix this you need to reset the BackColor with the ResetThemeValueOverride method:

private void RadDropDownList1_VisualListItemFormatting1(object sender, VisualItemFormattingEventArgs args)
{
    if (args.VisualItem.Data.Index % 2 != 0)
    {
        args.VisualItem.SetThemeValueOverride(LightVisualElement.BackColorProperty, Color.Red, "");
        args.VisualItem.SetThemeValueOverride(LightVisualElement.GradientStyleProperty, GradientStyles.Solid, "");
    }
    else
    {
        args.VisualItem.ResetThemeValueOverride(LightVisualElement.BackColorProperty,"");
        args.VisualItem.ResetThemeValueOverride(LightVisualElement.GradientStyleProperty,"");
    }
}

The auto-complete functionality uses a separate drop down. Here is how you can access it and set the sizing mode:

radDropDownList1.DropDownListElement.AutoCompleteSuggest.DropDownList.DropDownSizingMode = SizingMode.None;

Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik

[Damien]

Thanks for that - both are now working as expected.

 

One thing to ask - with the autocomplete, is it possible for it to instead of showing just the filtered items, to actually show the normal popup and have it jump to the first name - see attached gif - click into the textbox and then start to type s then t. This is the default behavior for the ComboBox in Flash Builder.

 

From a look perspective, is it possible to offset the popup of a DropDownList by say 3 to have a small gap between the textbox element and the popup?

 

Thanks.

[Damien]

Can that separate drop down also have alternating row colors?

If the user types and then selects the item - using the keyboard, what event is fired? My PopupClosed event is not fired when this happens.

thanks.

[Dimitar]

Hi Damien,

If you want to select a particular name with the first letter you should switch the DropDownStyle to DropDownList. However, with this style, you will be unable to type in the textbox.

You can adjust the popup position in the PopupOpening event handler:

private void RadDropDownList1_PopupOpening(object sender, CancelEventArgs e)
{
    var args = e as RadPopupOpeningEventArgs;
    args.CustomLocation = new Point(args.CustomLocation.X, args.CustomLocation.Y + 3);
}

 
In order the autocomplete popup to have alternating colors you should subscribe it to the same VisualListItemFormatting event handler:

radDropDownList1.DropDownListElement.AutoCompleteSuggest.DropDownList.VisualItemFormatting += RadDropDownList1_VisualListItemFormatting;

You should use this approach with the closing event as well.

If you have any other questions, please do not hesitate to contact us.

Regards,
Dimitar
Progress Telerik

[Damien]

Thanks, Dimitar.

I kept the style as a DropDown instead of a DropDownList and utilized the other tweaks you provided. It is not exactly as I showed you, but it works quite well.

thanks again.

[Damien]

So one last thing (sorry)

 

If the user is typing, the popup shows and they hit enter without actually selecting something from the list (so, in this case, there is actually no item selected as the name may be Shay and they only typed sh) what event can I fire to ensure that the entered item is cleared and reset for correct entry?

 

Or can I have the "enter" select the first match in the list as a default?

 

thanks

[Dimitar]

Hi Damien,

Just set the AutoCompleteMode to SuggestAppend. This way the item will be filled if there is a match. You can use the LostFocus event to check if there is a selcted item:

private void RadDropDownList1_LostFocus(object sender, EventArgs e)
{
    if (radDropDownList1.SelectedItem == null && radDropDownList1.SelectedText != null)
    {

    }
}

Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik

[Damien]

Hmm, not working.

Let's say the DropDownList has the following names in there...

Damien, John, and Wayne

If I type a "d", the popup opens and shows Damien, if I hit enter without selecting Damien (with mouse or keyboard) the popup closes and the "d" is still there and nothing fires. The same occurs if I type a "g", as there is no match when I hit enter nothing happens, this is what I am trying to catch the event for - either there is no match or any filtered match has not been selected and therefore is not valid. What I want it to do is fire an event where I reset the selected index to 0 and then set focus on another control when this occurs, as my app will not process anything if the selected index is set to 0.

 

Your code only fires (from what I can see), if the tab key is used to exit focus on the DropDownList.

 

Also the SuggestAppend - maybe I am not using it correctly, but I have to type the entire name to get a match. I added this to the TextBoxControl_KeyPress event...

        private void TextBoxControl_KeyPress(object sender, KeyPressEventArgs e)
        {
            UserCombo.DropDownListElement.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
            UserCombo.DropDownListElement.AutoCompleteSuggest.AutoComplete(e);
        }

 

Also tried it after the InitializeComponent(); and it also didn't work for the SuggestAppend .

thanks

[Damien]

Please remember that I have changed the TextBox element to a TextBoxControl element...

            var textBoxUser = UserCombo.DropDownListElement.EditableElement.TextBox;
            textBoxUser.TextBoxItem.Visibility = ElementVisibility.Collapsed;
            textBoxControlUser = new RadTextBoxControlElement();
            textBoxControlUser.DrawBorder = false;
            textBoxControlUser.TextAlign = HorizontalAlignment.Center;
            textBoxControlUser.SelectionColor = Color.FromArgb(255, 168,238,196);
            textBoxControlUser.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
            textBoxUser.Children.Add(textBoxControlUser);
            //
            textBoxControlUser.TextChanged += Tb_TextChanged;
            textBoxControlUser.Click += Tb_TextClick;
            textBoxControlUser.KeyPress += TextBoxControl_KeyPress;
            textBoxUser.TextChanged += RadDropDownTextBoxElement_TextChanged;

 

As per the CustomDDL example you posted - I actually tried the SuggestAppend on your example and it also doesn't append.

[Dimitar]

Hello Damien,

Yes, I forgot about the TextBoxControl. To make the autocomplete work you need to set the following properties:

this.textBoxControl.AutoCompleteMode = AutoCompleteMode.Append;
this.textBoxControl.AutoCompleteDataSource = radDropDownList1.DataSource;
this.textBoxControl.AutoCompleteDisplayMember = "Name";

Then you can change the code in the LostFocus event as well:

private void RadDropDownList1_LostFocus(object sender, EventArgs e)
{
    var textBox = radDropDownList1.DropDownListElement.EditableElement.TextBox;
    var texboxControl = textBox.Children[4] as RadTextBoxControlElement;

    if (radDropDownList1.SelectedItem == null && texboxControl.Text != null)
    {

    }
}

I have attached my test project so you can see how it works there and compare it to your setup.

Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik

[Damien]

okay, my set up is a little different, but I added this code after the data was filled into the dropdownlist

this.textBoxControl.AutoCompleteMode = AutoCompleteMode.Append;
this.textBoxControl.AutoCompleteDataSource = radDropDownList1.DataSource;
this.textBoxControl.AutoCompleteDisplayMember = "Name";

 

And now that works, but it now ignores the DropDownSizingMode set to none and the VisualItemFormatting to have the alternate colours and the ItemHeight., so this is not an option unfortunately.

It also doesn't do anything if I start to enter something where their is no filtered match, I must be doing something wrong.

I will take a look tomorrow morning.

Thanks.

[Dimitar]

Hello Damien,

I have added the other things in the test project and it appears to work on my side.

I hope this will be useful.

Regards,
Dimitar
Progress Telerik

[Damien]

I have added a textboxcontrol and the line radTextBoxControl1.Focus(); for this if (radDropDownList1.SelectedItem == null && texboxControl.Text != null)

And sorry if I type a g (where there are no matches) it does not fire. Also if I type a d, the popup opens with 10 David's, not just a single filtered one.

I will create a video and attach it.

[Damien]

Sorry, I that you had a loop to add the same names multiple times :)

 

I have tweaked my app based on your example and it is working like your example now, except when there is a more than one match and it also still does not fire anything if I start to type a name where there is no match. I have tweaked the example to pretty much simulate what I am trying to achieve so that you can see what I mean.

 

In the example I added another name Jason - the problem appears to be now that if I type "" it closes the suggestion box as it has selected the first match - in this Janet. If I hit the enter key to select Janet (or if there is not match like if I type a "g"), the word is highlighted (selected), but it doesn't do what I need it to do, either reject the non-match and reset the selected index to 0 and set focus elsewhere, or select the match and then set focus elsewhere.

The reason this is important is that there is also a location DropDownList where there may be 8 or 9 locations that are similar (e.g. Surgery1, Surgery2, Surgery3, etc.), with what it is doing at the moment, they get to "Su" and then they have to completely type the name to select it, or abandon that and use the mouse, or just type the "s" and use the arrows to select it.

thanks.

 

Please rename the file extension from gif to zip :)

 

[Damien]

Here is the video, first I type a "g", no match, hitting enter selects the "g" but does nothing else.

Then I type "Ja" and hit enter, this is a match but nothing fires.

Then I type "j" and select Jason using the keyboard arrow keys and enter key - nothing fires to take me to the textbox.

Then I use the mouse to open the list and select the user, the event fires and the textbox receive focus.

[Damien]

If I change it from a DropDown to a DropDownList, how do I the TextBox text, see

Thanks

[Dimitar]

Hi Damien,

I am a bit confused about the exact desired behavior. So you want to go to another control when the user selects an item? I thought that you just want to check if an item is selected when the user goes to another control. The LostFocus event is not a good place to change the focus since it is fired when the user has done an action that has already moved the focus away from the current control. This can be done by using the SelectedIndexChanged event of the drop-down list or the KeyDown event of the TextBoxControl.

I have attached a modified version of the project. I have changed the autocomplete functionality and now it uses the one available for the TextBoxControl entirely. This way the popup will stay opened when typing. 

Here is how you can center the text when DropDownStyle is set to DropDownList:

this.radDropDownList1.DropDownListElement.EditableElement.TextAlignment = ContentAlignment.MiddleCenter;

I hope this will be useful. 

Regards,
Dimitar
Progress Telerik

[Damien]

Sorry for the confusion. I want it to go to another control when the user either opens and closes the popup (but doesn't change the selection), opens the popup and then makes a different selection, starts to type the name and then makes a selection (even if it is the same as what was originally selected) - BUT, if they type the name and there is no match, reset the selected index to 0 and go to another control.

I guess I am looking for a hybrid of the DropDownList and DropDown, as I want the autosuggest to be appended, but I want the popup to open. I have created a gif from the current application that was built using Flash Builder. I hope you can see what I am trying (poorly) to explain.

[Damien]

The closest I have come to this is by setting it to a DropDownList and then setting the KeyboardSearchResetInterval to 2000.

[Dimitar]

Hello Damien,

It appears that in your application the list is not filtered when the user is typing. The entire dropdown is shown instead (the drop-down would not be opened when there are no suggestions in our control).

This can be achieved with our control. Once the user starts typing you need to manually show the popup, you can change the autocomplete type to append only. Then when the popup is closed you can go to the other control. I have attached a modified version of the test project that shows this. Let me know if I am missing something.

I hope this will be useful. 

Regards,
Dimitar
Progress Telerik

[Damien]

Thanks for the updated example, I have replicated that in my project and it is working almost as well as the Flash Builder video clip I posted.

 

I noticed one thing in the example and now my project with these changes. If I click in the textbox area and type it seems to work (I had one weird thing if it needed to scroll and I started to enter the last entry, I'll try and capture it an post it), but if I use the mouse to click on the button and then select the name, it executes the event and sets focus, but it looks like the mouse still has on the button, I have to click either back onto the DropDownList or elsewhere in the form to clear the apparent mouse focus on the DropDownList button.

[Dimitar]

Hello Damien,

I was able to reproduce this. It is caused because of the TextChanged event of the TextBoxControl. In this case, we are trying to show the drop down in it, but changing the focus closes it and puts the button in an invalid state. To solve this you can move the code in the KeyDown event which would not be fired when you are manually selecting from the popup:

private void TextBoxControl_KeyDown(object sender, KeyEventArgs e)
{
    radDropDownList1.DropDownListElement.EditableElement.TextBox.Text = textBoxControl.Text;

    if (!radDropDownList1.IsPopupVisible && radDropDownList1.Visible)
    {
        radDropDownList1.ShowDropDown();
    }
}

 
I hope this will be useful. 

Regards,
Dimitar
Progress Telerik

[Damien]

Thanks for that, that has fixed that problem perfectly.

 

However, I have tested it on both mine and the example and the results are the same. The same issue applies when you type a "g" (where there is no match) and then tab away (LostFocus). The mouse appears to once again be in an invalid state.

The LostFocus event is based on the one that you provided previously...

 

        private void RadDropDownList1_LostFocus(object sender, EventArgs e)
        {
            var textBox = radDropDownList1.DropDownListElement.EditableElement.TextBox;
            var texboxControl = textBox.Children[4] as RadTextBoxControlElement;

            if (radDropDownList1.SelectedItem == null && texboxControl.Text != null)
            {
                radDropDownList1.SelectedIndex = 0;
            }
            textBox1.Focus();
        }

[Damien]

I have determined that the event that is causing this is now the KeyDown event.

 

I have done the following to attempt to correct it, and it works every second time consistently...

private void TextBoxControl_KeyDown(object sender, KeyEventArgs e)
{
    radDropDownList1.DropDownListElement.EditableElement.TextBox.Text = textBoxControl.Text;
    if (!radDropDownList1.IsPopupVisible && radDropDownList1.Visible && textBoxControl.IsFocused)
    {
        radDropDownList1.ShowDropDown();
    }
}

private void RadDropDownList1_LostFocus(object sender, EventArgs e)
{
    var textBox = radDropDownList1.DropDownListElement.EditableElement.TextBox;
    var texboxControl = textBox.Children[4] as RadTextBoxControlElement;

    if (radDropDownList1.SelectedItem == null && texboxControl.Text != null)
    {
        radDropDownList1.SelectedIndex = 0;
    }
    textBox1.Focus();
}

 

Thanks.

[Damien]

Okay, I have tweaked it again and I have it working 98%. I have attached the zip of the example (extension changed to gif so I can upload it).

 

So the issue I have with this method is that when it initially runs and I start to type David, the autocomplete is showing the name (without a capital letter), but it is not actually selecting David from the list. If I start with someone else, it does, so it seems to have an issue with Index 0.

 

I get a similar issue if I do the following...

Click into the TextBox area, start to type Christoff, so maybe only Chr and then hit enter, it selects Christoff and all is good, I then click it again and once again I start to type Christoff, the name appended is correct (no capital to the name again) and when I hit enter, it doesn't find a match and resets it.

 

I am not sure where I am going wrong, but I certainly am closer to my goal.

 

Thanks.

[Damien]

I also get the same Mouse invalid issue if I click on the name that was selected and then a second time in the TextBox area again (without doing anything other than a mouse click).

[Dimitar]

Hello Damien,

To fix the invalid state you need to check if the drop down is already opened in the Tb_TextChanged event handler. 

Please note that the IndexOf method considers the character casing. This is why you can create your own method that ignores the casing when searching for the item. In addition, you should set the text after the item is selected. 

I have attached an updated version of the project.

I hope this will be useful.

Regards,
Dimitar
Progress Telerik

[Damien]

Thanks, I have ditched the ShowPopup when you click into it, seems to still cause the mouse invalidation issue for me.

 

So in saying that I have attached two video clips, SelectingFirst.gif is where the first name I go to type is David, it actually doesn't select him whilst typing, only when the event is fired when the selection is made. SelectingOther.gif is where the first name typed is anyone other than David (who is index 0) and as you type it selects that user, and then going back to select David, it works fine.

 

It seems the first time it opens, it doesn't want to select anything is index position 0 when the app first starts up.

[Damien]

Here is a short video on why this is an issue for the users. Where all the items are 90% the same, the user would start to type, the first matched item is selected and then they use the arrow key to move down the list and select the item. If all of the items (including index 0) are 90% the same, nothing is selected when you start to type.

 

Thanks.

[Dimitar]

Hello Damien,

Apparently, I misunderstood the issue from the previous posts. Nevertheless, I have further investigated this and it is caused because both controls are bound to the same data source instance. In this case, they will use the same currency manager and this can lead to unpredicted results. What you should do is use different instances of the data for the textbox control and the drop-down list. Then you should manually synchronize the selected item when the user is typing in the text box control and selecting the item. I have changed the code and now the bellow issue is gone. Could you please test it and let me know how it works for you? I have tested the cases from the other posts and they seem to work as well.

In addition please note that the arrows can be used if no item is selected as well. 

I am looking forward to your reply.

Regards,
Dimitar
Progress Telerik

[Damien]

I downloaded your latest tweak, initially, there was a Stack error, the DLLs were not referencing correctly, so I fixed that.

 

The example is almost there, but if I type more than the first initial, so D then a, the textbox clears - see video attached.

 

I am really sorry this is taking ages, but I really really appreciate your assistance, it has been invaluable.

[Damien]

It seems to be the SelectedIndexChanged event that is causing this.

[Damien]

Okay, I think I have it...

 

private void Tbc_TextChanged(object sender, EventArgs e)
{
    if (radDropDownList1.SelectedValue == null)
    {
        radDropDownList1.SelectedIndex = IndexOf(textBoxControl.Text);
    } else
    {
        radDropDownList1.DropDownListElement.EditableElement.TextBox.Text = textBoxControl.Text;
    }
}

[Damien]

Crap, I thought I did.

It works great if the user is typing with CAPS lock off, but with CAPS lock on, it doesn't work when the third letter is entered.

[Dimitar]

Hello Damien,

I have added the SelectedIndexChanged event to handle the case where the user directly opens the drop down and selects an item. You can leave it as is for now. However, this event should not be executed when the user is typing. So you can unsubscribe from it when the user changes the text in the text box:

private void Tbc_TextChanged(object sender, EventArgs e)
{

    radDropDownList1.SelectedIndexChanged -= RadDropDownList1_SelectedIndexChanged;
    int index = IndexOf(textBoxControl.Text);
    if (index != -1)
    {
        radDropDownList1.SelectedIndex = index;
    }
    else
    {
        radDropDownList1.DropDownListElement.EditableElement.TextBox.Text = textBoxControl.Text;
    }
    radDropDownList1.SelectedIndexChanged += RadDropDownList1_SelectedIndexChanged;
}

Let me know how this works for you.

Regards,
Dimitar
Progress Telerik

[Damien]

Thanks for that, it has helped.

 

I have attached a video - if I start to type the last name on a list where a scroll is in place, it selects, but the scroll doesn't move, so it looks like it hasn't been selected. Using the mouse to scroll, it shows the user had been selected.

thanks.

[Dimitar]

Hello Damien,

I am getting a different behavior on my side with the latest version of the test project (attached). The item is made visible when typing (see attached video).

What do I need to change in order to reproduce this?

I am looking forward to your reply.

Regards,
Dimitar
Progress Telerik

[Damien]

I have determined it occurs when you type the second letter in the name, so in the example ma or in mine for Wendy - we

 

I have altered the example to reflect the code I am using and renamed the attachment from to gif for the purpose of uploading.

 

thanks.

[Dimitar]

Hello Damien,

In this case, we are synchronizing the text instead of selecting the item. This is caused because the IndexOf method does not find a proper match. What you need to do is to include the case where the items start with the current text:

public int IndexOf(string text)
{

    for (int i = 0; i < radDropDownList1.Items.Count; i++)
    {
        var item = radDropDownList1.Items[i];
        if (item.Text.ToLower().Equals(text.ToLower()) || item.Text.ToLower().StartsWith(text.ToLower()))
        {
            return item.Index;
        }
    }
    return -1;
}

I hope this will be useful. 

Regards,
Dimitar
Progress Telerik

[Damien]

Firstly, I would like to thank you Dimitar for your patience - I really appreciate your assistance.

 

Secondly, that has indeed helped, but when I type (in the example) mar it correctly selects Maria and shows that selection (as expected), now if I backspace (removing the appended letters) the same occurs as before. I was testing it as if the user started to type a name and then made a mistake, so they would backspace. It appears to only correct itself if I totally remove mar and start typing again, and even then Maria has jumped up a little too high and there is blanks space under her name, instead of her name showing at the bottom of the popup.

 

thanks.

[Dimitar]

Hi Damien,

I have examined this again and it is caused because of synchronizing the text. This line exists in several places:

radDropDownList1.DropDownListElement.EditableElement.TextBox.Text = textBoxControl.Text;

This will change the selected index to -1 and will scroll the list to the top. With the current implementation, I believe that it is safe to remove this line. I think that it was added when we were using the auto-complete functionality from the drop-down list. 

Let me know how this works for you.

Regards,
Dimitar
Progress Telerik

[Damien]

I have removed all instances of that line, but if I type a name and then backspace and delete it (so that there is no text left in the textbox) it selects the first name on the list.

[Dimitar]

Hello Damien,

Well, you can handle this particular case only and set the selected index:

private void Tbc_TextChanged(object sender, EventArgs e)
{

    radDropDownList1.SelectedIndexChanged -= RadDropDownList1_SelectedIndexChanged;
    if (textBoxControl.Text == string.Empty)
    {
        radDropDownList1.SelectedIndex = -1;
        return;
    }

    int index = IndexOf(textBoxControl.Text);

    if (index != -1)
    {
        if (index != radDropDownList1.SelectedIndex)
        {
            radDropDownList1.SelectedIndex = index;

        }
    }
    else
    {
       radDropDownList1.DropDownListElement.EditableElement.TextBox.Text = textBoxControl.Text;
    }
    radDropDownList1.SelectedIndexChanged += RadDropDownList1_SelectedIndexChanged;
}

Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik

[Damien]

I seem to take a step forward and then a few back.

 

The typing component appears to work (only did a quick test). But if I have cleared the textbox and then changed focus so that the selected user is empty (and the textbox is empty) it now breaks the mouse click selection when I click the and select the user, it changes the focus and clears the textbox.

[Dimitar]

Hi Damien,

Yes indeed there are many cases that should be handled and they interfere with each other. I have spent a couple of hours investigating this and I think I am close to a solution. I have attached a modified version of the project. 

Let me know how it works on your side. 

Regards,
Dimitar
Progress Telerik

[Damien]

My code is different, as I had to remove the issue with the popup invalidation.

My code has the following (from the example)...

private void Tb_TextClick(object sender, EventArgs e)
{
    textBoxControl.SelectAll();
}

private void TextBoxControl_KeyDown(object sender, KeyEventArgs e)
{
    if (!radDropDownList1.IsPopupVisible && radDropDownList1.Visible && textBoxControl.IsFocused)
    {
        radDropDownList1.ShowDropDown();
    }
}

[Damien]

FYI

 

I am traveling tomorrow, so I will not probably get to do too much testing based on the latest example - I will check it once I arrive and let you know, but I also think we are close :)

[Dimitar]

Hello Damien,

I do not think that this code will break the behavior in this case. Take all the time to examine this and let me know if there are cases that are not covered.

Thank you for your patience and cooperation. 

Regards,
Dimitar
Progress Telerik

[Damien]

Sorry for the delay, it looks like this is working the way I want it to, still testing, so if I find anything, I will let you know.

 

Thanks.

[Dess | Tech Support Engineer, Principal]

Hello, Damien, 

Thank you for writing back. 

Feel free to test as much as needed. If you have any further questions please let me know. 

Regards,
Dess
Progress Telerik