diff --git a/CommentTipForRowAndColumn1.png b/CommentTipForRowAndColumn1.png new file mode 100644 index 0000000..a13193d Binary files /dev/null and b/CommentTipForRowAndColumn1.png differ diff --git a/CommentTipForRowAndColumn2.png b/CommentTipForRowAndColumn2.png new file mode 100644 index 0000000..ff253f4 Binary files /dev/null and b/CommentTipForRowAndColumn2.png differ diff --git a/CommentTipUsingQueryCellInfo.png b/CommentTipUsingQueryCellInfo.png new file mode 100644 index 0000000..581d7b4 Binary files /dev/null and b/CommentTipUsingQueryCellInfo.png differ diff --git a/CommentTipWithPositionChanged.png b/CommentTipWithPositionChanged.png new file mode 100644 index 0000000..90cedee Binary files /dev/null and b/CommentTipWithPositionChanged.png differ diff --git a/CustomizedCommentTip.png b/CustomizedCommentTip.png new file mode 100644 index 0000000..7f8447e Binary files /dev/null and b/CustomizedCommentTip.png differ diff --git a/README.md b/README.md index 29fdac7..9c90de3 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,145 @@ -# WPF-GridControl-CommentTip -This repository contains the sample which shows the comment tip to a specific cell or row or column in WPF GridControl. +# WPF GridControl CommentTip + +This repository contains the sample which shows the comment tip to a specific cell or row or column in [WPF GridControl](https://www.syncfusion.com/wpf-controls/excel-like-grid). + +### Comment Tip for row and column + +The Comment tip can be added to specific row or column by setting the [Comment](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridStyleInfo_Comment) property. The comment indicator will be shown at the top right corner of the cell. + +``` csharp +//Adding comment tip to the specific row +grid.Model.RowStyles[1].Comment = "Hello"; +//Adding comment tip to the specific column +grid.Model.ColStyles[2].Comment = "Hello"; +``` + +![Showing comment tip for row and column](CommentTipForRowAndColumn1.png) + +An another way to set the comment tip for specific row and column, + +``` csharp +//Add CommentTip for specific row +for (int i = 1; i <= 4; i++) +{ + string comment = grid.Model[1, 0].CellValue + " :\nPopulate rate in " + grid.Model[1, i].ColumnIndex + " is " + grid.Model[1, i].CellValue; + grid.Model[1, i].Comment = comment; +} + +//Add CommentTip for specific column +for (int i = 1; i < 4; i++) +{ + string comment = grid.Model[i, 0].CellValue + " :\nPopulate rate in " + grid.Model[i, 2].RowIndex + " is " + grid.Model[i, 2].CellValue; + grid.Model[i, 2].Comment = comment; +} +``` + +![Showing comment tip for row and column](CommentTipForRowAndColumn2.png) + +### Change comment indicator position + +Setting `Comment` property always displays comment indicator at top right corner of the cell. You can change the comment indicator position for a specific cell by using [GridCommentStyleInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html). For example, you can set the comment indicator at top position for any cell by setting [GridCommentStyleInfo.TopLeftComment](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridCommentStyleInfo_TopLeftComment) or [GridCommentStyleInfo.TopRightComment](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridCommentStyleInfo_TopRightComment) properties. + +``` csharp +GridCommentStyleInfo styleInfo = new GridCommentStyleInfo(); + +// set the comment for specific cell +grid.Model[1, 2].GridCommentStyleInfo.TopLeftCommentBrush = Brushes.Red; +grid.Model[1, 2].GridCommentStyleInfo.TopLeftCommentBrush = Brushes.Red; +grid.Model[1, 2].GridCommentStyleInfo.TopLeftComment = grid.Model[1, 0].CellValue + ": \nPopulation rate in " + grid.Model[1, 2].ColumnIndex + " is " + grid.Model[1, 2].CellValue; + +//Set comment tip for specific row +for (int i = 1; i <= 4; i++) +{ + //Set comment tip for specific row + if (grid.Model[1, i].RowIndex == 1 && grid.Model[1, i].ColumnIndex > 0) + { + grid.Model[1, i].GridCommentStyleInfo.TopLeftCommentBrush = Brushes.Red; + grid.Model[1, i].GridCommentStyleInfo.TopLeftComment = grid.Model[1, 0].CellValue + ": \nPopulation rate in " + grid.Model[1, i].ColumnIndex + " is " + grid.Model[1, i].CellValue; + } +} + +//Set comment tip for specific column +for (int i = 1; i < 4; i++) +{ + if (grid.Model[i, 2].ColumnIndex == 2 && grid.Model[i, 2].RowIndex > 0) + { + grid.Model[i, 2].GridCommentStyleInfo.TopLeftCommentBrush = Brushes.Red; + grid.Model[i, 2].GridCommentStyleInfo.TopLeftComment = grid.Model[i, 0].CellValue + ": \nPopulation rate in " + grid.Model[i, 2].RowIndex + " is " + grid.Model[i, 2].CellValue; + } +} +``` + +![Comment tip with modified indicator position](CommentTipWithPositionChanged.png) + +### Set CommentTip using QueryCellInfo + +You can set the comment tip to a specific cell or row or column by using [QueryCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html#Syncfusion_Windows_Controls_Grid_GridModel_QueryCellInfo) event. + +``` csharp +private void Model_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e) +{ + GridCommentStyleInfo gridStyleInfo = new GridCommentStyleInfo(); + + //Set comment tip for specific cell + if (e.Style.RowIndex == 1 && e.Style.ColumnIndex == 2) + { + e.Style.GridCommentStyleInfo.TopLeftCommentBrush = Brushes.Red; + e.Style.GridCommentStyleInfo.TopLeftComment = e.Style.GridModel[1, 0].CellValue + ": \nPopulation rate in " + e.Style.ColumnIndex + " is " + e.Style.CellValue.ToString(); + } + + //set comment tip for specific row + if (e.Style.RowIndex == 1 && e.Style.ColumnIndex > 0) + { + e.Style.GridCommentStyleInfo.TopLeftCommentBrush = Brushes.Red; + e.Style.GridCommentStyleInfo.TopLeftComment = e.Style.GridModel[1, 0].CellValue + ": \nPopulation rate in " + e.Style.ColumnIndex + " is " + e.Style.CellValue.ToString(); + } + + //Set comment tip for specific column + if (e.Style.ColumnIndex == 2) + { + e.Style.GridCommentStyleInfo.TopLeftCommentBrush = Brushes.Red; + e.Style.GridCommentStyleInfo.TopLeftComment = e.Style.GridModel[e.Style.RowIndex, 0].CellValue + ": \nPopulation rate in " + e.Style.RowIndex + " is " + e.Style.CellValue.ToString(); + } +} +``` + +![Showing comment tip using QueryCellInfo](CommentTipUsingQueryCellInfo.png) + +### Customize the CommentTip + +The comment tip appearance can be customized by defining DataTemplate. The DataTemplate can be assigned to [GridStyleInfo.CommentTemplateKey](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridStyleInfo_CommentTemplateKey). If you are using [TopLeftComment](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridCommentStyleInfo_TopLeftComment), [TopRightComment](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridCommentStyleInfo_TopRightComment), [BottomRightComment](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridCommentStyleInfo_BottomRightComment), or [BottomLeftComment](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridCommentStyleInfo_BottomLeftComment) then you need to assign template to its corresponding template key property namely [GridCommentStyleInfo.TopLeftCommentTemplateKey](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridCommentStyleInfo_TopLeftCommentTemplateKey), [GridCommentStyleInfo.TopRightCommentTemplateKey](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridCommentStyleInfo_TopRightCommentTemplateKey), [GridCommentStyleInfo.BottomLeftCommentTemplateKey](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridCommentStyleInfo_BottomLeftCommentTemplateKey) or [GridCommentStyleInfo.BottomRightCommentTemplateKey](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridCommentStyleInfo.html#Syncfusion_Windows_Controls_Grid_GridCommentStyleInfo_BottomRightCommentTemplateKey). + +[GridStyleInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridStyleInfo.html) which holds cell information is the `DataContext` for data template of comment. + +In the below code TopLeft comment is customized. + +#### XAML + +``` xml + + + + + + + +``` + +#### C# + +``` csharp +//Assign the template to TopLeftCommentTemplateKey +grid.Model[1, 2].GridCommentStyleInfo.TopLeftCommentTemplateKey = "TopLeftComment"; + +//Using QueryCellInfo event + private void Model_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e) +{ + if (e.Style.RowIndex == 1 && e.Style.ColumnIndex == 2) + { + //Assign the template to TopLeftCommentTemplateKey + e.Style.GridCommentStyleInfo.TopLeftCommentTemplateKey = "TopLeftComment"; + } +} +``` + +![Showing customized Comment Tip](CustomizedCommentTip.png) \ No newline at end of file