We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Select cell in DataGrid

Thread ID:

Created:

Updated:

Platform:

Replies:

146389 Aug 2,2019 08:39 AM UTC Aug 13,2019 11:49 AM UTC UWP 6
loading
Tags: SfDataGrid
Femke
Asked On August 2, 2019 08:39 AM UTC

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 [Syncfusion]
Replied On August 5, 2019 05:08 PM UTC

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); 
 
 
Please let us know if you need further assistance. 
 
Regards, 
Susmitha S 


Femke
Replied On August 8, 2019 06:48 AM UTC

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 [Syncfusion]
Replied On August 9, 2019 02:25 PM UTC

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 [Syncfusion]
Replied On August 13, 2019 09:21 AM UTC

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> 
 
 
Please contact us for further assistance. 
 
Regards, 
Farjana Parveen A 


Femke
Replied On August 13, 2019 11:32 AM UTC

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 [Syncfusion]
Replied On August 13, 2019 11:49 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon