Columns in SFDataGrid

[Dov]

Hi,
 
I'm trying to implement a DoubleTextBox and ComboBox both with bindings in SFDataGrid without any success.
 
Is it possible to create a DoubleTextBox column in SFDataGrid, and a ComboBox with the following bindings:

    ItemsSource="{Binding AmplitudeValues}" DisplayMemberPath="Key"  SelectedValuePath="Key"
    SelectedValue="{Binding AmplitudeNodeCategory, Mode=TwoWay}"
    IsDropDownOpen="{Binding IsAmplitudeDropDownOpen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"





    <syncfusion:SfDataGrid Name="AmplitudeTable"
                                    Height="220" Margin="2,2,2,10"
                                    ItemsSource="{Binding AmpTable}"
                                    AllowDraggingColumns="False"
                                    AllowSorting="False"
                                    AllowFiltering="False"
                                    AllowGrouping="False" 
                                    SelectionMode="Single"
                                    NavigationMode="Cell"   
                                    ShowGroupDropArea="False"
                                    ColumnSizer="Star"
                                    HorizontalAlignment="Center"
                                    HorizontalContentAlignment="Center"  >
 
        <syncfusion:SfDataGrid.Columns >
 
            <syncfusion:GridTextColumn MappingName="Line" HeaderText="Line" AllowEditing="False" />

            <syncfusion:GridTextColumn MappingName="Amplitude" HeaderText="Amplitude"   >
 
                <syncfusion:GridTextColumn.CellTemplate>
                    <DataTemplate>
                        <syncfusion:DoubleTextBox Name="Amplitude" Grid.Column="1"  Height="30"  Margin="2" BorderThickness="1" Padding="1"
                                MaxLength="18" TextWrapping="Wrap" Focusable="True"
                                syncfusion:DoubleTextBoxValueChangedCommand.Command="{Binding AmplitudeValueChangedCommand}" 
                                syncfusion:DoubleTextBoxValueChangedCommand.CommandParameter="{Binding RelativeSource={RelativeSource Self}}"  
                                EnterToMoveNext="True" AcceptsReturn="False"
                                IsReadOnly="{Binding ElementName=readonly, Path=IsChecked}"                                                         
                                Value="{Binding AmplitudeValue, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" 
                                NumberDecimalDigits="8"
                                HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"
                                VerticalContentAlignment="Stretch" HorizontalContentAlignment="Center"  
                                ContextMenu="{x:Null}" >
                        </syncfusion:DoubleTextBox>
                    </DataTemplate>
                </syncfusion:GridTextColumn.CellTemplate>
            </syncfusion:GridTextColumn>
 
            <syncfusion:GridTextColumn HeaderText="AmplitudeVal"  Width="70" >

                <syncfusion:GridTextColumn.CellTemplate>
                    <DataTemplate>
                        <ComboBox Name="AmplitudeVariable" Grid.Column="2" Width="70" Margin="2" BorderThickness="1" BorderBrush="Transparent" Padding="1"
                               
                                  ItemsSource="{Binding AmplitudeValues}" DisplayMemberPath="Key"  SelectedValuePath="Key"
                                  SelectedValue="{Binding AmplitudeNodeCategory, Mode=TwoWay}"
                                  IsDropDownOpen="{Binding IsAmplitudeDropDownOpen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"                                                             
                                   IsHitTestVisible="False" >
                            <ComboBox.ItemContainerStyle>
                                <Style TargetType="ComboBoxItem" >
                                    <Setter Property="Focusable" Value="False"/>
                                </Style>
                            </ComboBox.ItemContainerStyle>
                        </ComboBox>
                    </DataTemplate>
                </syncfusion:GridTextColumn.CellTemplate>
            </syncfusion:GridTextColumn>
 
        </syncfusion:SfDataGrid.Columns >
 
    </syncfusion:SfDataGrid>



Regards,

Dov.

[Jai Ganesh S]

Hi Dov, 

You can create the DoubleTextBox and ComboBox both with bindings in SFDataGrid by using GridTemplateColumn ( CellTemplate and EditTemplate) and using ElementName while binding like below, 

      <syncfusion:GridTemplateColumn HeaderText="Product Name"  syncfusion:FocusManagerHelper.WantsKeyInput="True" 

                                                    MappingName="ProductName"> 

           <syncfusion:GridTemplateColumn.CellTemplate> 

                            <DataTemplate> 

                                <TextBlock VerticalAlignment="Center"  

                                            syncfusion:FocusManagerHelper.FocusedElement="True" 

                                            Text="{Binding ProductName}" 

                                            TextAlignment="Right" /> 

                            </DataTemplate> 

           </syncfusion:GridTemplateColumn.CellTemplate> 

 

           <syncfusion:GridTemplateColumn.EditTemplate> 

                            <DataTemplate> 

                                <ComboBox SelectedItem="{Binding ProductName}"  

                                           syncfusion:FocusManagerHelper.FocusedElement="True" 

                                            ItemsSource="{Binding Path=DataContext.ComboBoxItemsSource,ElementName=grid}"   

                                            IsDropDownOpen="{Binding Path=DataContext.IsDropDownOpen,ElementName=grid}" 

                                            /> 

                            </DataTemplate> 

            </syncfusion:GridTemplateColumn.EditTemplate> 

    </syncfusion:GridTemplateColumn> 

 

     <syncfusion:GridTemplateColumn Width="100" 

                                                       syncfusion:FocusManagerHelper.WantsKeyInput="True" 

                                                       MappingName="SupplierID" > 

 

               <syncfusion:GridTemplateColumn.CellTemplate> 

                                <DataTemplate> 

                                    <TextBlock VerticalAlignment="Center" 

                                               

                                            Text="{Binding SupplierID}" 

                                            TextAlignment="Right" /> 

                                </DataTemplate> 

               </syncfusion:GridTemplateColumn.CellTemplate> 

 

               <syncfusion:GridTemplateColumn.EditTemplate> 

                                <DataTemplate> 

                                    <syncfusion:DoubleTextBox   

                                        Text="{Binding SupplierID}" 

                                        syncfusion:FocusManagerHelper.FocusedElement="True"> 

 

                                    </syncfusion:DoubleTextBox> 

                                </DataTemplate> 

            </syncfusion:GridTemplateColumn.EditTemplate> 

      </syncfusion:GridTemplateColumn> 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/GridDropDownAndReadOnlyColumns-1740539942.zip 

UG Link: 

https://help.syncfusion.com/wpf/sfdatagrid/column-types#gridtemplatecolumn 

Regards, 

Jai Ganesh S 

[Dov]

Hi,

Thank you for your reply.

I tried to implement the code into my code but it seems that the binding still won't work.

Could you please help me implement the code from the attachment into the code you have created.?

Also,

I want to merge cell headers but when I use StackedHeaderRow I get the result (1) - how can I get the result (2) (Please see Example).

Regards,

Dov.

Attachment: Double_Text_Box_May24232956493_36db75f6.zip

[Muthukumar Kalyanasundaram]

Hi Dov, 

Thanks for the update. 

We have checked your query. Please find the response from below location. 

Query 1:  To implement the code into my code but it seems that the binding still won't work. Could you please help me implement the code from the attachment into the code you have created.?

We have checked your provided sample. In that sample you haven’t used SfDatGrid, Can you check and revert to us?

Query 2:  I want to merge cell headers but when I use StackedHeaderRow I get the result (1) - how can I get the result (2) (Please see Example).

You can achieve your requirement by handling QueryRowHeight event as show like below code,  Code Snippet: Xaml  <syncfusion:SfDataGrid.StackedHeaderRows>      <syncfusion:StackedHeaderRow>          <syncfusion:StackedHeaderRow.StackedColumns>              <syncfusion:StackedColumn ChildColumns="NoOfOrders" HeaderText="No Of Orders" />              <syncfusion:StackedColumn ChildColumns="SupplierID,OrderDate,ProductName" HeaderText="Sample Details" />          </syncfusion:StackedHeaderRow.StackedColumns>      </syncfusion:StackedHeaderRow>  </syncfusion:SfDataGrid.StackedHeaderRows>  Code Snippet: C#  this.grid.QueryRowHeight += Grid_QueryRowHeight;    private void Grid_QueryRowHeight(object sender, Syncfusion.UI.Xaml.Grid.QueryRowHeightEventArgs e)  {      if (e.RowIndex == 1)      {          e.Height = 0;          e.Handled = true;      }  }  Sample: http://www.syncfusion.com/downloads/support/forum/131223/ze/GridDropDownAndReadOnlyColumns-683357015

Please let us know if you have any query. 

Regards, 

Muthukumar K 

[Dov]

Hi Muthukumar,

Thank you for your reply.

Query 2 is working great.


Regarding query 1 - I haven't sent you the code I worked on, I sent to you the example of the bindings I need to implement into the code you sent me in your first reply.
ItemsSource - Working.
IsDropDownOpen - Not working.
SelectedValue - Unknown (Because IsDropDownOpen not working).

Regards,

Dov.

[Sivakumar R]

Hi Dov, 

 

We have analyzed further to open ComboBox in one column when Editing DoubleTextBox in another column. It is not possible to keep the ComboBox in open status when editing DoubleTextBox as DropDown will capture the focus and you can't edit the DoubleTextBox further. So, we have created sample to open ComboBox DropDown after editing completed by handling CurrentCellEndEdit event.  

http://www.syncfusion.com/downloads/support/forum/131223/ze/CS630871871 

 

In the above sample, If you edit SupplierID column and tap out, ComboBox Dropdown will get open. 

 

Thanks, 

Sivakumar