WPF Xceed Data grid Scroll view - wpf

I have use Xceed data grid with more than 20 columns when i use 20th column and do any action my grid scrollbar start with column no 1 how to avoid such refreshing issue ?
<xcdg:DataGridControl AllowDrop="True" AutoCreateColumns="False" ReadOnly="True" Name="xcddgVSMilestones" ItemScrollingBehavior="Immediate" MouseDoubleClick="xcddgVSMilestones_MouseDoubleClick" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="Column01" ReadOnly="True" Title="Column 01 ">
<xcdg:Column.CellContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type xcdg:DataRow}}, Path=DataContext[OriginalDate], StringFormat=\{0: MM/dd/yyyy\}}"/>
</DataTemplate>
</xcdg:Column.CellContentTemplate>
</xcdg:Column>.......... up to column20
</xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>
This Xaml code was i use

Related

RadGridView List Column Filtering

I am using RadGridView control on my WPF application. I have added a column filter for one of the columns (Category column) of my Grid.
The "Category" column is a List/Collection column. That can show multiple items for one row. And we need a filter for this "Category" column. So that filter should show the distinct categories only in filter popup.
Please check the screen shot below-
I am using the below code for getting the distinct values in filter dropdown-
private void MyGrid_OnDistinctValuesLoading(object sender, GridViewDistinctValuesLoadingEventArgs e)
{
e.ItemsSource = ((RadGridView)sender).GetDistinctValues(e.Column, false);
}
Below XAML code for "Category column-
<telerik:GridViewDataColumn x:Name="Category" DataMemberBinding="{Binding CategoryList, Mode=OneWay}"
FilterMemberPath="CategoryText"
IsFilterable="True"
<telerik:GridViewDataColumn.Header>
<TextBlock VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
ToolTip="Category"
Text= "Category" />
</telerik:GridViewDataColumn.Header>
<telerik:GridViewDataColumn.CellTemplate>
<DataTemplate>
<ItemsControl x:Name="CategoryItemsControl"
VerticalAlignment="Top"
ItemsSource="{Binding CategoryList, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border MinHeight="105"
MaxHeight="105"
BorderBrush="{StaticResource IsabellineBrush}"
BorderThickness="0,0,0,1">
<TextBlock TextTrimming="CharacterEllipsis"
ToolTip="{Binding CategoryText}"
Text="{Binding CategoryText}"
VerticalAlignment="Center"
FontSize="12" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>
But I am not getting the distinct values (as per the column "Category") in filter dropdown.
I want to show distinct values in filter dropdown as per the blue box in above image.
So can anyone let me know what I am missing here.

RadGridView Bind Column Width to Another Column?

I have a RadGridView (Telerik) and it has a handful of columns. In the row details template I have another grid view displaying sub-items that have the same columns. This works great for the initial display, but I would like the column widths for the details template to follow the widths of the main grid (details template does not have headers).
I tried giving the main column a name and binding to 'Width' and 'ActualWidth' properties of that column by name but it didn't seem to take and didn't give any binding errors.
Is there any way to bind the width of a column on one RadGridView to the width of a column on another RadGridView?
EDIT
Per the suggestion below I tried binding the view to the tag and going that way and it doesn't seem to work. It works for the textblock but doesn't set the column width. Here is a video of what I see:
https://www.screencast.com/t/BiHmiarQExV
Here is the code I'm using:
<telerik:RadGridView Grid.Row="2" ItemsSource="{Binding RenumberNotes}" x:Name="tgr" AutoGenerateColumns="False"
RowDetailsVisibilityMode="Visible">
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn UniqueName="columnName" DataMemberBinding="{Binding CurrentValue}" Width="100" />
</telerik:RadGridView.Columns>
<telerik:RadGridView.RowStyle>
<Style TargetType="telerik:GridViewRow" BasedOn="{StaticResource {x:Type telerik:GridViewRow}}">
<Setter Property="Tag" Value="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}" />
</Style>
</telerik:RadGridView.RowStyle>
<telerik:RadGridView.RowDetailsTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="10,10,10,10">
<TextBlock Text="Column width: " />
<TextBlock
Text="{Binding Tag.Columns[columnName].ActualWidth, RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}}" />
</StackPanel>
<telerik:RadGridView AutoGenerateColumns="False" ItemsSource="{Binding Subnotes}">
<telerik:RadGridView.Columns>
<telerik:GridViewColumn Header="test" Width="{Binding Tag.Columns[columnName].ActualWidth, RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}}" />
</telerik:RadGridView.Columns>
</telerik:RadGridView>
</StackPanel>
</DataTemplate>
</telerik:RadGridView.RowDetailsTemplate>
</telerik:RadGridView>
As you can see, it updates the textblock properly so the binding is correct, but the column width is not updated.
Is there any way to bind the width of a column on one RadGridView to the width of a column on another RadGridView?
Yes. You could define a RowStyle that binds the Tag property of the GridViewRow to the parent RadGridView and then use this one to bind to the Columns collection of the grid. Here is an example for you:
<telerik:RadGridView x:Name="tgr" AutoGenerateColumns="False" RowDetailsVisibilityMode="VisibleWhenSelected">
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn UniqueName="columnName" DataMemberBinding="{Binding Name}" Width="100" />
</telerik:RadGridView.Columns>
<telerik:RadGridView.RowStyle>
<Style TargetType="telerik:GridViewRow" BasedOn="{StaticResource {x:Type telerik:GridViewRow}}">
<Setter Property="Tag" Value="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}" />
</Style>
</telerik:RadGridView.RowStyle>
<telerik:RadGridView.RowDetailsTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="10,10,10,10">
<TextBlock Text="Column width: " />
<TextBlock Text="{Binding Tag.Columns[columnName].ActualWidth, RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}}" />
</StackPanel>
</DataTemplate>
</telerik:RadGridView.RowDetailsTemplate>
</telerik:RadGridView>
Edit:
It works for a Textblock as you have shown, but binding the column width the same way doesn't seem to do anything.
Right, that's because the column itself is not part of the visual tree. You will have to write some code then. You could simply handle the Loaded event of the inner RadGridView:
private void RadGridView_Loaded(object sender, RoutedEventArgs e)
{
RadGridView subGridView = (RadGridView)sender;
subGridView.Columns[0].Width = columnName.Width;
}
XAML:
<telerik:RadGridView Grid.Row="2" ItemsSource="{Binding RenumberNotes}" x:Name="tgr" AutoGenerateColumns="False"
RowDetailsVisibilityMode="Visible">
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn x:Name="columnName" DataMemberBinding="{Binding CurrentValue}" Width="100" />
</telerik:RadGridView.Columns>
<telerik:RadGridView.RowDetailsTemplate>
<DataTemplate>
<telerik:RadGridView AutoGenerateColumns="False" ItemsSource="{Binding Subnotes}"
Loaded="RadGridView_Loaded">
<telerik:RadGridView.Columns>
<telerik:GridViewColumn Header="test" />
</telerik:RadGridView.Columns>
</telerik:RadGridView>
</DataTemplate>
</telerik:RadGridView.RowDetailsTemplate>
</telerik:RadGridView>
This is cleaner and doesn't break any pattern.

WPF DataGrid RowDetailsTemplate with Multiple Images (MVVM)

Goal
To add multiple images in a DataGrid's RowDetails template using the MVVM standards.
Background
I have an inspection window with a DataGrid designed to hold a damaged item's description along with the initials of the inspector. What is more, this DataGrid's RowDetailsTemplate needs to hold the pictures that the inspector took of the damaged item (so there might be more than one picture of the damaged item).
Problem
I have a DamagedWindow.xaml designed to create my DamagedItem entries. It looks like this:
DataGrid (.XAML)
<DataGrid ItemsSource="{Binding Pictures}" SelectedItem="{Binding SelectedPicture}" AutoGenerateColumns="False" Grid.Column="1" Grid.Row="2" Margin="5" HorizontalAlignment="Stretch" Name="DataGrid1" VerticalAlignment="Stretch" CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Titre" Binding="{Binding Name}" Width="*" />
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Image Height="100" Source="{Binding Path}" />
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
As you can see, my RowDetails template works fine in this DataGrid. I have a class named PicturesList which inherits an ObservableCollection Of my PictureModel(Name, Description, Path).
The text boxes that you see above the DataGrid are properties of my DamagedItemModel (Description, Initiales, PicturesList). So when the user clicks on the Accept (Checkmark) button, the DamagedItem is added to a DamagedItemsList which is then set as the ItemSource of the DataGrid from my MainWindow:
DataGrid (.XAML)
<DataGrid ItemsSource="{Binding Path=DamagedItems}" SelectedItem="{Binding Path=SelectedDamagedItem}" AutoGenerateColumns="False" Name="DataGrid1" Height="250" Margin="3" IsEnabled="True" CanUserAddRows="False" FontSize="16">
<DataGrid.Columns>
<DataGridTextColumn Header="Description" Width="*" Binding="{Binding Description}"/>
<DataGridTextColumn Header="Initiales" Width="70" Binding="{Binding Initiales}"/>
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Image Height="100" Source="{Binding Pictures.Path}" />
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
Here when I select the row, I get an empty RowDetailsTemplate result ... Even though my object contains my images. See below for more details:
So here's my question, is it possible to add multiple images to a RowDetailsTemplate in a DataGrid while following MVVM standards? If it is, what am I doing wrong?
You can't bind that way. you need to do it like this:
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Pictures}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Height="100" Source="{Binding Path}"/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
The reason your method was not working is that the Binding source is always one object which is set by Binding Path, and your Binding Path was Pictures.Path which leads to nothing because Pictures object does not have Path, it's its Items which have Path.
In general, Whenever you find yourself dealing with a collection of some kind think of a control which is suitable for showing a collection, like ListBox, DataGrid or the best of all ItemsControl.
Anything that goes inside ItemTemplate of these controls, have their DataContext automatically set to the correspondent item, so you don't have to worry about it. All you have to do is to set the ItemsSource to your collection and set the Binding Paths of things inside to the properties of the Type of that collection, So that it knows where to look for data for each item.
In this code you can think of it this way, Like you have some StackPanels, first one has : Image Source="{Binding Pictures(0).Path}", seconds one has Image Source="{Binding Pictures(1).Path}" and so on. this way all Binding Paths point to an object.

WPF - Xceed GridControl - saving when edited row has focus

I have an XCeed grid with cell editing enabled.
When i make a change to my cell, leave the row and then save it is persited to the database.
But when i hit my save button when the changed cell is still selected the change doens't get persisted.
How can i make sure when i save the current content is saved?
My Grid xaml:
<xcdg:DataGridControl ItemsSource="{Binding Source={StaticResource MySource}}"
BorderThickness="1" AutoCreateColumns="False" ReadOnly="False" NavigationBehavior="CellOnly">
<xcdg:DataGridControl.DefaultCellEditors>
<xcdg:CellEditor x:Key="{x:Type system:Boolean}">
<xcdg:CellEditor.EditTemplate>
<DataTemplate>
<xcdg:CheckBox xcdg:Cell.IsCellFocusScope="True"
IsChecked="{xcdg:CellEditorBinding}"
HorizontalContentAlignment="Right"
/>
</DataTemplate>
</xcdg:CellEditor.EditTemplate>
<xcdg:CellEditor.ActivationGestures>
<xcdg:TextInputActivationGesture />
</xcdg:CellEditor.ActivationGestures>
</xcdg:CellEditor>
</xcdg:DataGridControl.DefaultCellEditors>
<xcdg:DataGridControl.Columns>
<xcdg:Column Title="Description" FieldName="Description" ReadOnly="True"/>
<xcdg:Column Title="Start period" FieldName="Start" ReadOnly="True"/>
<xcdg:Column Title="End Period" FieldName="End" ReadOnly="True"/>
<xcdg:Column Title="Finished" FieldName="IsFinished"/>
</xcdg:DataGridControl.Columns>
<!--<xcdg:DataGridControl.Columns>
</xcdg:DataGridControl.Columns>-->
</xcdg:DataGridControl>

Binding multiple Sources to a ListView

I have a ListView with a dataTemplate which I need to bind to 3 different sources with the same index. I think I have to do this completely in XAML, because the sources (chart) only exists in xaml. I'm using the MVVM Pattern."
I have wrote down how it "should" work, the index i is the common key.
<ListView ItemsSource="{Binding ???}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<!-- Small rectangle filled with the same color as the corresponding line -->
<Rectangle
Height="10"
Width="10"
Fill="{Binding ElementName=chart, Path=Series[i].LineStroke}" />
<!-- The title of the corresponding line -->
<TextBlock
x:Name="Title"
Text="{Binding ElementName=chart, Path=Series[i].DataSeries.Title}" />
<!-- The actual value of the corresponding line on the current position-->
<TextBlock
x:Name="Value"
Text="{Binding ElementName=chart, Path=Behaviour.Behaviours[0].CurrentPoints[i].Y}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Mh, lets see. How about you bind you listview to chart.Series this way you get the right number of elements. An then in your data template you bind the properties of the series. For the behaviour you could use MultiBinding and a converter to extract the data
<ListView ItemsSource="{Binding Path=Series, ElementName=chart}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<!-- Small rectangle filled with the same color as the corresponding line -->
<Rectangle
Height="10"
Width="10"
Fill="{Binding Path=LineStroke}" />
<!-- The title of the corresponding line -->
<TextBlock
x:Name="Title"
Text="{Binding Path=DataSeries.Title}" />
<!-- The actual value of the corresponding line on the current position-->
<TextBlock x:Name="Value">
<TextBlock.Text>
<MultiBinding Converter="{StaticResource ChartSeriesBehaviourConverter}">
<Binding ElementName=chart/>
<Binding/>
<MultiBinding>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Now you should get the chart and the current series object passed into your converter where you should be able to do something like var idx = chart.Series.IndexOf(s) so you can access the corresponding point in the behaviours.

Resources