[Solved] GridViewDataColumn.CellStyle scrolling issue

[Jeremy]

Thank you for enabling the CellStyle in the GridViewDataColumn.  This will come in fairly handy for my project.  One issue I have found in the new 2008 3 1217 Futures build is that if I am using a Silverlight Button control in the CellStyle the vertical scrolling will cause the the appcliation to throw and exception and then sometimes hangs the client browser (IE 6 in this instance, this doesn't seem to occur in FireFox 3).  Following is the xaml and code of how to reproduce the issue.  Once the application is running if you do not get vertical scroll bars on the grid, then resize the browser so that vertical scroll bar appears and then attempt to scroll.

ExampleGrid.xaml

<UserControl x:Class="WindowExample.ExampleGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:GridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    >
    <Grid x:Name="LayoutRoot" >
        <Controls:RadGridView Name="sampleRadGridView" ColumnsWidthMode="Fill" AutoGenerateColumns="False" ShowGroupPanel="False">
            <Controls:RadGridView.Columns>
                <GridView:GridViewDataColumn IsReadOnly="True" >
                    <GridView:GridViewDataColumn.CellStyle>
                        <Style TargetType="GridView:GridViewCell">
                            <Setter Property="Template">
                                <Setter.Value>
                                <ControlTemplate>
                                    <Button x:Name="ActionButton" Content="Some Action" Click="ActionButton_Click"> </Button>
                                </ControlTemplate>
                                </Setter.Value>
                                </Setter>
                        </Style>
                    </GridView:GridViewDataColumn.CellStyle>
                </GridView:GridViewDataColumn>
                <GridView:GridViewDataColumn HeaderText="CustomerID" IsReadOnly="True" UniqueName="CustomerID"    />
                <GridView:GridViewDataColumn HeaderText="CompanyName" IsReadOnly="True" UniqueName="CompanyName" />
                <GridView:GridViewDataColumn HeaderText="Country" UniqueName="Country" />
                <GridView:GridViewDataColumn HeaderText="City" UniqueName="City" />
                <GridView:GridViewDataColumn HeaderText="ContactName" UniqueName="ContactName" />
            </Controls:RadGridView.Columns>
        </Controls:RadGridView>

    </Grid>
</UserControl>

Example.cs

using System;
using System.Collections.ObjectModel;
using System.Windows.Controls;
using Telerik.Windows;
using Telerik.Windows.Controls.GridView;
using Telerik.Windows.Controls.GridView.Rows;

namespace WindowExample {
    public partial class ExampleGrid : UserControl {
        private ObservableCollection<Customer> dataSource = new ObservableCollection<Customer>();


        public ExampleGrid() {
            InitializeComponent();
            SetCustomerDataSource();
            this.sampleRadGridView.AddHandler(GridViewRow.EditEndedEvent, new EventHandler<RecordRoutedEventArgs>(this.OnEditEnded));
            this.sampleRadGridView.ItemsSource = this.dataSource;
        }

        private void OnEditEnded(object sender, RecordRoutedEventArgs e) {
        }

        private void SetCustomerDataSource() {
            for (int i = 0; i < 1000; i++) {
                Customer aCustomer = new Customer();
                aCustomer.CustomerID = i.ToString();
                aCustomer.ContactName = "Customer " + i.ToString();
                dataSource.Add(aCustomer);
            }
        }

        private void ActionButton_Click(object sender, System.Windows.RoutedEventArgs e) {
            //Perform some action
        }
    }
    public class Customer {
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
        public string ContactName { get; set; }
        public bool Bool { get; set; }
    }}

Please let me know if there is something I can do to alleviate this issue.
Thank you for your help.
- Jeremy

[Hristo Deshev]

Hi Jeremy,

Thanks for the report. I reproduced the problem, and I got the Silverlight exception even in Firefox (FF is not as vocal as IE, but logs the error in its error console anyway). The crash is caused by a bug in our ScrollPositionIndicator control -- the popup you see that shows the preview when doing deferred scrolling.

The control will try to take the value of the first column by default and in your case the first column has no data -- it does not have a DataMemberBinding set. The easiest fix is to define such a binding, no matter that you template the column cells and do not actually display that binding:

<GridView:GridViewDataColumn IsReadOnly="True" DataMemberBinding="{Binding ContactName}" >
    <GridView:GridViewDataColumn.CellStyle>
        <Style TargetType="GridView:GridViewCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Button x:Name="ActionButton" Content="Some Action" Click="ActionButton_Click"></Button>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GridView:GridViewDataColumn.CellStyle>
</GridView:GridViewDataColumn>

Note the DataMemberBinding property set above that will display the customer contact name in the scroll positioin indicator. I am attaching the fixed project for your reference.

As usual, thanks for the detailed report -- it really helps make our product better. I have updated your Telerik points.

All the best,
Hristo Deshev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.