[Solved] How to set a context menu to a column created dynamically !

[Kannan]

Hi,

I'm using rad grid view and have a column defined in the xaml file like this,

        <telerikGridView:RadGridView Name="radGridView"
                                     AutoGenerateColumns="False"
                                     RowLoaded="radGridView_RowLoaded">
            <telerikGridView:RadGridView.Columns>
                <telerikGridView:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Path=Name}"></telerikGridView:GridViewDataColumn>
            </telerikGridView:RadGridView.Columns>
            
        </telerikGridView:RadGridView>

I set a context menu for this column in the row loaded event like this,

        private void radGridView_RowLoaded(object sender, Telerik.Windows.Controls.GridView.RowLoadedEventArgs e)
        {
            if (e.Row is GridViewHeaderRow)
            {
                RadContextMenu contextMenu = new RadContextMenu();
                contextMenu.ItemClick += new Telerik.Windows.RadRoutedEventHandler(nameColumnContextMenu_ItemClick);
                contextMenu.Opened += new RoutedEventHandler(nameColumnContextMenu_Opened);
                RadContextMenu.SetContextMenu(e.Row.Cells[0], contextMenu);
            }
        }
 
        private void nameColumnContextMenu_Opened(object sender, RoutedEventArgs e)
        {
            RadContextMenu contextMenu = sender as RadContextMenu;
            contextMenu.Items.Clear();
 
            GridViewHeaderCell cell = contextMenu.UIElement as GridViewHeaderCell;
            RadMenuItem freeTextMenu = new RadMenuItem() { Header = "Add Mark" };
            contextMenu.Items.Add(freeTextMenu);
        }

When the context "Add Mark" is clicked, I dynamically add a GridViewDataColumn.
Now I've to set a context menu for this column.
I tried in the column collection event like this, but didn't work since the header (column) cell is not available,

        private void Columns_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
        {
            GridViewHeaderRow gridViewHeaderRow = radGridView.ChildrenOfType<GridViewHeaderRow>().FirstOrDefault();
 
            GridViewHeaderCell headerCell = gridViewHeaderRow.Cells.Where(f => RadContextMenu.GetContextMenu(f) == null).FirstOrDefault() as GridViewHeaderCell;
 
            if (headerCell != null)
            {
                RadContextMenu contextMenu = new RadContextMenu();
                contextMenu.ItemClick += new Telerik.Windows.RadRoutedEventHandler(markColumnContextMenu_ItemClick);
                contextMenu.Opened += new RoutedEventHandler(markColumnContextMenu_Opened);
                RadContextMenu.SetContextMenu(headerCell, contextMenu);
            }
        }

Please let me know how to do this ?

Thanks & Regards,
Kannan

[Yavor Georgiev]

Hello Kannan,

 You can handle the CellLoaded event of RadGridView and check if the loaded cell is a GridViewHeaderCell, whose column is the one you created.

Best wishes,
Yavor Georgiev
the Telerik team

[Kannan]

Hi Yavor Georgiev,

Thanks for the help.

But, We are currently using Q2 2010 SP2 2010.2.924 version. I think this CellLoaded event is part of Q3 ?

Is it possible to solve this issue using Q2 SP2 dlls ?

Thanks & Regards,
Kannan

[Yavor Georgiev]

Hello Kannan,

 Well, you can use any event of RadGridView, such as DataLoaded, etc., to try and find a header cell whose column is the one you created dynamically (myRadGridView1.ChildrenOfType<GridViewHeaderCell>().Where(c => c.Column == myColumn);). However, there is no guarantee that the column will be visible when the event fires (because of horizontal scrolling, for example), so the cell may not yet be realized.

Kind regards,
Yavor Georgiev
the Telerik team

[Kannan]

Hi Yavor Georgiev,

Thanks for the help.

I checked the DataLoaded event. It is called only for the first time when we set the binding data.

It is not called whenever the column is added. I'm still binding the new column like below.

        private void nameColumnContextMenu_ItemClick(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            Random random = new Random();
 
            foreach (Student student in students)
            {
                student.Marks.Add(new Mark() { Value = random.Next(10, 100).ToString() });
            }
 
            // Get the context menu . . .
            RadContextMenu contextMenu = sender as RadContextMenu;
 
            // Get the current cell on which the context menu is displayed . . .
            GridViewHeaderCell cell = contextMenu.GetClickedElement<GridViewHeaderCell>();
 
            RadMenuItem menuItem = e.OriginalSource as RadMenuItem;
 
            GridViewDataColumn markColumn = new GridViewDataColumn();
 
            markColumn.UniqueName = "Mark";
            markColumn.Header = "Mark # " + radGridView.Columns.Count.ToString();
            string path = "Marks[" + (radGridView.Columns.Count - 1).ToString() + "].Value";
            markColumn.DataMemberBinding = new Binding(path) { Mode = BindingMode.TwoWay };
            radGridView.Columns.Insert(cell.Column.DisplayIndex + 1, markColumn);
        }

I could see the values are binded and displayed in the grid after the new column is added dynamically.

I'm adding this column through a column context menu in the first column.

After adding this DataLoaded event is not called. Could you please say how to fix this ?

Thanks & Regards,
Kannan

[Kannan]

Hi Yavor Georgiev,

Thanks for the help.

I downloaded Q3 dlls (Version: 2010.3.1110.1040). CellLoaded event is there and it works fine !

But after changing to this Q3 dlls, I'm getting the following exception in Applicaiton.UnhandledException event handler during application load. (In my home page I'm using few RadTileViewItem)

Exception Message:

Value does not fall within the expected range.

Exception Stack Trace:

   at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
   at MS.Internal.XcpImports.SetValue(IManagedPeerBase obj, DependencyProperty property, Double d)
   at System.Windows.DependencyObject.SetValue(DependencyProperty property, Double d)
   at System.Windows.Media.Animation.DoubleKeyFrame.set_Value(Double value)
   at Telerik.Windows.Controls.Animation.AnimationExtensions.SingleProperty(AnimationContext target, String propertyPath, Double[] args)
   at Telerik.Windows.Controls.Animation.AnimationExtensions.MoveY(AnimationContext target, Double[] args)
   at Telerik.Windows.Controls.RadTileView.AnimateItemPosition(RadTileViewItem item, Point targetPosition)
   at Telerik.Windows.Controls.RadTileView.AnimateItemsWhenThereIsMaximized()
   at Telerik.Windows.Controls.RadTileView.AnimateItemsLayout()
   at Telerik.Windows.Controls.RadTileView.UpdateItemsSizeAndPosition()
   at Telerik.Windows.Controls.RadTileView.UpdateGridPosition(RadTileViewItem item)
   at Telerik.Windows.Controls.RadTileView.<ConstructLayoutGrid>b__2d(RadTileViewItem c)
   at System.Collections.Generic.List`1.ForEach(Action`1 action)
   at Telerik.Windows.Controls.RadTileView.ConstructLayoutGrid()
   at Telerik.Windows.Controls.RadTileView.<OnItemsChanged>b__1e()

Could you please help me to fix this ?

Thanks & Regards,
Kannan

[Zarko]

Hello Kannan,

 Could you please send us a sample project that reproduces the issue because at the moment we can't figure out where the error comes from?

Best wishes,
Zarko
the Telerik team

[Kannan]

Hello Zarko,

Thanks ! I'll add a sample project by creating a separate thread in the TileView forum.

I've another issue. To replicate this I've uploaded a sample solution in the following path: http://www.mediafire.com/file/lx67mwvqa60szjc/MergeGridCells.zip

Initially the grid will have 3 columns with few rows defined like this in the xaml,

            <telerikGridView:RadGridView Name="radGridView"
                                     AutoGenerateColumns="False"
                                     CellLoaded="radGridView_CellLoaded"
                                     RowLoaded="radGridView_RowLoaded">
                <telerikGridView:RadGridView.Columns>
                    <telerikGridView:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Path=Name}" MinWidth="100"></telerikGridView:GridViewDataColumn>
                    <telerikGridView:GridViewDataColumn Header="Mark" DataMemberBinding="{Binding Path=Mark}" MinWidth="100"></telerikGridView:GridViewDataColumn>
                    <telerikGridView:GridViewDataColumn UniqueName="Total" Header="Total" MinWidth="100"></telerikGridView:GridViewDataColumn>
                </telerikGridView:RadGridView.Columns>
 
            </telerikGridView:RadGridView>

Here some of the Name & Total column cells are merged. This merge is done in the row loaded event like this,

private void radGridView_RowLoaded(object sender, Telerik.Windows.Controls.GridView.RowLoadedEventArgs e)
        {
            if (!(e.Row is GridViewHeaderRow) && !(e.Row is GridViewNewRow) && e.Row.DataContext is Student)
            {
                Student student = e.Row.DataContext as Student;
 
                // Set the context menu for each cell . . .
                foreach (GridViewCell cell in e.Row.Cells)
                {
                    // Merge this cell with the previous cell . . .
                    MergeGridCells(cell);
                }
            }
 
            if (e.Row is GridViewHeaderRow)
            {
                RadContextMenu contextMenu = new RadContextMenu();
                contextMenu.ItemClick += new Telerik.Windows.RadRoutedEventHandler(nameColumnContextMenu_ItemClick);
                contextMenu.Opened += new RoutedEventHandler(nameColumnContextMenu_Opened);
                RadContextMenu.SetContextMenu(e.Row.Cells[0], contextMenu);
            }
        }

        private void SetBorder(GridViewCell cell)
        {
            // Set the border of cell . . .
            Border border = cell.ChildrenOfType<Border>().Where(c => c.Name == "PART_CellBorder").FirstOrDefault();
            if (border != null)
            {
                border.BorderThickness = new Thickness(0, 0, 1, 1);
            }
        }


        private void MergeGridCells(GridViewCell currentCell)

        {

            SetBorder(currentCell);



            GridViewRow previousGridStudentRow = null, nextGridStudentRow = null;



            // Get the previous row of this row for merging . . .

            int previousGridStudentRowIndex = radGridView.Items.IndexOf(currentCell.ParentRow.Item) - 1;

            if (previousGridStudentRowIndex >= 0)

            {

                previousGridStudentRow = radGridView.ItemContainerGenerator.ContainerFromIndex(previousGridStudentRowIndex) as GridViewRow;

            }



            int nextGridStudentRowIndex = radGridView.Items.IndexOf(currentCell.ParentRow.Item) + 1;

            if (nextGridStudentRowIndex >= 0)

            {

                nextGridStudentRow = radGridView.ItemContainerGenerator.ContainerFromIndex(nextGridStudentRowIndex) as GridViewRow;

            }



            if (CanMergeColumn(currentCell.Column) && previousGridStudentRow != null)

            {

                Student previousStudent = previousGridStudentRow.DataContext as Student;

                Student nextStudent = nextGridStudentRow != null ? nextGridStudentRow.DataContext as Student : null;

                Student currentStudent = currentCell.ParentRow.DataContext as Student;



                int columnIndex = currentCell.Column.DisplayIndex;



                if (previousStudent != null)

                {

                    if (previousStudent.Name == currentStudent.Name)

                    {

                        GridViewCell previousCell = previousGridStudentRow.Cells[columnIndex] as GridViewCell;

                        HideGridCell(currentCell, previousCell);



                        if (nextStudent != null && currentStudent.Name == nextStudent.Name)

                        {

                            GridViewCell nextCell = previousGridStudentRow.Cells[columnIndex] as GridViewCell;

                            HideGridLine(nextCell, currentCell);

                        }

                    }

                    else

                    {

                        ShowGridLine(currentCell);

                    }

                }

            }

        }

        private void HideGridCell(GridViewCell currentCell, GridViewCell previousCell)
        {
            currentCell.Foreground = new SolidColorBrush(Colors.Transparent);
 
            Border border = previousCell.ChildrenOfType<Border>().Where(c => c.Name == "PART_CellBorder").FirstOrDefault();
            if (border != null)
            {
                border.BorderThickness = new Thickness(0, 0, 1, 0);
            }
        }
 
        private void HideGridLine(GridViewCell currentCell, GridViewCell previousCell)
        {
            Border border = previousCell.ChildrenOfType<Border>().Where(c => c.Name == "PART_CellBorder").FirstOrDefault();
            if (border != null)
            {
                border.BorderThickness = new Thickness(0, 0, 1, 0);
            }
        }
 
        private void ShowGridLine(GridViewCell cell)
        {
            // Set the border of cell . . .
            Border border = cell.ChildrenOfType<Border>().Where(c => c.Name == "PART_CellBorder").FirstOrDefault();
            if (border != null)
            {
                border.BorderThickness = new Thickness(0, 0, 1, 1);
            }
        }

Now I'm adding another column "Rank" dynamically by clicking a context menu item "Add Rank" in the first column header.

The cells in this column also should be merged like the "Total" column cells.

For this, I'm using the CellLoaded event to merge cells like this,

        private void radGridView_CellLoaded(object sender, CellEventArgs e)
        {
            GridViewCell cell = e.Cell as GridViewCell;
 
            if (cell != null)
            {
                // Merge this cell with the previous cell . . .
                MergeGridCells(cell);
            }
        }

In this event I'm getting the cell object. But I'm not able to get the border object inside this cell (which is used to merge the cells).

Could you please help me to fix this ?

Thanks & Regards,
Kannan

[Maya]

Hi Kannan,

The required borders are not created as you are trying to add them before the cell has been loaded. What you can do is to handle the CellLoaded event as follows:

private void radGridView_CellLoaded(object sender, CellEventArgs e)
{

  GridViewCell cell = e.Cell as GridViewCell;

 

  if (cell != null)

  {

     // Merge this cell with the previous cell . . .

        this.Dispatcher.BeginInvoke(new System.Action(() => MergeGridCells(cell)));              

   }

}

However, please keep in mind that working with the visual elements and their indices is not a recommended approach as it may lead to unexpected and undesired results. Furthermore, in case you are working with a great amount of data, the performance may be degraded. 
 

Greetings,
Maya
the Telerik team