Skip to content

SEO-172844-WPF-weblink-validatetor-image #712

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Aishwarya-Ganesan merged 3 commits into from
Jul 19, 2023
Merged

SEO-172844-WPF-weblink-validatetor-image #712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6eceb9a
SEO-172844-WPF-weblink-validatetor-image
Edithabich Jun 18, 2023
3ff3153
updated
Edithabich Jun 23, 2023
9b157e0
updated
Edithabich Jun 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions wpf/DataGrid/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ Create new WPF Project in Visual Studio to display SfDataGrid with data objects.
### Adding control via Designer

SfDataGrid control can be added to the application by dragging it from Toolbox and dropping it in Designer view. The required assembly references will be added automatically.
![Dragging WPF DataGrid Control from Toolbox to Designer](Getting-Started_images/wpf-datagrid-toolbox.png)
![Dragging WPF DataGrid Control from Toolbox to Designer](getting-started_images/wpf-datagrid-toolbox.png)

### Adding control manually in XAML

Expand Down Expand Up @@ -314,7 +314,7 @@ dataGrid.ItemsSource = viewModel.Orders;

Now, run the application and you can expect the see the below output,

![WPF DataGrid](Getting-Started_images/WPF-DataGrid.png)
![WPF DataGrid](getting-started_images/wpf-datagrid-output.png)

## Defining Columns
By default, the SfDataGrid control generates the columns automatically when value assigned to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. The type of the column generated depends on the type of data in the column and the attribute of the property the column bound with.
Expand Down Expand Up @@ -555,7 +555,7 @@ By default, you can sort columns in a SfDataGrid by clicking the column header.
{% endhighlight %}
{% endtabs %}

![WPF DataGrid Sorting](Getting-Started_images/WPF-DataGrid-Sorting.png)
![WPF DataGrid Sorting](getting-started_images/wpf-datagrid-sorting.png)

You can customize sorting by handling the [SfDataGrid.SortColumnsChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) and [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) events. To cancel the default sort, set the `Cancel` property to `true` in `SfDataGrid.SortColumnsChanging` event.

Expand Down Expand Up @@ -587,13 +587,13 @@ Grouping can be enabled by setting [SfDataGrid.ShowGroupDropArea](https://help.s
{% endhighlight %}
{% endtabs %}

![WPF DataGrid Grouping](Getting-Started_images/WPF-DataGrid-Grouping.png)
![WPF DataGrid Grouping](getting-started_images/wpf-datagrid-grouping.png)

### Filtering

Filtering can be enabled by setting [SfDataGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowFiltering) property to `true` , where you can open advanced filter UI by clicking the Filter icon in column header and filter the SfDataGrid. You can customize the filtering operations by handling [SfDataGrid.FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) and [SfDataGrid.FilterChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) events.

![WPF DataGrid Filtering](Getting-Started_images/wpf-datagrid-filter.png)
![WPF DataGrid Filtering](getting-started_images/wpf-datagrid-filter.png)


## Editing
Expand All @@ -612,4 +612,4 @@ SfDataGrid supports various built-in themes. Refer to the below links to apply t

* [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme)

![Applying Theme to WPF DataGrid](Getting-Started_images/wpf-datagrid-theme.png)
![Applying Theme to WPF DataGrid](getting-started_images/wpf-datagrid-theme.png)
6 changes: 3 additions & 3 deletions wpf/DataGrid/Paging.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ public class OrderInfo
{% endcapture %}
{{ codesnippet1 | OrderList_Indent_Level_1 }}

![WPF DataGrid diplays Multiple Pages using SfDataPager](Paging_images/wpf-datagrid-multiple-page.png)
![WPF DataGrid diplays Multiple Pages using SfDataPager](paging_images/wpf-datagrid-multiple-page.png)

#### Limitations

Expand Down Expand Up @@ -402,7 +402,7 @@ private void FilterBtn_Click(object sender, RoutedEventArgs e)


Here, records are filtered based on the textbox text in clicking event of Filter button. Initially `PageCount` is 5 and it is changed as 3 once the records are filtered.
![WPF DataGrid displays Altering Page Count for DataPager while Filtering](Paging_images/wpf-datagrid-change-page-count.png)
![WPF DataGrid displays Altering Page Count for DataPager while Filtering](paging_images/wpf-datagrid-datapager.png)

You can refer the [sample](http://www.syncfusion.com/downloads/support/directtrac/133329/ze/DataPager398566735) from here.

Expand Down Expand Up @@ -485,7 +485,7 @@ private void dataPager_OnDemandLoading(object sender, Syncfusion.UI.Xaml.Control
{% endtabs %}


![WPF DataGrid displys Sorting with loaded DataPager](Paging_images/wpf-datagrid-sorting.png)
![WPF DataGrid displys Sorting with loaded DataPager](paging_images/wpf-datagrid-sorting.png)

### Loading ItemsSource for page using async and await

Expand Down
46 changes: 23 additions & 23 deletions wpf/DataGrid/Printing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ dataGrid.ShowPrintPreview();
{% endhighlight %}
{% endtabs %}

![Printing in WPF DataGrid](Printing_images/wpf-datagrid-printing.png)
![Printing in WPF DataGrid](printing_images/wpf-datagrid-printing.png)

## Print Settings

Expand All @@ -45,11 +45,11 @@ dataGrid.Print();

Print preview window has Print and Quick Print Buttons which needs to be clicked to print the SfDataGrid.

![WPF DataGrid displays Print and Quick Print Buttons in Print Preview Window](Printing_images/wpf-datagrid-printing-buttons.png)
![WPF DataGrid displays Print and Quick Print Buttons in Print Preview Window](printing_images/wpf-datagrid-buttons.png)

1. Clicking the Print button opens the System print dialog where user can select the printer and set the number of copies to be printed.

![WPF DataGrid displays System Print Dialog for Printing](Printing_images/wpf-datagrid-system-print-dialog.png)
![WPF DataGrid displays System Print Dialog for Printing](printing_images/wpf-datagrid-system-print-dialog.png)

2. Clicking the Quick Print button, directly print the pages using default printer without opening the print dialog.

Expand All @@ -67,7 +67,7 @@ dataGrid.ShowPrintPreview();

Scaling options can be changed in print preview at runtime by selecting from scaling options drop-down in print preview.

![WPF DataGrid displays Print Scaling Options](Printing_images/wpf-datagrid-print-scaling-option.png)
![WPF DataGrid displays Print Scaling Options](printing_images/wpf-datagrid-print-scaling-option.png)

### Column Header on each page

Expand Down Expand Up @@ -103,7 +103,7 @@ this.sfDataGrid.PrintSettings.CanPrintStackedHeaders = true;
{% endhighlight %}
{% endtabs %}

![WPF DataGrid displays Printing with Stacked Headers](Printing_images/wpf-datagrid-printing-with-stacked-headers.png)
![WPF DataGrid displays Printing with Stacked Headers](printing_images/wpf-datagrid-stacked-headers.png)

## Page Settings

Expand All @@ -123,7 +123,7 @@ dataGrid.ShowPrintPreview();

Print orientation can be changed in print preview at runtime by selecting from orientation drop-down in print preview.

![WPF DataGrid displays Page Orientation Options in Print Preview](Printing_images/wpf-datagrid-print-page-orientation.png)
![WPF DataGrid displays Page Orientation Options in Print Preview](printing_images/wpf-datagrid-print-page-orientation.png)

### Page size

Expand All @@ -140,7 +140,7 @@ dataGrid.Print();

Page size can be changed in print preview also by selecting from page-size drop-down which displays pre-defined page sizes. You can also manually enter custom page width and height in the editors below page-size drop-down and press OK to apply the custom width and height for the page.

![WPF DataGrid displays Page Size Options in Print Preview](Printing_images/wpf-datagrid-page-size-option.png)
![WPF DataGrid displays Page Size Options in Print Preview](printing_images/wpf-datagrid-page-size-option.png)

### Page margin

Expand All @@ -156,7 +156,7 @@ dataGrid.Print();

Page margin can be changed in print preview also by selecting from pre-defined page margin from margin drop-down. You can manually enter custom margins in the editors below margin drop-down and press OK to apply the custom margin.

![WPF DataGrid displays Page Margin Options in Print Preview](Printing_images/wpf-datagrid-page-margin-option.png)
![WPF DataGrid displays Page Margin Options in Print Preview](printing_images/wpf-datagrid-page-margin-option.png)

## Setting Header and Footer

Expand Down Expand Up @@ -201,7 +201,7 @@ dataGrid.ShowPrintPreview();

3. Now run the application and you can see page header in all the pages. In the same way, you can set [PrintSettings.PrintPageFooterTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageFooterTemplate) also.

![Customizing Header Height in Print Preview for WPF DataGrid](Printing_images/wpf-datagrid-height-customization.png)
![Customizing Header Height in Print Preview for WPF DataGrid](printing_images/wpf-datagrid-height-customization.png)


N> [PrintManagerBase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html) is the `DataContext` for [PrintPageControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintPageControl.html), where the header and footer templates are loaded.
Expand Down Expand Up @@ -246,7 +246,7 @@ dataGrid.ShowPrintPreview();
{% endhighlight %}
{% endtabs %}

![WPF DataGrid displays Current DateTime in Printing](Printing_images/wpf-datagrid-datetime-in-printing.png)
![WPF DataGrid displays Current DateTime in Printing](printing_images/wpf-datagrid-datetime.png)

## Different modes of printing for better performance

Expand Down Expand Up @@ -285,7 +285,7 @@ dataGrid.ShowPrintPreview();
{% endhighlight %}
{% endtabs %}

![Customizing Style in Printing of WPF DataGrid](Printing_images/wpf-datagrid-printing-with-style.png)
![Customizing Style in Printing of WPF DataGrid](printing_images/wpf-datagrid-style.png)

#### Applying custom style

Expand Down Expand Up @@ -374,7 +374,7 @@ dataGrid.ShowPrintPreview();
{% endhighlight %}
{% endtabs %}

![WPF DataGrid with Custom Style while Printing](Printing_images/wpf-datagrid-custom-style-in-printing.png)
![WPF DataGrid with Custom Style while Printing](printing_images/wpf-datagrid-custom-style.png)

## Printing Customization

Expand Down Expand Up @@ -417,7 +417,7 @@ dataGrid.ShowPrintPreview();
{% endhighlight %}
{% endtabs %}

![Customizing Row Height while Printing in WPF DataGrid](Printing_images/wpf-datagrid-row-height-customization.png)
![Customizing Row Height while Printing in WPF DataGrid](printing_images/wpf-datagrid-row-height-customization.png)

### Hiding rows while printing

Expand Down Expand Up @@ -488,7 +488,7 @@ dataGrid.ShowPrintPreview();

Here, `CustomerName` column is displayed in grid. But it is excluded while printing.

![WPF DataGrid Printing with Hidden Column](Printing_images/wpf-datagrid-hidden-column.png)
![WPF DataGrid Printing with Hidden Column](printing_images/wpf-datagrid-hidden-column.png)

### Customize the header text while printing

Expand Down Expand Up @@ -526,7 +526,7 @@ dataGrid.ShowPrintPreview();

Here, OrderID column Header text is changed as `Order ID` while printing.

![Customizing Column Header Text while Printing in WPF DataGrid](Printing_images/wpf-datagrid-header-text-customization.png)
![Customizing Column Header Text while Printing in WPF DataGrid](printing_images/wpf-datagrid-header-text-customization.png)

### Styling Rows when AllowPrintByDrawing enabled

Expand Down Expand Up @@ -572,7 +572,7 @@ dataGrid.ShowPrintPreview();
{% endhighlight %}
{% endtabs %}

![Customizing Row Style while Printing in WPF DataGrid](Printing_images/wpf-datagrid-row-style-customization.png)
![Customizing Row Style while Printing in WPF DataGrid](printing_images/wpf-datagrid-row-style-customization.png)

### Styling Rows when AllowPrintByDrawing disabled

Expand Down Expand Up @@ -616,7 +616,7 @@ dataGrid.ShowPrintPreview();
{% endtabs %}


![Customizing Row Style while Printing in WPF DataGrid](Printing_images/wpf-datagrid-printing-with-row-style.png)
![Customizing Row Style while Printing in WPF DataGrid](printing_images/wpf-datagrid-row-style.png)

<table>
<tr>
Expand Down Expand Up @@ -715,7 +715,7 @@ dataGrid.ShowPrintPreview();
{% endtabs %}


![Changing Alternate Row Style while Printing in WPF DataGrid](Printing_images/wpf-datagrid-alternate-row-style.png)
![Changing Alternate Row Style while Printing in WPF DataGrid](printing_images/wpf-datagrid-alternate-row-style.png)

### Setup alternate row style when AllowPrintByDrawing disabled

Expand Down Expand Up @@ -754,7 +754,7 @@ dataGrid.ShowPrintPreview();
{% endtabs %}


![Changing Alternate Row Style while Printing in WPF DataGrid](Printing_images/wpf-datagrid-with-alternate-row-style.png)
![Changing Alternate Row Style while Printing in WPF DataGrid](printing_images/wpf-datagrid-with-alternate-row-style.png)

### Styling Columns when AllowPrintByDrawing enabled

Expand Down Expand Up @@ -803,7 +803,7 @@ dataGrid.ShowPrintPreview();
{% endhighlight %}
{% endtabs %}

![Changing Column Style while Printing in WPF DataGrid](Printing_images/wpf-datagrid-printing-with-column-style.png)
![Changing Column Style while Printing in WPF DataGrid](printing_images/wpf-datagrid-column-style.png)

Here, OrderID column Font Style and Background are changed.

Expand Down Expand Up @@ -843,7 +843,7 @@ dataGrid.ShowPrintPreview();
{% endtabs %}


![Changing Column Style while Printing in WPF DataGrid](Printing_images/wpf-datagrid-column-style.png)
![Changing Column Style while Printing in WPF DataGrid](printing_images/wpf-datagrid-column-style.png)


N> [GetColumnWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html#Syncfusion_UI_Xaml_Grid_PrintManagerBase_GetColumnWidth_System_String_) , [GetColumnTextWrapping](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html#Syncfusion_UI_Xaml_Grid_PrintManagerBase_GetColumnTextWrapping_System_String_), [GetColumnTextAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html#Syncfusion_UI_Xaml_Grid_PrintManagerBase_GetColumnTextAlignment_System_String_) and [GetColumnPadding](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html#Syncfusion_UI_Xaml_Grid_PrintManagerBase_GetColumnPadding_System_String_) methods are also used for column customization while printing.
Expand Down Expand Up @@ -898,7 +898,7 @@ dataGrid.ShowPrintPreview();
{% endtabs %}


![Printing Selected Rows in WPF DataGrid](Printing_images/wpf-datagrid-print-selected-rows.png)
![Printing Selected Rows in WPF DataGrid](printing_images/wpf-datagrid-print-selected-rows.png)


## Creating custom PrintPreview window
Expand Down Expand Up @@ -969,6 +969,6 @@ this.PrintPreviewArea.PrintManagerBase.Print();
{% endcapture %}
{{ codesnippet5 | OrderList_Indent_Level_1 }}

![Custom Print Preview Window in WPF DataGrid](Printing_images/wpf-datagrid-custom-print-preview-window.png)
![Custom Print Preview Window in WPF DataGrid](printing_images/wpf-datagrid-custom-print-preview-window.png)

You can get the sample for custom print preview [here](https://www.syncfusion.com/downloads/support/directtrac/general/CUSTOM~1272396097.ZIP).
14 changes: 7 additions & 7 deletions wpf/DataGrid/Row-Height-Customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{% endhighlight %}
{% endtabs %}

![Customizing Particular Row Height in WPF DataGrid](Row-Height-Customization_images/wpf-datagrid-row-height-customization.png)
![Customizing Particular Row Height in WPF DataGrid](row-height-customization_images/wpf-datagrid-customizing-row-height.png)

## QueryRowHeight event

Expand Down Expand Up @@ -95,7 +95,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{% endhighlight %}
{% endtabs %}

![Changing Specific Row Height in WPF DataGrid](Row-Height-Customization_images/wpf-datagrid-change-row-height.png)
![Changing Specific Row Height in WPF DataGrid](row-height-customization_images/wpf-datagrid-change-row-height.png)

### Limitations

Expand Down Expand Up @@ -149,7 +149,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)

Here, row heights are customized based on the large text content.

![AutoFit RowHeight in WPF DataGrid](Row-Height-Customization_images/wpf-datagrid-auto-fit-row-height.png)
![AutoFit RowHeight in WPF DataGrid](row-height-customization_images/wpf-datagrid-auto-fit-row-height.png)

#### GridRowSizingOptions

Expand Down Expand Up @@ -197,7 +197,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)

Here `CustomerID` and `Country` columns are excluded from height calculation and the row height is calculated based on `CustomerName` column only.

![AutoFit RowHeight for Specific Columns in WPF DataGrid](Row-Height-Customization_images/wpf-datagrid-autofit-height-based-on-column.png)
![AutoFit RowHeight for Specific Columns in WPF DataGrid](row-height-customization_images/wpf-datagrid-autofit-height-based-on-column.png)

## Reset Row Height at runtime

Expand Down Expand Up @@ -326,7 +326,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{% endhighlight %}
{% endtabs %}

![AutoFit Header RowHeight based on Content in WPF DataGrid](Row-Height-Customization_images/wpf-datagrid-header-row-height.png)
![AutoFit Header RowHeight based on Content in WPF DataGrid](row-height-customization_images/wpf-datagrid-header-row-height.png)

## Change StackedHeaderRow Height based on its content

Expand Down Expand Up @@ -384,7 +384,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{% endhighlight %}
{% endtabs %}

![AutoFit Stacked HeaderRow Height based on Content in wpf datagrid](Row-Height-Customization_images/wpf-datagrid-stacked-header-row-height.png)
![AutoFit Stacked HeaderRow Height based on Content in wpf datagrid](row-height-customization_images/wpf-datagrid-stacked-header-row-height.png)

## Change TableSummaryRow Height

Expand All @@ -408,5 +408,5 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{% endhighlight %}
{% endtabs %}

![Customizing TableSummaryRow Height in WPF DataGrid](Row-Height-Customization_images/wpf-datagrid-table-summary-row-height.png)
![Customizing TableSummaryRow Height in WPF DataGrid](row-height-customization_images/wpf-datagrid-table-summary-row-height.png)

Loading