Questions on UI for WPF Forum

1 answer

126 views

ComboBox with GridView? (oh, and a rant :)

I've been working with the Telerik WPF controls for the last couple of months and appreciating them.

<rant>

However, I have a major gripe as well: most of the examples are FAR too complex. Here's a perfect example. I'm trying to get a ComboBox to work with a GridView. There is an example that does pretty much exactly what I want at https://github.com/telerik/xaml-sdk/tree/master/ComboBox/DropDownWithHeaders. However,

A simple clone from the repository won't run. That seems fundamental to me. When I look into it, the problem is themes. A simple example should not even include themes! I would suggest a proper example would allow me to clone and run, with nothing else on my machine but Visual Studio.
When I look into the actual example, it is anything but simple! The control template is 155 lines of code!?!?! How do I sort through that quickly and figure out what I need and don't need? I don't need all kinds of animation or fancy styles. For the purposes of learning the controls, I need the absolute minimum to make it work!

There is also an example of this at https://www.telerik.com/forums/radcombobox-with-radgridview, but it suffers from the same problems.

This kind of thing seriously makes me ponder going back to our old controls provider.

</rant>

Now, can someone please provide me with a simple example of a ComboBox that uses a GridView for the drop-down?

Of course perhaps I'm using the wrong control. Maybe I should be using the MultiColumnComboBox, but the end results shown in the examples make it look nothing like a traditional ComboBox. (Again, that may be owing to a lack of a good, simple example.)

Help?

ComboBox

GridView

MultiColumnComboBox

answered on 26 Nov 2024

0 answers

78 views

RadDiagram panning

I am using the RadDiagram component inside a WPF application for a sketching software. The default behavior of the RadDiagram is to enable movement of the diagram with the Ctrl + Left click and drag shortcut. I want to enable the program to also work with Middle mouse button click and drag. Currently, I am using custom RadDiagram tools, which derive from their base classes. For example, MyPanningTool:

using System;
using System.Windows.Input;
using XXX.Core.Models.EventArgs;
using Telerik.Windows.Diagrams.Core;

namespace XXX.XXX.Presentation.Tools
{
    internal class MyPanningTool : PanningTool
    {
        private const string PanningToolName = "Panning Tool";
        private SelectionMode _selectionMode;
        private ToolService _toolService;

        public MyPanningTool()
        {
            Cursor = DiagramCursors.Dragging;
        }

        private void ActivatePanningTool()
        {
            _toolService ??= Graph.ServiceLocator.GetService<IToolService>() as ToolService;
            _toolService?.ActivateTool(PanningToolName);
        }

        private void ActivatePointerTool()
        {
            _toolService ??= Graph.ServiceLocator.GetService<IToolService>() as ToolService;
            _toolService?.ActivateTool("Pointer Tool");
        }

        public override bool KeyDown(KeyArgs key)
        {
            if (!IsActive) return false;
            base.KeyDown(key);

            if (key.Key != Key.Enter && key.Key != Key.Escape && !ToolService.IsControlDown)
            {
                ActivatePanningTool();
                return false;
            }

            return false;
        }

        /// <inheritdoc />
        public override bool MouseDown(PointerArgs e)
        {
            if (IsActive)
            {
                _selectionMode = Graph.SelectionMode;
                Graph.SelectionMode = SelectionMode.None;
            }

            if (ToolService.IsControlDown || Mouse.MiddleButton == MouseButtonState.Pressed)
            {
                //ActivateTool();
                //ActivatePanningTool();
                return base.MouseDown(e);
            }
                
            return IsActive && base.MouseDown(e);
        }

        /// <inheritdoc />
        public override bool MouseMove(PointerArgs e)
        {
            if (ToolService.IsControlDown || Mouse.MiddleButton == MouseButtonState.Pressed)
            {
                return base.MouseMove(e);
            }
            return IsActive && base.MouseMove(e);
        }

        /// <inheritdoc />
        public override bool MouseUp(PointerArgs e)
        {
            if (!IsActive) return false;

            Graph.SelectionMode = _selectionMode;

            try
            {
                base.MouseUp(e);
            }
            catch
            {
                // ignored
            }



            if (ToolService.IsControlDown || Mouse.MiddleButton == MouseButtonState.Pressed) return base.MouseUp(e);

            ActivatePointerTool();
            ToolChangedEvent?.Invoke(null, new ToolChangedEventArgs("Pointer Tool"));
            return true;
        }

        public static event EventHandler<ToolChangedEventArgs> ToolChangedEvent;
    }
}

I've tried to capture the Middle mouse click event on the RadDiagram and transfer them to the Panning tool Mouse click and and Move events, but this doesn't seem to do the trick.

Diagram

updated question on 26 Nov 2024

1 answer

62 views

How can I pass KeyTriggers from a RadPane to the ToolWindow when created?

I am working on an application that uses a DockingPanesFactory to add RadPanes to a window. These RadPanes have KeyTriggers that do not execute when floating. I understand that it is because it becomes a ToolWindow and therefore it is not in the same visual tree. How can I make sure tgatvmy key triggers get passed to the ToolWindow so the commands execute?

Docking

TreeView

answered on 22 Nov 2024

0 answers

44 views

Kendo js, issue with position of date on xAxis

have a chart of (date- value) using Kendo js, the positions were wrong on the xAxis line there's an offset, I used the property baseUnit: "days", it fixed the first one but still seeing an offset for the others (date-value) and can't fix it , here's an image of my chart :

Chart

updated question on 22 Nov 2024

1 answer

141 views

Set focus to first cell of selected item when RadGridView initially shown

What is necessary to get a RadGridView to focus the first cell of the row that is selected, when the SelectedItem is bound, when the grid is first shown? You can see in the screenshot that the first cell of the first row is focused even though the third row is selected via binding. You can also see the properties that are set for the grid below.

As soon as a user clicks on another row in the grid, the outlining / focus on the first cell goes away and moves to the first cell of the row the user selected.

                    <telerik:RadGridView
                        x:Name="fieldsGrid"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        IsReadOnly="True"
                        AutoGenerateColumns="False"
                        SelectionMode="Single"
                        SelectionUnit="FullRow"
                        EnableLostFocusSelectedState="False"
                        ShowGroupPanel="False"
                        ShowSearchPanel="False"
                        SearchPanelCloseButtonVisibility="Collapsed"
                        RowIndicatorVisibility="Collapsed"
                        IsSynchronizedWithCurrentItem="True"
                        IsFilteringAllowed="True"
                        CanUserDeleteRows="False"
                        CanUserFreezeColumns="False"
                        ShowColumnSortIndexes="False"
                        MouseDoubleClick="InsertableRow_OnMouseDoubleClick"
                        ItemsSource="{Binding FieldsForBindingOnly, Mode=OneWay}"
                        SelectedItem="{Binding SelectedField, Mode=TwoWay}">

GridView

answered on 22 Nov 2024

1 answer

72 views

Hide Weekends and non-working days from TimelineView

We are using a RadScheduleView with a TimelineViewDefinition. We allow the user to manually change the VisibleDays of the view as well as the Selected date with a datepicker. Is it possible to remove or hide the weekends and other non-working days in the TimelineView?

ScheduleView

answered on 22 Nov 2024

0 answers

65 views

Best practice to avoid blocking UI while writing SyntaxEditor by a tagger

Hi everyone,

I'm looking for a a way to make a delay (apart from some common ways like Task.Delay) to calling taggers. In one of my projects I've used a tagger which noticeably impact the performance and caused a lag when user is writing. I need that tagger to be called once user has finished writing not per each letter. Something like the Delay property in normal binding commands or a way to make tagger to not blocking the UI.

Does anyone have any idea?

Thanks,
Dariush Malek

SyntaxEditor

asked on 18 Nov 2024

1 answer

55 views

Repeated values in a grid?

I really don't know how to describe this, so I had trouble with a good subject, or searching it out, but...

I have a grid with a lot of numbers. In some of the columns, the value is repeated (identical) for each row. I'd like to show those only once as some kind of header or summary row, but without their own grouping, per se, and without any kind of aggregate function working on them. They all belong to the group that contains them. Does that make sense?

Perhaps this picture can help:

Notice how all the values in "Volume," "Volume Last Week", "Volume Last Year" are the same? I'd like them to show up only for the "Region" (which is the grouping containing this set). I'm hoping this is easier to do than to explain. 😅

Thanks in advance!

Brad.

GridView

answered on 18 Nov 2024

0 answers

85 views

Grid view PropertyChanged invoked only after unfocusing/unselecting the current cell.

I need to be notified every time my value in a column changes. But it invokes PropertyChanged only after I unfocus/unselected the cell I was editing. I've tried your grid view example
https://docs.telerik.com/devtools/wpf/controls/radgridview/getting-started/getting-started2 and it has the same functionality even if I'm setting Mode=TwoWay, UpdateSourceTrigger=PropertyChanged it still triggers ProperyChanged only after I make changes and unselect the current cell. I want to trigger the notify event every time I change.
My grid view:
<telerik:RadGridView x:Name="IdentityProvidersGridView"
                     ItemsSource="{Binding IdentityProviders}"
                     SelectedItem="{Binding SelectedIdentityProvider}"
                     Visibility="{Binding IsChecked, ElementName=EnableTokenValidation, Converter={StaticResource BoolToVis}}"
                     SelectionMode="Single"
                     ShowGroupPanel="False"
                     NewRowPosition="Bottom"
                     GroupRenderMode="Flat"
                     CanUserInsertRows="True"
                     AutoGenerateColumns="False"
                     CanUserReorderColumns="False"
                     RowIndicatorVisibility="Collapsed"
                     AddingNewDataItem="AddIdentityProviderItem"
                     PreviewKeyDown="DataGrid_PreviewKeyDown"
                     Margin="0,10,0,10" Grid.Row="10">

                <telerik:RadGridView.Columns>
<telerik:GridViewCheckBoxColumn Header="Enable"
                                        EditTriggers="CellClick"
                                        AutoSelectOnEdit="True"
                                        Width="Auto"
                                        DataMemberBinding="{Binding EnableProvider, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<telerik:GridViewCheckBoxColumn.CellStyle>
<Style TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</telerik:GridViewCheckBoxColumn.CellStyle>
</telerik:GridViewCheckBoxColumn>

                    <telerik:GridViewDataColumn Header="Internal provider ID"
                                    DataMemberBinding="{Binding ProviderId, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                    EditTriggers="CellClick" Width="Auto"/>

                    <telerik:GridViewDataColumn x:Name="InternalProviderLabelColumn" Header="Internal provider label"
                                    DataMemberBinding="{Binding SchemeName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnTargetUpdated=True}"
                                    EditTriggers="CellClick" Width="Auto"/>

                    <telerik:GridViewDataColumn Header="Token provider URL"
                                    DataMemberBinding="{Binding Issuer, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                    EditTriggers="CellClick" Width="*"/>

<telerik:GridViewDataColumn Header="Actions" Width="Auto">
<telerik:GridViewDataColumn.CellTemplate>
<DataTemplate>
<telerik:RadButton Content="X" Click="DeleteIdentityProvider_Click"
CommandParameter="{Binding}" Width="50" HorizontalAlignment="Center"/>
</DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>
</telerik:RadGridView.Columns>
</telerik:RadGridView>

        private void OnProviderPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            MarkDirtyIfStateChanged();
        }

public class IdentityProvider : INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

GridView

updated question on 08 Nov 2024

0 answers

77 views

How to set SelectedBackground in TreeListView

I want to set backgound of selected row in RadTreeListView. I tried below, but it does not work.

I'm applying a theme to my application using no-xaml. When using a theme, is it not possible to change the background?

            <Style TargetType="telerik:TreeListViewRow" BasedOn="{StaticResource TreeListViewRowStyle}">
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="SelectedBackground" Value="#FFFFBB00" />
                        <Setter Property="Background" Value="#FFFFBB00"/>
                    </Trigger>
                </Style.Triggers>
            </Style>

TreeListView

updated question on 07 Nov 2024