Close dropdown after first selection

35 posts, 1 answers
  1. Emilio
    Emilio avatar
    5 posts
    Member since:
    Oct 2013

    Posted 12 Nov 2018 Link to this post

    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]

  2. Geir
    Geir avatar
    4 posts
    Member since:
    Oct 2010

    Posted 15 Nov 2018 Link to this post

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

    I would also like to see this. 

    As I understand the 'SelectionMode' only affects the gridview. 


  3. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    976 posts

    Posted 15 Nov 2018 Link to this post

    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.
  4. Emilio
    Emilio avatar
    5 posts
    Member since:
    Oct 2013

    Posted 15 Nov 2018 in reply to Dilyan Traykov Link to this post

    Thank you, Dilyan.  That solution is what I needed.  And I appreciate you setting up the feature request.
  5. ranees
    ranees avatar
    108 posts
    Member since:
    Nov 2018

    Posted 12 Jun Link to this post

    is it possible to hide this close option ?? see the attached picture
  6. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    976 posts

    Posted 13 Jun Link to this post

    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.
  7. ranees
    ranees avatar
    108 posts
    Member since:
    Nov 2018

    Posted 13 Jun Link to this post

    what are the static resources ?? static resources are Missing
  8. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    976 posts

    Posted 13 Jun Link to this post

    Hello raneesras,

    Based on the image you provided, I assume that you're using the Xaml assemblies. As stated in my last reply, in such case you can just remove the BasedOn attribute.

    Please let me know if doing so resolves the error and 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.
  9. ranees
    ranees avatar
    108 posts
    Member since:
    Nov 2018

    Posted 17 Jun Link to this post

    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>
  10. ranees
    ranees avatar
    108 posts
    Member since:
    Nov 2018

    Posted 17 Jun Link to this post

    Or else please give a proper method to add RadMultiColumnComboBox in Telerik Datagrid..version 2018
  11. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    976 posts

    Posted 18 Jun Link to this post

    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.
  12. ranees
    ranees avatar
    108 posts
    Member since:
    Nov 2018

    Posted 19 Jun Link to this post

    the project which u have given is not working..or some dll is missing...could u please explain wats the reason behind this ? 
  13. ranees
    ranees avatar
    108 posts
    Member since:
    Nov 2018

    Posted 19 Jun Link to this post

    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>
     
  14. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    457 posts

    Posted 21 Jun Link to this post

    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.
  15. ranees
    ranees avatar
    108 posts
    Member since:
    Nov 2018

    Posted 22 Jun Link to this post

    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>
  16. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    457 posts

    Posted 26 Jun Link to this post

    Hello,

    Thank you for the attached picture. 

    I tested the described behavior in the sample project, however I was not able to reproduce it. May I ask you to upgrade to the latest version of our dlls and test out the scenario again?

    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.
  17. Ankush
    Ankush avatar
    6 posts
    Member since:
    Sep 2019

    Posted 09 Sep in reply to Dilyan Traykov Link to this post

    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 :-

     

    <RadMultiColumnComboBox> ... <CommandRemoveItemButton Style="{StaticResource customItemStyle}" ButtonCommand="{Binding CommandFromViewModel}" /> ... </RadMultiColumnComboBox>

     

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

     

  18. Ankush
    Ankush avatar
    6 posts
    Member since:
    Sep 2019

    Posted 09 Sep in reply to Dilyan Traykov Link to this post

    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:-

    <RadMultiColumnComboBox> ... <CommandRemoveItemButton Style="{StaticResource customItemStyle}"ButtonCommand="{Binding CommandFromViewModel}" /> ... </RadMultiColumnComboBox>

     

    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>    }
  19. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    976 posts

    Posted 10 Sep Link to this post

    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.
  20. Ankush
    Ankush avatar
    6 posts
    Member since:
    Sep 2019

    Posted 11 Sep in reply to Dilyan Traykov Link to this post

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

     

     

  21. Ankush
    Ankush avatar
    6 posts
    Member since:
    Sep 2019

    Posted 11 Sep in reply to Ankush Link to this post

    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

  22. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    976 posts

    Posted 12 Sep Link to this post

    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

    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.
  23. Ankush
    Ankush avatar
    6 posts
    Member since:
    Sep 2019

    Posted 12 Sep in reply to Dilyan Traykov Link to this post

    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. 

  24. Ankush
    Ankush avatar
    6 posts
    Member since:
    Sep 2019

    Posted 12 Sep in reply to Ankush Link to this post

    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

  25. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    976 posts

    Posted 13 Sep Link to this post

    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

    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.
  26. ranees
    ranees avatar
    108 posts
    Member since:
    Nov 2018

    Posted 19 Sep Link to this post

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

     

  27. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    976 posts

    Posted 20 Sep Link to this post

    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

    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.
  28. ranees
    ranees avatar
    108 posts
    Member since:
    Nov 2018

    Posted 20 Sep in reply to Dilyan Traykov Link to this post

    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>
                                            <!--SelectedItem="{Binding ourItemName,Source={StaticResource StatusList}}"-->
                                            <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>
  29. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    976 posts

    Posted 24 Sep Link to this post

    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

    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.
  30. ranees
    ranees avatar
    108 posts
    Member since:
    Nov 2018

    Posted 24 Sep in reply to Dilyan Traykov Link to this post

    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

Back to Top