Adding Datagrid dynamically and adding additional menu buttons to Ribbon Control

[Nagarajaswamy B M]

Dear Team,

I am developing an application in WPF, for that I am using syncfusion to give better look & feel and also better performance. Right now I am using trial version of Syncfusion, based on the performance I am planning to purchase the licence version.

While developing the application, I am facing some issue, please help me in solving these issues.

My application has two screens, those two screens are kept inside a folder and attached with the thread.

My queries are:

1. My first window(Window-1) is RibbonWindow. I want to add two additional MenuItems and a autocomplete search button on the right hand side ribbon control, please let me know how to do it. (please refer ExistingWindow-1 and ExptedWindow-1 from the attachement).

2. After clicking (...) button from the Window-1 I am redirecting to Window-2 but the look and feel is differing in Window-2 even though I am applying the same VisualStyle property i.e., VisualStyle = "Office2013". Please look into this and let me know how to apply same style in both the windows.

3. I am adding a dynamic Datagrid to Window-2 based on the checkBox selection in window-2. and the header of the DataGrid should contain a textBox which is used to search Data in DatatGrid. Please help me how to do it.

( For query 2&3 please refer ExistingWindow-2 and ExptedWindow-2 from the attachement)

Regards,

Nagaraj

Attachment: SyncfusionWindow_11bebf06.zip

[Muthukumar Kalyanasundaram]

Hi Nagarajaswamy, 

 

Thank you for contacting Syncfusion support. 

Query 1:   I want to add two additional MenuItems and a autocomplete search button on the right hand side ribbon control	We can add DropDownButton and TextBox to the right side of the Ribbon using the TabPanelItem. We have prepared sample for the same and it is available below.      Sample : Ribbon
Query 2:  After clicking (...) button from the Window-1 I am redirecting to Window-2 but the look and feel is differing in Window-2 even though I am applying the same VisualStyle property i.e., VisualStyle = "Office2013	In the Window-2, you need to set the Visual style to Office2013 style in Window2 to get the same look and feel as that of Window1. This has also been included in the above sample.      Please look into the sample and let us know whether it satisfies your requirement.
Query 3:    I am adding a dynamic Datagrid to Window-2 based on the checkBox selection in window-2. and the header of the DataGrid should contain a textBox which is used to search Data in DatatGrid. Please help me how to do it.	If you want to search text for particular column, you can override the SearchCell method in SearchHelper class. In SearchCell method, based on MappingName you can skip the columns that you don’t want to search. And also  We have created simple sample based on your requirement. In that sample, we have searched the text in “ContactID” column. Could you please refer the code and sample in below location,    Code snippet:    this.datagrid.SearchHelper = new SearchHelperExt(this.datagrid);  this.datagrid.SearchHelper.Search(searchTextBox.Text);    public class SearchHelperExt : SearchHelper  {      public SearchHelperExt(SfDataGrid datagrid)          : base(datagrid)      {      }        protected override bool SearchCell(DataColumnBase column, object record, bool ApplySearchHighlightBrush)      {          if (column.GridColumn.MappingName == "ContactID")              return base.SearchCell(column, record, ApplySearchHighlightBrush);          return false;      }  }      Sample: http://www.syncfusion.com/downloads/support/forum/129914/ze/DataGrid_dynamicColumn-1823885516    For more details about search a text in dataGrid, you can make use of below link,    Link 1: https://help.syncfusion.com/wpf/sfdatagrid/search    For more details about filter the records in dataGrid, you can make use of below link,    Link 2: https://help.syncfusion.com/wpf/sfdatagrid/filterrow

 

Please let us know if you have any query. 

 

Regards, 

Muthukumar K 

 

[Nagarajaswamy B M]

Dear Team,

Thank you very much for your response. 

Solution for Query -1 and Query -2 is working for me. But the solution for Query-3 was not as per the requirement.

please look into the ExpectedWindow-1, ExpectedWindow-2 and Expected Window-3.

1. When I click on the drop down button in the ExpectedWindow-1, I want to show the items as shown in the ExpectedWindow-1. along with tick mark and the seperator with tag in bold fonts.

In the same window, when im trying to add TextBox at the end (SfTextBoxExt).  

It is throwing the error  

"The tag 'SfTextBoxExt' does not exist in XML namespace 'clr-namespace:Syncfusion.Windows.Controls.Input;assembly=Syncfusion.SfInput.Wpf'."  

This error is appearing even after adding the namespeace.

2. For ExpectedWindow-2, I want a DataGrid with a TextBox in each column of the Header with same look and feel. (Please refere the file ExpectedWindow -2).

3. For ExpectedWindow-3, I want a Dynamic DataGrid with Two buttons in the beggining of the dataGrid (As shown in the file ExpectedWindow-3, please refer the file) .

when I click on copy botton, it should create a new row and copy the column contents to the new row, when I click on the delete, it should delete the current row.

I am trying to perform it but couldn't able to get the expected solution.

Please help me.

Attachment: SyncWindows_2769da8a.zip

[Gobikrishnan Murugesan]

Hi Nagarajaswamy, 

  

Please find the response details below, 

Query 1: " I want to show the items as shown in the ExpectedWindow-1" 

 

In order to display the drop down items with group and checkable options. Please use the below code. 

 

 

<syncfusion:DropDownButton Label="SETTINGS" IsSmallImageVisible="False" Height="23" FontSize="14" Margin="0,0,5,0"> 

<syncfusion:DropDownMenuGroup Header="Print Setting"> 

<syncfusion:DropDownMenuItem Header="Freeze Panes" IsCheckable="True" IsChecked="False"></syncfusion:DropDownMenuItem> 

<syncfusion:DropDownMenuItem Header="Show Preview" IsCheckable="True" IsChecked="True"/> 

</syncfusion:DropDownMenuGroup> 

<syncfusion:DropDownMenuGroup Header="Print Orientation"> 

<syncfusion:DropDownMenuItem Header="Portrait" IsCheckable="True" IsChecked="False"></syncfusion:DropDownMenuItem> 

<syncfusion:DropDownMenuItem Header="Landscape" IsCheckable="True" IsChecked="True"/> 

</syncfusion:DropDownMenuGroup> 

</syncfusion:DropDownButton> 

 

Query 2: ""The tag 'SfTextBoxExt' does not exist in XML namespace 'clr-namespace:Syncfusion.Windows.Controls.Input;assembly=Syncfusion.SfInput.Wpf'." " 

 

We suspect that "SfInput.WPF" assembly is not referred correctly in your application. Can you please check the referred assembly version and revert us if you still face this issue. 

Query 3:  “I want a DataGrid with a TextBox in each column of the Header with same look and feel”  

 If you want to set the textbox for column header in dataGrid, you can customizing the style of “GridRowHeaderCell” and “HeaderTemplate” as like below code,  

  

<Window.Resources>  

    <!-- Set TextBox at header row of grid-->  

    <DataTemplate x:Key="HeaderTemplate">  

        <Grid>  

            <Grid.RowDefinitions>  

                <RowDefinition Height="20"/>  

                <RowDefinition Height="20"/>  

                <RowDefinition Height="5"/>  

            </Grid.RowDefinitions>  

            <TextBlock Grid.Row="0" TextAlignment="Center" Text="{Binding .}"  />  

            <TextBox Grid.Row="1" Name="searchTextBox" TextAlignment="Center"  />  

        </Grid>  

    </DataTemplate>  

  

</Window.Resources>  

  

Query 4: “ I want a Dynamic DataGrid with Two buttons in the beggining of the dataGrid (As shown in the file ExpectedWindow-3, please refer the file) . When I click on copy botton, it should create a new row and copy the column contents to the new row, when I click on the delete, it should delete the current row.“  

 We have prepared the sample based on your requirement. Please find the code snippet and sample link below, 

<Window.Resources>  

   <!-- load the button in grid header cell-->  

    <Style TargetType="syncfusion:GridRowHeaderCell">  

        <Setter Property="Template">  

            <Setter.Value>  

                <ControlTemplate TargetType="syncfusion:GridRowHeaderCell">  

                    <Grid>  

                        <Grid.ColumnDefinitions>  

                            <ColumnDefinition Width="20"/>  

                            <ColumnDefinition Width="20"/>  

                        </Grid.ColumnDefinitions>  

                        <Button Grid.Column="0" Content="Copy" Click="Button_Click_1"syncfusion:FocusManagerHelper.FocusedElement="True"   

                            syncfusion:VisualContainer.WantsMouseInput="True"/>  

                        <Button Grid.Column="1" Content="Delete" Click="Button_Click_2"syncfusion:FocusManagerHelper.FocusedElement="True"/>  

                    </Grid>  

                </ControlTemplate>  

            </Setter.Value>  

        </Setter>  

    </Style>  

</Window.Resources>  

  

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/DATAGR~145921653.ZIP  

  

Please let us know if you have any query.  

  

Regards,  

Gobikrishnan