Custome Control | WPF | SfDataGrid

Amit Saraf · 2016-06-16T12:04:28.1800000+00:00

I Want to create a custom control that inherits SfDataGrid but has a ToolBarAdv at the bottom with some Buttons and TextBoxesCan it be done ? if yes then how ?Amit Saraf

EM Elavarasan M Syncfusion Team June 18, 2016 04:01 AM UTC

Hi Amit,

Thank you for contacting syncfusion support.

We have analyzed your query and you can achieve your requirement to create custom control from SfDataGrid along with ToolBarAdv by customizing the ControlTemplate of SfDataGrid.

Code example:

public class SfDataGridExt : SfDataGrid

{

public SfDataGridExt()

: base()

{

DefaultStyleKeyProperty.OverrideMetadata(typeof(SfDataGridExt), new FrameworkPropertyMetadata(typeof(SfDataGridExt)));

}

We have prepared the sample based on this and please find the sample from below, we have added the style for SfDataGridExt in App.XAML.

Sample: http://www.syncfusion.com/downloads/support/forum/124601/ze/SfDataGrid_Custom928883536

Regards,

Elavarasan M

AS Amit Saraf June 18, 2016 10:57 AM UTC

Thanks for your reply

Fresh Issues

1. When SfDataGrid is populate using Large amount of data the Column Header Row also scrolls with data row (please try it)

2. I want to apply style available in Syncfusion.SfGrid.WPF i.e. /Syncfusion.SfGrid.WPF;component/Styles/Styles.xaml which I used to do with following XAML code in Application.xaml

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

Here is my fresh code

XAML

<syncfusion:SfDataGrid

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:local="clr-namespace:SfDataGridCustome"

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

x:Class="SfDataGridExt">

<syncfusion:SfDataGrid.Resources>

<syncfusion:BoolToVisiblityConverter x:Key="VisiblityConverter" />

<Setter.Value>

<VisualStateManager.VisualStateGroups>

</BooleanAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Border Grid.Row="0"

SnapsToDevicePixels="True"

Visibility="{Binding Path=ShowGroupDropArea,

RelativeSource={RelativeSource TemplatedParent},

Converter={StaticResource VisiblityConverter}}">

<syncfusion:GroupDropArea x:Name="PART_GroupDropArea" SnapsToDevicePixels="True" />

</Border>

<Border Grid.Row="1"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

SnapsToDevicePixels="True">

<ScrollViewer x:Name="PART_ScrollViewer"

CanContentScroll="True"

FlowDirection="{TemplateBinding FlowDirection}"

HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"

IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"

IsTabStop="False"

PanningMode="{TemplateBinding ScrollViewer.PanningMode}"

PanningRatio="{TemplateBinding ScrollViewer.PanningRatio}"

VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">

<Grid>

<syncfusion:VisualContainer x:Name="PART_VisualContainer"

Grid.Row="0"

Background="Transparent" />

</Grid>

</ScrollViewer>

</Border>

<Border Grid.Row="2" Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

SnapsToDevicePixels="True">

<syncfusion:ToolBarAdv>

</syncfusion:ToolBarAdv>

</Border>

<syncfusion:BusyDecorator x:Name="PART_BusyDecorator"

Grid.Row="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</syncfusion:SfDataGrid.Resources>

</syncfusion:SfDataGrid>

VB .Net Code

Imports Syncfusion.UI.Xaml.Grid

Public Class SfDataGridExt

Inherits SfDataGrid

Public Sub New()

' This call is required by the designer.

InitializeComponent()

' Add any initialization after the InitializeComponent() call.

DefaultStyleKeyProperty.OverrideMetadata(GetType(SfDataGridExt), New FrameworkPropertyMetadata(GetType(SfDataGridExt)))

Me.SelectionController = New GridSelectionControllerExt(Me)

End Sub

End Class

Public Class GridSelectionControllerExt

Inherits GridSelectionController

Public Sub New(datagrid As SfDataGrid)

MyBase.New(datagrid)

End Sub

Protected Overrides Sub ProcessKeyDown(args As KeyEventArgs)

If args.Key = Key.Enter Then

Return

End If

MyBase.ProcessKeyDown(args)

End Sub

End Class

Thanks a lot

Amit Saraf

EM Elavarasan M Syncfusion Team June 21, 2016 03:21 AM UTC

Hi Amit,

We have analyzed your query and please find the below details.

Header Row also scrolls:

Previously we have created the RowDefinition under ScrollViewer hence the header has been scrolled, now we have modified the code changes by split the rows GroupDropArea, ScrollViewer and ToolbarAdv respectively. You have also splitted the RowDefinitions like this in your fresh code.

Styling custom control from SfGrid.WPF:

You can style the custom control available in . /Syncfusion.SfGrid.WPF;component/Styles/Styles.xaml like below,

<local:SfDataGridExt x:Name="grid"

AllowGrouping="True"

AutoGenerateColumns="False"

ItemsSource="{Binding EmployeeDetails}"

ShowGroupDropArea="True">

<local:SfDataGridExt.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</local:SfDataGridExt.Resources>

</local:SfDataGridExt>

We have also attached the sample for this and please find the sample from below,

Sample: http://www.syncfusion.com/downloads/support/forum/124601/ze/SfDataGrid_Custom-1784689715

Regards,

Elavarasan M

AS Amit Saraf June 21, 2016 06:17 AM UTC

Thanks for you help. Now it works perfectly.

Now Here is new problem (only a code with problem i.e. in ToolBarAdv is posted here)

<syncfusion:ToolBarAdv Grid.Row="2" x:Name="ToolBarRow" GripperVisibility="Hidden" EnableAddRemoveButton="False" Focusable="False" IsTabStop="False">

<syncfusion:ToolBarAdv>

<syncfusion:SfTextBoxExt x:Name="TxtSearch" Watermark="Search" Width="200" Margin="2" TextChanged="Txt_TextChanged"/>

<syncfusion:ButtonAdv SizeMode="Small" ToolTip="Search Text" SmallIcon="/GS.UI.Controls;component/Images/Find.png" BorderThickness="0" Background="Transparent" Click="Search_MoveNext"/>

<syncfusion:ButtonAdv SizeMode="Small" ToolTip="Clear Search Result" SmallIcon="/GS.UI.Controls;component/Images/Cancel.png" BorderThickness="0" Background="Transparent" Click="Search_Clear"/>

</syncfusion:ToolBarAdv>

How can I access ToolBarRow & TxtSearch from VB.Net Code

Please Note that I'm writing complete code in SfDataGridExt.xaml, SfDataGridExt.xaml.vb & not in App.Xaml hence a complete new control is ready for direct reference in any other project.

Amit Saraf

EM Elavarasan M Syncfusion Team June 22, 2016 06:55 AM UTC

Hi Amit,

Thanks for your update.

We have analyzed your query and you can access the ToolBarRow and TxtSearch by using the GetTemplateChild method like below,

public class SfDataGridExt : SfDataGrid

{

protected ToolBarAdv toolBarRow;

protected SfTextBoxExt textSearch;

public SfDataGridExt()

: base()

{

DefaultStyleKeyProperty.OverrideMetadata(typeof(SfDataGridExt), new FrameworkPropertyMetadata(typeof(SfDataGridExt)));

}

public override void OnApplyTemplate()

{

base.OnApplyTemplate();

toolBarRow = GetTemplateChild("ToolBarRow") as ToolBarAdv;

textSearch = GetTemplateChild("TxtSearch") as SfTextBoxExt;

//vb code

//toolBarRow = TryCast(GetTemplateChild("ToolBarRow"), ToolBarAdv)

//textSearch = TryCast(GetTemplateChild("TxtSearch"), SfTextBoxExt)

}

We have also prepared the sample for this and please find the sample from below,

Sample: http://www.syncfusion.com/downloads/support/forum/124601/ze/SfDataGrid_Custom-45338188

Regards,

Elavarasan M

AS Amit Saraf June 22, 2016 10:24 AM UTC

Thanks for your reply

Public Property ShowTools As Boolean

Get

If toolBarRow.Visibility = Visibility.Visible Then : Return True

Else : Return False

End If

End Get

Set(value As Boolean)

If value Then : toolBarRow.Visibility = Visibility.Visible

Else : toolBarRow.Visibility = Visibility.Collapsed

End If

End Set

End Property

Now when I change Visibility of ToolBarRow from outside control using property, I get error whose details are as fellows

System.NullReferenceException was unhandled by user code

HResult=-2147467261

Message=Object reference not set to an instance of an object.

Source=GS.UI.Controls

StackTrace:

at GS.UI.Controls.SfDataGridExt.set_ShowTools(Boolean value) in D:\Data - Apps\GS Apps\GS UI Controls\List Controls\SfDataGridExt.xaml.vb:line 97

at GS.Tools.TestControl..ctor() in D:\Data - Apps\GS Apps\Tools\TestControl.xaml.vb:line 15

InnerException:

And also here is the image of how Filter Button in Column Header Looks after applying theme

Filter Button Image

Thanks a Lot

Amit Saraf

EM Elavarasan M Syncfusion Team June 23, 2016 07:11 AM UTC

Hi Amit,

We have analyzed your query and please find the details below,

Null reference exception while accessing the Toolbar Row:

Based on your stackTrace, we suspect you have accessed the ToolBar row before OnApplyTemplate in ShowToolBar property which is used in constructor. You can avoid this by adding appropriate null checks while accessing ToolBar row.

Filter button in Column Header gets clipped:

While applying style to SfDataGrid from /Syncfusion.SfGrid.WPF;component/Styles/Styles.xaml, the HeaderRowHeight of SfDataGrid will be set to 30 in styles.xaml. Likewise, you need to set the HeaderRowHeight to SfDataGridExt control accordingly. We have modified the SfDataGridExt style based on our SfDataGrid style as below,

</Style>

We have also prepared the sample based on this and please find the sample from below,

Sample: http://www.syncfusion.com/downloads/support/forum/124601/ze/SfDataGrid_Custom-1812033015

Regards,

Elavarasan M

AS Amit Saraf June 23, 2016 12:14 PM UTC

Thanks for your reply. Modified VB.Net Code and got the desired result. Now new query, how to apply Style to unbound Rows & Summary Fields

Tried this but did not have any effect

</Style>

</Style>

</Style>

This Styles are written in Application.XAML and work with SfDataGrid

AS Amit Saraf June 24, 2016 06:40 AM UTC

Sorry it was my fault since my background is from windows form so I don't know much about XAML

Since SfDataGridExt is derived from SfDataGrid and complete control template is modified so all the styles are needed to be written in SfDataGridExt

so keeping this in mind I modified XAML of SfDataGridExt and added required style (it worked well)

(please let me know if I'm wrong or there is any other way to do so)

for current time my problem is solved and control is working fine.

Thanks a lot for your help

Amit Saraf

EM Elavarasan M Syncfusion Team June 24, 2016 08:49 AM UTC

Hi Amit,

Thanks for your update.

We have analyzed your query and we suspect you have edited the GridGroupSummaryCell, GridTableSummaryCell and UnBoundRowControl styles. But the styles will be merged from /Syncfusion.SfGrid.WPF;component/Styles/Styles.xaml, where you have merged in SfDataGridExt.Resources. So you have to write the style inside the SfDataGridExt.Resources like the below code example,

Way 1:

<local:SfDataGridExt.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</Style>

</Style>

</Style>

</ResourceDictionary>

</local:SfDataGridExt.Resources>

We have prepared the sample for this and please find the sample from below,

Sample: http://www.syncfusion.com/downloads/support/forum/124601/ze/SfDataGrid_Custom1889828619

Way 2:

Also you can apply the style to mentioned elements by using specific properties instead of defining the styles in SfDataGridExt.Resources like the below code example,

<UserControl.Resources>

</Style>

</UserControl.Resources>

<local:SfDataGridExt x:Name="grid"

AllowGrouping="True"

GroupSummaryCellStyle="{StaticResource groupSummaryStyle}"

ItemsSource="{Binding EmployeeDetails}"

ShowGroupDropArea="True">

Likewise the above, you can style the GridTableSummaryCell by using TableSummaryCellStyle and UnBoundRowControl by using UnBoundRowStyle.

You can refer the below UG documentation to know more about the Styling in SfDataGrid.

http://help.syncfusion.com/wpf/sfdatagrid/styles-and-templates

Regards,

Elavarasan M

AS Amit Saraf June 24, 2016 11:10 AM UTC

Thanks for your reply

I had used Way 1 (Since I have defined Complete XAML in UserControl and not in Application.XAML)

I also thank you for showing me the other way of defining styles for GroupSummaryRow, TableSummaryRow and UnBoundRows which I think would be very useful my in future projects

Also I was wondering if I can apply different Styles for different UnBound Rows, if yes I would like to know it

Thanks for your great help

Amit Saraf

EM Elavarasan M Syncfusion Team June 28, 2016 05:33 AM UTC

Hi Amit,

Thank you for the update.

We have analyzed your query and you can apply the different style to different UnBoundRows by writing style to GridUnBoundRowCell and you can change the background using converter based on row index like the below code example,

<local:UnboundCellStyleConverter x:Key="unboundCellStyleConverter" />

</Style>

public class UnboundCellStyleConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

var index = (value as GridUnBoundRowCell).ColumnBase.RowIndex;

if (index % 2 == 0)

return Colors.Bisque.ToString();

else

return Colors.LightSkyBlue.ToString();

}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

return null;

}

We have prepared the sample for this and please find the sample from below,

Sample: http://www.syncfusion.com/downloads/support/forum/124601/ze/SfDataGrid_Custom-1511386276

You can refer the below UG documentation to know more about the styling in UnboundRows,

http://help.syncfusion.com/wpf/sfdatagrid/unbound-rows#styling-in-unbound-rows

You can also refer the below KB to know the UnboundRow styling,

https://www.syncfusion.com/kb/6433/how-to-apply-alternate-row-background-for-unboundrows-in-sfdatagrid

Regards,

Elavarasan M

AS Amit Saraf April 7, 2017 11:44 AM UTC

Thanks for your help

Customized Control was working great only with one problem detected later on

I'm using Mouse Double Click Event for Processing some task

C# Code

protected override void OnMouseDoubleClick(MouseButtonEventArgs e)

{

// Do Something with selected item

base.OnMouseDoubleClick(e);

}

Now problem here is I want to detect position of mouse when double click event rises since in overall control where ever user double clicks (eg. on Header, or on search text box, or on toolbar or in blank area) event rises giving unpredictable result.

Amit Saraf

PS Prasanth Saravanan Syncfusion Team April 10, 2017 12:38 PM UTC

Hi Amit,

We have analyzed your query and you can able to achieve your requirement by using visualcontainer (GetVisualContainer() extension method exists in the Syncfusion.UI.Xaml.Grid.Helpers) as like below code example

private void Grid_MouseDoubleClick(object sender, MouseButtonEventArgs e)

{

var visualcontainer = this.grid.GetVisualContainer();

var rowcolumindex = visualcontainer.PointToCellRowColumnIndex(e.GetPosition(visualcontainer));

if (rowcolumindex.IsEmpty)

{

if(this.grid.ShowGroupDropArea == true && e.GetPosition(visualcontainer).Y < 0)

{

MessageBox.Show("Clicked in grop drop area");

}

var datarow = grid.RowGenerator.Items.FirstOrDefault(dr => dr.RowIndex == rowcolumindex.RowIndex);

//You can the row type -> Header, Record, Caption and etc rows types using below variable

if(datarow.RowType == RowType.HeaderRow)

{

MessageBox.Show("You are Clicked in HeaderRow");

}

if(datarow.RowType==RowType.UnBoundRow)

{

MessageBox.Show("You are Clicked in UnBoundRow");

}

if (datarow.RowType == RowType.DefaultRow)

{

MessageBox.Show(" You are Clicked in DefaultRow");

}

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGrid_Custom487056713.zip

Regards,

Prasanth.S

AS Amit Saraf April 10, 2017 01:37 PM UTC

Thanks for your help.

Modified code provided as fellows & depending on my condition

//I'm using inheriting SFDataGrid in my control itself

public partial class SfDataGridExt : SfDataGrid

//Difining Variable

protected VisualContainer VContainer;

//Getting Visual Container

public override void OnApplyTemplate()

{

base.OnApplyTemplate();

VContainer = (base.GetTemplateChild("PART_VisualContainer") as VisualContainer);

}

//Processing Mouse Double Click Event

protected override void OnMouseDoubleClick(MouseButtonEventArgs e)

{

//if (ProcessKeyUp) ProcessKeyPressed(Key.Enter);

var RCIndex = VContainer.PointToCellRowColumnIndex(e.GetPosition(VContainer));

if (RCIndex.IsEmpty)

{

if (ShowGroupDropArea && e.GetPosition(VContainer).Y < 0)

this.IsGroupDropAreaExpanded = !this.IsGroupDropAreaExpanded;

}

var r = RowGenerator.Items.FirstOrDefault(dr => dr.RowIndex == RCIndex.RowIndex);

if (r != null)

{

if ((r.RowType == RowType.DefaultRow | r.RowType == RowType.DetailsViewRow) & ProcessKeyUp)

{

//Do whatever I want to do on Selected Record

}

base.OnMouseDoubleClick(e);

}

Please let me know if I'm wrong anywhere

Thanks once again

Amit Saraf

BR Balamurugan Rajaraman Syncfusion Team April 11, 2017 10:34 AM UTC

Hi Amit

We have checked your query “Not able to get the row details in the mouse double click event” it’s working fine in our side. We have attached the tested sample for reference you can download it from the below link.

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/124601725562093.zip

If still facing same issue then could you please revert the sample to reproduce the reported issue with the replication procedure. It will be helpful for us to analyze further.

Regards,

Balamurugan R

AS Amit Saraf April 11, 2017 12:15 PM UTC

Thanks for your reply

in my last reply I did not mean that it is not working. It is working fine

I just posted to code I've changed on basis of my requirement & just wanted you to check if I'm wrong somewhere so that I can make relative changes to my code.

Amit Saraf

BR Balamurugan Rajaraman Syncfusion Team April 12, 2017 01:18 PM UTC

Hi Amit

Sorry for the misconception.

We are happy that your requirement has been met. Thank you for sharing us the code changes. Your code changes are correct you can able to process the further implementation with this changes.

Please let us know further assistance on this.

Regards,

Balamurugan R

AS Amit Saraf July 26, 2018 12:07 PM UTC

Thanks for your previous help & for your knowledge custome control sfDataGridExt is working great.

I was trying to reduce my labor by creating styles for GridDateTimeColumn & GridNumericColumn but for some reason it is not working

Here is my code

</Style>

</Style>

</Style>

Styles have been defined in SfDataGridExt Resources as discussed earlier

Thanks a lot

Amit Saraf

JG Jai Ganesh S Syncfusion Team July 27, 2018 11:56 AM UTC

Hi Amit,

We have checked your query with your code. In that you have set the column properties by written the style of the GridColumns. This is not a correct way to set the column properties using style. Instead of you can achieve this by directly setting the properties in corresponding column like below,

<syncfusion:GridNumericColumn MappingName="EmployeeSalary" TextAlignment="Right" NumberDecimalDigits="3" NumberDecimalSeparator="," NumberGroupSeparator="" NumberGroupSizes="2" AllowNullValue="True"/>

<syncfusion:GridDateTimeColumn MappingName="EmployeeDate" Pattern="CustomPattern" CustomPattern="dd/MM/yy" AllowNullValue="True" />

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

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

Regards,

Jai Ganesh S