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

Close dropdown after first selection

48 Answers 2004 Views

MultiColumnComboBox

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

Emilio asked on 13 Nov 2018, 12:08 AM

Is there any way to have the dropdown close itself after someone has selected an item in the gridview? Effectively, I'd like a property called something like AllowMultiSelect, which I would set to false, and then the dropdown closes after the first item is selected. Or maybe, if SelectionMode is set to Single, shouldn't the dropdown box close on its own after a selection is made?

Closing it manually during SelectionChanged works except in one case: where someone starts typing into the search box and then uses the mouse to select an item. The incomplete search text doesn't get cleared out of the textbox - as if calling CloseDropDown() prevents cleanup from happening.

In any case, being able to make the multi column combobox behave like a single-select control would be great. Any suggestions? Thanks in advance.

[using the Q3 2018 release]

48 Answers, 1 is accepted

Accepted

answered on 15 Nov 2018, 12:08 PM

Hello Emilio & Geir,

As such functionality does seems reasonable, I've logged a new feature request in our feedback portal on Emilio's behalf. You can vote for the item as well as subscribe to it to get notified about changes in its status.

For the time being, I can suggest handling the SelectionChanged event of the control in the following manner:

private void mccb_SelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangeEventArgs e)

{

if (e.AddedItems != null && e.AddedItems.Count == 1)

{

Dispatcher.BeginInvoke(new Action(() =>

{

var combo = sender as RadMultiColumnComboBox;

var textBox = combo.ChildrenOfType<RadWatermarkTextBox>().First();

textBox.Text = string.Empty;

combo.CloseDropDown();

}));

}

Please let me know whether this would work for you.

Regards,
Dilyan Traykov
Progress Telerik

Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

answered on 12 Jun 2019, 12:35 PM

radmcmb.png

is it possible to hide this close option ?? see the attached picture

answered on 13 Jun 2019, 11:55 AM

Hello raneesras,

To remove the close button from the SearchAutoCompleteBoxItems, you need to edit their default control template. Here's an example for the Office_Black theme:

<telerik:RadMultiColumnComboBox.Resources>

<Style TargetType="telerik:SearchAutoCompleteBoxItem" BasedOn="{StaticResource SearchAutoCompleteBoxItemStyle}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:SearchAutoCompleteBoxItem">

<Grid>

<Border x:Name="BorderVisual" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<ContentPresenter x:Name="contentPresenter"

Margin="{TemplateBinding Padding}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<telerik:RadButton x:Name="RemoveItemButton"

Visibility="Collapsed"

Grid.Column="1"

CornerRadius="0"

HorizontalAlignment="Right"

VerticalAlignment="Stretch"

CommandParameter="{Binding}"

Cursor="Arrow"

IsTabStop="False"

Focusable="False"

Command="telerik:SearchAutoCompleteBoxCommands.RemoveItem"

Padding="0"

Margin="4 1">

<telerik:RadGlyph VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{StaticResource MCCB_ButtonIconForeground}" Glyph="{StaticResource GlyphClose}" FontSize="13"/>

</telerik:RadButton>

</Grid>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</telerik:RadMultiColumnComboBox.Resources>

Please note that if you're not using the implicit styles approach fort theming the controls with the NoXaml binaries, you need to remove the BasedOn attribute of the style. Also have in mind that this template is specific to the Office_Black theme, and if you're using another theme, you have to edit its template accordingly.

Please give this a try and let me know if it provides the desired result.

Regards,
Dilyan Traykov
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

answered on 13 Jun 2019, 12:30 PM

untitled123.png

what are the static resources ?? static resources are Missing

answered on 17 Jun 2019, 07:13 AM

radmul.png

hii...RadMultiColumnComboBox in datagrid.. Search is not working...here is the code and attached screenshot

<DataGridTemplateColumn >

<DataGridTemplateColumn.HeaderTemplate>

<DataTemplate>

<DataTemplate.Resources>

<Style TargetType="Label">

<Setter Property="HorizontalAlignment" Value="Center"></Setter>

<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>

<Setter Property="Foreground" Value="#FFB20101"/>

<Setter Property="FontWeight" Value="SemiBold"/>

</Style>

</DataTemplate.Resources>

<Label Content="Item Name" ></Label>

</DataTemplate>

</DataGridTemplateColumn.HeaderTemplate>

<DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<DockPanel>

<telerik:RadMultiColumnComboBox

FontWeight="Medium" FontSize="15" Width="530" SelectionMode="Single"

AutoCompleteMode="Search"

KeepDropDownOpen="False" OpenDropDownOnInput="False"

DropDownWidth="530"

DropDownHeight="255" DisplayMemberPath="product_name" SelectedItem="{Binding

ourItemName,Mode=OneTime}" SelectedValue="{Binding ourItemId}"

SelectedValuePath="product_Id"

SelectionChanged="RadMultiColumnComboBox_SelectionChanged"

GotFocus="RadMultiColumnComboBox_GotFocus" >

<telerik:RadMultiColumnComboBox.ItemsSourceProvider >

<telerik:GridViewItemsSourceProvider AutoGenerateColumns="False" ItemsSource="{StaticResource StatusList}">

<telerik:GridViewItemsSourceProvider.Columns>

<telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding product_name}" />

<telerik:GridViewDataColumn Header="Code" DataMemberBinding="{Binding product_code}" />

</telerik:GridViewItemsSourceProvider.Columns>

</telerik:GridViewItemsSourceProvider>

</telerik:RadMultiColumnComboBox.ItemsSourceProvider>

</telerik:RadMultiColumnComboBox>

</DockPanel>

</DataTemplate>

</DataGridTemplateColumn.CellTemplate>

</DataGridTemplateColumn>

answered on 18 Jun 2019, 12:31 PM

MCCBInRadGridView.zip

Hello raneesras,

I've prepared a small sample project demonstrating how to use the RadMultiColumnComboBox in both the standard DataGrid and in the Telerik RadGridView.

Please have a look and let me know if you manage to apply a similar approach in your application.

Regards,
Dilyan Traykov
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

answered on 19 Jun 2019, 07:33 AM

prob-1.png

prob-2.png

the project which u have given is not working..or some dll is missing...could u please explain wats the reason behind this ?

answered on 19 Jun 2019, 08:36 AM

i"ve tried this in another way...but when i am selecting an item from multi combo box then corresponding cell getiing null...here is the code

<telerik:GridViewDataColumn TextWrapping="Wrap" IsFilterable="False" IsGroupable="False" TextAlignment="Right" CellStyle="{StaticResource GridViewCellStyle}" Header="Item Name" Width="530">

<telerik:GridViewDataColumn.CellEditTemplate>

<DataTemplate>

<telerik:RadMultiColumnComboBox

FontWeight="Medium" FontSize="15" Width="530" SelectionMode="Single" AutoCompleteMode="Search" KeepDropDownOpen="False" OpenDropDownOnInput="False"

DropDownWidth="530"

DropDownHeight="255" DisplayMemberPath="product_name" SelectedItem="{Binding ItemName,Source={StaticResource StatusList}}" SelectedValuePath="product_Id"

SelectionChanged="RadMultiColumnComboBox_SelectionChanged" GotFocus="RadMultiColumnComboBox_GotFocus" >

<telerik:RadMultiColumnComboBox.ItemsSourceProvider >

<telerik:GridViewItemsSourceProvider AutoGenerateColumns="False" ItemsSource="{StaticResource StatusList}">

<telerik:GridViewItemsSourceProvider.Columns>

<telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding product_name}" />

<telerik:GridViewDataColumn Header="Code" DataMemberBinding="{Binding product_code}" />

</telerik:GridViewItemsSourceProvider.Columns>

</telerik:GridViewItemsSourceProvider>

</telerik:RadMultiColumnComboBox.ItemsSourceProvider>

</telerik:RadMultiColumnComboBox>

</DataTemplate>

</telerik:GridViewDataColumn.CellEditTemplate>

</telerik:GridViewDataColumn>

answered on 21 Jun 2019, 12:36 PM

MCCBInRadGridViewUpdated.zip

Hello,

Thank you for the attached pictures.

The reason for the observed errors is most likely that the Xaml dlls were referenced. That said, I updated the sample project attached earlier to include all of the necessary NoXaml dlls and I am attaching it again for your reference.

Please, give the attached project a try with the NoXaml binaries and let me know how it goes.

Regards,
Vladimir Stoyanov
Progress TelerikWant to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

answered on 22 Jun 2019, 06:42 AM

search.png

Hiii Vladimir Stoyanov... thank you for the reply.... the solution which you given is worked well ....but when i trying filtering items the search is not working...i am using Telerik version 2018

<telerik:GridViewDataColumn Width="200" IsReadOnly="True">

<telerik:GridViewDataColumn.CellTemplate>

<DataTemplate>

<telerik:RadMultiColumnComboBox AutoCompleteMode="Search" SelectedItem="{Binding product_name,Source=

{StaticResource StatusList}}" DisplayMemberPath="product_name" SelectedValuePath="product_Id"

DropDownWidth="400">

<telerik:RadMultiColumnComboBox.ItemsSourceProvider>

<telerik:GridViewItemsSourceProvider ItemsSource="{StaticResource StatusList}" />

</telerik:RadMultiColumnComboBox.ItemsSourceProvider>

</telerik:RadMultiColumnComboBox>

</DataTemplate>

</telerik:GridViewDataColumn.CellTemplate>

</telerik:GridViewDataColumn>

answered on 09 Sep 2019, 10:14 AM

removeitembutton_customcommand.png

Hi Dilyan,

How can I provide my own custom command in place of RemoveItemButton's command as highlighted in attached pic.
Actually I want to do something in my viewmodel based on that 'close' click of RemoveItemButton. Can you please provide the way to write ControlTemplate and Command Property which which will do the thing.

I have defined the custom command Property as :-

class CommandRemoveItemButton: RadButton
{
public static readonly DependencyProperty ButtonCommandProperty =
DependencyProperty.Register("ButtonCommand", typeof(ICommand), typeof(CommandRemoveItemButton), null);
public ICommand ButtonCommand
{
get { return (ICommand)GetValue(ButtonCommandProperty); }
set { SetValue(ButtonCommandProperty, value); }
}

public CommandRemoveItemButton()
{
DefaultStyleKey = typeof(CommandRemoveItemButton);
}
}

The above custom command should get bind to the Controltemplate like :-

<Style x:Key="customItemStyle" TargetType="telerik:SearchAutoCompleteBoxItem" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:SearchAutoCompleteBoxItem">
<Grid>
<Border x:Name="BorderVisual" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Style TargetType="telerik:RadButton" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type custom:CommandRemoveItemButton}">
<telerik:RadButton x:Name="RemoveItemButton"
Visibility="Collapsed"
Grid.Column="1"
CornerRadius="0"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
CommandParameter="{Binding}"
Cursor="Arrow"
IsTabStop="False"
Focusable="False"
Command="{TemplateBinding ButtonCommand}" >
Padding="0"
Margin="4 1">
<telerik:RadGlyph VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="13"/>
</telerik:RadButton>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Then use the above two in my main xaml page as :-

I hope you are able to get what I want to do.

answered on 09 Sep 2019, 10:56 AM

removeitembutton_customcommand49b257e68b64468283b72188b19bb57d.png

Hi Dilyan,

How to create a custom command when user clicks close(x) on RemoveItemButton of SearchAutoCompleteBoxItem. I want to write my own business logic in ViewModel whenever a user clicks on close(x) of RemoveItemButton. Please see the attached pic.

In ControlTemplate:-

<Style x:Key="customItemStyle" TargetType="telerik:SearchAutoCompleteBoxItem" ><br> <Setter Property="Template"><br> <Setter.Value><br> <ControlTemplate TargetType="telerik:SearchAutoCompleteBoxItem"><br> <Grid><br> <Border x:Name="BorderVisual" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"><br> <Grid><br> <Grid.ColumnDefinitions><br> <ColumnDefinition Width="*"/><br> <ColumnDefinition Width="Auto"/><br> </Grid.ColumnDefinitions><br> <ContentPresenter x:Name="contentPresenter"<br> Margin="{TemplateBinding Padding}"<br> HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"<br> VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/><br> <telerik:RadButton x:Name="RemoveItemButton"<br> Visibility="Collapsed"<br> Grid.Column="1"<br> CornerRadius="0"<br> HorizontalAlignment="Right"<br> VerticalAlignment="Stretch"<br> CommandParameter="{Binding}"<br> Cursor="Arrow"<br> IsTabStop="False"<br> Focusable="False"<br> Command="{TemplateBinding ButtonCommand}"<br> Padding="0"<br> Margin="4 1"><br> <telerik:RadGlyph VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="13"/><br> </telerik:RadButton><br> </Grid><br> </Border><br> </Grid><br> </ControlTemplate><br> </Setter.Value><br> </Setter><br> </Style><br>

In Xaml:-

Custom Command Created :-

class CommandRemoveItemButton: RadButton<br> {<br> public static readonly DependencyProperty ButtonCommandProperty =<br> DependencyProperty.Register("ButtonCommand", typeof(ICommand), typeof(CommandRemoveItemButton), null);<br> public ICommand ButtonCommand<br> {<br> get { return (ICommand)GetValue(ButtonCommandProperty); }<br> set { SetValue(ButtonCommandProperty, value); }<br> }<br><br> public CommandRemoveItemButton()<br> {<br> DefaultStyleKey = typeof(CommandRemoveItemButton);<br> }<br> }

answered on 10 Sep 2019, 01:17 PM

CustomRemoveCommand.zip

Hi Ankush,

I believe you can achieve the desired result without replacing the RadButton in the control template of the SearchAutoCompleteBoxItem. You can use a RelativeSource binding to get ahold of the viewmodel and its command respectively:

<telerik:RadButton x:Name="RemoveItemButton"
                                        Grid.Column="1"
                                        CornerRadius="0"
                                        HorizontalAlignment="Right"
                                        VerticalAlignment="Stretch"
                                        CommandParameter="{Binding}"
                                        Cursor="Arrow"
                                        IsTabStop="False"
                                        Focusable="False"
                                        Command="{Binding DataContext.DeleteCommand, RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}"
                                        Padding="0"
                                        Margin="4 1">
                                            <telerik:RadGlyph VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{StaticResource MCCB_ButtonIconForeground}" Glyph="{StaticResource GlyphClose}" FontSize="13"/>
                                        </telerik:RadButton>

Please note that the binding above assumes that the RadMultiColumnComboBox is placed inside a RadGridView and the command is present on the DataContext of the RadGridView. If you're using a standalone RadMultiColumnComboBox, you need to modify the RelativeSource binding accordingly.

I've updated the sample project provided earlier to demonstrate this approach. Please have a look and let me know if something similar would work for you.

Regards,
Dilyan Traykov
Progress Telerik

Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

answered on 11 Sep 2019, 11:00 AM

Hi Dilyan,

My ControlTemplate:-

<Style TargetType="telerik:SearchAutoCompleteBoxItem" >

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:SearchAutoCompleteBoxItem">

<Grid>

<Border x:Name="BorderVisual" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"> <Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<ContentPresenter x:Name="contentPresenter"

Margin="{TemplateBinding Padding}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>                                <

telerik:RadButton x:Name="RemoveItemButton" Grid.Column="1"

CornerRadius="0"

                       HorizontalAlignment="Right" VerticalAlignment="Stretch"                                                   Cursor="Arrow" IsTabStop="False" Focusable="False"                                                         Command="{Binding DataContext.CustomDeleteCommand}"<

br> CommandParameter="{Binding RelativeSource=

                                                                 {RelativeSource Mode=FindAncestor,AncestorType={x:Type                                telerik:RadMultiColumnComboBox}}}"

Padding="0" Margin="4 1">

<telerik:RadGlyph VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="13"/> </telerik:RadButton>

</Grid>

</Border></Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

My Xaml:-

<telerik:RadMultiColumnComboBox ItemsSource="{Binding myList}" SelectedItem="{Binding MySelectedItem, Mode=TwoWay}" DisplayMemberPath="Name" SelectionMode="Multiple"/>

In MyViewModel:-

CustomDeleteCommand = new DelegateCommand<object>(OnDelete);

answered on 11 Sep 2019, 02:00 PM

pic1.png

pic2.png

pic3.png

Hi Dilyan,

I want your help in the following issues which I am facing :-

1) After applying the ControlTemplate from my previous comment, my application displays selected items in RadMultiColumnComboBox as shown in attached pic1. But, I want to show my selected items in RadMultiColumnComboBox as shown in attached pic2 with close(x). RadMultiColumnComboBox control looks like this(pic2) when I removed ControlTemplate.

2) I guess close(x) button is not shown properly(see attached pic2) due to the fact I am missing static resources MCCB_ButtonIconForeground, MCCB_ButtonIconForeground of telerik:RadGlyph. These are not available to me and give compile time error as I am using trial version of Telerik. Also, I am using GenericOffice2016.xaml

2) The Command in ViewModel is not getting fired when I clicked on highlighted area(pic3) which I am assuming as close(x) of any selected item of RadMultiColumnComboBox control.

I am very sorry for asking my query in multiple posts.

Thanks

answered on 12 Sep 2019, 11:24 AM

Hi Ankush,

Thank you for the provided images and code snippets.

Can you please clarify whether you were able to run the sample project I provided successfully and whether this is indeed the desired result?

As for the issues you're facing, could you specify whether you're using the Xaml or NoXaml assemblies? If you're using the Xaml binaries, you need to also extract the MCCB_ButtonIconForeground and MCCB_ButtonIconForeground resources from the theme's resource dictionary. You can read more about this in the Editing Control Templates article.

Regarding the command which is not being executed, can you please clarify what the DataContext of the RadMultiColumnComboBox is, whether it has the CustomDeleteCommand and if any binding errors are shown in Visual Studio's Output window?

If possible, please send over a small sample project which demonstrates the issues you observe and I will gladly try to solve them for you.

Regards,
Dilyan Traykov
Progress Telerik

answered on 12 Sep 2019, 04:37 PM

radmulticolumncombobox1.png

Hi Dilyan,

Thanks for replying. I am attaching my POC project which demonstrates how I am using RadMultiColumnComboBox.
As you can see in attached pic, I am not having proper close(x) button icon on top right side of selected item of RadMultiColumnComboBox. Also, CustomDeleteCommand associated with the click is not getting fired. To Check if my Command Bindings are working properly I have registered commands on events like PreviewKeyDown,SelectionChanged and Button Click. All of them are working correctly except the CustomDeleteCommand one.

answered on 13 Sep 2019, 04:37 AM

radmulticolumncombobox10b22ddec4443471c92fb69c30a7fe9af.png

radmulticolumncombobox2.png

Hi Dilyan,

Thanks for replying.

Your provided ControlTemplate is working fine and project is having no issues/errors. But the desired result is not met.
The Controltemplate still not shows the close(x) icon on top right side of selected item of RadMultiColumnComboBox as you can see in attached pic(RadMultiColumnComboBox1).
I didn't quite get how to provide upload my project as zip here on telerik forums so I am attaching link of my project which demonstrates how I am using RadMultiColumnComboBox.
I used nuget package version UI.for.Wpf.45.Xaml.Trial.2018.3.1016 in this project.

Also, CustomDeleteCommand associated with the click is not getting fired. To Check if my Command Bindings are working properly, I have registered commands on events like PreviewKeyDown,SelectionChanged and Button Click. All of them are working correctly except the CustomDeleteCommand one.

I understand your concern regarding resources associated with MCCB_ButtonIconForeground but when I don't apply any ControlTemplate then the RadMultiColumnComboBox's selected items close(x) icon comes correct(attached pic RadMultiColumnComboBox2).
I want this default close(x) icon and when user click on it to delete the selected item then my CustomDeleteCommand in ViewModel should get fired.

Thanks and Regards,

Ankush

answered on 13 Sep 2019, 12:16 PM

WpfApp1.zip

Hi Ankush,

Thank you very much for the provided project and images.

I have modified the project to correctly display the glyph close icon and have the custom command execute upon the click of the button. The changes I've made are the following:

1) Move the RelativeSource from the CommandParameter to the Command binding.
2) Extracted the GlyphClose and MCCB_ButtonIconForeground resources from the GridView resource dictionary of the Office_Black theme.

You can find the updated project attached to my reply. Please let me know if it delivers the desired result.

Regards,
Dilyan Traykov
Progress Telerik

answered on 19 Sep 2019, 09:36 AM

2019-09-19_14-46-25.png

hii how to disable up and down button in RadMultiColumnComboBox..... ?? please check the attached image

answered on 20 Sep 2019, 09:03 AM

Hi ranees,

I'm uncertain why these up and down buttons appear in your RadMultiColumnComboBox. My best guess would be that this is a scrollbar which is displayed because the control does not have enough available space.

What you can do if this is the case is to set the ScrollViewer.VerticalScrollBarVisibility property to Hidden.

<telerik:RadMultiColumnComboBox ScrollViewer.VerticalScrollBarVisibility="Hidden" />

If this does not work for you, please provide more details on your current setup, or, ideally, send over a small sample project so that I can further investigate and assist you.

As this case is not directly related to the original topic of the thread, may I kindly ask you to open a new forum thread if the aforementioned approach does not work for you so that it can be more easily found and beneficial to our community?

Thank you in advance for your cooperation and understanding.

Regards,
Dilyan Traykov
Progress Telerik

answered on 20 Sep 2019, 12:00 PM

ezgif-1-7be264f9c8f1.gif

hiii.. i can't hide scrollbar by using your code....here is my code and attached png file

<telerik:GridViewColumn Width="300" UniqueName="ItemName" Header="Item Name">

<telerik:GridViewColumn.CellTemplate>

<DataTemplate>

<telerik:RadMultiColumnComboBox ScrollViewer.VerticalScrollBarVisibility="Hidden" FontSize="15" telerik:StyleManager.Theme="Summer" BorderThickness="0" Width="Auto" Height="45" AutoCompleteMode="Search" Tag="{Binding product_Id,Source={StaticResource StatusList}}"

SelectedValuePath="product_Id" DropDownWidth="400" DisplayMemberPath="product_name"

SelectionChanged="RadMultiColumnComboBox_SelectionChanged" SelectedValue="{Binding ItemID, Mode=TwoWay}" CloseDropDownAfterSelectionInput="True"

GotFocus="RadMultiColumnComboBox_GotFocus" LostFocus="RadMultiColumnComboBox_LostFocus_2" Foreground="Black" >

<telerik:RadMultiColumnComboBox.Resources>

<Style TargetType="telerik:SearchAutoCompleteBoxItem" >

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:SearchAutoCompleteBoxItem">

<Grid>

<Border x:Name="BorderVisual" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<ContentPresenter x:Name="contentPresenter"

Margin="{TemplateBinding Padding}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<telerik:RadButton x:Name="RemoveItemButton"

Visibility="Collapsed"

Grid.Column="1"

CornerRadius="0"

HorizontalAlignment="Right"

VerticalAlignment="Stretch"

CommandParameter="{Binding}"

Cursor="Arrow"

IsTabStop="False"

Focusable="False"

Padding="0"

Margin="4 1">

<telerik:RadGlyph VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="13"/>

</telerik:RadButton>

</Grid>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="telerik:RadMultiColumnComboBox">

<Style.Triggers>

<DataTrigger Binding="{Binding ColorChange}" Value="0">

<Setter Property="Background" Value="white" />

</DataTrigger>

<DataTrigger Binding="{Binding ColorChange}" Value="1">

<Setter Property="Background" Value="#FFF6F6F6" />

</DataTrigger>

</Style.Triggers>

</Style>

<Style TargetType="telerik:RadGridView" >

<Setter Property="IsReadOnly" Value="True"/>

</Style>

</telerik:RadMultiColumnComboBox.Resources>

<telerik:RadMultiColumnComboBox.ItemsSourceProvider>

<telerik:GridViewItemsSourceProvider ItemsSource="{StaticResource StatusList}">

</telerik:GridViewItemsSourceProvider>

</telerik:RadMultiColumnComboBox.ItemsSourceProvider>

</telerik:RadMultiColumnComboBox>

</DataTemplate>

</telerik:GridViewColumn.CellTemplate>

</telerik:GridViewColumn>

answered on 24 Sep 2019, 12:33 PM

ComboBoxScrollbars.zip

Hello ranees,

Thank you for the provided image and code snippet.

I tried replicating the same setup using the code you provided, but the issue demonstrated in the GIF is not observed in the small sample project I created. Please find the project attached for your reference.

As its appearance greatly differs from the one from your recording, I assume that it is caused by some custom styles which are applied to the controls. Can you please modify the project to exhibit the result you observe at your end and send it back to me so that I can further assist you?

I wish to once more kindly ask you to do so in a separate forum thread so that this conversation can more easily be found by our other clients and is most beneficial to them.

Thank you for your cooperation on the matter.

Regards,
Dilyan Traykov
Progress Telerik

answered on 25 Sep 2019, 04:49 AM

scrollbar.png

hii...thank you for the reply....but still i can't hide the vertical scrollbar...don't know how it happened so...in your attached project i have changed a player name into lengthy name...but its showing the scrollbar..would please give me another solution to hide this...please check the attached file

Regards,

Ranees

answered on 25 Sep 2019, 01:54 PM

Hi Ranees,

Thank you very much for the clarification and the attached screenshot.

To remove the scrollbar in question, you can create the following style for the SearchAutoCompleteBox:

                                <telerik:RadMultiColumnComboBox.Resources>
                                    <Style TargetType="telerik:SearchAutoCompleteBox">
                                        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
                                    </Style>
                                    <!-- ... -->
                                </telerik:RadMultiColumnComboBox.Resources>

Please let me know if this successfully hides the scrollbar at your end.

Regards,
Dilyan Traykov
Progress Telerik

answered on 27 Sep 2019, 10:01 AM

rmcmb.png

Thank you Dilyan Traykov.....its worked perfectly....one more question...how to make RadMultiColumnComboBox Content Alignment Center....?? i want to make the content editable too...can you give me a solution for this ?

answered on 27 Sep 2019, 11:52 AM

ComboBoxScrollbars.zip

Hi ranees,

To make the content vertically centered you can define the following style for the SearchAutoCompleteBoxWrapPanel:

        <Style TargetType="telerik:SearchAutoCompleteBoxWrapPanel">
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>

Please note that you need to place this style outside the RadMultiColumnComboBox for it to have effect (in App.xaml for example).

As for editing the SearchAutoCompleteBoxItem's content, I'm afraid that I cannot think of an appropriate solution as this greatly differs from the items' original purpose and design.

Nonetheless, I hope you find this information helpful. Should any further questions or concerns arise, please open a new support or forum thread and I will gladly assist you further with any issues you may have.

Regards,
Dilyan Traykov
Progress Telerik

answered on 23 Oct 2019, 05:55 AM

ezgif-com-video-to-gif.gif

hii i want to make RadMulticolumnComboBox item editable...when i am trying to press BackSpace button....the whole text getting clear....i want to make it editable...can you please give me a solution for this ?? please check my attached file

thanks and regards,

Ranees

answered on 23 Oct 2019, 03:09 PM

EditableTokens.zip

Hi ranees,

To achieve the desired result, you can define a custom SelectionBoxTemplate and define a TextBox bound to the displayed property. Please note that in this case you would need to focus the TextBox when hitting the backspace button to edit the item itself and not remove it.

I've prepared a small sample project in order to demonstrate the approach I have in mind. I hope you find it helpful.

I also want to once more kindly ask you to open new support/forum threads for issues/questions not concerning the original topic of the discussion. Thank you in advance for your cooperation on the matter.

Regards,
Dilyan Traykov
Progress Telerik

answered on 24 Oct 2019, 12:33 PM

sample_pro.gif

hii Dilyan Traykov...first of all sorry for the duplicate post of the above topic....the project which you have given is not suitable for my requirement....after selecting an item from RadMultiColumnComboBox i want to edit that item like TextBox Text....and also don't that close button in selected item...my requirement exact like win forms MultiColumnComboBox....

answered on 29 Oct 2019, 10:03 AM

DropDownWithHeaders.zip

Hi ranees,

With the current implementation of the RadMultiColumnComboBox, the suggested approach is as close to the desired result as I can suggest. You can open a new feature request in our feedback portal regarding such functionality and if it accumulates enough votes, we will consider implementing it in future releases.

For the time being, I can suggest using a standard editable RadComboBox and predefine its EditableTemplate to include a RadGridView inside as demonstrated in the "Dropdown with Headers" demo from our SDK Samples Browser.

I've provided a small example demonstrating this approach for your reference. Please have a look and let me know if you find it helpful.

Regards,
Dilyan Traykov
Progress Telerik

answered on 11 Feb 2020, 11:58 AM

rmccselection.png

hii....how to remove select arrow from RadMultiColumnComboBox...? i want a selection color instead of arrow...is it possible ? please check the attached picture

Regards

Ras Ran

answered on 12 Feb 2020, 11:33 AM

ReplaceRowIndicator.zip

Hi Ras Ran,

To remove the select arrow from the RadMultiColumnComboBox you need to create a style which targets the GridViewRow element, override its template and remove/replace the element which has the x:Name of IconRight. Here's an example:

<Grid x:Name="GridIndicatorPresenter">
                                <Grid x:Name="NavigatorIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed">
                                    <!--<telerik:RadGlyph x:Name="IconRight"
                                        Foreground="{telerik1:CrystalResource ResourceKey=IconBrush}"
                                        FontSize="16"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Glyph="{StaticResource GlyphArrowChevronRight}"/>-->
                                    <Rectangle x:Name="IconRight" Fill="{telerik1:CrystalResource ResourceKey=IconBrush}" Width="20" Height="20" />
                                </Grid>
                                <!-- ... --->

Here I replace the arrow with a rectangle with the same color.

If you also want the current row to have a selection color (background), you can create an appropriate trigger for the style:

                <Trigger Property="IsCurrent" Value="True">
                    <Setter TargetName="Background_Selected" Property="Background" Value="LightBlue" />
                    <Setter TargetName="Background_Selected" Property="Visibility" Value="Visible" />
                </Trigger>

I'm attaching a small sample project which demonstrates these two modifications. Please have a look and let me know if this is what you're aiming for.

On a side note, as this query is not directly related to the original topic of this discussion, may I kindly ask you to open any future inquiries in a separate forum thread so that they can be easily found and beneficial to the community? Thank you in advance for your cooperation on the matter.

Regards,
Dilyan Traykov
Progress Telerik

answered on 12 Feb 2020, 01:13 PM

sample.png

hiii Dilyan Traykov,

Getting exception while running your attached project (check the attached picture)

Regards,

Ras Ran

answered on 12 Feb 2020, 01:30 PM

Hi Ras Ran,

Please ensure that all Telerik references point to the assemblies from the Binaries.NoXaml folder of your Telerik UI for WPF installation. If that is not the case, you can either manually replace them, or use the ReferencesResolver extension to do this automatically for you.

Do let me know if you're able to successfully build and run the project by replacing the references.

Regards,
Dilyan Traykov
Progress Telerik

answered on 13 Feb 2020, 02:15 PM

ReplaceRowIndicator.zip

Hello Ras Ran,

I'm reattaching the sample project, this time along with the required assemblies. Please let me know if you can not successfully build and run it.

If you still do not find this possible, I can suggest just looking at its source code and trying to apply the same modifications to your original application.

Regards,
Dilyan Traykov
Progress Telerik

answered on 14 Feb 2020, 05:46 AM

hii Dilyan Traykov...still getting Reference error...here is my Code

<telerik:GridViewColumn Width="300" UniqueName="clmItemCode" Header="Item Code">
<telerik:GridViewColumn.CellTemplate>

<DataTemplate>
<telerik:RadMultiColumnComboBox FontSize="15" telerik:StyleManager.Theme="Summer" BorderThickness="0" Width="Auto" Height="45" AutoCompleteMode="Search"
SelectedValuePath="product_Id" DropDownWidth="400" DisplayMemberPath="product_code"
SelectionChanged="RadMultiColumnComboBox_SelectionChanged" SelectedValue="{Binding TempItemId, Mode=TwoWay}" CloseDropDownAfterSelectionInput="True"
GotFocus="RadMultiColumnComboBox_GotFocus" LostFocus="RadMultiColumnComboBox_LostFocus_2" Foreground="Black" >
<telerik:RadMultiColumnComboBox.Resources>

<Style TargetType="{x:Type telerik:SearchAutoCompleteBox}">
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
<Setter Property="BorderThickness" Value="0" />
</Style>

<Style TargetType="{x:Type telerik:SearchAutoCompleteBoxItem}" >
<Setter Property="BorderThickness" Value="0" />

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:SearchAutoCompleteBoxItem}">
<Grid>
<Border x:Name="BorderVisual" BorderThickness="0" BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<telerik:RadButton x:Name="RemoveItemButton"
Visibility="Collapsed"
Grid.Column="1"
CornerRadius="0"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
CommandParameter="{Binding}"
Cursor="Arrow"
IsTabStop="False"
Focusable="False"
Padding="0"
Margin="4 1">
<telerik:RadGlyph VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="13"/>
</telerik:RadButton>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ColorChange}" Value="0">
<Setter Property="Background" Value="white" />
</DataTrigger>
<DataTrigger Binding="{Binding ColorChange}" Value="1">
<Setter Property="Background" Value="#FFF6F6F6" />
</DataTrigger>

</Style.Triggers>

</Style>

<Style TargetType="{x:Type telerik:RadMultiColumnComboBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding ColorChange}" Value="0">
<Setter Property="Background" Value="white" />
</DataTrigger>
<DataTrigger Binding="{Binding ColorChange}" Value="1">
<Setter Property="Background" Value="#FFF6F6F6" />
</DataTrigger>

</Style.Triggers>

</Style>

<Style TargetType="{x:Type telerik:RadGridView}" >
<Setter Property="IsReadOnly" Value="True"/>
</Style>

</telerik:RadMultiColumnComboBox.Resources>
<telerik:RadMultiColumnComboBox.Tag>
<Binding Path="product_Id" Source="{StaticResource ItemCodeList}"/>
</telerik:RadMultiColumnComboBox.Tag>
<telerik:RadMultiColumnComboBox.ItemsSourceProvider>
<telerik:GridViewItemsSourceProvider ItemsSource="{StaticResource ItemCodeList}"/>

</telerik:RadMultiColumnComboBox.ItemsSourceProvider>
</telerik:RadMultiColumnComboBox>

</DataTemplate>
</telerik:GridViewColumn.CellTemplate>
</telerik:GridViewColumn>

Regards,

Ras Ran

answered on 14 Feb 2020, 11:28 AM

ReplaceRowIndicator.zip

Hi Ras Ran,

Thank you for the provided code snippet.

From it, I can notice that you're using the StyleManager approach for theming the controls and have used the Summer theme. The code I provided, however, is specific for the Crystal theme (as this seems to be the theme in the image you provided) and requires that implicit styles are used, unless you explicitly extract all required resources as well.

In this case, you will need to extract the respective template for the GridViewRow element for the Summer theme as explained in this article. You can then place the style in the Resources collection of the RadMultiColumnComboBox.

I've updated the sample project with these modifications. I hope you're now able to successfully run it and apply the same in your application.

Regards,
Dilyan Traykov
Progress Telerik

answered on 14 Feb 2020, 12:29 PM

here is my code

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Close dropdown after first selection

48 Answers, 1 is accepted