Custom function on wpf datagrid
Thanks, I have another question; to display data like in this pictures, how should I organize the data of the game?
Halcyon Security,
Your requirement to show the playing details in the DataGrid, as per the screenshots, can be achieved by using the MergedCells and concept. The MatchTotal and Total column values will be updated by using the GridUnBoundColumn.
By using the QueryCoveredRange concept, we can merge cells. Please refer to the code snippets below.
|
dataGrid.QueryCoveredRange += dataGrid_QueryCoveredRange; void dataGrid_QueryCoveredRange(object sender, GridQueryCoveredRangeEventArgs e) { if(e.GridColumn.MappingName == "PlayerName" || e.GridColumn.MappingName == "Total") { var range = GetRange(e.GridColumn, e.RowColumnIndex.RowIndex, e.RowColumnIndex.ColumnIndex, e.Record);
if (range == null) return;
// You can know that the range is already exist in Covered Cells by IsInRange method.
if (!dataGrid.CoveredCells.IsInRange(range)) { e.Range = range; e.Handled = true; } } }
|
By utilizing the concepts of GridUnbondColumn and QueryUnboundColumnValue, we can update the calculation for MatchTotal and Total. We would like to inform you that the MatchTotal value will be updated using the GridUnBoundColumn Expression. However, we are unable to directly update the Total column using the Expression, so we are using QueryUnboundColumnValue to calculate the Total values. Therefore, for this Total implementation, we have introduced some global fields and without this event and customization, we are not able to calculate the Total value. Please refer to the code snippets below.
|
<Grid> <syncfusion:SfDataGrid x:Name="dataGrid" AutoGenerateColumns="False" ColumnSizer="Star" CellStyleSelector="{StaticResource cellstyleSelector}" SelectionUnit="Cell" ShowGroupDropArea="True" ItemsSource="{Binding PlayerDetails}"> <syncfusion:SfDataGrid.Columns> <syncfusion:GridTextColumn MappingName="PlayerName" /> <syncfusion:GridNumericColumn MappingName="P1" NumberDecimalDigits="0" AllowEditing="True" /> <syncfusion:GridNumericColumn MappingName="P2" NumberDecimalDigits="0" AllowEditing="True"/> <syncfusion:GridNumericColumn MappingName="P3" NumberDecimalDigits="0" AllowEditing="True"/> <syncfusion:GridNumericColumn MappingName="P4" NumberDecimalDigits="0" AllowEditing="True"/> <syncfusion:GridNumericColumn MappingName="P5" NumberDecimalDigits="0" AllowEditing="True"/> <syncfusion:GridUnBoundColumn MappingName="MatchTotal" Expression="P1+P2+P3+P4+P5"/> <syncfusion:GridUnBoundColumn MappingName="Total" /> </syncfusion:SfDataGrid.Columns> </syncfusion:SfDataGrid> </Grid>
dataGrid.QueryUnboundColumnValue += dataGrid_QueryUnboundColumnValue;
int sum = 0; string playerName = string.Empty; private void dataGrid_QueryUnboundColumnValue(object sender, GridUnboundColumnEventsArgs e) { if(e.Column.MappingName == "Total") { var record = e.Record as Model; var viewModel = this.dataGrid.DataContext as ViewModel; if (playerName == "") playerName = record.PlayerName; if (playerName != record.PlayerName) { sum = 0; playerName = record.PlayerName; } if (sum > 0) { e.Value = sum; return; } var list = viewModel.PlayerDetails.Where(x => x.PlayerName == record.PlayerName); foreach (var model in list) { if (record.PlayerName == model.PlayerName) { sum += model.P1 + model.P2 + model.P3 + model.P4 + model.P5; } } e.Value = sum; }
} } |
Additionally, we have customized the renderer to only accept 0's and 1's in a NumericColumn, and restricted selection navigation when the Enter or Tab key is pressed.
|
public MainWindow() { InitializeComponent(); dataGrid.CellRenderers.Remove("Numeric"); dataGrid.CellRenderers.Add("Numeric",new GridCellNumericRendererExt(this.dataGrid)); }
public class GridCellNumericRendererExt : GridCellNumericRenderer { public SfDataGrid DataGrid { get; set; } public GridCellNumericRendererExt(SfDataGrid dataGrid) { DataGrid = dataGrid; } protected override void OnEditElementLoaded(object sender, RoutedEventArgs e) { base.OnEditElementLoaded(sender, e); var uiElement = ((DoubleTextBox)sender); uiElement.KeyDown += UiElement_KeyDown; }
private void UiElement_KeyDown(object sender, KeyEventArgs e) { // Here we have handled the 0 key and 1 key in NumericColumn editing case. if (e.Key != Key.D0 && e.Key != Key.D1) e.Handled = true; } protected override bool ShouldGridTryToHandleKeyDown(KeyEventArgs e) { // Here we have handled the Enter key and Tab key in NumericColumn to restrict the navigation.
if (e.Key == Key.Enter || e.Key == Key.Tab) { return false; } else { return base.ShouldGridTryToHandleKeyDown(e); } }
} |
By using the CellStyleSelector, you can color the cells based on their values. Please refer to the code snippets below.
|
<Grid> <syncfusion:SfDataGrid x:Name="dataGrid" AutoGenerateColumns="False" ColumnSizer="Star" CellStyleSelector="{StaticResource cellstyleSelector}" SelectionUnit="Cell" ShowGroupDropArea="True" ItemsSource="{Binding PlayerDetails}">
public class CellStyleSelector : StyleSelector { public override Style SelectStyle(object item, DependencyObject container) { var model = item as Model; var gridCell = container as GridCell; var dataGrid = (SfDataGrid)gridCell.ColumnBase.GridColumn.GetType().GetProperty("DataGrid", BindingFlags.Instance | BindingFlags.NonPublic).GetValue(gridCell.ColumnBase.GridColumn); if (gridCell.ColumnBase.GridColumn.MappingName != "PlayerName" && gridCell.ColumnBase.GridColumn.MappingName != "Total" && gridCell.ColumnBase.GridColumn.MappingName != "MatchTotal") { //Here we have reteurn the different cellstyle based on the P1-P5 Cells. object displayValue = dataGrid.View.GetPropertyAccessProvider().GetFormattedValue(model, gridCell.ColumnBase.GridColumn.MappingName); int val = Int32.Parse(displayValue.ToString()); if(val == 0) { return Application.Current.Resources["cellStyle"] as Style; } else { return Application.Current.Resources["cellStyle1"] as Style;
} } return base.SelectStyle(item, container); } } |
We are a little unclear about your selection requirement. "If the cell is the latest score for a player, it should jump to the first score for the next player." Could you please provide more details about this requirement? This will be helpful in further investigation.
Halcyon Security,
In DataGrid by
default the cell will goes to the editing when we are pressing the F2 key.By pressing the F2 key in cells P1-P5 then you can initiate the editing.And we have disable the MouseClick editing for P1-P5 cells in a CurrentCellBeginEdit evet by using the IsKeyDown property. And when you type 0 or 1 in a P1-P5 cell, it will be automatically committed and move to the next adjacent cell. If the current cell is on P5, then after editing P5, the current cell will be moved to the first cell of the next row.
|
private void DataGrid_CurrentCellBeginEdit(object sender, CurrentCellBeginEditEventArgs e) { var dataContext = this.dataGrid.DataContext as ViewModel; //Used to disble the mouse click editing in SfDataGrid. Now the user only can edit the column by using the any key ie. F2 key. if (!dataContext.IskeyDown) e.Cancel = true; dataContext.IskeyDown = false;
}
public class GridCellSelectionControllerExt : GridCellSelectionController { public GridCellSelectionControllerExt(SfDataGrid dataGrid ) : base(dataGrid) {
} protected override void ProcessKeyDown(KeyEventArgs args) { //Here we have set the IsKeyDown property to true.By using this API we have go to edit mode for SfDataGrid
(this.DataGrid.DataContext as ViewModel).IskeyDown = true; base.ProcessKeyDown(args); }
} |
Below code snippets used to move the current cell when editing completed.
|
private void DataGrid_CurrentCellEndEdit(object sender, CurrentCellEndEditEventArgs e) { //Here we have called the UpdateDataRow to update the Total column when we edit the P1-P5 cells. //And also reset the total cell value calculation customization to update the Total value properly. playerName = ""; sum = 0; for(int i=1; i<= e.RowColumnIndex.RowIndex; i++) { this.dataGrid.UpdateDataRow(i); } MoveSelection(e.RowColumnIndex); } private void MoveSelection(RowColumnIndex rowColumnIndex) { var col = this.dataGrid.Columns[rowColumnIndex.ColumnIndex]; RowColumnIndex rowColumnIndex1 = new RowColumnIndex(); if (col.MappingName == "P5") { rowColumnIndex1.RowIndex = (rowColumnIndex.RowIndex + 1) > this.dataGrid.View.Records.Count - 1 ? 1 : rowColumnIndex.RowIndex + 1; var column = this.dataGrid.Columns["P1"]; rowColumnIndex1.ColumnIndex = this.dataGrid.ResolveToScrollColumnIndex(this.dataGrid.Columns.IndexOf(column)); } else { rowColumnIndex1.ColumnIndex = rowColumnIndex.ColumnIndex + 1; rowColumnIndex1.RowIndex = rowColumnIndex.RowIndex; } this.dataGrid.MoveCurrentCell(rowColumnIndex1); } |
Attachment: SfDataGridDemo_da52630.zip
