ElementName binding inside of CellTemplate

[Jason]

Hi, Im using Prism for commanding and am having a problem with ElementName bindings inside of a CellTemplate.

If i do this with a ListBox it works.

 

 

 

<ListBox ItemsSource="{Binding Model}" Grid.Row="4" Grid.ColumnSpan="4">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Button Content="Select"
                            command:Click.Command="{Binding ElementName=LayoutRoot, Path=DataContext.ViewDetailsCommand}">

                    </Button>
                </DataTemplate>
            </ListBox.ItemTemplate>

        </ListBox>

 

 

But if i do this from the RadGridView it doesnt work

 

 

 

<telerikGridView:RadGridView x:Name="mainGrid" Margin="11" Grid.Row="4" d:LayoutOverrides="Width, Height" Grid.ColumnSpan="4" AutoGenerateColumns="True" ItemsSource="{Binding Model}">
            <telerikGridView:RadGridView.Columns>
                <telerikGridView:GridViewColumn UniqueName="SELECT" Header="">
                    <telerikGridView:GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Button x:Name="Select"
                                    Content="Select"
                                    command:Click.Command="{Binding ElementName=LayoutRoot, Path=DataContext.ViewDetailsCommand}"
                                    />
                        </DataTemplate>
                    </telerikGridView:GridViewColumn.CellTemplate>
                </telerikGridView:GridViewColumn>

            </telerikGridView:RadGridView.Columns>
        </telerikGridView:RadGridView>

Any ideas on how to get ElementName to work inside of a CellTemplate?

 

 

 

 

 

[Vlad]

Hi,

You will get the same result with standard Silverlight DataGrid - please check the attached project for reference. In WPF this can be workarounded easily using pure XAML however in Silverlight you will need to do it programmatically.

Sincerely yours,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jason]

I dont see any code in the XAML files for the sample project.

[Vlad]

Hi,

My mistake - I've reattached the project.

Kind regards,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[S G]

Hi Vlad,

I am facing an issue on the similar lines as was being faced by Jason. I thus went through your code as I felt it would help me resolve my issue. I tried the approach suggested by you for SL 3 DataGrid, but it didn't help, hence this post.

I am using Silverlight 3 DataGrid to develop an SL 3 application. In my application, I have a layout Grid (named "LayoutGrid") in which I have a DataGrid (named "PART_datagrid") with DataGridTemplateColumns. The LayoutGrid is set a DataContext in which there is a Ladders list as a property. This Ladders list is set as the ItemsSource for the PART_datagrid. 

<Grid x:Name="LayoutRoot">
   <DataGrid x:Name="PART_datagrid" ItemsSource="{Binding Ladders}">
      <DataGridTemplateColumn>
         <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
               <Button>

Now in one of the DataGridTemplateColumns I have a button which should invoke a Command thats present in the LayoutGrid's DataContext. So I tried Element-To-Element binding on my DataTemplate button as follows

<Button Name="DeleteLadder" Click.Command="{Binding ElementName=LayoutRoot, Path=DataContext.DeleteLadderCommand}" />

But this does not seem to work. What I want to achieve is to handle the event of deletion of a DataGrid row at the parent DataContext level using the command.

So can you pls suggest how do I proceed on this?

Thanks in advance...

[Jason]

Hi S G,

Basically what they are saying is that you cant do it.  ElementName uses the logical tree to find the element in the element name binding.  Parts of the telerik grid (and the sl data grid), do not participate in this part of the tree, or they have not been created yet at the time of binding (since most of the grid is dynamically generated), so it cannot be resolved.

What I have is inherited from Button and added a few properties to it.  One property of a string called CommandHostElementName.  the other property is a string called CommandName.

I overried OnClick (or whatever its called, cant remember off the top of my head), and if both of those properties are set, i manually walk the visual tree up looking for an element of that name.  then i use reflection to pull the command out of the data context.  I then manually fire its can execute to see if it can execute and if so i execute the command.

This was able to get me the functionality to work, but because the command is evaluated at click you do not get the automatic enable/disable of the button.  What ive done in this case is to add another string property of CannotExecuteCommandMessage which if the call to can execute returns false, i put up an alert dialog with that message into it.

Im still waiting for a better solution to be able to bind to an element outside of the cell template, but currently there is no better elegant solution.

Jason

[S G]

Hi Jason,

Thanks for your reply.

I was googling around and found couple of posts which I think are workarounds but should possibly solve my issue (though haven't tried them yet).

http://compositewpf.codeplex.com/Thread/View.aspx?ThreadId=64514

 

http://www.scottlogic.co.uk/blog/colin/2009/02/relativesource-binding-in-silverlight/

[Dan R]

Vlad,
I am having the same binding issue with Silverlight 3 and tried your attached project as is but the binding on the button text does not work. Any ideas?

[Dave Curylo]

I came up with a workaround that might be helpful to some people struggling with this issue.  Below is a class called RadGridViewShim with a property called ParentGridView that is populated with the parent RadGridView when loaded by walking the visual tree.  Put this in your CellTemplate somewhere (doesn't matter where as it has no UI).  Give it a name, and you'll be able to use ElementName binding to get to your parent grid view, it's DataContext, etc.  Here is an example for using this class to bind to a command that is exposed on the DataContext that the parent RadGridView is bound to:

<telerikGV:RadGridView ItemsSource="{Binding MyItems}">
    <telerikGV:RadGridView.Columns>
        <telerikGV:GridViewDataColumn>
            <telerikGV:GridViewDataColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel>
                        <local:RadGridViewShim x:Name="shim" />
                        <telerik:RadButton Margin="3" Width="75"
                                           Command="{Binding ElementName=shim, Path=ParentGridView.DataContext.MyCommand}"
                                           CommandParameter="{Binding}"
                                           Content="Remove"
                                           />
                    </StackPanel>
                </DataTemplate>
            </telerikGV:GridViewDataColumn.CellTemplate>
        </telerikGV:GridViewDataColumn>
    </telerikGV:RadGridView.Columns>
</telerikGV:RadGridView>


public class RadGridViewShim : FrameworkElement
{
    private GridViewRow GetContainingGridViewRow(DependencyObject value)
    {
        if (value != null)
        {
            DependencyObject parent = VisualTreeHelper.GetParent(value);
            if (parent != null)
            {
                GridViewRow gridViewRow = parent as GridViewRow;
                if (gridViewRow != null)
                {
                    return gridViewRow;
                }
                else
                {
                    return GetContainingGridViewRow(parent);
                }
            }
            else
            {
                return null;
            }
        }
        return null;
    }

    public GridViewDataControl ParentGridView { get; protected set; }

    public RadGridViewShim()
    {
        this.Loaded += (s, re) =>
            {
                GridViewRow row = GetContainingGridViewRow(this);
                if (row != null)
                    this.ParentGridView = row.GridViewDataControl;
            };
    }
}

[Andrew]

Dave, thanks for posting your workaround. Works for me!

[Kyle]

Sorry to resurrect a very old post, but isn't this supposed to be resolved in Silverlight 5?  Isn't there a way to do ElementName or AncestorType binding now?

[Rachel]

I know this is an old thread, but for those who may find it while searching, I wanted to add this info.  I had a similar problem trying to use ElementName binding inside my cell template to access a ViewModel command, and the solution was to wrap the cell template in a style.  You can find an example here:  http://www.telerik.com/help/silverlight/gridview-troubleshooting-elementname-binding.html. I can verify that even though I did not change my template at all, wrapping in the style allowed me to bind to my commands.  Nice!

[Emanuel]

Thank you Rachel , one ( more ) year later and this isn't resolved yet. This solution works fine.

[Maya]

Hello Emanuel,

Actually, this issue is more of a platform specific, not telerik controls. That is why we cannot provide a fix for it. Still, I am glad to see that the solution we listed in our documentation works for you.

Regards,
Maya
Telerik