This is a migrated thread and some comments may be shown as answers.

[Solved] Help on Custom header Style

23 Answers 519 Views

GridView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Sampathkumar asked on 18 Jun 2009, 01:57 PM

public

class CustomColumns : GridViewColumn

{

public CustomColumns()

{

this.HeaderCellStyle = GetHeaderStyle();

}

public Style GetHeaderStyle()

{

string HeaderString = "<Style xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' xmlns:telerikgridview='clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView' TargetType='telerikgridview:GridViewHeaderCell'><Setter Property='Template'><Setter.Value><ControlTemplate TargetType='telerikgridview:GridViewHeaderCell'><Grid Margin='2'><Grid.ColumnDefinitions><ColumnDefinition Width='*' /><ColumnDefinition Width='Auto' /></Grid.ColumnDefinitions><TextBlock Text='Sample' VerticalAlignment='Center' /><Image x:Name='ImageCtl' Margin='1,1,1,1' Width='16' Height='16' Stretch='UniformToFill' VerticalAlignment='Center' HorizontalAlignment='Center' Cursor='Hand' Source='datahelp.png' Grid.Column='1' /></Grid></ControlTemplate></Setter.Value></Setter></Style>";

Style HeaderStyle = XamlReader.Load(HeaderString) as Style;

return HeaderStyle;

}

}

after apply the headerstyle how do i raise a mouse event on the click of the image control in the headerstyle.

Regards
Sampathkumar S

23 Answers, 1 is accepted

answered on 19 Jun 2009, 07:31 AM

Hi Sampathkumar,

I am not sure what you are trying to achieve from the code sample that you sent me. If you want to attach to the click event of the image control, I think that you will need to build your header style programatically instead of using hard-coded xaml. Once you create an instance of the image control you will be able to attach to its events.

Please, let me know if that is not what you are trying to achieve. If this case, can you elaborate a little bit more on your exact goals.

All the best,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 19 Jun 2009, 08:35 AM

ticket22-83-columnheaderbutton.zip

Hello Sampathkumar,

I have prepared a small sample project that demonstrates how to do this. I have defined the header cell style in the XAML for the grid and attached to the mouse event of the Image. Here is how I did it:

    
            <UserControl x:Class="Ticket220830_ColumnHeaderButton.Page" 
        
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        
                xmlns:telerikGrid="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" Background="White"> 
        
                    <telerikGrid:RadGridView Name="grid" AutoGenerateColumns="False"> 
        
                        <telerikGrid:RadGridView.Columns> 
        
                            <telerikGrid:GridViewDataColumn HeaderText="Subject" DataMemberBinding="{Binding Subject}"> 
        
                                <telerikGrid:GridViewDataColumn.HeaderCellStyle> 
        
                                    <Style TargetType="GridView:GridViewHeaderCell"> 
        
                                        <Setter Property='Template'> 
        
                                            <Setter.Value> 
        
                                                <ControlTemplate> 
        
                                                    <Grid Margin='2'> 
        
                                                        <Grid.ColumnDefinitions> 
        
                                                            <ColumnDefinition Width='*' /> 
        
                                                            <ColumnDefinition Width='Auto' /> 
        
                                                        </Grid.ColumnDefinitions> 
        
                                                        <TextBlock Text='Sample' VerticalAlignment='Center' /> 
        
                                                        <Image  x:Name='ImageCtl' Margin='1,1,1,1' Width='16' 
        
                                                                Height='16' Stretch='UniformToFill' 
        
                                                                VerticalAlignment='Center' 
        
                                                                HorizontalAlignment='Center' Cursor='Hand' 
        
                                                                Source="gerrard.jpg" Grid.Column='1' 
        
                                                                MouseLeftButtonDown="ImageCtl_MouseLeftButtonDown"/> 
        
                                                    </Grid> 
        
                                                </ControlTemplate> 
        
                                            </Setter.Value> 
        
                                        </Setter> 
        
                                    </Style> 
        
                                </telerikGrid:GridViewDataColumn.HeaderCellStyle> 
        
                            </telerikGrid:GridViewDataColumn> 
        
                        </telerikGrid:RadGridView.Columns> 
        
                    </telerikGrid:RadGridView> 
        
                </Grid> 
        
            </UserControl>

Please, examine the project and let me know if you have any other questions.

Best wishes,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 19 Jun 2009, 11:55 AM

ticket22-83-columnheaderbutton.zip

Hello Sampathkumar,

I have modified the sample project to dynamically find the image control in the RowLoaded event handler of the grid. You can dynamically find and modify any other custom component in the same manner. Here is how I did it in the sample project:

    
            using System.Collections.Generic; 
        
            using System.Windows; 
        
            using System.Windows.Controls; 
        
            using System.Windows.Data; 
        
            using System.Windows.Input; 
        
            using GridViewColumnSortState; 
        
            using Telerik.Windows.Controls; 
        
            using Telerik.Windows.Controls.GridView; 
        
            namespace Ticket220830_ColumnHeaderButton 
        
            { 
        
                public partial class Page : UserControl 
        
                { 
        
                    public Page() 
        
                    { 
        
                        InitializeComponent(); 
        
                        this.grid.ItemsSource = GetMessages(); 
        
                        CustomColumn customColumn = new CustomColumn(); 
        
                        customColumn.DataMemberBinding = new Binding("Subject"); 
        
                        this.grid.Columns.Add(customColumn); 
        
                        this.grid.RowLoaded += this.OnRowLoaded; 
        
                    } 
        
                    private void OnRowLoaded(object sender, RowLoadedEventArgs e) 
        
                    { 
        
                        var headerRow = e.Row as GridViewHeaderRow; 
        
                        if (headerRow != null) 
        
                        { 
        
                            GridViewHeaderCell cell = (GridViewHeaderCell)headerRow.Cells[0]; 
        
                            Image image = cell.ChildrenOfType<Image>()[0]; 
        
                            image.MouseLeftButtonDown += this.OnImageMouseDown; 
        
                        } 
        
                    } 
        
                    void OnImageMouseDown(object sender, MouseButtonEventArgs e) 
        
                    { 
        
                        MessageBox.Show("The image was clicked!"); 
        
                    } 
        
                    private IList<Message> GetMessages() 
        
                    { 
        
                        return new Message[] {  
        
                                                new Message { Sender = "tom@hanna-barbera.com", Subject = "Cats are cool", Size = 100 }, 
        
                                                new Message { Sender = "jerry@hanna-barbera.com", Subject = "Mice are cool", Size = 100 }, 
        
                                                new Message { Sender = "spike@hanna-barbera.com", Subject = "Dogs are cool", Size = 100 } 
        
                                             }; 
        
                    } 
        
                } 
        
            }

I have also changed your custom column class to inherit from GridViewDataColumn instead of GridViewColumn. I hope this helps.

Please, do not hesitate to drop me a line if you have any other questions or difficulties.

Greetings,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 20 Jun 2009, 05:55 AM

Hi Ross,

Works only when the data source was loaded. After apply the sort the click event fires move then one according to the execution of the data loaded event. That was solvable. However, what I am expecting is, have to put a button or image in the header and an event handling for same with out changing the style. Because if I change the header style, then I have to do a lot of customization to show the same behavior of the original grid view like mouse over, focus, sorting, filtering. Let me know is there a simply way to implement this.

Thanks and Regards
Sampathkumar S
Ramco Systems
India.

answered on 29 Jun 2009, 02:14 PM

ticket22-83-customdatepickerformat.zip

Hello Sampathkumar,

In order to customize the format of the date picker we have to find it and set its culture. Here is how to do it:

    
                    public Page() 
        
                    { 
        
                        InitializeComponent(); 
        
                        this.grid.ItemsSource = GetMessages(); 
        
                        CultureInfo ci = new CultureInfo("en-US"); 
        
                        ci.DateTimeFormat.ShortDatePattern = "MMM/dd/yyyy"; 
        
                        Style datePickerStyle = new Style(typeof(RadDatePicker)); 
        
                        datePickerStyle.Setters.Add(new Setter(RadDatePicker.CultureProperty, ci)); 
        
                        DatePickerEditorSettings settings= new DatePickerEditorSettings(); 
        
                        settings.CellEditStyle = datePickerStyle; 
        
                        ((GridViewDataColumn) this.grid.Columns[0]).EditorSettings = settings; 
        
                    }

And the XAML:

    
            <UserControl x:Class="Ticket220830_CustomDatePickerFormat.Page" 
        
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        
                xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"> 
        
                <Grid Name="LayoutRoot"> 
        
                    <telerikGrid:RadGridView Name="grid" AutoGenerateColumns="False"> 
        
                        <telerikGrid:RadGridView.Columns> 
        
                            <telerikGrid:GridViewDataColumn  
        
                                DataFormatString="{}{0:MMM/dd/yyyy}"  
        
                                DataMemberBinding="{Binding Received}" /> 
        
                        </telerikGrid:RadGridView.Columns> 
        
                    </telerikGrid:RadGridView> 
        
                </Grid> 
        
            </UserControl>

In the code behind we set the format for editing and in the XAML we set the format for viewing, i.e. when the cell is not in edit mode.

I have attached the sample project. I hope it helps.

Kind regards,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 29 Jun 2009, 03:11 PM

Hello Sampathkumar,

RadGridView has a property called CurrentCell which returns the current cell and is of type GridViewCell. Once you have the CurrentCell you can take its ParentRow and Column and find everything from them. Here is some sample code that demonstrates this:

    
                        GridViewCell currentCell = this.telerikGrid.CurrentCell; 
        
                        GridViewColumn currentColumn = currentCell.Column; 
        
                        int columnIndex = this.telerikGrid.Columns.IndexOf(currentColumn); 
        
                        GridViewRowItem currentRow = currentCell.ParentRow; 
        
                        DataRecord dataRecord = currentRow.Record as DataRecord; 
        
                        if (dataRecord != null) 
        
                        { 
        
                            int dataSourceIndex = dataRecord.DataSourceIndex; 
        
                        } 
        
                        // And so on...

The DataRecord.DataSourceIndex returns the index of the data item in the data source. I hope this helps.

All the best,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.