Skip to content

Updated Getting started md files for WPF controls #2440

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

Open
ushasundarajan wants to merge 3 commits into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

Updated Getting started md files for WPF controls #2440

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
7c33fb9
Updated Getting started md files for WPf controls
ushasundarajan Jul 28, 2026
2569568
resolved CI issues
ushasundarajan Jul 28, 2026
9b12fbf
removed redundant changes
ushasundarajan Jul 28, 2026
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
79 changes: 50 additions & 29 deletions wpf/DataPager/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,37 +9,55 @@ documentation: ug

# Getting Started with WPF DataPager (SfDataPager)

This section describes about the assembly that is required for SfDataPagerControl in your WPF application.The following assemblies are required in your application.


This section describes the assemblies that are required for the `SfDataPager` control in your WPF application. The following assemblies are required in your application.

<table>
<tr>
<th>
Demanded Assemblies</th><th>
Description</th></tr>
Required Assemblies
</th>
<th>
Description
</th>
</tr>
<tr>
<td>
Syncfusion.SfGrid.WPF</td><td>
Covers the SfDataPager and other elements.</td></tr>
Syncfusion.SfGrid.WPF
</td>
<td>
Contains the SfDataPager control and related UI components.
</td>
</tr>
</table>


When you use SfDataPager in the SfDataGrid, You need to add the following assembles with the default assembles.
When you use SfDataPager with SfDataGrid, you need to add the following assemblies along with the default assemblies.

<table>
<tr>
<th>
Demanded Assemblies</th><th>
Description</th></tr>
Required Assemblies
</th>
<th>
Description
</th>
</tr>
<tr>
<td>
Syncfusion.Data.WPF</td><td>
Covers basic processing on data like sorting, grouping, and filtering.</td></tr>
Syncfusion.Data.WPF
</td>
<td>
Contains base classes for data operations (sorting, grouping, filtering).
</td>
</tr>
<tr>
<td>
Syncfusion.Shared.WPF</td><td>
Covers an editors like CurrencyTextBox, PercentEdit, DateTimeEdit.</td></tr>
Syncfusion.Shared.WPF
</td>
<td>
Contains editor controls used in data cells (CurrencyTextBox, PercentEdit, DateTimeEdit).
</td>
</tr>
</table>


Expand All @@ -56,30 +74,33 @@ The following screenshot describes the elements of the DataPager control.
* LastPageButton: Moves the current page index to the last page and displays the last page data.
* NextPageButton: Moves the current page index to the next page and displays the next page data.
* NumericButtons: Denotes the available pages. You can directly navigate to the page by clicking the corresponding button.
* EllipsisButton: Displayed when AutoEllipsis mode is set. This button displays the next set of numeric page buttons are displayed.
* EllipsisButton: Displayed when `AutoEllipsis` mode is set. This button displays the next set of numeric page buttons.



## Create Simple Application with SfDataPager

The following steps help you to use the SfDataPager in an application:

1. Create a new WPF application
2. Open a VisualStudio toolbox. Navigate to SyncfusionControls and drag the SfDataPager to the design window.
### Option A: Add Control via Designer

1. Create a new WPF application in Visual Studio.

2. Open the Visual Studio toolbox and locate **SyncfusionControls**. Drag **SfDataPager** to the design window.

![Displaying the WPF SfDataPager control in designer](getting-started_images/wpf-datapager-designer.png)

3. When you drag SfDataPager to the window, the required assembly references are automatically added to your project.

### Option B: Add Control Manually in XAML

3. When you drag the SfDataPager to the window, it automatically adds the required references to the current application.To add the SfDataPager using code, you can add the following assemblies to the project.

*Syncfusion.Data.WPF

*Syncfusion.SfGrid.WPF
1. Create a new WPF application in Visual Studio.

4. You can either drag the control from Visual Studio or Expression Blend, or add the control to your project manually. You need to add the namespace to make use of SfDataPager in your application.
2. Add the following required assemblies to the project:
- Syncfusion.SfGrid.WPF
- Syncfusion.Data.WPF (if using SfDataPager with SfDataGrid)

3. Add the SfDataPager namespace to your XAML page and declare the control.

{% capture codesnippet1 %}
{% tabs %}
Expand All @@ -102,7 +123,7 @@ The following steps help you to use the SfDataPager in an application:
{% endcapture %}
{{ codesnippet1 | OrderList_Indent_Level_1 }}

5. Create Business object class named as OrderInfo
4. Create a business object class named `OrderInfo`.

{% capture codesnippet2 %}
{% tabs %}
Expand Down Expand Up @@ -159,7 +180,7 @@ public class OrderInfo
{% endcapture %}
{{ codesnippet2 | OrderList_Indent_Level_1 }}

6. Add the following code in ViewModel class
5. Add the following code in the `ViewModel` class.

{% capture codesnippet3 %}
{% tabs %}
Expand Down Expand Up @@ -199,7 +220,7 @@ public class ViewModel
{% endcapture %}
{{ codesnippet3 | OrderList_Indent_Level_1 }}

7. Set the ViewModel instance as DataContext to window. Now, you can bind the data collection to the SfDataPagerSource property.
6. Set the ViewModel instance as the DataContext of the window. Now, you can bind the data collection to the [Source](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_Source) property of `SfDataPager`.

{% capture codesnippet4 %}
{% tabs %}
Expand All @@ -220,13 +241,13 @@ public class ViewModel
{% endcapture %}
{{ codesnippet4 | OrderList_Indent_Level_1 }}

8. Then bind the PagedSource property of the SfDataPager control into the SfDataGridItemsSource property.
7. Then bind the [PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) property of the `SfDataPager` control to the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property of `SfDataGrid`. The `sfGrid` namespace below points to the `Syncfusion.UI.Xaml.Grid` namespace in the `Syncfusion.SfGrid.WPF` assembly.

{% capture codesnippet5 %}
{% tabs %}
{% highlight xaml %}
<Window.DataContext>
<local:Viewmodel/>
<local:ViewModel/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
Expand All @@ -246,7 +267,7 @@ public class ViewModel
{% endcapture %}
{{ codesnippet5 | OrderList_Indent_Level_1 }}

The following screenshot displays the output for Implementation of the SfDataPager in the SfDataGrid Control.
The following screenshot displays the output for the implementation of the SfDataPager in the SfDataGrid control.


![Displaying the WPF SfDataPager in the SfDataGrid Control ](getting-started_images/wpf-datapager-displayed-in-datagrid-control.png)
Expand Down
40 changes: 21 additions & 19 deletions wpf/GridControl/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ Instead of adding it through a designer such a Visual Studio, you can add the Gr

![WPF Grid Control Assembly References](Getting-Started_images/Getting-Started_img9.png)

3. Name the root Grid as layoutRoot in the application’s XAML page.
3. Name the root Grid as `layoutRoot` in the application's XAML page.

{% capture codesnippet1 %}
{% tabs %}
Expand All @@ -69,29 +69,31 @@ Instead of adding it through a designer such a Visual Studio, you can add the Gr
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid Name="layoutRoot" />  
<Grid Name="layoutRoot" />
</Window>
{% endhighlight %}
{% endtabs %}
{% endcapture %}
{{ codesnippet1 | OrderList_Indent_Level_1 }}
      
4. Create ScrollViewer and GridControl in code.
4. Include the `Syncfusion.Windows.Controls.Grid` namespace in the code-behind file, then create the ScrollViewer and the GridControl in code.

5. To add the grid to the view, add GridControl as content of ScrollViewer and then add the ScrollViewer as a child of layoutRoot (Grid).
5. To add the grid to the view, add the GridControl as the content of the ScrollViewer and then add the ScrollViewer as a child of `layoutRoot` (Grid).

{% capture codesnippet2 %}
{% tabs %}
{%highlight c#%}
{% highlight c# %}
using Syncfusion.Windows.Controls.Grid;

//ScrollViewer defined here
ScrollViewer ScrollViewer = new ScrollViewer();
//GridControl defined here
GridControl gridControl = new GridControl();
ScrollViewer ScrollViewer = new ScrollViewer();
//GridControl defined here
GridControl gridControl = new GridControl();
//GridControl set as the content of the ScrollViewer
ScrollViewer.Content = gridControl;     
//To bring the Grid control to the view, ScrollViewer should be set as a child of LayoutRoot      
this.layoutRoot.Children.Add(ScrollViewer);           
{%endhighlight%}
ScrollViewer.Content = gridControl;
//To bring the Grid control to the view, ScrollViewer should be set as a child of LayoutRoot
this.layoutRoot.Children.Add(ScrollViewer);
{% endhighlight %}
{% endtabs %}
{% endcapture %}
{{ codesnippet2 | OrderList_Indent_Level_1 }}
Expand All @@ -104,7 +106,7 @@ The Grid control is a cell-based control, so to populate it, RowCount and Column

{% capture codesnippet3 %}
{% tabs %}
{%highlight c#%}
{% highlight c# %}
//Specifying row and column count
gridControl.Model.RowCount = 100;
gridControl.Model.ColumnCount = 20;
Expand All @@ -117,17 +119,17 @@ for (int i = 0; i < 100; i++)
gridControl.Model[i, j].CellValue = string.Format("{0}/{1}", i, j);
    }
}
{%endhighlight%}
{% endhighlight %}
{% endtabs %}
{% endcapture %}
{{ codesnippet3 | OrderList_Indent_Level_1 }}


2. You can populate data by handling the QueryCellInfo event of gridControl. This will load the data in and on-demand basis, ensuring optimized performance.
2. You can populate data by handling the `QueryCellInfo` event of gridControl. This will load the data on an on-demand basis, ensuring optimized performance.

{% capture codesnippet4 %}
{% tabs %}
{%highlight c#%}
{% highlight c# %}
//Specifying row and column count
gridControl.Model.RowCount = 100;
gridControl.Model.ColumnCount = 20;
Expand All @@ -139,12 +141,12 @@ void gridControl_QueryCellInfo(object sender, Syncfusion.Windows.Controls.Gri
e.Style.CellValue=string.Format("{0}/{1}", e.Cell.RowIndex, e.Cell.ColumnIndex);

}   
{%endhighlight%}
{% endhighlight %}
{% endtabs %}
{% endcapture %}
{{ codesnippet4 | OrderList_Indent_Level_1 }}

3.Now, run the application. The grid will appear as follows.
3. Now, run the application. The grid will appear as follows.

![WPF Grid Control](Getting-Started_images/Getting-Started_img10.png)

Expand Down
42 changes: 28 additions & 14 deletions wpf/Multi-Column-DropDown/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ documentation: ug
---

# Getting Started with WPF Multi Column Dropdown (SfMultiColumnDropDown)
SfMultiColumnDropDownControl displays multiple columns in dropdown by embedding SfDataGrid control for rich look up selection.

The `SfMultiColumnDropDownControl` displays multiple columns in a dropdown by embedding the `SfDataGrid` control for rich look-up selection.

Features,

Expand All @@ -18,7 +19,7 @@ Features,
* Ability to customize popup width, height and resize at runtime
* Editor can be Read-only

You can [refer here](http://help.syncfusion.com/wpf/sfdatagrid/overview) to know more about `SfDataGrid`.
You can [refer here](https://help.syncfusion.com/wpf/sfdatagrid/overview) to know more about `SfDataGrid`.

![MultiColumnDropDown - Getting Started](Getting-Started_images/Getting-Started_img1.png)

Expand Down Expand Up @@ -70,7 +71,7 @@ In this walk through, you will create WPF application that contains `SfMultiColu

### Creating the project

Create new WPF Project in Visual Studio to display SfMultiColumnDropDownControl with data objects.
Create a new WPF project in Visual Studio to display `SfMultiColumnDropDownControl` with data objects.

### Adding control via Designer

Expand All @@ -80,13 +81,13 @@ SfMultiColumnDropDownControl can be added to the application by dragging it from

### Adding control manually in XAML

In order to add control manually in XAML, do the below steps,
To add the control manually in XAML, follow these steps:

1. Add the below required assembly references to the project,
* Syncfusion.Data.WPF
* Syncfusion.SfGrid.WPF
2. Import Syncfusion<sup>®</sup> WPF schema **http://schemas.syncfusion.com/wpf** or SfMultiColumnDropDownControl namespace **Syncfusion.UI.Xaml.Grid** in XAML page.
3. Declare `SfMultiColumnDropDownControl` in XAML page.
2. Import Syncfusion<sup>®</sup> WPF schema **http://schemas.syncfusion.com/wpf** or `SfMultiColumnDropDownControl` namespace **Syncfusion.UI.Xaml.Grid** in the XAML page.
3. Declare `SfMultiColumnDropDownControl` in the XAML page.

{% capture codesnippet1 %}
{% tabs %}
Expand All @@ -108,16 +109,25 @@ In order to add control manually in XAML, do the below steps,

### Adding control manually in C#

In order to add the control manually in C#, do the below steps,
To add the control manually in C#, follow these steps:

1. Add the below required assembly references to the project,
* Syncfusion.Data.WPF
* Syncfusion.SfGrid.WPF
2. Import SfMultiColumnDropDownControl namespace Syncfusion.UI.Xaml.Grid.
3. Create `SfMultiColumnDropDownControl` instance and add it to the Page.
2. Import `SfMultiColumnDropDownControl` namespace **Syncfusion.UI.Xaml.Grid**.
3. Name the root container in the XAML page so the control can be added from code-behind. Then create a `SfMultiColumnDropDownControl` instance and add it as a child of that container.

{% capture codesnippet2 %}
{% tabs %}
{% highlight xaml %}
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="Root_Grid"/>
</Window>
{% endhighlight %}
{% highlight c# %}
using Syncfusion.UI.Xaml.Grid;

Expand Down Expand Up @@ -277,9 +287,13 @@ sfMultiColumn.ItemsSource = viewModel.Orders;

## Defining DisplayMember and ValueMember

[DisplayMember](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfMultiColumnDropDownControl.html#Syncfusion_UI_Xaml_Grid_SfMultiColumnDropDownControl_DisplayMember) denotes the path to a value on the data object for visual presentation of the selected object in editor and [ValueMember](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfMultiColumnDropDownControl.html#Syncfusion_UI_Xaml_Grid_SfMultiColumnDropDownControl_ValueMember) denotes the path to a value on the data object for [SelectedValue](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfMultiColumnDropDownControl.html#Syncfusion_UI_Xaml_Grid_SfMultiColumnDropDownControl_SelectedValue).
- **[DisplayMember](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfMultiColumnDropDownControl.html#Syncfusion_UI_Xaml_Grid_SfMultiColumnDropDownControl_DisplayMember)**: Specifies the property name to display in the text editor when an item is selected. This is what the user sees in the closed dropdown.

- **[ValueMember](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfMultiColumnDropDownControl.html#Syncfusion_UI_Xaml_Grid_SfMultiColumnDropDownControl_ValueMember)**: Specifies the property name to use as the [SelectedValue](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfMultiColumnDropDownControl.html#Syncfusion_UI_Xaml_Grid_SfMultiColumnDropDownControl_SelectedValue). This is typically used in data binding scenarios to capture the actual selected value.

Refer [here](http://help.syncfusion.com/wpf/sfmulticolumndropdown/data-binding) to know more about the `DisplayMember` and `ValueMember`.
**Example:** If `DisplayMember="OrderID"` and `ValueMember="OrderID"`, selecting an order shows its OrderID in the editor and returns that OrderID as the SelectedValue.

For more details, refer to the [SfMultiColumnDropDown Data Binding guide](https://help.syncfusion.com/wpf/sfmulticolumndropdown/data-binding).

## Defining Columns

Expand Down Expand Up @@ -310,11 +324,11 @@ sfMultiColumn.Columns.Add(new GridTextColumn() { MappingName = "Country" });
{% endhighlight %}
{% endtabs %}


## Editing and filtering
## Auto Complete and Filtering

SfMultiColumnDropDownControl provides support to auto append the text from `ItemsSource` when end-user edits in the TextBox by setting [AllowAutoComplete](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfMultiColumnDropDownControl.html#Syncfusion_UI_Xaml_Grid_SfMultiColumnDropDownControl_AllowAutoComplete) to `true`.
Also, it provides support to filter the items displayed in the drop-down based on text in the TextBox by setting[AllowIncrementalFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfMultiColumnDropDownControl.html#Syncfusion_UI_Xaml_Grid_SfMultiColumnDropDownControl_AllowIncrementalFiltering) ` to `true`.

Also, it provides support to filter the items displayed in the drop-down based on text entered in the TextBox by setting [AllowIncrementalFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfMultiColumnDropDownControl.html#Syncfusion_UI_Xaml_Grid_SfMultiColumnDropDownControl_AllowIncrementalFiltering) to `true`.

## Theme

Expand Down
Loading