Questions on UI for WPF Forum

1 answer

289 views

I have a grid that could have as many as 3000 rows in it. I have 5 ReadOnly columns and one CheckBox column that is enabled. The user needs to:

move from record to record using the up/down keyboard arrows.
- On moving up and down, the focus needs to remain on the CheckBox column.
- User should have a visual queue which row and column is selected. Currently, row is obvious; column is not.

press the spacebar to toggle the checkbox value to the next/other value.
- I'm not convinced that putting a KeyDown event handler on the CheckBox is valid because it seems the keydown is actually on the cell that contains the CheckBox.

How can I accomplish this?

Grid:

    
                                            <telerikGrid:RadGridView x:Name="equipmentGrid" Grid.Row="1"   
        
                                                    AutoGenerateColumns="False" ShowGroupPanel="True">  
        
                                                <telerikGrid:RadGridView.Columns> 
        
                                                    <telerikGrid:GridViewDataColumn Header="System"   
        
                                                        DataMemberBinding="{Binding Root}" IsReadOnly="True"  /> 
        
                                                    <telerikGrid:GridViewDataColumn Header="Area"   
        
                                                        DataMemberBinding="{Binding Area}" IsReadOnly="True"  /> 
        
                                                    <telerikGrid:GridViewDataColumn Header="Process Cell"   
        
                                                        DataMemberBinding="{Binding ProcessCell}" IsReadOnly="True"  /> 
        
                                                    <telerikGrid:GridViewDataColumn Header="Unit"   
        
                                                        DataMemberBinding="{Binding Unit}" IsReadOnly="True"  /> 
        
                                                    <telerikGrid:GridViewDataColumn Header="Module"   
        
                                                        DataMemberBinding="{Binding Module}" IsReadOnly="True"  /> 
        
                                                    <telerik:GridViewDataColumn     
        
                                                        Header="Include" 
        
                                                        IsCustomSortingEnabled="True"     
        
                                                        IsFilterable="True">  
        
                                                        <telerik:GridViewColumn.CellTemplate> 
        
                                                            <DataTemplate> 
        
                                                                <CheckBox  
        
                                                                    VerticalAlignment="Center"    
        
                                                                    IsChecked="{Binding Path=IsChecked}"    
        
                                                                /> 
        
                                                            </DataTemplate> 
        
                                                        </telerik:GridViewColumn.CellTemplate> 
        
                                                    </telerik:GridViewDataColumn> 
        
                                            </telerikGrid:RadGridView.Columns> 
        
                                        </telerikGrid:RadGridView>

Note: This is how the out-of-the-box CheckBoxColumn in the MS Grid works.

GridView

answered on 12 Jan 2010

1 answer

102 views

GridViewDynamicHyperlinkColumn styling

Hi,
I would like to change colors for GridViewDynamicHyperlinkColumn. Now there is blue text (mouse over red text).
Final result should be text gray (mouse over only underline text).
I tried to customize GridViewCell template but it is universal template and I was not able to find parts for GridViewDynamicHyperlinkColumn. May be there are Specific ContentTemplates but I do not know how to edit it.
Could you attach simple example how to style?

Thank you.

EDIT: no answer, no solution, where is my 24hrs support...

GridView

answered on 12 Jan 2010

8 answers

341 views

Grid with CheckBox question

I can define a column to have a checkbox 2 ways. I way gives me one click change, the other I have to click 3 times to check or uncheck the box the first time. The second way is much shorter, but the first gives me the one click.

Just curious if this is a feature or bug?

This gives me the one click change:

    
                                <telerik:GridViewDataColumn  
        
                                    HeaderText="Is Default with cell template"  
        
                                    IsCustomSortingEnabled="True"  
        
                                    IsFilterable="True" > 
        
                                    <telerik:GridViewColumn.CellTemplate> 
        
                                        <DataTemplate> 
        
                                            <CheckBox  
        
                                                VerticalAlignment="Center" 
        
                                                IsChecked="{Binding Path=IsDefault}" 
        
                                            /> 
        
                                        </DataTemplate> 
        
                                    </telerik:GridViewColumn.CellTemplate> 
        
                                </telerik:GridViewDataColumn>

While this takes three clicks to change the value.
Click 1- set focus to the cell
Click 2- set control active
Click 3- change value.

    
                                <telerik:GridViewDataColumn  
        
                                    HeaderText="Is Default"  
        
                                    IsCustomSortingEnabled="True"  
        
                                    IsFilterable="True"  
        
                                    DataMemberPath="IsDefault"> 
        
                                </telerik:GridViewDataColumn>

GridView

answered on 12 Jan 2010

3 answers

71 views

Newbie - Trying to show Image in cells

Here is the class that populates each row:

    
                public class TableData  
        
                {  
        
                    private string name;  
        
                    private Image image = new Image();  
        
                    public string Name  
        
                    {  
        
                        get { return name; }  
        
                        set { name = value; }  
        
                    }  
        
                    public Image Picture  
        
                    {  
        
                        get { return image; }  
        
                        set { image = value; }  
        
                    }  
        
                    public TableData(string s)  
        
                    {  
        
                        Name = s;  
        
                        image.Source = new BitmapImage(new Uri("captain-scarlet.jpg", UriKind.RelativeOrAbsolute));  
        
                    }  
        
                }

Here is how I set up the grid:

    
                        ObservableCollection<TableData> theData = new ObservableCollection<TableData>();  
        
                        theData.Add(new TableData("1a"));  
        
                        theData.Add(new TableData("2a"));  
        
                        radGridView1.ItemsSource = theData;

The grid view appears and the name column shows data ok, but the image column is blank.
I see in the debugger that both columns in the grid are of type GridViewDataColumn. Should the image one be a GridViewImageColumn? If so, how do I set it up?

Any help appreciated - I'm trying to evaluate it for a potentially big project!
Thanks
Bruce

GridView

answered on 12 Jan 2010

1 answer

600 views

Column ContextMenu

I need to have a context menu on a grid whereby I can determine which column the user right-clicked on. I create the columns dynamically with the following code:

    
                    private void CreateNewColumn(FieldDescriptor fd, uint fieldno) { 
        
                        fieldGrid.Columns.Add(new GridViewDataColumn() { 
        
                            UniqueName = fd.fieldName, 
        
                            Header = fd.displayName, 
        
                            DataMemberBinding = new Binding("Fields[" + fieldno + "]"), 
        
                            ContextMenu = new ContextMenu() { 
        
                                Items = { 
        
                                    new MenuItem() { 
        
                                        Header = "Field Properties", 
        
                                        Command = Commands.FieldProperties, 
        
                                        CommandBindings = { new CommandBinding(Commands.FieldProperties, FieldProperties_Execute) }  
        
                                    }, 
        
                                    new MenuItem() { 
        
                                        Header = "Delete Field", 
        
                                        Command = Commands.DeleteField, 
        
                                        CommandBindings = { new CommandBinding(Commands.DeleteField, DeleteField_Execute) } 
        
                                    } 
        
                                } 
        
                            } 
        
                        }); 
        
                    }

Unfortunately the popup menu never appears when I right click anywhere on the grid. If I bind the context menu to the grid (i.e. fieldGrid.ContextMenu = new ContextMenu() {...) then the menu pops up, but I have no way to tell what column was clicked. Is there a way to make this work?

Thanks,
Ferruccio

GridView

answered on 12 Jan 2010

4 answers

295 views

RadGridView Inside RadTabControl - Data not loading

Hi Team,

I have a Parent Grid In my page,
Its having hierarchical (projects >> tasks >> comments) data.
My Task grid contains 3 Tab items

I can able to load Tasks GridView (first tab grid).
But second and third tab grid data are not loaded
Always shows empty GridView

cs page

    
            ProjTasks = GetData(); 
        
            if (outlookProjTasks != null) 
        
                        { 
        
                            GridViewTableDefinition detail1 = new GridViewTableDefinition(); 
        
                            detail1.Relation = new PropertyRelation("Tasks"); 
        
                            detail1.Relation.Name = "Tasks"; 
        
                            GridViewTableDefinition detail2 = new GridViewTableDefinition(); 
        
                            detail2.Relation = new PropertyRelation("ActiveTasks"); 
        
                            detail2.Relation.Name = "ActiveTasks"; 
        
                            GridViewTableDefinition detail3 = new GridViewTableDefinition(); 
        
                            detail3.Relation = new PropertyRelation("CompletedTasks"); 
        
                            detail3.Relation.Name = "CompletedTasks"; 
        
                            this.GrdProjectTasks.TableDefinition.ChildTableDefinitions.Add(detail1); 
        
                            this.GrdProjectTasks.TableDefinition.ChildTableDefinitions.Add(detail2); 
        
                            this.GrdProjectTasks.TableDefinition.ChildTableDefinitions.Add(detail3); 
        
                            this.GrdProjectTasks.RowDetailsVisibilityMode = Telerik.Windows.Controls.GridView.GridViewRowDetailsVisibilityMode.VisibleWhenSelected; 
        
                            this.GrdProjectTasks.ItemsSource = ProjTasks; 
        
                        }

XAML File

    
            <Grid.Resources> 
        
                        <my:FormattingConverter x:Key="formatter" /> 
        
                        <!--<telerik:RadGridView x:Key="DataSource"/>--> 
        
                        <Style TargetType="telerik:ChildDataControlsPresenter"> 
        
                            <Setter Property="Template"> 
        
                                <Setter.Value> 
        
                                    <ControlTemplate TargetType="telerik:ChildDataControlsPresenter"> 
        
                                        <TabControl> 
        
                                            <TabItem  Header="All Tasks"> 
        
                                                <telerik:RadGridView x:Name="radGridView1" RowLoaded="radGridView1_RowLoaded" LoadingRowDetails="radGridView1_LoadingRowDetails" Height="Auto"  
        
                                                ShowGroupPanel="True" Margin="0,0,0,0" RowIndicatorVisibility="Collapsed" CanUserFreezeColumns="False" AutoGenerateColumns="True" FontFamily="Segoe UI" FontSize="11" FontStretch="5"> 
        
                                                    <telerik:RadGridView.Columns> 
        
                                                        <telerik:GridViewToggleRowDetailsColumn /> 
        
                                                    </telerik:RadGridView.Columns> 
        
                                                </telerik:RadGridView> 
        
                                            </TabItem> 
        
                                            <TabItem Header="Active Tasks"> 
        
                                                <telerik:RadGridView x:Name="grdActiveTasks" Height="200" ShowGroupPanel="True" Margin="0,0,0,0" RowIndicatorVisibility="Collapsed"  
        
                                                        CanUserFreezeColumns="False" AutoGenerateColumns="True" FontFamily="Segoe UI" FontSize="11" FontStretch="5" ItemsSource="{Binding ActiveTasks}"> 
        
                                                </telerik:RadGridView> 
        
                                                <!--ItemsSource="{Binding MasterRecord.Data.ActiveTasks}"--> 
        
                                            </TabItem> 
        
                                            <TabItem Header="Completed Tasks"> 
        
                                                <telerik:RadGridView x:Name="grdCompletedTasks" Height="200" ShowGroupPanel="True" Margin="0,0,0,0" RowIndicatorVisibility="Collapsed" 
        
                                                        CanUserFreezeColumns="False" AutoGenerateColumns="True" FontFamily="Segoe UI" FontSize="11" FontStretch="5" ItemsSource="{Binding Tasks}"> 
        
                                                    <telerik:RadGridView.Columns> 
        
                                                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Subject}" Header="Subject"/> 
        
                                                    </telerik:RadGridView.Columns> 
        
                                                </telerik:RadGridView> 
        
                                                <!--ItemsSource="{Binding MasterRecord.Data.CompletedTasks}"--> 
        
                                            </TabItem> 
        
                                        </TabControl> 
        
                                    </ControlTemplate> 
        
                                </Setter.Value> 
        
                            </Setter> 
        
                        </Style> 
        
                        <Style x:Key="GridViewAlternateRowStyle" TargetType="telerik:GridViewRow"> 
        
                            <Setter Property="Background" Value="#303030" /> 
        
                            <Setter Property="Foreground" Value="White" /> 
        
                            <Setter Property="BorderThickness" Value="1" /> 
        
                            <Setter Property="BorderBrush" Value="Black" /> 
        
                        </Style> 
        
                        <Style x:Key="GridViewRowStyle" TargetType="telerik:GridViewRow"> 
        
                            <Setter Property="Background" Value="#606060" /> 
        
                            <Setter Property="Foreground" Value="White" /> 
        
                            <Setter Property="BorderThickness" Value="1" /> 
        
                            <Setter Property="BorderBrush" Value="Black" /> 
        
                        </Style> 
        
                    </Grid.Resources> 
        
             <telerik:RadGridView Margin="1,60,0,0" RowIndicatorVisibility="Collapsed" IsFilteringAllowed="True"  Name="GrdProjectTasks" FontFamily="Segoe UI" FontSize="11" FontStretch="5" 
        
                        UseAlternateRowStyle="True" ShowGroupPanel="True" CanUserFreezeColumns="False" IsReadOnly="True" RowLoaded="GrdProjectTasks_RowLoaded" 
        
                        DataLoadMode="Asynchronous" RowStyle="{StaticResource GridViewRowStyle}" AlternateRowStyle="{StaticResource GridViewAlternateRowStyle}" GroupPanelBackground="#FF202020"  
        
                        CanUserSortColumns="False" BorderThickness="0" Grid.Column="1" Height="740" Width="1024" Grid.ColumnSpan="2"> 
        
                        <!--my:GridViewFilterRow.IsEnabled="True"--> 
        
                    </telerik:RadGridView>

Can you please help on this issue

Regards
Shanthi

GridView

answered on 12 Jan 2010

0 answers

101 views

How To: Determine order of columns in grid associated with datatable

Hello,

When a column on the grid is re-ordered there appears to be only the DisplayIndexMap object in the grid to keep track of the new order. This object is protected so I cannot get at it directly. Since I could not figure out how to determine the new order on the grid side I changed the column order of the datatable to match the grid's.

In the ColumnDisplayIndexChanged event of the grid I added this line of code, which takes care of the re-ordering:

<datatable name>.Columns[e.Column.Header.ToString()].SetOrdinal(e.Column.DisplayIndex);

This event will be triggered twice. Once for the column that was moved and again for the column that was shifted over for the moved column.

When I print the contents of the grid I use the datatable as the data source.

GridView

asked on 11 Jan 2010

0 answers

105 views

HowTo: Filtering grid associated with Datatable

Hello,

I finally figured out how to filter a grid associated with a datatable. Instead of filtering the grid, which was a traumatic experience, I filtered the datatable associated with the grid instead. It took less than 7 lines of code and most of those lines of code were for creating the filter expression:

I am collecting a bunch of values in another window so I can filter the varnames column in my grid so:

string filterexpression = "varnames in (" + < bunch of values> + ")"

gridname.ItemsSource = <datatable name>.Select(filterexpression, <supply sort expression>, DataViewRowState.CurrentRows);

GridView

asked on 11 Jan 2010

3 answers

111 views

Getting Dragged RadtreeViewItems in DropQueryEvent

Hello,

I would like to evaluate wether a Drop Operation on a specfic RadtreeViewItem is allowed.
I got a WPF Radtreeview with hierachical Data Binding, Multiselection and Drag&Drop occurs only within the Treeview.
Therefore I added a Event Handler to the DropQuery Event of the RadTreeview.

    
            RadTreeView1.AddHandler(RadDragAndDropManager.DropQueryEvent, new EventHandler&lt;DragDropQueryEventArgs&gt;(RadTreeView_DropQuery), true);

For my Decision it is necessary to know which RadtreeviewItems are dragged. I don´t need the dragged data objects, because my decision is based on parent of each dragged RadtreeviewItem.

    
            private void RadTreeView_DropQuery(object sender, DragDropQueryEventArgs e) 
        
                    { 
        
                        bool dropPossible = checkIfDropPossible(draggedRadTreeViewItems); 
        
                        if (dropPossible) 
        
                        { 
        
                            e.QueryResult = true; 
        
                        } 
        
                        else 
        
                        { 
        
                            e.QueryResult = false; 
        
                        } 
        
            }

Therefore I need a way to get the dragged RadtreeviewItems in the DropQueryEvent. I searched all e.Options members but I get the responding data objects (e.Options.Payload) only.

How can I get corresponding dragged RadTreeViewItems to the DataObjects in the DropQueryEvent? Any help is welcome.

Best Regards
Akiono Wan

DragAndDrop

answered on 11 Jan 2010

4 answers

84 views

CheckedItems only return root item

Hi,

I'm using RadTreeView control for WPF Q2 2009, with values

IsOptionElementsEnabled

="True"

ItemsOptionListType="CheckList"

IsTriStateMode="True"

the treeview is collapsed. If i check first root item but not expand the node, CheckedItems only return one item. Otherwise if I expand the node, CheckedItems returns the root item node and subitems.

Is there any option to avoid that?

This is the example:

    
            <telerik:RadTreeView   
        
                        IsLineEnabled="True"   
        
                        IsOptionElementsEnabled="True" 
        
                        ItemsOptionListType="CheckList"    
        
                        IsTriStateMode="True" 
        
                        IsRootLinesEnabled="True"    
        
                        controls:StyleManager.Theme="Vista" 
        
                    > 
        
                        <telerik:RadTreeViewItem Header="Item0">  
        
                            <telerik:RadTreeViewItem Header="Item1.1"/>  
        
                            <telerik:RadTreeViewItem Header="Item1.2"/>  
        
                        </telerik:RadTreeViewItem> 
        
                        <telerik:RadTreeViewItem Header="Item1">  
        
                            <telerik:RadTreeViewItem Header="Item1.1"/>  
        
                            <telerik:RadTreeViewItem Header="Item1.2"/>  
        
                        </telerik:RadTreeViewItem> 
        
                        <telerik:RadTreeViewItem Header="Item2">  
        
                            <telerik:RadTreeViewItem Header="Item1.1"/>  
        
                            <telerik:RadTreeViewItem Header="Item1.2"/>  
        
                        </telerik:RadTreeViewItem> 
        
                    </telerik:RadTreeView>

When I check node Item0 but not expand it, CheckedItems returns Item 0 only (this happens only the first time node is collapsed)
But expanding it, CheckedItems returns Item 0, Item1.1, Item1.2. (if i collapsed the node again, CheckedItems returns Item 0, Item1.1, Item1.2)

Also I set theme to Vista (controls:

StyleManager.Theme="Vista" ) but I get an orange backgound when mouse is over the nodes. Is this ok?

Thanks and best regards,
Alberto

TreeView