Pranay Rana: Assign ToolTip to dynamically created colum of silverlight Gridview and How to create style for element runtime

Tuesday, September 4, 2012

Assign ToolTip to dynamically created colum of silverlight Gridview and How to create style for element runtime

In this post I am going to discuss about displaying tooptip for autogenerated columns of toolkit silverlight and telerik silverlight gridcongtrol. Also goint to discuss about how to create style dynamically for the silverlight control.

How to create style in codebehind i.e. runtime for control To define the style sheet for any silverlight control on runtime there you need to do following things

1. Create Style object with the type of control
var style = new Style(typeof(controlType)); 
Control type can be Grid, GridviewCell, Textblock etc. i.e any valid silverlight control.
2. Add Setter to Created Style Object
style.Setters.Add(new Setter(StylePropertyName, Value));
You need to pass property name and value now after this, below discussion you will find example for the same
3. Attach Created Style to the control type object
controlboject.stylefor = style; 
Now following describe how to user the dynamic style and display tooltip for header of autogenerated columns of gridview.

To apply the style at runtime to autogetnerated column I made use of AutoGenerated Event of the grid in both of the below example.
Telerik
Code for displaying tootip for Telerik grid
private void EditableGV_AutoGeneratingColumn
       (object sender, GridViewAutoGeneratingColumnEventArgs e)
{
   GridViewDataColumn column = e.Column as GridViewDataColumn;

   //for tooltip dispaly
   var style = new Style(typeof(GridViewHeaderCell));
   style.Setters.Add(new Setter(ToolTipService.ToolTipProperty, 
                                                column.UniqueName));
   column.HeaderCellStyle = style; 
}
As you see in above code Style is get created for the Headercell of grid view. ToolTip property style is added by using setting as we discuss above. Lastly assigned created style to headercell style.

Silverlight gridview
Same as Telerik gird,in tool grid I made use of Autogenerated column
private void dataGrid1_AutoGeneratingColumn
            (object sender, DataGridAutoGeneratingColumnEventArgs e)
{
  DataGridBoundColumn column = e.Column as DataGridBoundColumn;
  var style = new Style(typeof(DataGridColumnHeader));
  style.Setters.Add(new Setter(ToolTipService.ToolTipProperty, 
                                                column.Header));
  column.HeaderStyle = style; 
}
Just few code difference , here style is created for headercell only but the name of the class is diffrerent, which you can notice easily by comparing both code.

3 comments:

  1. Hi,
    Using the below code i m unable to set maxwidth of tooltip. Can u please help in setting maxwidth property in C#.
    var style = new Style(typeof(DataGridColumnHeader));
    var gridTooltip = "Grid Tootip";
    style.Setters.Add(new Setter(ToolTipService.ToolTipProperty, new ToolTip { MaxWidth = 300, Content = gridTooltip }.Content));
    column.HeaderStyle = style;

    ReplyDelete
  2. can u help me when mouseover the imagebutton how to bind data in tooltip??

    ReplyDelete
  3. I have grid which generates dynamic columns and by using this suggestion I got my results.
    Thanks a lot.

    ReplyDelete