Telerik WPF GridView prevent focus on button click - wpf

I have a radgridview where one column is an edit button which redirects the page and the rest of the columns are databound from my source.
My problem is that to be able to press the edit button on a specific row for the first time the user basically has to press it twice because the first click for some reason focuses the entire gridview first into view.
This only happens when the entire gridview does not fit into the view so I am guessing it tries to automatically fit itself as best as it can before it lets me press the edit button - it does not happen if i press on any of the static uneditable fields - only on the edit button
<telerik:RadGridView Name="radGridView" VerticalAlignment="Top"
AutoGenerateColumns="False"
ValidatesOnDataErrors="None" IsReadOnly="True"
ShowColumnSortIndexes="True"
CanUserFreezeColumns="False"
ItemsSource="{Binding PagedSource, ElementName=radDataPager}" >
<telerik:RadGridView.Columns>
<telerik:GridViewColumn Header="Edit">
<telerik:GridViewColumn.CellTemplate>
<DataTemplate>
<Button Content="Edit" Style="{StaticResource HyperLinkButtonStyle}"
Click="EditButton_Click" />
</DataTemplate>
</telerik:GridViewColumn.CellTemplate>
</telerik:GridViewColumn>
<telerik:GridViewDataColumn DataMemberBinding="{Binding Organization}" Header="Organization"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding VisitDate, StringFormat=d}" Header="Visit Date"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding Location}" Header="Location"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding Address}" Header="Address"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding ContactPersonName}" Header="Contact Name"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding ContactPersonEmail}" Header="Contact E-mail"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding ContactMobileNumberConcatenate}" Header="Contact Mobile Number"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding ContactHomeNumberConcatenate}" Header="Contact Home Number"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding ContactOfficeNumberConcatenate}" Header="Contact Office Number"/>
<telerik:GridViewDataColumn DataMemberBinding="{Binding ContactFaxNumberConcatenate}" Header="Contact Fax Number"/>
</telerik:RadGridView.Columns>
</telerik:RadGridView>
Is there a way to prevent this focus from happening when I press on an edit button inside the grid? or am I missing something else

For some reason the problem was that I was using a button in the datatemplate as
<Button Content="Edit" Style="{StaticResource HyperLinkButtonStyle}" Click="EditButton_Click" />
Something about the Button was making the gridview have to first focus itself into the view before a subsequent click on that button would fire the click event in the cases where it was not fully fitting on the screen..
I ended up doing the workaround of simply using a telerik label and giving it a MouseLeftButtonDown event
<telerik:Label Content="Edit" TouchDown="EditButton_Click" MouseLeftButtonDown="EditButton_Click" Style="{StaticResource HyperLinkStyle}"/>
Pretty sure you should be able to use a regular label as well
The HyperLinkStyle is just a style that makes the label underlined and gives it a color and hover state
<UserControl.Resources>
<Style x:Key='HyperLinkStyle' TargetType='telerik:Label'>
<Setter Property='Template'>
<Setter.Value>
<ControlTemplate TargetType='telerik:Label'>
<TextBlock TextDecorations='Underline'>
<ContentPresenter TextBlock.FontFamily='Segoe UI' TextBlock.FontSize='13'/>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property='Foreground' Value='#195AE0' />
<Style.Triggers>
<Trigger Property='IsMouseOver' Value='true'>
<Setter Property='Foreground' Value='Red' />
<Setter Property='Cursor' Value='Hand' />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>

You can also change appropriate property for button if it is not important for you:
<Button Focusable="False" Content="Edit" Style="{StaticResource HyperLinkButtonStyle}" Click="EditButton_Click"/>

Related

How to show a radio button and data in same column of telerik gridview control?

I have tried like this :
<telerik:GridViewDataColumn x:Name="ReferenceCols"
UniqueName="Reference" SortingState="Ascending" DataMemberBinding="{Binding Ref, Mode=OneWay}"
DisplayIndex="0" MaxWidth="197"
Header="title"
Style="{StaticResource ReadOnlySortableFilterableGridTextColumn}">
<telerik:GridViewDataColumn.CellTemplate>
<DataTemplate>
<telerik:RadRadioButton Content="{Binding Reference}" CornerRadius="20" Width="30"/>
</DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>
but it is not working as radio button for telerik is different and it is showing content inside the button.Please help me on this
The Telerik RadRadioButton control renders as a button and not the older style shown in your first screenshot.
In this case I would recommend using the standard WPF RadioButton control.

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.

Telerik RadGridView selected item binding not working when clicking on button in datagrid properly

Hi I have a telerik RadGridView bound up to an observable collection via MVVM and the SelectedItem property of the grid is also bound to a property from within the model as well. There is then a button column that is bound to open the selected item to see more details of the selected item. The code for this is below.
<telerik:RadGridView Name="RadGridView"
Height="900"
AutoGenerateColumns="False"
CanUserSortColumns="True"
IsReadOnly="True"
ItemsSource="{Binding Model.Items}"
SelectedItem="{Binding Model.SelectedItem,Mode=TwoWay}"
Width="990">
<telerik:RadGridView.Columns>
<telerik:GridViewColumn Header="Open Item" >
<telerik:GridViewColumn.CellTemplate>
<DataTemplate>
<Button Content="Open"
Command="{Binding Path=DataContext.OpenItemBySelectedItemCommand,
RelativeSource= {RelativeSource FindAncestor,
AncestorType={x:Type telerik:RadGridView}}}">
</Button>
</DataTemplate>
</telerik:GridViewColumn.CellTemplate>
</telerik:GridViewColumn>
<telerik:GridViewDataColumn DataMemberBinding="{Binding DateScanned}" Header="Date Scanned" />
<telerik:GridViewDataColumn DataMemberBinding="{Binding Amount}" Header="Amount" />
<telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" Header="Description" />
<telerik:GridViewDataColumn DataMemberBinding="{Binding IsRefund}" Header="Is Refund" />
</telerik:RadGridView.Columns>
</telerik:RadGridView>
Now this code works fine whenever I click into the row then click the button, however if I just click the button of the row without clicking into the row first the SelectedItem property is not set and so the command does not function as expected.
I thought when clicking the button of a row it would auto select that row but apparently not. Does anyone know how I can get it to set the SelectedItem property whenever I only click on the button within a specific row without having to click on the row before clicking the button?
You could pass a reference to the underlying data object as a command parameter to the command:
<Button Content="Open"
Command="{Binding Path=DataContext.OpenItemBySelectedItemCommand, RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}}"
CommandParameter="{Binding}">
</Button>
For the row to actually become selected when you click on the Button, you will have to write some code that actually selects it. You could do this by handling the Button's Click event like this:
private void Button_Click_1(object sender, RoutedEventArgs e)
{
Button button = sender as Button;
RadGridView.SelectedItem = button.DataContext;
}
<Button Content="Open"
Click="Button_Click_1"
Command="{Binding Path=DataContext.OpenItemBySelectedItemCommand,
RelativeSource= {RelativeSource FindAncestor,
AncestorType={x:Type telerik:RadGridView}}}">
</Button>
This does not break the MVVM pattern since selecting a row in the view is pure view functionality.

How to pass an entity bound in a DataGrid as a CommandParameter of a Button

I have the following DataGrid
<DataGrid>
<DataGrid.Columns>
<DataGridTextColumn Header="Registro" Binding="{Binding NumeroRegistro}" />
<DataGridTextColumn Header="Nome" Binding="{Binding Nome}" Width="*" />
<DataGridTextColumn Header="Login" Binding="{Binding Login}" Width="200" />
<DataGridTemplateColumn Width="30" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Name="btnEditarFisioterapeuta" CommandParameter="{Binding Id}" Click="btnEditarFisioterapeuta_Click">
<Rectangle>
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_page_edit}" />
</Rectangle.Fill>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
And, in the code behind I populate the items of the data grid like this
dgFisioterapeuta.ItemsSource = listOfEntities;
Nothing special. Note that I'm binding the Id of the entity in the Button, so that in the code behind I can get this Id and edit the entity. I was wondering, if the whole DataGrid is bound to a list of entities, why not pass the entire entity as CommandParameter?
Is there a way to do it?
In other words, I want to Change the line
<Button Name="btnEditarFisioterapeuta" CommandParameter="{Binding Id}" >
to something like this.
<Button Name="btnEditarFisioterapeuta" CommandParameter="{Binding The_binding_that_represents_the_entity_of_this_row}" >
Yes, you can do that, it's very simple:
<Button Name="btnEditarFisioterapeuta" CommandParameter="{Binding}">
(Note that when you write {Binding Id} that's shorthand for {Binding Path=Id}, so to get the whole entity you simply exclude the path.)

Silverlight Template databinding issue

I am using the Telerik framework for creating a RadGridView with child elements in Silverlight 4.
<telerikGrid:RadGridView x:Name="itemsGrid" Grid.Row="1" AutoGenerateColumns="{Binding AutoGenerateColumn, Mode=TwoWay}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" ItemsSource="{Binding Items, Mode=TwoWay}" CanUserInsertRows="True" ShowInsertRow="True" CanUserDeleteRows="True">
<telerikGrid:RadGridView.Columns>
<telerikGrid:GridViewToggleRowDetailsColumn />
<telerikGrid:GridViewDataColumn Header="Item 1" DataMemberBinding="{Binding Item1}" UniqueName="Item1" />
<telerikGrid:GridViewComboBoxColumn Header="Group" UniqueName="Group"
ItemsSource="{Binding Groups.Items}" SelectedValueMemberPath="GroupId" DisplayMemberPath="GroupNames" />
<telerikGrid:GridViewComboBoxColumn Header="Supplier" UniqueName="Supplier"
ItemsSource="{Binding Suppliers}" SelectedValueMemberPath="CompanyS" DisplayMemberPath="CompanyName" />
<telerikGrid:GridViewDataColumn Header="Not in use" DataMemberBinding="{Binding inUse}" UniqueName="inUse" />
</telerikGrid:RadGridView.Columns>
<telerikGrid:RadGridView.ChildTableDefinitions>
<telerikGrid:GridViewTableDefinition />
</telerikGrid:RadGridView.ChildTableDefinitions>
<telerikGrid:RadGridView.HierarchyChildTemplate>
<DataTemplate>
<StackPanel>
<telerikGrid:RadGridView x:Name="childGrild" Grid.Row="1" AutoGenerateColumns="False" ItemsSource="{Binding ChildList}" CanUserInsertRows="True" CanUserDeleteRows="True" IsReadOnly="False" ShowInsertRow="True" ShowGroupPanel="False">
<telerikGrid:RadGridView.Columns>
<telerikGrid:GridViewDataColumn Header="Part S" DataMemberBinding="{Binding PartS}" UniqueName="PartS" />
<telerikGrid:GridViewComboBoxColumn Header="Tools" ItemsSource="{Binding ElementName=control, Path=DataContext.Tools}" DataMemberBinding="{Binding PartS}" SelectedValueMemberPath="Id" DisplayMemberPath="Name" />
</telerikGrid:RadGridView.Columns>
</telerikGrid:RadGridView>
</StackPanel>
</DataTemplate>
</telerikGrid:RadGridView.HierarchyChildTemplate>
</telerikGrid:RadGridView>
As you can see, each row in the grid has a child GridView, the problem is however that i cant get the Combobx in the gridview to display any data, its always empty. If i move it outside the child tempate it works fine, and the Items which are in the Tools list is shown.
To access the list, which is a property of the controls datacontext, i gave the control a Name (control), and used Path=DataContex.Tools, which i read should work.
Anyone has any idea why the ComboBox is not populated with data? I have checked that all the propertie names are correct, and that there actually are data there to show.
RadGridView and ElementName don't mix very well. In your case, the 'control' element can't be found. You could use a DataContextProxy as shown in the link. It solved an issue I had that was similar.

Resources