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

67 posts, 0 answers
  1. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 09 Oct Link to this post

    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 comboboxes have alternating row colors, so do my datagrids. I also have specific row and text formatting for some datagrids 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.

  2. Dimitar
    Admin
    Dimitar avatar
    1994 posts

    Posted 09 Oct Link to this post

    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:
    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:
    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
    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.
  3. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 09 Oct in reply to Dimitar Link to this post

    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.

  4. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 09 Oct Link to this post

    I just tried setting the selection colour 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

  5. Dimitar
    Admin
    Dimitar avatar
    1994 posts

    Posted 11 Oct Link to this post

    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
    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.
  6. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 13 Oct in reply to Dimitar Link to this post

    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 dropdownlist or is this done in code?

     

    I tried theming the CheckBox so that the standard, hover and press backgrounds in the checkbox itself is 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 is 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 colours of the calendar (background, text 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/yyyy? 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 xml 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 tssp 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 :)

     

  7. Dimitar
    Admin
    Dimitar avatar
    1994 posts

    Posted 13 Oct Link to this post

    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
    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.
  8. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 14 Oct in reply to Dimitar Link to this post

    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 SelctionColor - 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 colour 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 colour 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 :)

  9. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 14 Oct in reply to Damien Link to this post

    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.

  10. Dimitar
    Admin
    Dimitar avatar
    1994 posts

    Posted 16 Oct Link to this post

    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:
    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
    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.
  11. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 16 Oct in reply to Dimitar Link to this post

    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 closed, 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 onto 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)
    {
        textBoxControl.SelectAll();
    }

     

    Thanks for the information regarding the alternating colours with the dropdown - there is a side effect though, the hover colour for the mouse is not displayed when hovering over the row with the alternate colour, just the row that has the standard white background. Have I done something wrong in my theming, 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

  12. Dimitar
    Admin
    Dimitar avatar
    1994 posts

    Posted 17 Oct Link to this post

    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
    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.
  13. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 17 Oct in reply to Dimitar Link to this post

    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.

  14. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 17 Oct in reply to Dimitar Link to this post

    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.

  15. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 17 Oct Link to this post

    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});

  16. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 17 Oct Link to this post

    As an update to the theme manager.

    I added my xml 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.

  17. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 17 Oct in reply to Damien Link to this post

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

     

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

  18. Hristo
    Admin
    Hristo avatar
    1087 posts

    Posted 19 Oct Link to this post

    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
    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.
  19. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 19 Oct in reply to Hristo Link to this post

    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.

  20. Dimitar
    Admin
    Dimitar avatar
    1994 posts

    Posted 23 Oct Link to this post

    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
    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.
  21. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 23 Oct in reply to Dimitar Link to this post

    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 dropdown popup?

     

    Thanks.

  22. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 23 Oct in reply to Dimitar Link to this post

    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.

  23. Dimitar
    Admin
    Dimitar avatar
    1994 posts

    Posted 23 Oct Link to this post

    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
    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.
  24. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 23 Oct in reply to Dimitar Link to this post

    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.

  25. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 23 Oct in reply to Dimitar Link to this post

    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

  26. Dimitar
    Admin
    Dimitar avatar
    1994 posts

    Posted 24 Oct Link to this post

    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
    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.
  27. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 25 Oct in reply to Dimitar Link to this post

    Hmm, not working.

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

    Damien, John, Mark 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

  28. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 25 Oct in reply to Damien Link to this post

    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.

  29. Dimitar
    Admin
    Dimitar avatar
    1994 posts

    Posted 25 Oct Link to this post

    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
    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.
  30. Damien
    Damien avatar
    45 posts
    Member since:
    Oct 2017

    Posted 25 Oct in reply to Dimitar Link to this post

    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.

Back to Top