Cell content disappearing when scrolling horizontally

[Luke]

I have a grid which is quite dynamic.

Grid has first few columns which are static (predefined) the rest of the columns are auto-generated. 
During auto generation I have a logic where I check which is the current month I also apply some styles etc.

Grid works as intended as long as person opens it on the big enough screen. However if screen is too small person has to scroll horizontally, this is where error occurs. When person scrolls to the right and then left again, left cells are either empty or have wrong data in them.

How can I stop it from happening? Since all other grids are working fine, I'm assuming it has something to do with styles etc.

EDIT: 

I have managed to pin point the problem to GridView_AutoGeneratingColumn. In my handler I do following:
- Check column unique Name, if its one of the "special columns I have for monthly amounts" I add CellSelector to the column via e.Column.CellStyleSelector. 
- I change column heading (since its monthly data i show month name/year as a heading).

In the screenshot I'm showing columns which are auto generated. Also as you can see first and last month in the range have arrows to shift months, so column heading and data is being shifted when person clicks it.

[Dimitrina]

Hi,

 Usually the reason for such a behaviour would be that you work with the visual elements (i.e. Cells). In that case I would recommend you to work with the data elements instead. As you have mentioned in your Edit you should use a CellStyleSelector for styling the column cells.Have you checked this help article on how to create the StyleSelector? How do you apply the styles in your project?

All the best,
Didie
the Telerik team

[Luke]

Hi,

In my AutoGeneratingColumn handler I assign CellStyleSelector on specific columns. (Grid is auto generating few columns but only few of them meet criteria of having a style.)
My style selector needs few properties provided, to make a decision what background/style to pick for a cell.

e.Column.CellStyleSelector = new MyCellStyleSelector
                {
                    ColumnToCheck = uniqueColumnName,
                    GreenStyle = GreenStyle,
                    GreyStyle = GreyStyle,
                    OrangeStyle = OrangeStyle,
                    RedStyle = RedStyle,
                    YellowStyle = YellowStyle,

                    CurrentUser = CurrentDataContext.ClientContext.CurrentUser,
                    ClientContext = CurrentDataContext.ClientContext,

                    CurrentPeriod = CurrentDataContext.CurrentPeriod
                };
                e.Column.IsSortable = true;
                e.Column.IsFilterable = false;

When I remove style selector from being assigned grid works fine.

[Dimitrina]

Hi,

 Thank you for this additional information. Still I cannot see what is your criteria for selecting a style.  When do you return a particular style? Is your choice based on the data item?

Greetings,
Didie
the Telerik team

[Luke]

A number of parameters is passed to style selector to make right decision on what to display.
Each row of the grid is in fact a wrapper that contains multiple objects. Such as

public class RowWrapper {
  public User User {set;get;}
  public object Column1 {set;get}
  public object Column2 {set;get}
  public object Column3 {set;get}
  public object Column4 {set;get}
}

Objects have their ToString overwritten to always return amount (currency).

Select is picked based on current object in that cell, current user that is browsing site etc.
eg.

If user is currect and object status is draft colour grey is set for background.
In one case there is also an image showing where user can mouse over it to get a popup for quick action.

Is there any other way I could apply this style including all the necessary objects that style selector needs to make a decision?

[Dimitrina]

Hello,

 So your dataItem (the item in the row) is RowWrapper.
Then inside your SelectStyle method you should check your criteria like so:

public override Style SelectStyle(object item, DependencyObject container)

 {

  if (item is RowWrapper)

 {

   RowWrapper wrapper= item as RowWrapper;

// check the criteria using the "wrapper" object
// return style with gray colour

...

Please make your decision using the data object (wrapper) rather then the cell object. 

I hope that I have understood your scenario the right way. Please let me know if I am wrong.

All the best,
Didie
the Telerik team

[Luke]

Hi,

My decision making is a bit more complex than just grabbing whole row item. I need to know exactly which column (different object is what).

This is my code

public override Style SelectStyle(object item, DependencyObject container)
        {
            //return null;
            try
            {
                var myInstance = item.GetType().GetProperty(ColumnToCheck.ToString()).GetValue(item, null) as MyInstance;
                var cell = (container as GridViewCell);
                if (myInstance != null)
                {
                    object temp = myInstance.GetType().GetProperty("MyStatus").GetValue(myInstance, null);
                    if (temp is MyStatus)
                    {
                        var status = (MyStatus)temp;

                        if (cell != null)
                        {

                            var template = GetDataTemplateForCell(myInstance.My, myInstance);

                            cell.InvokeOnLayoutUpdated(() =>
                                                           {
                                                               var image = cell.FindChildByType<Image>();
                                                               if (image != null)
                                                               {
                                                                   image.MouseEnter += (s1, e1) =>
                                                                    {
                                                                        var currentMy =
                                                                            myInstance.My;
                                                                        var currentMyInstance =
                                                                            myInstance;
                                                                        if (currentMy != null && !ClientContext.IsLoading && cell.Tag == null)
                                                                        {
                                                                            var date = myInstance.GlPeriod;

                                                                            var p = e1.GetPosition(null); // mouse position

                                                                            var viewModel = new MyApprovalPopupViewModel();
                                                                            var view =
                                                                                new MyApprovalPopup { DataContext = viewModel };

                                                                            // Assigning those will start loading of data for the popup.
                                                                            viewModel.ClientContext = ClientContext;
                                                                            viewModel.My = currentMy;
                                                                            viewModel.MyInstance = currentMyInstance;

                                                                            var timer = new System.Windows.Threading.DispatcherTimer();
                                                                            timer.Interval = TimeSpan.FromMilliseconds(500);

                                                                            cell.Tag = true;

                                                                            timer.Tick += (object timerSender, EventArgs timerArgs) =>
                                                                            {
                                                                                Popup popUp = new Popup();

                                                                                /**
                                                                                * Call all events when those happen to forward them onto the view model.
                                                                                */
                                                                                if (OpenDetailWindow != null)
                                                                                {
                                                                                    view.OpenDetailWindow
                                                                                        =
                                                                                        () =>
                                                                                        OpenDetailWindow
                                                                                            (myInstance,
                                                                                            new EventArgs
                                                                                                ());
                                                                                }

                                                                                if (ApprovalDone != null)
                                                                                {
                                                                                    viewModel.
                                                                                        ApprovalDone
                                                                                        +=
                                                                                        (appDoneSender, appDoneEventArgs) =>
                                                                                                ApprovalDone
                                                                                                    (myInstance,
                                                                                                    new EventArgs
                                                                                                        ());
                                                                                }

                                                                                popUp.Child = view;
                                                                                popUp.HorizontalOffset = p.X - (view.Wmyh - 10);
                                                                                popUp.VerticalOffset = p.Y - (view.Height - 10);
                                                                                popUp.IsOpen = true; // open popup
                                                                                popUp.Child.MouseLeave += (s2, e2) =>
                                                                                {
                                                                                    // Note: This checks if drop down box is open, if so don't close it - it is a bug where MouseLeave is called when drop down is opened
                                                                                    if (!view.AccountDropBox.IsDropDownOpen)
                                                                                    {
                                                                                        popUp.IsOpen = false;
                                                                                        timer.Stop();
                                                                                        cell.Tag = null;
                                                                                    }

                                                                                };

                                                                                // stop the timer
                                                                                timer.Stop();
                                                                                cell.Tag = null;
                                                                            };
                                                                            timer.Start();
                                                                        }

                                                                    };
                                                               }

                                                               //var textblock = cell.FindChildByType<TextBlock>();

                                                               //if(textblock != null)
                                                               //{
                                                               //    var grid = cell.ParentOfType<RadGridView>();

                                                               //    textblock.MouseLeftButtonDown += (s1, e1) =>
                                                               //     {
                                                               //         grid.SelectedCells.Clear();
                                                               //         var cellInfo = new GridViewCellInfo(cell);
                                                               //         grid.CurrentCellInfo = cellInfo;
                                                               //         grid.UpdateLayout();
                                                               //     };

                                                               //}
                                                           });

                            cell.ContentTemplate = template;
                        }



                        switch (status)
                        {
                            case MyStatus.Draft:
                                return GreyStyle;
                            case MyStatus.Declined:
                                return RedStyle;
                            case MyStatus.Submitted:
                                // Needs to be approved by this user
                                if (CurrentUser.UserId == myInstance.My.SentToId)
                                    return YellowStyle;

                                // This is submited to be approved by someone
                                if (CurrentUser.UserId == myInstance.My.OriginatorId)
                                    return OrangeStyle;

                                return OrangeStyle;
                            case MyStatus.Approved:
                                return GreenStyle;
                            default:
                                return null;
                        }
                    }
                }
                else
                {
                    var template = GetDataTemplateForCell(null, null);
                    cell.ContentTemplate = template;
                }
            }
            catch (Exception e)
            {
                return null;
            }

            return null;
        }

In a nuttshell if a cell (specific object) has a GlPeriod same as the current period then this cell should be yellow and template also shows little image where person can mouse over to get quick access rather than double clicking the cell to open up the detail window.

Is there any better way of doing this?

[Dimitrina]

Hello,

If you have to work with the Cells, then you should turn off the UI Virtualization. Does this solve the problem on scrolling?

All the best,
Didie
the Telerik team

[Luke]

It is working flawlessly now.

For anyone whoever runs into the same issue I have added following to my RadGridView definition in XAML.

http://www.telerik.com/help/silverlight/radgridview-features-ui-virtualization.html

EnableColumnVirtualization="False"
EnableRowVirtualization="False"

[Daniel]

I have the same problem . when scrolling the horizontal bar to the left end or right end, the txt field data cells will be grayed out.

I turned off the Virtualization  and it worked fine.

EnableColumnVirtualization="False"
EnableRowVirtualization="False"

BUT : It killed the performance. It takes more than 2 minute to load the Gridview data.
do you have workaround for this with out turning off the Virtualization  ?

[Luke]

I have only disabled column virtualization (since I only have handful of columns) and it fixed the problem and performance wasnt that affected.

I hope there will be a proper fix in the future otherwise we will be running into major performance issues. At the moment we have implemented paging to limit amount of rows displayed.

[Daniel]

I have a RadGridView with ScrollViewer.VerticalScrollBarVisibility="Auto".
and EnableColumnVirtualization="True"    EnableRowVirtualization="True" .
when Scrolling the Horizontal scrollbar to the right then back, the data in the txt field contents are cleared.

Turning off the Virtualization will fix this problem but killed the performance.
it takes more than 2 minute to load the gridview data.

I have tried turning off the Column Virtualization only(EnableColumnVirtualization="False") but didn't solve the performance issue.

any solution or workaround for this?

[Luke]

We have disabled column virtualization (left row virtualization on), also we have implemented data grid paging to limit amount of data showing. Performance is bearable.

[Jayesh]

Hi,
 is this issue fixed? i cannot set columnvirtualization or rowvirtualization false because we are providing an option for inline editing. but when the above two properties to false it is giving some application error when i click on a cell for inline editing. please help me.

[Dimitrina]

Hello,

Have you applied a CellStyleSelector as explained and shown in the article I referenced? 

Greetings,
Didie
the Telerik team

[Jayesh]

Hi
no,  iam not using any style. is it mandatory to set some style?

And also, the cells that are getting disappeared are of from those columns which are bound to either 'DateTime?' or 'Decimal?'. Is it the problem with these two data types?

[Dimitrina]

Hi,

There is not a restriction based on the DataType of the column. May I ask you to share what is your implementation (related to Cell's content) then?  

Kind regards,
Didie
the Telerik team

[Jayesh]

let me check before i share whether i can do that or not.
i will explain the scenario.

we have grid with 24 columns. All are gridviewdatacolumn, having 15 string values, 3 date field and rest decimal values. on load all the values will be there but the problem arises when scroll the grid from left to right and when i again scroll back to left these columns showing datefield and decimal get dissappears, not always randomly. but when i double click on the cell to edit the value reappears.

but when i set the properties enableColumnvirtualization = false and enableRowvirtualization = false (also tried setting enableColumnvirtualization = false alone) it works fine, the value is retained when i scroll. but when i double click on cell it gives error at the bottom of the page showing some application error f'ailed while doing eval(string).. something'. so is there any solution for this? is it mandatory that i need to create a sample project where i can reproduce this issue??

[Dimitrina]

Hello,

Having your description, I believe the problem is that you work with the GridViewCells directly. When the virtualization of RadGridView is turned on (which is by default), it is not recommended to work with the visual elements and their properties. I would suggest you to work with the data elements instead (using CellStyleSelector and CellTemplateSelector). You can take a look at this article for a reference on UI Virtualization. 
 

All the best,
Didie
the Telerik team

[Jayesh]

Hi,

We found out that CellTemplateSelector and CellStyleSelector is only changing the style of the Grid row data. But the problem we are facing is different. Suppose consider we have one row with some data in it in the Grid. while loading to the Grid the Data of all the column values will be fine.

But when i scroll, some of the Data(Not all, As mentioned the decimal and Date values) gets disappeared, in the sense it will be hidden in the background, but when i click on that column data again to do inline editing the value appears. It seems the data are getting hidden in the background. But we are not able to fix using virtualization only. Let us know if we need to make any other changes to fix our problem.

Regards,
Jayesh

[Dimitrina]

Hello Jayesh,

May I ask you to please isolate the problem you have in a demo project which we could debug locally? You can check this blog post for a reference, which shows you how to isolate a problem in a sample project. 

Regards,
Didie
the Telerik team

[Jayesh]

 

 

 

yes, the issue is with3 gridviewcolumn i guess, even when i created a sample project it gives me an error. I am setting isvisible of save and cancel true in beginningedit event and isvisible of edit false.
similarly the the reverse in roweditended event. so when i set column virtualization this is giving the error. how can i achieve these functionalities then?


<telerik:RadGridView.Columns>

 

 

 

 

<telerik:GridViewColumn Header="Edit"

 

 

 

Width="50"

 

 

 

UniqueName="Edit"

 

 

 

TextWrapping="Wrap"

 

 

 

HeaderTextAlignment="Center"

 

 

 

HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}">

 

 

 

 

<telerik:GridViewColumn.CellTemplate>

 

 

 

 

<DataTemplate x:Name="dtEdit">

 

 

 

 

<Button x:Name="btnEdit"

 

 

 

ToolTipService.ToolTip="Click here to Edit"

 

 

 

Height="25"

 

 

 

Cursor="Hand"

 

 

 

Background="Transparent"

 

 

 

Click="EditClick"

 

 

 

Style="{StaticResource ButtonStyleImage}">

 

 

 

 

<Image Source="Images/Edit.PNG"

 

 

 

Style="{StaticResource GridRowImageStyle}"/>

 

 

 

 

</Button>

 

 

 

 

</DataTemplate>

 

 

 

 

</telerik:GridViewColumn.CellTemplate>

 

 

 

 

</telerik:GridViewColumn>

 

 

 

 

<telerik:GridViewColumn Header="Save"

 

 

 

Width="50"

 

 

 

UniqueName="Save"

 

 

 

TextWrapping="Wrap"

 

 

 

HeaderTextAlignment="Center"

 

 

 

HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}">

 

 

 

 

<telerik:GridViewColumn.CellTemplate>

 

 

 

 

<DataTemplate x:Name="dtSave">

 

 

 

 

<Button x:Name="btnSave"

 

 

 

ToolTipService.ToolTip="Click here to Save"

 

 

 

Height="25"

 

 

 

Cursor="Hand"

 

 

 

Background="Transparent"

 

 

 

Click="SaveClick"

 

 

 

Style="{StaticResource ButtonStyleImage}">

 

 

 

 

<Image Source="Images/Save.PNG"

 

 

 

Style="{StaticResource GridRowImageStyle}"/>

 

 

 

 

</Button>

 

 

 

 

</DataTemplate>

 

 

 

 

</telerik:GridViewColumn.CellTemplate>

 

 

 

 

</telerik:GridViewColumn>

 

 

 

 

<telerik:GridViewColumn Header="Cancel"

 

 

 

Width="50"

 

 

 

UniqueName="Cancel"

 

 

 

TextWrapping="Wrap"

 

 

 

HeaderTextAlignment="Center"

 

 

 

HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}">

 

 

 

 

<telerik:GridViewColumn.CellTemplate>

 

 

 

 

<DataTemplate x:Name="dtCancel">

 

 

 

 

<Button x:Name="btnCancel"

 

 

 

ToolTipService.ToolTip="Click here to Cancel"

 

 

 

Height="25"

 

 

 

Cursor="Hand"

 

 

 

Background="Transparent"

 

 

 

Click="CancelClick"

 

 

 

Style="{StaticResource ButtonStyleImage}">

 

 

 

 

<Image Source="Images/Cancel.PNG"

 

 

 

Style="{StaticResource GridRowImageStyle}"/>

 

 

 

 

</Button>

 

 

 

 

</DataTemplate>

 

 

 

 

</telerik:GridViewColumn.CellTemplate>

 

 

 

 

</telerik:GridViewColumn>

 

[Jayesh]

how can we modify the visibility of a column, if column virtualization is set to false

[Dimitrina]

Hello,

You have pasted XAML code only. Would it be possible for you to send us the demo project? 

All the best,
Didie
the Telerik team

[Kavita]

Hi,

I have a RadGridView with ScrollViewer.VerticalScrollBarVisibility="Auto". 
and EnableColumnVirtualization="True"    EnableRowVirtualization="True" .
when Scrolling the vertical scrollbar to the down then back, the data in the txt field contents are cleared.

Turning off the Virtualization will fix this problem but killed the performance.
it takes more than 2 minute to load the gridview data.and i can not turn it off as there will be 1000 number of records.

any solution or workaround for this?

[Dimitrina]

Hello,

Usually the reason for such a behavior would be that you work with the visual elements (i.e. Cells). How do you assign the content for the cells? Have you applied any styling directly on the cells?

Regards,
Didie
Telerik