Select cell in DataGrid

[Femke]

Inside my SfDataGrid I have a column and each of its cells only contains the word "Serials". When my users click a cell inside this column, a CurrentCellActivated function will be called to expand- or collapse the DetailsView for that row. After the expand, or collapse, I need to deselect the cell so my function will be called again if the user clicks on it again. 

I cannot find out how to deselect the cell. In the documentation for UWP it says I can select a cell with the code beneath but I do not have the method GetRecordAtRowIndex();. Can you please tell me how to use the SelectCell method? How do I get the Record? I only have the record and column index. I have my function included, maybe someone can find out how to do it.

var record = this.dataGrid.GetRecordAtRowIndex(3);
var column = this.dataGrid.Columns[1];
this.dataGrid.SelectCell(record, column);

Attachment: PlanningDataGrid_CurrentCellActivated_5b65e23c.zip

[Susmitha Sundar]

Hi Femke, 

  

Thank you for using Syncfusion controls. 

  

You can select and unselect the cells by using SelectCell() and UnseletCell() Methods. And you can get the record from GetRecordAtRowIndex() method. If you want to use this method, you need to add the using Syncfusion.UI.Xaml.Grid.Helpers namespace. Please refer the below code snippet, 

 

C#: 

using Syncfusion.UI.Xaml.Grid.Helpers; 

 

//Select the Cells 

var record = this.dataGrid.GetRecordAtRowIndex(rowIndex); 

var column = this.dataGrid.Columns[columnIndex]; 

this.dataGrid.SelectCell(record, column); 

 

//Deselect the cell 

var removeRecord = this.dataGrid.GetRecordAtRowIndex(rowIndex); 

var removeColumn = this.dataGrid.Columns[columnIndex]; 

this.dataGrid.UnSelectCell(removeRecord, removeColumn); 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/146389/ze/DemoMasterDetails857732884 

 

Please let us know if you need further assistance. 

 

Regards, 

Susmitha S 

[Femke]

Hi Susmitha,

Thank you for your fast reply, though I have not been able to get it to work the way I want. Simply stated: I want to show the Expander button for the Details View on the right side, not the left, and I want it to display the word "Serials" instead of the standard +/-. I could not find a way to do this so I wrote the function to expand the Details View when clicked on a cell inside the "Serials" column.

With the CurrentCellActivated method I can indeed open the Details View perfectly, however clicking on the same cell again does not close the Details View and that is what I need to achieve. I figured if the Grid no-longer has the same cell selected, the event will be triggered again once clicked on it. Even after your solution with the UnselectCell function, the event is not triggered again and the Grid still has its black border around the cell so it looks like it never really unselected it.

Can you help me with this?

[Susmitha Sundar]

Hi Femke, 

  

Thank you for your update. 

 

Currently, we are checking the feasibility to achieve your requirement. We will validate and provide you complete details on August 13, 2019. 

 

We appreciate your patience until then. 

Regards, 

Susmitha S 

[Farjana Parveen Ayubb]

Hi Femke, 

 

Thank you for your patience. 

 

Please find the details for your queries, 

 

Query 1: I want to show the Expander button for the Details View on the right side, not the left,  

 

We did not have  support to show the expander of Details view on right side. So we add the Unbound column at right side of DetailsViewGrid and add the column value as “Serials”. And we call the expand and collapse methods in DataGrid cell tapped event. Please refer the following code snippet, 

 

C#: 

private void DataGrid_CellTapped(object sender, GridCellTappedEventArgs e) 

        { 

            var expander = ((e.OriginalSender as GridCell).DataContext as Employee).Expander; 

            if (expander == "Serials") 

            { 

                var recordIndex = this.dataGrid.ResolveToRecordIndex(e.RowColumnIndex.RowIndex); 

                var row = this.dataGrid.RowGenerator.Items[recordIndex + 1]; 

                if (row.IsExpanded) 

                    this.dataGrid.CollapseDetailsViewAt(recordIndex); 

                else 

                    this.dataGrid.ExpandDetailsViewAt(recordIndex); 

            } 

        } 

 

 

Query 2: I want it to display the word "Serials" instead of the standard +/-. 

 

You can achieve this by override the Style of GridDetailsViewExpanderCell. Please refer the following code snippet, 

 

<Page.Resources> 

        <Style  TargetType="syncfusion:GridDetailsViewExpanderCell"> 

            <Setter Property="Template"> 

                <Setter.Value> 

                    <ControlTemplate TargetType="syncfusion:GridDetailsViewExpanderCell"> 

                        <Border Background="Transparent" 

                            BorderBrush="{TemplateBinding BorderBrush}" 

                            BorderThickness="{TemplateBinding BorderThickness}"> 

                            <Grid Background="{TemplateBinding Background}"  Visibility="{TemplateBinding ExpanderIconVisibility}"  

                             > 

                                <TextBlock Text="Serials" HorizontalAlignment="Center" VerticalAlignment="Center"/> 

                            </Grid> 

                        </Border> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

    </Page.Resources> 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/146389/ze/DemoMasterDetails-1748447310 

 

Please contact us for further assistance. 

 

Regards, 

Farjana Parveen A 

[Femke]

Hi Farjana,

Thank you for the given solution. It did not completely work so I have modified it a little bit. The view did open nicely but it did not close after clicking it again, but the Grid level CellTapped method did the trick. In case anyone else is ever looking for an answer to the same problem, here is how I fixed it in the end:

private List<int> _expandedRows = new List<int>();

private void DataGrid_CellTapped(object sender, GridCellTappedEventArgs e) {

if (e.Column.HeaderText.Equals("Serials")) {

var recordIndex = this.DataGrid.ResolveToRecordIndex(e.RowColumnIndex.RowIndex);

var row = this.DataGrid.RowGenerator.Items[recordIndex + 1];

if (this._expandedRows.Contains(recordIndex)) {

this.DataGrid.CollapseDetailsViewAt(recordIndex);

this._expandedRows.Remove(recordIndex);

} else {

this.DataGrid.ExpandDetailsViewAt(recordIndex);

this._expandedRows.Add(recordIndex);

}

}

}

[Farjana Parveen Ayubb]

Hi Femke, 

 

Thanks for the update. 

 

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you. 

 

Regards, 

Farjana Parveen A