1. Home
  2. Forum
  3. React - EJ 2
  4. editable header possible?

editable header possible?

Hello, it's possible to make row's and column's header editable?

and is possible to bind the row headers to a list?

And is possible to add a context menu for row headers?

Regards


12 Replies
VS Vijayarasan Sivanandham Syncfusion Team December 30, 2021 01:32 PM UTC

Hi Matteo,

Please find answer for your queries below

 
Queries 
Solutions 
 
it's possible to make column's header editable? 
 

Your requirement can be achieved by using HeaderTemplate in SfDataGrid. Please refer the below code snippet,

 
<Window.Resources> 
        <DataTemplate x:Key="headerTemplate"> 
            <TextBox Text="{Binding Path=.}" 
                    TextWrapping="Wrap" /> 
        </DataTemplate> 
</Window.Resources> 
<Grid>        
        <syncfusion:SfDataGrid x:Name="sfDataGrid" 
                               AllowFiltering="True" 
                               ShowRowHeader="True"                               
                               HeaderTemplate="{StaticResource headerTemplate}" 
                               ItemsSource="{Binding Orders}" 
                               AutoGenerateColumns="True"> 
        </syncfusion:SfDataGrid>        
</Grid> 
 
it's possible to make row's header editable? 
 
 
We are a little unclear with your scenario. Can you please provide more information related to your query? 
 
  1. Details about your scenario with image illustrations?
  2. Can you please share your exact requirement?

Kindly revert to us with the above requested details. It will be more helpful for us to check the possibilities to resolve the reported problem. 
 
is possible to bind the row headers to a list? 
 
 
is possible to add a context menu for row headers? 
 
 
Yes. Your requirement can be achieved by using RecordContextMenu and show context menu only for RowHeader by customizing the GridContextMenuOpening event in SfDataGrid. Please refer the below code snippet,

XAML Code Snippet: 
 
  <syncfusion:SfDataGrid x:Name="sfDataGrid" 
                               AllowFiltering="True" 
                               ShowRowHeader="True"                               
                               HeaderTemplate="{StaticResource headerTemplate}" 
                               ItemsSource="{Binding Orders}" 
                               AutoGenerateColumns="True"> 
            <syncfusion:SfDataGrid.RecordContextMenu> 
                <ContextMenu> 
                    <MenuItem x:Name="Cut" Header="Cut" Click="OnCutClicked" /> 
                    <MenuItem x:Name="Copy" Header="Copy" Click="OnCopyClicked" />                    
                </ContextMenu> 
            </syncfusion:SfDataGrid.RecordContextMenu>         </syncfusion:SfDataGrid> 


C# Code Snippet: 
 
this.sfDataGrid.GridContextMenuOpening += OnGridContextMenuOpening; 
 
private void OnGridContextMenuOpening(object sender, GridContextMenuEventArgs e) 
{ 
            //Here only show the context menu for RowHeader 
            if (e.RowColumnIndex.ColumnIndex > 0) 
            { 
                //here handle the ContextMenu for other records in SfDataGrid 
                e.Handled = true; 
            } 
}       
 
private void OnCutClicked(object sender, RoutedEventArgs e) 
{ 
            //Here customize based on your scenario 
            MessageBox.Show("ContextMenu Clicked"); 
} 
 
private void OnCopyClicked(object sender, RoutedEventArgs e) 
{ 
            //Here customize based on your scenario 
            MessageBox.Show("ContextMenu Clicked"); 
}   
 
 

Sample Link: https://www.syncfusion.com/downloads/support/forum/171574/ze/SfDataGridDemo-1980929314

Please let us know if you have any concerns in this. 

Regards, 
Vijayarasan S 


MA Matteo December 30, 2021 02:48 PM UTC

I need to build a table like in picture, where the bold numbers are the headers of row and columns. This numbers are provided from 2 list : "rhead"(20,30,40,50) and "chead" (100,200,300,400), Since the list content can change I wolud bind in some way the list, so if I change the list the headers change to and if I edit the headers from the datagrid view, the list change according.



VS Vijayarasan Sivanandham Syncfusion Team December 31, 2021 01:22 PM UTC

Hi Matteo,

In SfDataGrid does not contain the direct support to achieve your requirement “change the list the headers change to and if I edit the headers from the datagrid view, the list change according”. We will check the possibilities to achieve your requirement using any workarounds. So, we need two more business days to validate this. We will update you with further details on January 04, 2022.


Regards,
Vijayarasan S

VS Vijayarasan Sivanandham Syncfusion Team January 4, 2022 03:09 PM UTC

Hi Matteo, 

Please find answer for your queries below

 
Queries 
Solutions 
 
it's possible to make row's header editable? 
 

SfDataGrid does not contain direct support to achieve your requirement "make row's header editable". Because RowHeaderCell is not editable.

However, Your requirement can be achieve by maintain the model property for RowHeaderCell and bound the property and customize the GridRowHeaderCell like below mentioned code snippet,

XAML Code Snippet:

 
<Window.Resources> 
        <local:ViewModel x:Key="viewModel" /> 
        <local:RowHeadValueConverter x:Key="rHeadValueconverter" />         
        <Style TargetType="syncfusion:GridRowHeaderCell"> 
            <Setter Property="Background" Value="Transparent" /> 
            <Setter Property="BorderBrush" Value="Gray" /> 
            <Setter Property="BorderThickness" Value="0,0,1,1" /> 
            <Setter Property="Padding" Value="0,0,0,0" /> 
            <Setter Property="FontFamily" Value="Segoe UI" /> 
            <Setter Property="FontSize" Value="12" /> 
            <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 
            <Setter Property="IsTabStop" Value="False" /> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate TargetType="syncfusion:GridRowHeaderCell"> 
                        <Border 
                    x:Name="PART_RowHeaderCellBorder" 
                    Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}"> 
                            <Grid> 
                                <TextBox   Text="{Binding RMHead,Converter={StaticResource rHeadValueconverter}}" LostFocus="OnLostFocusRow" /> 
                            </Grid> 
                        </Border> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
    </Window.Resources> 
 
C# Code Snippet:

 
private void OnLostFocusRow(object sender, RoutedEventArgs e) 
{ 
            //get the Row Header Collection 
            var rowHeaderCollection = (this.DataContext as ViewModel).RHead; 
 
            //Get the TextBox 
            var textBox = (sender as TextBox); 
 
            //Get the changed Value 
            var changedRowValue = Convert.ToInt32(textBox.Text); 
 
            var getGrid = textBox.Parent as Grid; 
 
            //get the GridRowHeaderCell 
            var rowHeaderCell = getGrid.TemplatedParent as GridRowHeaderCell; 
 
            var index = sfDataGrid.ResolveToRecordIndex(rowHeaderCell.RowIndex); 
 
            //replace the newly typed value to the column header Collection 
            rowHeaderCollection[index] = changedRowValue; 
} 


 
 
is possible to bind the row headers to a list? 
 
 
it's possible to make column's header editable? 
 
Your requirement can be achieved by using HeaderTemplate in SfDataGrid and customize the LostFocus event like below mentioned code snippet,

XAML Code Snippet:

 
<Window.Resources> 
        <DataTemplate x:Key="headerTemplate">           
            <TextBox  Text="{Binding Path=.}" LostFocus="OnLostFocusColumn"  /> 
        </DataTemplate> 
</Window.Resources> 
 
C# Code Snippet:


 
private void OnLostFocusColumn(object sender, RoutedEventArgs e) 
{  
            //get the Column Header Collection 
            var columnHeaderCollection = (this.DataContext as ViewModel).CHead; 
             
            //Get the TextBox 
            var textBox = (sender as TextBox); 
 
            //Get the changed Value 
            var changedColumnValue = Convert.ToInt32(textBox.Text); 
 
            var getContentPresenter =textBox.GetType().GetProperty("VisualParent", BindingFlags.Instance | BindingFlags.NonPublic).GetValue(textBox) as ContentPresenter; 
 
            //get the HeaderCellControl 
            var HeaderCell = getContentPresenter.TemplatedParent as GridHeaderCellControl; 
 
            //Get the SfDataGrid control 
            var dataGrid = HeaderCell.GetType().GetField("DataGrid", BindingFlags.Instance | BindingFlags.NonPublic).GetValue(HeaderCell) as SfDataGrid; 
 
            //Get the column  
            var column = (HeaderCell.Column as GridColumn); 
 
            //get the edited column index 
            var index = dataGrid.Columns.IndexOf(column); 
 
            //replace the newly typed value to the column header Collection 
            columnHeaderCollection[index]= changedColumnValue;             
} 
 
 
 

Sample Link: https://www.syncfusion.com/downloads/support/forum/171574/ze/SfDataGridDemo-1130401490

Please let us know if you have any concerns in this.

Regards,
Vijayarasan S 


MA Matteo January 12, 2022 11:08 AM UTC

Hello, can you check my code please? I  copied from your sample, but row header not show.


Attachment: testdatagridUpdated_e99f0917.zip

VS Vijayarasan Sivanandham Syncfusion Team January 13, 2022 03:43 PM UTC

Hi Matteo,

Currently, we are analyzing your provided sample from our end. So, we need two more business days to validate this. We will validate and update you details on or before January 18, 2022.

 
We appreciate your patience until then. 
 
Regards, 
Vijayarasan S 


VS Vijayarasan Sivanandham Syncfusion Team January 18, 2022 02:31 PM UTC

Hi Matteo,

We are still working on this. We need two more business days to validate this. We will validate and update you on the details on or before January 20, 2022. 

We appreciate your patience and understanding. 

Regards, 
Vijayarasan S 


SS Sampathnarayanan Sankaralingam Syncfusion Team January 20, 2022 01:58 PM UTC

Hi Matteo,


We have analyzed the sample. You have bound the collection to the TextBox.Text which is loaded in RowHeaderCell.ControlTemplate. You should not bind the collection instead you should introduce a property to the underlying data object for binding. Please refer the sample and let us know if you have any concerns.


Sample : https://www.syncfusion.com/downloads/support/forum/171574/ze/testdatagridUpdated2131302877


Regards,

Sampath Narayanan.S


MA Matteo January 20, 2022 05:10 PM UTC

Hello,

I tested the sample, the row headers are editable

Attached a picture. Now I can edit the Row header, but the aren't showed on startup( taken from bpR).

As you can see from my code I create bpR and bpC as collection of numbers to use them as header; I need to show them and if the user change some header(they must be editable), the collections have to change together.



VS Vijayarasan Sivanandham Syncfusion Team January 21, 2022 01:59 PM UTC

Hi Matteo,

Based on provided information we have checked the provided sample. In your sample bpR defined as the collection type property. As we mentioned earlier, You should introduce a property to the underlying data object for loading the initial data to display in RowHeaderCell. The bpR collection will be updated if you change the value in the RowHeader. 

Please let us know if you have any concerns in this. 

Regards, 
Vijayarasan S 


MC Matthew Creese January 13, 2023 11:52 AM UTC

Hi, what's the process to make the column headers editible in React?


Also is it possible to have control over which headers are 


thanks


PS Pavithra Subramaniyam Syncfusion Team January 18, 2023 11:43 AM UTC

Hi Matthew,


You can add any editor component in the header using the “Header Template” feature. Please refer to the below documentation link for more information.


https://ej2.syncfusion.com/react/documentation/grid/columns/headers/#header-template


If the above doesn’t meet your requirement please share a pictorial representation and the difficulties you are facing with the above solution which will be helpful for us to provide a better solution as early as possible.


Regards,

Pavithra S


Loader.
Up arrow icon