diff --git a/xamarin-ios/Introduction/Overview.md b/xamarin-ios/Introduction/Overview.md deleted file mode 100644 index bd7e5b06..00000000 --- a/xamarin-ios/Introduction/Overview.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -layout: post -title: Overview of Syncfusion Essential Studio Xamarin.iOS products -description: Basic overview about the list of available features on Syncfusion Xamarin.iOS components and steps to use the guide. -platform: xamarin.ios -control: Overview -documentation: ug ---- - -# Welcome to Syncfusion Essential Studio for Xamarin.iOS - -Essential Studio for Xamarin.iOS is a comprehensive collection of enterprise-grade Xamarin.iOS components for building modern Mobile applications. It includes all the UI controls that are typically required for building line-of-business (LOB) applications including Charts, DataGrid, Gauge, Maps and much more. - -## How to best read this user guide - -* The best way to read the User guide is to start with the Getting Started section of the documentation for the component that you need. The Getting Started guide gives information needed to know before writing the code. This is the only section recommended for end-to-end reading before writing the code. All the other information can be referred as and when needed. -* Now, that you are familiar with the basics of using the component, the next step would be to start integrating the component into your application. A good starting point would be to refer to the code examples in the sample browser. It is very likely that you would find a code example that resembles your intended usage scenario. -* After you have integrated the component into your application, it is likely that you would need additional information on specific features and API. Search the specific topic by using the search box available at the top of the user guide. -* Another valuable resource is the API reference that provides detailed information on the classes and its members. - -## Additional help resources - -The Knowledge Base section contains responses to some of the most common questions that other customers had asked in the past. You can search for topics that are not covered in the user guide. - -Similar to the Knowledge Base, the Forum section also contains responses to questions of other customers asked in the past. - -And, you can explore the release history of Essential Studio for Xamarin.iOS from [`here`](https://www.syncfusion.com/products/release-history/estudio/xamarin-ios). - -## Create a support incident - -In case, you are not able to find the information that you are looking for in the self-help resources mentioned above, then please contact us by creating a support ticket. \ No newline at end of file diff --git a/xamarin-ios/Introduction/System-Requirements.md b/xamarin-ios/Introduction/System-Requirements.md deleted file mode 100644 index f115d4b2..00000000 --- a/xamarin-ios/Introduction/System-Requirements.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -layout: post -title: System Requirements | Xamarin.iOS | Syncfusion -description: System Requirements -platform: xamarin.ios -control: System Requirements -documentation: ug ---- - -# System Requirements - - -### Hardware Environment - -* Processor: x86 or x64 -* RAM : 512 MB (minimum), 1 GB (recommended) -* Hard disk: up to 1.5 GB of available space may be required. However, 250 MB free space is required in boot drive even if you are installing the setup in other drive. - -### Development Environment -Please find the recommended development environment for Xamarin platform in the following link. - -[https://docs.microsoft.com/en-us/xamarin/cross-platform/get-started/requirements](https://docs.microsoft.com/en-us/xamarin/cross-platform/get-started/requirements) - -### Supported Platforms - - - - - - - - - - - - - - -
Platform
-
- Device Types -
-
-
- Controls -
-
-
- Supported versions -
-
-
- iOS -
-
-
- iPhone, iPod, iPad -
-
-
- All controls -
-
-
- iOS 9.0 and later versions -
-
-
diff --git a/xamarin-ios/Release-Notes/v13.3.0.7.md b/xamarin-ios/Release-Notes/v13.3.0.7.md deleted file mode 100644 index 8ae257f1..00000000 --- a/xamarin-ios/Release-Notes/v13.3.0.7.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title : Essential Studio 2015 Vol 3 Release Notes -description : Essential Studio 2015 Vol 3 Release Notes -platform : xamarin.iOS ---- - -# Essential Studio for Xamarin.iOS Release Notes - -{% include release-info.html date="October 1, 2015" version="v13.3.0.7" %} - -{% directory path: _includes/release-notes/v13.3.0.7 %} - - -{% include {{file.url}} %} - -{% enddirectory %} \ No newline at end of file diff --git a/xamarin-ios/Release-Notes/v13.4.0.53.md b/xamarin-ios/Release-Notes/v13.4.0.53.md deleted file mode 100644 index ad7f135d..00000000 --- a/xamarin-ios/Release-Notes/v13.4.0.53.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title : Essential Studio 2015 Vol 4 Release Notes -description : Essential Studio 2015 Vol 4 Release Notes -platform : xamarin.iOS ---- - -# Essential Studio for Xamarin.iOS Release Notes - -{% include release-info.html date="January 13, 2016" version="v13.4.0.53" %} - -{% directory path: _includes/release-notes/v13.4.0.53 %} - - -{% include {{file.url}} %} - -{% enddirectory %} \ No newline at end of file diff --git a/xamarin-ios/Release-Notes/v13.4.0.58.md b/xamarin-ios/Release-Notes/v13.4.0.58.md deleted file mode 100644 index 0482cde2..00000000 --- a/xamarin-ios/Release-Notes/v13.4.0.58.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title : Essential Studio for Xamarin.iOS 2015 Vol 4 (Service Pack 1) Release Notes -description : Essential Studio for Xamarin.iOS 2015 Vol 4 (Service Pack 1) Release Notes -platform : xamarin.iOS ---- - -# Essential Studio for Xamarin.iOS Release Notes - -{% include release-info.html date="February 12, 2016" version="v13.4.0.58" %} - -{% directory path: _includes/release-notes/v13.4.0.58 %} - -{% include {{file.url}} %} - -{% enddirectory %} \ No newline at end of file diff --git a/xamarin-ios/Release-Notes/v13.4.0.63.md b/xamarin-ios/Release-Notes/v13.4.0.63.md deleted file mode 100644 index 41b15d87..00000000 --- a/xamarin-ios/Release-Notes/v13.4.0.63.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title : Essential Studio for Xamarin.iOS 2015 Vol 4 Service Pack 2 Release Notes -description : Essential Studio for Xamarin.iOS 2015 Vol 4 Service Pack 2 Release Notes -platform : xamarin.iOS ---- - -# Essential Studio for Xamarin.iOS Release Notes - -{% include release-info.html date="March 4, 2016" version="v13.4.0.63" %} - -{% directory path: _includes/release-notes/v13.4.0.63 %} - -{% include {{file.url}} %} - -{% enddirectory %} \ No newline at end of file diff --git a/xamarin-ios/Release-Notes/v14.1.0.41.md b/xamarin-ios/Release-Notes/v14.1.0.41.md deleted file mode 100644 index 5f416c38..00000000 --- a/xamarin-ios/Release-Notes/v14.1.0.41.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Essential Studio for Xamarin.iOS 2016 Volume 1 Release Notes -description: Essential Studio for Xamarin.iOS 2016 Volume 1 Release Notes -platform: Xamarin.iOS -documentation: ug ---- - -# Essential Studio for Xamarin.iOS Release Notes - -{% include release-info.html date="April 5, 2016" version="v14.1.0.41" %} - - -{% directory path: _includes/release-notes/v14.1.0.41 %} - -{% include {{file.url}} %} - -{% enddirectory %} \ No newline at end of file diff --git a/xamarin-ios/SfBarcode/Barcode-Customization.md b/xamarin-ios/SfBarcode/Barcode-Customization.md deleted file mode 100644 index c8e4800b..00000000 --- a/xamarin-ios/SfBarcode/Barcode-Customization.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -layout: post -title: Barcode Customization | SfBarcode | iOS | Syncfusion -description: barcode customization -platform: xamarin.iOS -control: SfBarcode -documentation: ug ---- - -# Barcode Customization - -## Bar Customization - -The color of the Barcode can be customized by using the properties of `DarkBarColor` and `LightBarColor` in the SfBarcode. - -The `DarkBarColor` represents the color of the dark bar (Black color by default) and the `LightBarColor` represents the color of the gap between two adjacent black bars (White color by default). - - -{% highlight c# %} - - //Changes the color of darker area of Barcode. - barcode.DarkBarColor = UIColor.Blue; - //Changes the color of lighter area of Barcode. - barcode.LightBarColor = UIColor.Yellow; - -{% endhighlight %} - -![](Barcode-Customization_images/Barcode-Customization_img1.png) - -Barcode with bar color customization -{:.caption} - - ->**NOTE** The `DarkBarColor` and `LightBarColor` customizations are applicable only for one dimensional Barcodes. In order, to recognize a Barcode symbol by a scanner, there must be an adequate contrast between the dark bars and the light spaces. All the Barcode scanners do not have support for colored Barcodes. - -## Text Customization - -The text representing the Barcode can be customized by using the following properties. - -* The color of text can be altered by using the `TextColor` property. -* The horizontal alignment of text can be customized with the help of the `TextAlignment` property. -* The gap between Barcode and text can be adjusted by setting property of `TextGapHeight`. -* To change the location of text vertically, you can make use of the `TextLocation` property with options of top and bottom location. - -{% highlight c# %} - - barcode.TextColor = UIColor.Blue; - barcode.TextFont = UIFont.BoldSystemFontOfSize (30); - barcode.TextGapHeight = 20; - barcode.TextLocation = SFBarcodeTextLocation.SFBarcodeTextLocationBottom; - barcode.TextAlignment =SFBarcodeTextAlignment.SFBarcodeTextAlignmentCenter; - -{% endhighlight %} - -![](Barcode-Customization_images/Barcode-Customization_img3.png) - -Barcode with text customization -{:.caption} diff --git a/xamarin-ios/SfBarcode/Barcode-Customization_images/Barcode-Customization_img1.png b/xamarin-ios/SfBarcode/Barcode-Customization_images/Barcode-Customization_img1.png deleted file mode 100644 index 0fdc40ba..00000000 Binary files a/xamarin-ios/SfBarcode/Barcode-Customization_images/Barcode-Customization_img1.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Barcode-Customization_images/Barcode-Customization_img2.jpeg b/xamarin-ios/SfBarcode/Barcode-Customization_images/Barcode-Customization_img2.jpeg deleted file mode 100644 index eabe58f7..00000000 Binary files a/xamarin-ios/SfBarcode/Barcode-Customization_images/Barcode-Customization_img2.jpeg and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Barcode-Customization_images/Barcode-Customization_img3.png b/xamarin-ios/SfBarcode/Barcode-Customization_images/Barcode-Customization_img3.png deleted file mode 100644 index 60843ced..00000000 Binary files a/xamarin-ios/SfBarcode/Barcode-Customization_images/Barcode-Customization_img3.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Getting-Started.md b/xamarin-ios/SfBarcode/Getting-Started.md deleted file mode 100644 index 339ecca9..00000000 --- a/xamarin-ios/SfBarcode/Getting-Started.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: post -title: Getting Started | SfBarcode | iOS | Syncfusion -description: getting started -platform: xamarin.iOS -control: SfBarcode -documentation: ug ---- - -# Getting Started - -## Create your first Barcode in Xamarin.iOS - -This section explains how to configure a Barcode for iOS application by using Xamarin.iOS. To get started with the Essential Barcode, refer to the following steps and in result, you get the output on iOS devices as follows. - -![](Getting-Started_images/Getting-Started_img1.png) -QR Barcode output -{:.caption} - -### Configure the Barcode control - -The following steps explain you how to create and configure a Barcode. - -1. Add reference to the SfBarcode in view controller as follows. - -After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders, typically: {Syncfusion Installed location}\Essential Studio{version number}\lib -You have to add the following assembly reference to the iOS unified project ios-unified \ Syncfusion.SfBarcode.iOS.dll - -N> Assemblies are available in unzipped package location in Mac. - -2.Create an instance of SfBarcode in view controller and add it as sub view in viewDidLoad override method. - - -{% highlight c# %} - - public override void ViewDidLoad () - { - base.ViewDidLoad (); - SFBarcode barcode = new SFBarcode (); - this.View.AddSubview (barcode); - } - -{% endhighlight %} - -3.Then you can assign the text that you want to encode. - -{% highlight c# %} - - barcode.Text = (NSString)"www.wikipedia.org"; - -{% endhighlight %} - -4.Specify the required symbology to encode the given text. By default, the given text is encoded by using the `Code39` symbology. - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeQRCode; - -{% endhighlight %} - -5.To customize the Barcode, initialize the settings of the corresponding Barcode symbology. - -{% highlight c# %} - - SFQRBarcodeSettings settings = new SFQRBarcodeSettings (); - settings.XDimension = 6; - barcode.SymbologySettings = settings; - -{% endhighlight %} - -6.Finally, the Barcode is generated as displayed in the screenshot by using the following code example. - -{% highlight c# %} - - public override void ViewDidLoad () - { - base.ViewDidLoad (); - SFBarcode barcode = new SFBarcode (); - barcode.Text = (NSString)"www.wikipedia.org"; - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeQRCode; - SFQRBarcodeSettings settings = new SFQRBarcodeSettings (); - settings.XDimension = 6; - barcode.SymbologySettings = settings; - this.View.AddSubview (barcode); - } - -{% endhighlight %} - - ![](Getting-Started_images/Getting-Started_img2.png) - Final output of iOS getting started application - {:.caption} diff --git a/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img1.png b/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img1.png deleted file mode 100644 index 19226637..00000000 Binary files a/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img1.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img2.png b/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img2.png deleted file mode 100644 index 19226637..00000000 Binary files a/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img2.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img3.png b/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img3.png deleted file mode 100644 index 19226637..00000000 Binary files a/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img3.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img4.png b/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img4.png deleted file mode 100644 index 19226637..00000000 Binary files a/xamarin-ios/SfBarcode/Getting-Started_images/Getting-Started_img4.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Overview.md b/xamarin-ios/SfBarcode/Overview.md deleted file mode 100644 index 27f5cbe6..00000000 --- a/xamarin-ios/SfBarcode/Overview.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -layout: post -title: SfBarcode | SfBarcode | iOS | Syncfusion -description: Overview of SfBarcode control for Xamarin.iOS -platform: xamarin.iOS -control: SfBarcode -documentation: ug ---- - -# SfBarcode - -Essential Barcode for iOS provides a perfect approach to encode texts by using supported symbol types that comprises one dimensional Barcodes and two dimensional Barcodes. The basic structure of a Barcode consists of one or more data characters, optionally one or two check characters, a start pattern as well as a stop pattern. - -![Overview of Barcode for Xamarin.iOS](Overview_images/Overview_img1.png) - -iOS device with 1D & 2D Barcodes -{:.caption} - diff --git a/xamarin-ios/SfBarcode/Overview_images/Overview_img1.png b/xamarin-ios/SfBarcode/Overview_images/Overview_img1.png deleted file mode 100644 index 210a8f94..00000000 Binary files a/xamarin-ios/SfBarcode/Overview_images/Overview_img1.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies.md b/xamarin-ios/SfBarcode/Supported-Symbologies.md deleted file mode 100644 index 8caa5fdd..00000000 --- a/xamarin-ios/SfBarcode/Supported-Symbologies.md +++ /dev/null @@ -1,242 +0,0 @@ ---- -layout: post -title: Supported Symbologies | SfBarcode | iOS | Syncfusion -description: supported symbologies -platform: xamarin.iOS -control: SfBarcode -documentation: ug ---- - -# Supported Symbologies - -Essential Barcode supports 10 variants of one dimensional and 2 variants of two dimensional Barcodes that are illustrated as follows. - -## One Dimensional Barcodes - -One dimensionalBarcode is also called as linear Barcode. The bars and spaces signified for each symbol in one dimensional Barcodes are grouped in such a way to represent a specific ASCII character. - -* Codabar -* Code 11 -* Code 32 -* Code 39 -* Code 39 Extended -* Code 93 -* Code 93 Extended -* Code 128A -* Code 128B -* Code 128C - -### Codabar - -Codabar is a discrete numeric symbology that is used in libraries, blood banks and a variety of other information processing applications. - -* Encodes only numeric characters and some special characters like dash (-), colon (:), slash (/), plus (+). -* Each character has three bars and four spaces. -* Uses characters of A, B, C, D as start and stop characters. - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeCodaBar; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img1.png) -Codabar barcode -{:.caption} - -### Code 11 - -Code 11 symbology is used mainly for labeling telecommunications equipment and it has the following structure. - -* Allows character set of digits (0-9), dash (-). -* Each character is encoded with 3 bars and 2 spaces. -* Of these five elements, there may be two wide and three narrow elements or one wide and four narrow elements. - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeCode11; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img2.png) -Code 11 Barcode -{:.caption} - -### Code 32 - -Code32 is mainly used for coding pharmaceuticals, cosmetics and dietetics and it contains following structure: - -* Starts with 'A' character (ASCII 65) that is not really encoded. -* Encodes only the character set of length 8. -* One digit for Checksum module 10 that is automatically calculated. - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeCode32; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img3.png) -Code 32 Barcode -{:.caption} - -### Code 39 - -Code 39 is a symbology of Barcode that encodes alphanumeric characters into a series of bars. It may be of any length, although more than 25 characters really begin to push the bounds. This symbology is the only type of the Barcode in common use that does not require a checksum. - -* Allows character set of digits (0-9), upper case alphabets (A-Z), and symbols like space, minus (-), plus (+), period (.), dollar sign ($), slash (/), and percent (%). -* Always starts and ends with an asterisk (*) symbol, termed as start and stop character. -* Each character is encoded with 5 bars and 4 spaces where 3 are wide and 6 are narrow. - - - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeCode39; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img4.png) -Code 39 Barcode -{:.caption} - -### Code 39 Extended - -Code 39 Extended symbology is an extended version of Code 39 that supports full ASCII character set. So, it encodes lower case alphabets (a-z) as well as special characters in the keyboard. - - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeCode39Extended; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img5.png) -Code 39 Extended Barcode -{:.caption} - -### Code 93 - -Code 93 is designed to complement and improve upon Code 39. It represents the full ASCII character set by using the combination of 2 characters. It is a continuous, variable-length symbology and it produces denser code. - -* Encodes character set of uppercase alphabets (A-Z), digits (0-9), and special characters like asterisk (*), dash (-), dollar ($), percent (%), Space, dot (.), slash (/), and plus (+). -* The asterisk (*) is not a true encoding character, but it is the start and stop symbol for Code 93 symbology. - - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeCode93; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img6.png) -Code 93 Barcode -{:.caption} - -### Code 93 Extended - -Code 93 is designed to complement and improve upon Code 39. It represents the full ASCII character set by using the combination of 2 characters. It is a continuous, variable-length symbology and it produces denser code. - -* Encodes character set of uppercase alphabets (A-Z), digits (0-9), and special characters like asterisk (*), dash (-), dollar ($), percent (%), Space, dot (.), slash (/), and plus (+). -* The asterisk (*) is not a true encoding character, but it is the start and stop symbol for Code 93 symbology. - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeCode93Extended; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img7.png) -Code 93 Extended Barcode -{:.caption} - -### Code 128 - -Code 128 is a variable length, high density, alphanumeric, linear Barcode symbology. It is capable of encoding full ASCII character set and extended character sets. This symbol includes a checksum digit for verification and the Barcode may also be verified character-by-character for parity of each data byte. - -### Code 128 A - -Code 128 A (or Chars Set A) includes all of the standard upper case U.S. alphanumeric keyboard characters and punctuation characters together with the control characters, (characters with ASCII values from 0 to 95 inclusive), and seven special characters. - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeCode128A; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img8.png) - -Code 128A Barcode -{:.caption} - -### Code128 B - -Code 128 B (or Chars Set B) includes all the standard upper case alphanumeric keyboard characters and punctuation characters together with the lower case alphabetic characters (characters with ASCII values from 32 to 127 inclusive), and seven special characters. - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeCode128B; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img9.png) -Code 128B Barcode -{:.caption} - -### Code128 C - -Code 128 C (or Chars Set C) includes the set of 100 digit pairs from 00 to 99 inclusive, as well as three special characters. This allows numeric data to be encoded as two data digits per symbol character effectively twice the density of standard data. - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeCode128C; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img10.png) -Code 128C Barcode -{:.caption} - -### Code 128 Special characters: - -The last seven characters of Code Sets A and B (character values 96 - 102) and the last three characters of Code Set C (character values 100 - 102) are special non-data characters with no ASCII character equivalents that have particular significance to the Barcode reading device. - - ->**NOTE** When you specify that the data must be encoded by using Char Set C, then the number of characters after it must be even. - -## Two Dimensional Barcodes - -Two dimensional Barcode is a way to represent information by using two-dimensional approach. It is similar to one dimensional Barcode, but can represent more data per unit area. - -* QR Code -* Data Matrix - -### QR Code - -QR Code is a two dimensional symbology that is popularly used in automotive industry. It is known for fast readability and greater storage capacity. - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeQRCode; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img12.png) -QR Barcode -{:.caption} - -### Data Matrix - -DataMatrix symbology is widely used in printed media such as labels and letters. It can be read easily by a Barcode reader and also by mobile phones. It consists of a Grid of dark and light dots or blocks forming square or rectangular symbol. The data encoded in the Barcode can be either number or alphanumeric. - -{% highlight c# %} - - barcode.Symbology = SFBarcodeSymbolType.SFBarcodeSymbolTypeDataMatrix; - -{% endhighlight %} - -![](Supported-Symbologies_images/Supported-Symbologies_img13.png) -Data Matrix Barcode -{:.caption} - ->**NOTE** By default, the width of the quiet zone on all four sides of the Barcode is equal to the dimension of the blocks. \ No newline at end of file diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img1.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img1.png deleted file mode 100644 index 3c14b3b2..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img1.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img10.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img10.png deleted file mode 100644 index 9cc414e6..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img10.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img11.jpeg b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img11.jpeg deleted file mode 100644 index eabe58f7..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img11.jpeg and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img12.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img12.png deleted file mode 100644 index 863b8b01..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img12.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img13.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img13.png deleted file mode 100644 index fab8148b..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img13.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img14.jpeg b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img14.jpeg deleted file mode 100644 index eabe58f7..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img14.jpeg and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img2.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img2.png deleted file mode 100644 index fb5bc862..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img2.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img3.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img3.png deleted file mode 100644 index 55bf321f..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img3.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img4.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img4.png deleted file mode 100644 index 7da09622..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img4.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img5.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img5.png deleted file mode 100644 index 0755e172..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img5.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img6.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img6.png deleted file mode 100644 index 951f31ba..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img6.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img7.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img7.png deleted file mode 100644 index 8005f577..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img7.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img8.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img8.png deleted file mode 100644 index 6e56cfca..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img8.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img9.png b/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img9.png deleted file mode 100644 index 8a154c5a..00000000 Binary files a/xamarin-ios/SfBarcode/Supported-Symbologies_images/Supported-Symbologies_img9.png and /dev/null differ diff --git a/xamarin-ios/SfBarcode/Symbology-Settings.md b/xamarin-ios/SfBarcode/Symbology-Settings.md deleted file mode 100644 index a6759bbe..00000000 --- a/xamarin-ios/SfBarcode/Symbology-Settings.md +++ /dev/null @@ -1,429 +0,0 @@ ---- -layout: post -title: Symbology Settings | SfBarcode | iOS | Syncfusion -description: symbology settings -platform: xamarin.iOS -control: SfBarcode -documentation: ug ---- - -# Symbology Settings - - -Each and every Barcode symbology can be personalized with optional settings that may affect the appearance of specific Barcode. - - -## One Dimensional Barcode settings - - -One dimensional Barcodes can be customized by using the following properties and they are commonly used for all categories of supported one dimensional Barcodes. - -* By setting the `BarHeight` property, the height of linear bars can be changed. -* By setting the `NarrowBarWidth` property, the width ratio of wide and narrow bars can be customized. - -One dimensional Barcodes can also have error detection settings. - -* By enabling the `EncodeStartStopSymbols` property, start and stop symbols are added to signal a Barcode reader that a Barcode has been scanned. -* The `EnableCheckDigit` property enables or disables the redundancy check by using a check digit that is the decimal equivalent of a binary parity bit. -* With the help of `ShowCheckDigit` property, the check digit can be shown or hidden. - -The following code example shows how to change the settings of `Code39` linear Barcode. - -{% highlight c# %} - - SFCode39Settings settings = new SFCode39Settings(); - settings.BarHeight = 100; - settings.NarrowBarWidth = 2; - settings.EncodeStartStopSymbols = true; - settings.EnableCheckDigit = false; - settings.ShowCheckDigit = false; - -{% endhighlight %} - -Similarly, you can specify the settings of other linear Barcodes corresponding to specified symbology. - -## Two Dimensional Barcode Settings - -Two dimensional Barcodes are customized by using `XDimension` property that modifies its block size and it is commonly used for all kinds of supported two dimensional Barcodes. - -### Data Matrix Settings - -The Data Matrix symbology can be customized with the help of the following settings. - -{% highlight c# %} - - SFDataMatrixSettings settings = new SFDataMatrixSettings(); - settings.XDimension = 8; - settings.Size = SFBarcodeDataMatrixSize.SFBarcodeDataMatrixSizeAuto; - settings.Encoding = SFBarcodeDataMatrixEncoding.SFBarcodeDataMatrixEncodingAuto; - -{% endhighlight %} - -* The `Encoding` property is used to specify the encoding technique from enumeration of `SfDataMatrixEncoding` that contains encoding techniques such as ASCII, ASCIINumeric, Auto and Base256. -* The `Size` property allows the user to specify the size of the Barcode from a set of predefined sizes available in the `SFDataMatrixSize` enumeration. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-Data Matrix Size -Description
-Auto -Size is chosen based on the input data
-Size10x10 -Square matrix with 10 rows and 10 columns.
-Size12x12 -Square matrix with 12 rows and 12 columns.
-Size14x14 -Square matrix with 14 rows and 14 columns.
-Size16x16 -Square matrix with 16 rows and 16 columns.
-Size18x18 -Square matrix with 18 rows and 18 columns.
-Size20x20 -Square matrix with 20 rows and 20 columns.
-Size22x22 -Square matrix with 22 rows and 22 columns.
-Size24x24 -Square matrix with 24 rows and 24 columns.
-Size26x26 -Square matrix with 26 rows and 26 columns.
-Size32x32 -Square matrix with 32 rows and 32 columns.
-Size36x36 -Square matrix with 36 rows and 36 columns.
-Size40x40 -Square matrix with 40 rows and 40 columns.
-Size44x44 -Square matrix with 44 rows and 44 columns.
-Size48x48 -Square matrix with 48 rows and 48 columns.
-Size52x52 -Square matrix with 52 rows and 52 columns.
-Size64x64 -Square matrix with 64 rows and 64 columns.
-Size72x72 -Square matrix with 72 rows and 72 columns.
-Size80x80 -Square matrix with 80 rows and 80 columns.
-Size88x88 -Square matrix with 88 rows and 88 columns.
-Size96x96 -Square matrix with 96 rows and 96 columns.
-Size104x104 -Square matrix with 104 rows and 104 columns.
-Size120x120 -Square matrix with 120 rows and 120 columns.
-Size132x132 -Square matrix with 132 rows and 132 columns.
-Size144x144 -Square matrix with 144 rows and 144 columns.
-Size8x18 -Rectangular matrix with 8 rows and 18 columns.
-Size8x32 -Rectangular matrix with 8 rows and 32 columns.
-Size12x26 -Rectangular matrix with 12 rows and 26 columns.
-Size12x36 -Rectangular matrix with 12 rows and 36 columns.
-Size16x36 -Rectangular matrix with 16 rows and 36 columns.
-Size16x48 -Rectangular matrix with 16 rows and 48 columns.
- - -### QR Code Settings - -The Data Matrix symbology can be customized by using the following settings. - -{% highlight c# %} - - SFQRBarcodeSettings settings = new SFQRBarcodeSettings(); - settings.XDimension = 5; - settings.InputMode= SFBarcodeQRInputMode.SFBarcodeQRInputModeBinary; - settings.ErrorCorrectionLevel = SFBarcodeQRErrorCorrectionLevel.SFBarcodeQRErrorCorrectionLevelLow; - settings.Version = SFBarcodeQRVersion.SFBarcodeQRVersionAuto; - -{% endhighlight %} - -* The `Version` property allows you to set various types of version for QR code from SFQRVersion enumeration. By default, its value is set as Auto. - -SFQRVersion enumeration details - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-SFQRVersion -Description
-Version01 -Measures 21 x 21 modules
-Version02 -Measures 25 x 25 modules
-Version03 -Measures 29 x 29 modules
-Version04 -Measures 33 x 33 modules
-Version05 -Measures 37 x 37 modules
-Version06 -Measures 41 x 41 modules
-Version07 -Measures 45 x 45 modules
-Version08 -Measures 49 x 49 modules
-Version09 -Measures 53 x 53 modules
-Version10 -Measures 57 x 57 modules
-Version11 -Measures 61 x 61 modules
-Version12 -Measures 65 x 65 modules
-Version13 -Measures 69 x 69 modules
-Version14 -Measures 73 x 73 modules
-Version15 -Measures 77 x 77 modules
-Version16 -Measures 81 x 81 modules
-Version17 -Measures 85 x 85 modules
-Version18 -Measures 89 x 89 modules
-Version19 -Measures 93 x 93 modules
-Version20 -Measures 97 x 97 modules
-Version21 -Measures 101 x 101 modules
-Version22 -Measures 105 x 105 modules
-Version23 -Measures 109 x 109 modules
-Version24 -Measures 113 x 113 modules
-Version25 -Measures 117 x 117 modules
-Version26 -Measures 121 x 121 modules
-Version27 -Measures 125 x 125 modules
-Version28 -Measures 129 x 129 modules
-Version29 -Measures 133 x 133 modules
-Version30 -Measures 137 x 137 modules
-Version31 -Measures 141 x 141 modules
-Version32 -Measures 145 x 145 modules
-Version33 -Measures 149 x 149 modules
-Version34 -Measures 153 x 153 modules
-Version35 -Measures 157 x 157 modules
-Version36 -Measures 161 x 161 modules
-Version37 -Measures 165 x 165 modules
-Version38 -Measures 169 x 169 modules
-Version39 -Measures 173 x 173 modules
-Version40 -Measures 177 x 177 modules
- - -* The `ErrorCorrectionLevel` property employs error correction to generate a series of error correction code words that are added to the data code word sequence in order to enable the symbol to withstand damage without loss of data. By default, its value is set as Low. - - - - - - - - - - - - -
-Error Correction Level -Recovery Capacity % (approx.)
-Low -7
-Medium -15
-Quartile -25
-High -30
- - -* The `InputMode` property allows you to select specific set of input characters. You may select the most suitable input mode. By default, its value is set as Binary Mode. - - - - - - - - - - - -
-Input Mode -Possible characters
-NumericMode -0,1,2,3,4,5,6,7,8,9
-AlphanumericMode -0 to 9, A to Z, space, $, %, *, +, -,., /, :
-BinaryMode -Shift JIS characters
\ No newline at end of file diff --git a/xamarin-ios/SfCircularGauge/Getting-Started.md b/xamarin-ios/SfCircularGauge/Getting-Started.md deleted file mode 100755 index ce00bf98..00000000 --- a/xamarin-ios/SfCircularGauge/Getting-Started.md +++ /dev/null @@ -1,242 +0,0 @@ ---- - -layout: post -title: Getting Started | SfCircularGauge | iOS | Syncfusion -description: getting started -platform: xamarin.iOS -control: SfCircularGauge -documentation: ug - ---- - - -# Getting Started - -This section explains the steps required to configure the [`SFCircularGauge`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html), and also explains the steps required to add basic elements to [`SFCircularGauge`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html) through various APIs available within it. - - -## Create your first Circular Gauge in Xamarin.iOS - -Essential Gauge for Xamarin.iOS allows you to visualize numeric values over a circular scale. The appearance of the gauge can be fully customized to seamlessly integrate with your applications. -This section provides a quick overview for working with Essential Gauge for Xamarin.iOS. It walks through the entire process of creating a real world gauge. - -CircularGauge -{:.caption} - -### Reference Essential Studio Components in your Solution - -After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders, typically: -{Syncfusion Installed location}\Essential Studio{version number}\lib - -You have to add the following assembly reference to the iOS unified project -ios-unified \ Syncfusion.SfGauge.iOS.dll - -N> Assemblies are available in unzipped package location in Mac. - -### Adding namespace for the assemblies - -{% highlight c# %} - - using Syncfusion.SfGauge.iOS; - -{% endhighlight %} - - -## Initialize gauge - -You can initialize the [`SFCircularGauge`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html) control with a required optimal name by using the included namespace. - -{% highlight c# %} - - public override void ViewDidLoad() - { - base.ViewDidLoad(); - SFCircularGauge circularGauge = new SFCircularGauge(); - this.View.AddSubview(circularGauge); - } - -{% endhighlight %} - -## Initialize circular gauge from designer - -[`SFCircularGauge`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html) allows users to drag the control from toolbox to designer window. The properties window will be displayed where you change the necessary functionalities to customize the circular gauge in designer. - -![Xamarin.iOS CircularGauge Designer](getting-started_images/designer.gif) - -## Adding header - -You can assign a unique header to [`SFCircularGauge`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html) by using the [`SFGaugeHeader`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFGaugeHeader.html) property and position it by using the [`Position`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFGaugeHeader.html#Syncfusion_SfGauge_iOS_SFGaugeHeader_Position) property as you want. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - SFGaugeHeader header = new SFGaugeHeader(); - header.Text = (Foundation.NSString) "Speedometer"; - header.TextColor = UIColor.Black; - circularGauge.Headers.Add(header); - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -## Configuring scales - -You can configure the [`SFCircularScale`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html) elements by using following APIs, which are available in [`SFCircularGauge`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html): - -* `StartAngle` -* `SweepAngle` -* `StartValue` -* `EndValue` -* `Interval` -* `RimThickness` -* `RimColor` - -{% highlight c# %} - - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scales.Add(scale); - circularGauge.Scales = scales; - -{% endhighlight %} - -## Adding ranges - -You can add ranges to [`SFCircularGauge`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html) by creating ranges collection using the [`SFCircularRange`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html) property. - -{% highlight c# %} - - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scales.Add(scale); - circularGauge.Scales = scales; - SFCircularRange range = new SFCircularRange(); - range.StartValue = 0; - range.EndValue = 40; - scale.Ranges.Add(range); - -{% endhighlight %} - -## Adding a needle pointer - -Create a [`SFNeedlePointer`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFNeedlePointer.html), and associate it with a scale that is to be displayed the current value. - -{% highlight c# %} - - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scales.Add(scale); - circularGauge.Scales = scales; - SFNeedlePointer needlePointer = new SFNeedlePointer(); - needlePointer.Value = 60; - scale.Pointers.Add(needlePointer); - -{% endhighlight %} - -## Adding a range pointer - -[`SFRangePointer`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFRangePointer.html) provides an alternative way to indicate the current value. - -{% highlight c# %} - - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scales.Add(scale); - circularGauge.Scales = scales; - SFRangePointer rangePointer = new SFRangePointer(); - rangePointer.Value = 60; - scale.Pointers.Add(rangePointer); - -{% endhighlight %} - -## Adding a marker pointer - -[`SFMarkerPointer`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFMarkerPointer.html) points the current value in scale. - -{% highlight c# %} - - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scales.Add(scale); - circularGauge.Scales = scales; - SFMarkerPointer markerPointer = new SFMarkerPointer(); - markerPointer.Value = 70; - scale.Pointers.Add(markerPointer); - -{% endhighlight %} - -The following code example gives you the complete code of above configurations. - - {% highlight c# %} - -using System.Collections.ObjectModel; -using Syncfusion.SfGauge.iOS; - -namespace Gauge_GettingStarted -{ - public partial class ViewController : UIViewController - { - public override void ViewDidLoad() - { - base.ViewDidLoad(); - //Initializing circular gauge - SFCircularGauge circularGauge = new SFCircularGauge(); - circularGauge.Frame = new CoreGraphics.CGRect(10, 10, View.Frame.Width-20, View.Frame.Height - 20); - - //Adding header - SFGaugeHeader header = new SFGaugeHeader(); - header.Text = (Foundation.NSString)"Speedometer"; - header.TextColor = UIColor.Black; - circularGauge.Headers.Add(header); - - //Initializing scales for circular gauge - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scales.Add(scale); - - //Adding range - SFCircularRange range = new SFCircularRange(); - range.StartValue = 0; - range.EndValue = 40; - scale.Ranges.Add(range); - - //Adding needle pointer - SFNeedlePointer needlePointer = new SFNeedlePointer(); - needlePointer.Value = 60; - scale.Pointers.Add(needlePointer); - - //Adding range pointer - SFRangePointer rangePointer = new SFRangePointer(); - rangePointer.Value = 60; - scale.Pointers.Add(rangePointer); - - //Adding marker pointer - SFMarkerPointer markerPointer = new SFMarkerPointer(); - markerPointer.Value = 70; - scale.Pointers.Add(markerPointer); - - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - - } - } -} - -{% endhighlight %} - -The following output is displayed as a result of the above code example. - -![Xamarin.iOS CircularGauge Getting Started](getting-started_images/default.png) - -You can find the complete getting started sample from this [`link`](http://www.syncfusion.com/downloads/support/directtrac/general/ze/iOS_Gauge_GettingStarted2141822668.zip). diff --git a/xamarin-ios/SfCircularGauge/Header.md b/xamarin-ios/SfCircularGauge/Header.md deleted file mode 100755 index c12f9360..00000000 --- a/xamarin-ios/SfCircularGauge/Header.md +++ /dev/null @@ -1,87 +0,0 @@ ---- - -layout: post -title: Getting Started | SfCircularGauge | iOS | Syncfusion -description: Header -platform: xamarin.iOS -control: SfCircularGauge -documentation: ug - ---- - -# Header - -The [`SFGaugeHeader`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFGaugeHeader.html) support allows you to show text, image, or any UI content inside the gauge control. A circular gauge can be made self-descriptive about the data. It can be measured with use of the header. - -## Adding header in circular gauge - -### Header - -The [`SFGaugeHeader`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFGaugeHeader.html) can be used to set a unique header for the circular gauge. You can add text as headers in a circular gauge. Multiple headers also can be added in a circular gauge. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - SFGaugeHeader header = new SFGaugeHeader(); - header.Text = (Foundation.NSString)"Speedometer"; - header.TextColor = UIColor.Black; - circularGauge.Headers.Add(header); - scale.StartValue = 0; - scale.EndValue = 100; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](header_images/header.png) - -## Setting position for header - -The [`Position`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFGaugeHeader.html#Syncfusion_SfGauge_iOS_SFGaugeHeader_Position) property is used to place the header in a circular gauge. The value for [`Position`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFGaugeHeader.html#Syncfusion_SfGauge_iOS_SFGaugeHeader_Position) should be specified in offset value. In the Point value, which has been given for the `Position`, first value represent x-coordinate and second value represents y-coordinate. By default, it is placed at (0.5, 0.7). - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - SFGaugeHeader header = new SFGaugeHeader(); - header.Text =(Foundation.NSString) "Speedometer"; - header.TextColor = UIColor.Black; - header.Position = new CoreGraphics.CGPoint((float)0.5, (float)0.5); - circularGauge.Headers.Add(header); - scale.StartValue = 0; - scale.EndValue = 100; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](header_images/header-position.png) - -## Customization of header - -You can customize the header's text by using the [`TextStyle`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFGaugeHeader.html#Syncfusion_SfGauge_iOS_SFGaugeHeader_TextStyle), [`TextColor`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFGaugeHeader.html#Syncfusion_SfGauge_iOS_SFGaugeHeader_TextColor) and [`ArcRadius`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFGaugeHeader.html#Syncfusion_SfGauge_iOS_SFGaugeHeader_ArcRadius) properties. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - SFGaugeHeader header = new SFGaugeHeader(); - header.Text = (Foundation.NSString)"Speedometer"; - header.TextStyle = UIFont.FromName("Chalkduster", 20f); - header.TextColor = UIColor.Blue; - circularGauge.Headers.Add(header); - scale.StartValue = 0; - scale.EndValue = 100; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](header_images/header-customise.png) diff --git a/xamarin-ios/SfCircularGauge/Labels.md b/xamarin-ios/SfCircularGauge/Labels.md deleted file mode 100755 index 1f4a1eac..00000000 --- a/xamarin-ios/SfCircularGauge/Labels.md +++ /dev/null @@ -1,201 +0,0 @@ ---- - -layout: post -title: Getting Started | SfCircularGauge | iOS | Syncfusion -description: Labels -platform: xamarin.iOS -control: SfCircularGauge -documentation: ug - ---- - -# Labels - -The [`SFCircularScale`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html) labels associate a numeric value with major scale tick marks. - -## Label color customization - -The label color can be changed using the [`LabelColor`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_LabelColor) property. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.LabelColor = UIColor.Blue; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](labels_images/label-color-customization.png) - -## Label font customization - -The label font can be customized by using the [`LabelFont`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_LabelFont) property. -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.LabelFont = UIFont.FromName("Chalkduster", 20f); - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](labels_images/label-font-customization.png) - -## Setting position for labels - -The labels can be positioned far away from the ticks by using the [`LabelOffset`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_LabelOffset) property. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.LabelOffset = 0.4f; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](labels_images/label-offset.png) - -## Setting number of decimal digits for labels - -The [`NumberOfDecimalDigits`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_NumberOfDecimalDigits) property is used to set the number of decimal digits to be displayed in the scale labels. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.NumberOfDecimalDigits = 3; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](labels_images/number-of-decimal-digits.png) - -## Setting postfix and prefix for labels - -You can postfix/prefix values to the scale labels by using the [`LabelPostfix`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_LabelPostfix) and [`LabelPrefix`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_LabelPrefix) properties, respectively. - -### Label postfix - -[`LabelPostfix`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_LabelPostfix) property allows you to postfix the values to the scale labels. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.LabelPostfix = "$"; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](labels_images/label-postfix.png) - -### Label prefix - -[`LabelPrefix`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_LabelPrefix) property allows you to prefix the values to the scale labels. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.LabelPrefix = "$"; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](labels_images/label-prefix.png) - -## Edge label customization - -You can customize the edge label by using the [`ShowFirstLabel`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_ShowFirstLabel) and [`ShowLastLabel`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_ShowLastLabel) properties, which are Boolean properties. The [`ShowFirstLabel`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_ShowFirstLabel) property is used to enable or disable first label, and the [`ShowLastLabel`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_ShowLastLabel) property is used to enable or disable the last label in circular gauge. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.Interval = 1; - scale.MinorTicksPerInterval = 5; - scale.EndValue = 12; - scale.StartAngle = -180; - scale.SweepAngle = 180; - scale.ShowFirstLabel = false; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](labels_images/label-edge-customization.png) - -## Show labels - -The [`ShowLabels`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_ShowLabels) property is a Boolean property, which is used to enable or disable the labels in circular gauge. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.ShowLabels = false; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](labels_images/show-labels.png) - -## Setting auto angle for label - -Scale labels can be rotated automatically based on the current angle. To enable or disable the auto angle, use the [`EnableAutoAngle`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_EnableAutoAngle) property. - -{% highlight c# %} - - SfCircularGauge circularGauge = new SfCircularGauge(this); - ObservableCollection scales = new ObservableCollection(); - CircularScale scale = new CircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.EnableAutoAngle = true; - scales.Add(scale); - circularGauge.CircularScales = scales; - -{% endhighlight %} - -![](labels_images/auto-angle.png) - diff --git a/xamarin-ios/SfCircularGauge/Overview.md b/xamarin-ios/SfCircularGauge/Overview.md deleted file mode 100755 index f323de89..00000000 --- a/xamarin-ios/SfCircularGauge/Overview.md +++ /dev/null @@ -1,50 +0,0 @@ ---- - -layout: post -title: Overview | SfCircularGauge | iOS | Syncfusion -description: overview -platform: xamarin.iOS -control: SfCircularGauge -documentation: ug - ---- - -# Overview - -Essential Gauge for Xamarin.Android helps you to visualize the numeric values over a circular scale. The appearance of the gauge is fully customized to integrate your applications without fault. - -## Key features - -[`SFCircularGauge`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html) is a composed control of several scales. Scales will be an integrated UI part of the circular gauge. - -[`SFCircularGauge`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html) is a composite UI element with the following subparts: - -* Scales -* Ranges -* Pointers -* Headers -* Annotations - -The circular gauge control is highly customizable control with variety of simple APIs to modify its basic look and feel. You can position ranges, ticks, labels, and range pointers as needed. - -**Scales** - - Circular gauge scale contains labels, tick marks, and a rim to customize its basic look and feel. It defines the start angle, sweep direction, sweep angle, overall minimum and maximum values, the frequency of labels, and tick marks. - -**Ranges** - - Range is a visual element that depicts the start and end values of inner divisions within the scale’s range. Each scale is capable of displaying one or more ranges, and each range can depict different zones or regions of same metrics, such as high, low, and average temperatures. - -**Pointers** - - Pointer is an element that points out the values of the bound property on a scale. A circular scale will have one or more pointers that can be used to measure different values. Each pointer has the `Value` property, which informs the current value to the user visually. - -**Headers** - - Header can be used to set a unique header for the circular gauge. The user can add text as the header in a circular gauge. - -**Annotations** - - Annotations allows you to mark the specific area of interest in a circular gauge. You can place custom views, text, and images as annotations by using the annotations feature. - -![](overview_images/overview.png) diff --git a/xamarin-ios/SfCircularGauge/Ranges.md b/xamarin-ios/SfCircularGauge/Ranges.md deleted file mode 100755 index afe8e48e..00000000 --- a/xamarin-ios/SfCircularGauge/Ranges.md +++ /dev/null @@ -1,269 +0,0 @@ ---- - -layout: post -title: Getting Started | SfCircularGauge | iOS | Syncfusion -description: Ranges -platform: xamarin.iOS -control: SfCircularGauge -documentation: ug - ---- - -# Ranges - -Range is a visual element, which begins and ends at specified values within a scale. - -## Setting start and end values for range - -Start and end values of ranges are set by using the [`StartValue`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_EndValue) properties. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - SFCircularRange range = new SFCircularRange(); - range.StartValue = 0; - range.EndValue = 50; - scale.Ranges.Add(range); - circularGauge.Scales.Add(scale); - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](ranges_images/default-range.png) - -## Range customization - -An UI of a range is customized by using the [`Color`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_Color) and [`Width`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_Width) properties. First, you should set the [`Offset`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_Offset) property for range, then increase the width of the range. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.RimWidth = 10; - scale.RimColor = UIColor.FromRGB(224,224,224); - scale.LabelColor = UIColor.FromRGB(66, 66, 66); - scale.MajorTickSettings.Width = 3; - scale.LabelOffset = 0.9f; - scale.MinorTickSettings.Size = 5; - scale.MajorTickSettings.Size = 10; - scale.MajorTickSettings.Offset = 0.8f; - scale.MinorTickSettings.Offset = 0.8f; - scale.MinorTicksPerInterval = 3; - SFCircularRange range = new SFCircularRange(); - range.StartValue = 0; - range.EndValue = 50; - range.Width = 70; - range.Offset = 0.8f; - range.Color = UIColor.FromRGB(255,192,203); - scale.Ranges.Add(range); - circularGauge.Scales.Add(scale); - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](ranges_images/range-customization.png) - -## Setting position for range - -The range can be placed inside the scale, outside the scale, or on the scale by using the following two ways: - -1.The [`Offset`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_Offset) property with the [`Width`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_Width) property. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - SFCircularRange range = new SFCircularRange(); - range.StartValue = 0; - range.EndValue = 100; - range.Offset = 0.5f; - range.Width = 20; - scale.Ranges.Add(range); - circularGauge.Scales.Add(scale); - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](ranges_images/range-offset.png) - -2.The [`InnerStartOffset`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_InnerStartOffset), [`InnerEndOffset`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_InnerEndOffset), [`OuterStartOffset`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_OuterStartOffset), and [`OuterEndOffset`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularRange.html#Syncfusion_SfGauge_iOS_SFCircularRange_OuterEndOffset) properties. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - SFCircularRange range = new SFCircularRange(); - range.StartValue = 10; - range.EndValue = 80; - range.InnerStartOffset = 0.83f; - range.InnerEndOffset = 0.6f; - range.OuterStartOffset = 0.85f; - range.OuterEndOffset = 0.8f; - scale.Ranges.Add(range); - circularGauge.Scales.Add(scale); - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](ranges_images/range-inner-outer-offset.png) - -## Setting multiple ranges - -In addition to the default range, you can add n number of ranges to a scale by using the [`Ranges`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_Ranges) property. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.StartAngle = 90; - scale.SweepAngle = 270; - scale.Interval = 10; - scale.ShowLabels = false; - scale.ShowTicks = false; - scale.ShowRim = false; - scale.RimWidth = 40; - scale.RadiusFactor = 0.9f; - scale.RimColor = UIColor.FromRGB(224, 224, 224); - - SFGaugeHeader header1 = new SFGaugeHeader(); - header1.Text = (Foundation.NSString) "Poor"; - header1.Position = new CoreGraphics.CGPoint((float)0.1, (float)0.55); - header1.TextColor = UIColor.FromRGB(240, 62, 62); - header1.TextStyle = UIFont.FromName("Helvetica", 20f); - circularGauge.Headers.Add(header1); - - SFGaugeHeader header2 = new SFGaugeHeader(); - header2.Text = (Foundation.NSString)"Good"; - header2.Position = new CoreGraphics.CGPoint((float)0.87, (float)0.55); - header2.TextColor = UIColor.FromRGB(39, 122, 190); - header2.TextStyle = UIFont.FromName("Helvetica", 20f); - circularGauge.Headers.Add(header2); - - //Poor - SFCircularRange range = new SFCircularRange(); - range.StartValue = 0; - range.EndValue = 35; - range.Offset = 0.9f; - range.Width = 40; - range.Color = UIColor.FromRGB(240, 62, 62); - scale.Ranges.Add(range); - - //Average - SFCircularRange range1 = new SFCircularRange(); - range1.StartValue = 35; - range1.EndValue = 75; - range1.Offset = 0.9f; - range1.Width = 40; - range1.Color = UIColor.FromRGB(255, 221, 0); - scale.Ranges.Add(range1); - - //Good - SFCircularRange range2 = new SFCircularRange(); - range2.StartValue = 75; - range2.EndValue = 100; - range2.Offset = 0.9f; - range2.Width = 40; - range2.Color = UIColor.FromRGB(39, 122, 190); - scale.Ranges.Add(range2); - - SFNeedlePointer pointer = new SFNeedlePointer(); - pointer.Width = 10; - pointer.LengthFactor = 0.66f; - pointer.Color = UIColor.FromRGB(255,69,0); - pointer.KnobColor = UIColor.White; - pointer.PointerType = SFCiruclarGaugePointerType.SFCiruclarGaugePointerTypeTriangle; - pointer.KnobRadius = 0; - pointer.Value = 70; - pointer.KnobStrokeColor = UIColor.FromRGB(6, 130, 246); - pointer.KnobStrokeWidth = 6; - scale.Pointers.Add(pointer); - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - - -{% endhighlight %} - -![](ranges_images/multiple-range.png) - -## Setting gradient color for range - -You can give smooth color transition to range by specifying the different colors based on range value. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.Interval = 10; - scale.LabelFont = UIFont.FromName("Helvetica", 16f); - scale.LabelOffset = 0.95f; - scale.RimWidth = 28; - scale.ShowRim = false; - scale.MinorTicksPerInterval = 4; - - SFTickSettings major = new SFTickSettings(); - major.Width = 1; - major.EndOffset = 0.83f; - major.StartOffset = 0.75f; - major.Size = 8; - scale.MajorTickSettings = major; - - SFTickSettings minor = new SFTickSettings(); - minor.Width = 0.7f; - minor.EndOffset = 0.79f; - minor.StartOffset = 0.75f; - scale.MinorTickSettings = minor; - scales.Add(scale); - circularGauge.Scales = scales; - - SFCircularRange range = new SFCircularRange(); - range.Offset = 0.6f; - range.Width = 30; - range.StartValue = 0; - range.EndValue = 100; - scale.Ranges.Add(range); - - ObservableCollection gradientColor1 = new ObservableCollection(); - - GaugeGradientStop gaugeGradientStop = new GaugeGradientStop(); - gaugeGradientStop.Value = 0; - gaugeGradientStop.Color = UIColor.FromRGB(48, 179, 45); - gradientColor1.Add(gaugeGradientStop); - - GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop(); - gaugeGradientStop1.Value = 50; - gaugeGradientStop1.Color = UIColor.FromRGB(255, 221, 0); - gradientColor1.Add(gaugeGradientStop1); - - GaugeGradientStop gaugeGradientStop2 = new GaugeGradientStop(); - gaugeGradientStop2.Value = 80; - gaugeGradientStop2.Color = UIColor.FromRGB(240, 62, 62); - gradientColor1.Add(gaugeGradientStop2); - - range.GradientStops = gradientColor1; - - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](ranges_images/gradient.png) diff --git a/xamarin-ios/SfCircularGauge/Rim.md b/xamarin-ios/SfCircularGauge/Rim.md deleted file mode 100755 index 2f990013..00000000 --- a/xamarin-ios/SfCircularGauge/Rim.md +++ /dev/null @@ -1,122 +0,0 @@ ---- - -layout: post -title: Getting Started | SfCircularGauge | iOS | Syncfusion -description: Rim -platform: xamarin.iOS -control: SfCircularGauge -documentation: ug - ---- - -# Rim - -Scale determines the structure of a circular gauge by using the circular rim. By setting the [`StartAngle`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_StartAngle) and [`SweepAngle`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_SweepAngle) properties, you can change the shape of the circular gauge into a full circular gauge, half circular gauge, or quarter circular gauge. - -The [`StartValue`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_EndValue) properties will determine the overall range of the circular rim. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartAngle = -180; - scale.SweepAngle = 180; - scale.StartValue = 0; - scale.EndValue = 360; - scale.Interval = 20; - scale.MinorTicksPerInterval = 0; - scale.ShowFirstLabel = false; - circularGauge.Scales.Add(scale); - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](rim_images/rim.png) - -## Rim customization - -The color and thickness of rim can be set by using the [`RimColor`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_RimColor) and [`RimWidth`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_RimWidth) properties. To increase the [`RimWidth`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_RimWidth), set the [`RadiusFactor`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_RadiusFactor). - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.RadiusFactor = 1; - scale.RimWidth = 40; - scale.LabelOffset = 0.6f; - scale.MajorTickSettings.Offset = 0.8f; - scale.MinorTickSettings.Offset = 0.8f; - scale.RimColor = UIColor.FromRGB(135,206,250); - circularGauge.Scales.Add(scale); - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](rim_images/rim-customization.png) - -## Setting position for rim - -You can customize the position of [`Scales`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html#Syncfusion_SfGauge_iOS_SFCircularGauge_Scales) in the following two ways: -1. [`RadiusFactor`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_RadiusFactor) with the [`RimWidth`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_RimWidth) property. -2. The [`ScaleStartOffset`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_ScaleStartOffset) and [`ScaleEndOffset`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_ScaleEndOffSet) properties. - -### Setting radius factor for rim - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.RadiusFactor = 0.7f; - scale.RimWidth = 30; - circularGauge.Scales.Add(scale); - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](rim_images/rim-offset.png) - -### Setting scale start and end offsets for rim - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.ScaleStartOffset = 0.6f; - scale.ScaleEndOffSet = 0.7f; - circularGauge.Scales.Add(scale); - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](rim_images/rim-start-end-offset.png) - -## Show rim - -The [`ShowRim`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_ShowRim) property is a Boolean property, which is used to enable or disable the rim in circular gauge. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.ShowRim = false; - circularGauge.Scales.Add(scale); - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](rim_images/show-rim.png) - - diff --git a/xamarin-ios/SfCircularGauge/Scales.md b/xamarin-ios/SfCircularGauge/Scales.md deleted file mode 100755 index 810b3891..00000000 --- a/xamarin-ios/SfCircularGauge/Scales.md +++ /dev/null @@ -1,203 +0,0 @@ ---- - -layout: post -title: Getting Started | SfCircularGauge | iOS | Syncfusion -description: Scales -platform: xamarin.iOS -control: SfCircularGauge -documentation: ug - ---- - -# Scales - -CircularScales contain a collection of [`SFCircularScale`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html) elements, which integrates labels, tick marks, and a rim to customize the basic look and feel of the circular gauge. - -## Scale - -[`SFCircularScale`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html) contains the sub elements such as rim, ticks, labels, ranges, and pointers. It defines the radius, start angle, sweep direction, sweep angle, overall minimum and maximum values, frequency of labels, and tick marks. It will have multiple ranges. - -A range is a visual element, which begins and ends at specified values within a [`SFCircularScale`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html). It will have one or more pointers to point out the values in scale. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](scales_images/scale.png) - -## Setting start and end values for scale - -The [`StartValue`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_EndValue) properties allow you to set the start and end values for scale. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = -30; - scale.EndValue = 50; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](scales_images/start-end-value.png) - -## Setting start and sweep angles for scale - -The [`StartAngle`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_StartAngle) and [`SweepAngle`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_SweepAngle) properties allow you to set the start and end angles for scale. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.StartAngle = 125; - scale.SweepAngle = 350; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](scales_images/start-end-angle.png) - -## Setting interval for scale - -The [`Interval`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_Interval) property allows you to set the interval for scale. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 500; - scale.Interval = 100; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](scales_images/interval.png) - -## Setting auto interval for scale - -By default, the interval value is calculated by 10. By using the [`EnableAutoInterval`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_EnableAutoInterval) property, you can set auto interval based on the start and end values. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 500; - scale.EnableAutoInterval = true; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](scales_images/auto-interval.png) - -## Setting scale direction for scale - -The [`Direction`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularScale.html#Syncfusion_SfGauge_iOS_SFCircularScale_Direction) property allows you to render the gauge scale in either clockwise or counterclockwise direction. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 100; - scale.Direction = SFCircularScaleDirection.AntiClockwise; - scales.Add(scale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - -{% endhighlight %} - -![](scales_images/scale-direction.png) - -## Setting multiple scales for scale - -It helps you to add multiple scales to the same circular gauge. You can customize all the scales in a [`Scales`](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfGauge.iOS.SFCircularGauge.html#Syncfusion_SfGauge_iOS_SFCircularGauge_Scales) collection. - -{% highlight c# %} - - SFCircularGauge circularGauge = new SFCircularGauge(); - ObservableCollection scales = new ObservableCollection(); - SFCircularScale scale = new SFCircularScale(); - scale.StartValue = 0; - scale.EndValue = 240; - scale.Interval = 20; - scale.MinorTicksPerInterval = 1; - scale.RimColor = UIColor.FromRGB(198, 46, 10); - scale.LabelOffset = 0.88f; - scale.LabelColor = UIColor.FromRGB(198, 46, 10); - scale.ScaleStartOffset = 0.7f; - scale.ScaleEndOffSet = 0.69f; - - SFTickSettings majorTicks = new SFTickSettings(); - majorTicks.StartOffset = 0.7f; - majorTicks.EndOffset = 0.77f; - majorTicks.Width = 2; - majorTicks.Color = UIColor.FromRGB(198, 46, 10); - scale.MajorTickSettings = majorTicks; - - SFTickSettings minorTicks = new SFTickSettings(); - minorTicks.StartOffset = 0.7f; - minorTicks.EndOffset = 0.75f; - minorTicks.Width = 2; - minorTicks.Color = UIColor.FromRGB(198, 46, 10); - scale.MinorTickSettings = minorTicks; - scales.Add(scale); - - SFCircularScale circularScale = new SFCircularScale(); - circularScale.StartValue = 0; - circularScale.EndValue = 160; - circularScale.Interval = 40; - circularScale.MinorTicksPerInterval = 1; - circularScale.RimColor = UIColor.FromRGB(51, 51, 51); - circularScale.LabelOffset = 0.45f; - circularScale.LabelColor = UIColor.FromRGB(51, 51, 51); - circularScale.ScaleStartOffset = 0.65f; - circularScale.ScaleEndOffSet = 0.64f; - - SFTickSettings majorTick = new SFTickSettings(); - majorTick.StartOffset = 0.64f; - majorTick.EndOffset = 0.57f; - majorTick.Width = 2; - majorTick.Color = UIColor.FromRGB(51, 51, 51); - circularScale.MajorTickSettings = majorTick; - - SFTickSettings minorTick = new SFTickSettings(); - minorTick.StartOffset = 0.64f; - minorTick.EndOffset = 0.59f; - minorTick.Width = 2; - minorTick.Color = UIColor.FromRGB(51, 51, 51); - circularScale.MinorTickSettings = minorTick; - - scales.Add(circularScale); - circularGauge.Scales = scales; - this.View.AddSubview(circularGauge); - - -{% endhighlight %} - -![](scales_images/multiple-scale.png) diff --git a/xamarin-ios/SfDataGrid/Column-Sizer.md b/xamarin-ios/SfDataGrid/Column-Sizer.md deleted file mode 100644 index bb58b4da..00000000 --- a/xamarin-ios/SfDataGrid/Column-Sizer.md +++ /dev/null @@ -1,414 +0,0 @@ ---- -layout: post -title: Column Sizer | SfDataGrid | Xamarin.iOS | Syncfusion -description: What are all the different ColumnSizer and how it works in a SfDataGrid. -platform: xamarin.ios -control: SfDataGrid -documentation: ug ---- - -# Column Sizer - -The data grid applies column sizer for the grid columns by setting the [SfDataGrid.ColumnSizer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ColumnSizer) property. - -The following code example illustrates how to apply `ColumnSizer` in the data grid. - -{% highlight c# %} -dataGrid.ColumnSizer = ColumnSizer.None; -{% endhighlight %} - -The data grid applies width for all the grid columns in the [SfDataGrid.Columns](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_Columns) collection based on the `SfDataGrid.ColumnSizer` property. The following list of options are available to set the width of the columns. - -* None -* LastColumnFill -* Star -* Auto - -## ColumnSizer.None - -No Column sizing is applied when the [SfDataGrid.ColumnSizer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ColumnSizer) is set to [None](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.ColumnSizer.html). Columns are arranged in the view based on the [SfDataGrid.DefaultColumnWidth](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_DefaultColumnWidth) property. This is the default value of the `SfDataGrid.ColumnSizer` property. - -{% highlight c# %} -dataGrid.ColumnSizer = ColumnSizer.None; -{% endhighlight %} - -![](SfDataGrid_images/CoumnSizer_img1.png) - -## ColumnSizer.LastColumnFill - -When the [SfDataGrid.ColumnSizer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ColumnSizer) is [LastColumnFill](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.ColumnSizer.html), the column width of the grid columns are adjusted with respect to [SfDataGrid.DefaultColumnWidth](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_DefaultColumnWidth) property. In this case, if the columns does not fill the entire view space, the width of the last column fills the unoccupied space in the view. - -{% highlight c# %} -dataGrid.ColumnSizer = ColumnSizer.LastColumnFill; -{% endhighlight %} - -![](SfDataGrid_images/CoumnSizer_img2.png) - -## ColumnSizer.Star - -When the [SfDataGrid.ColumnSizer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ColumnSizer) is [Star](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.ColumnSizer.html), all the grid columns are adjusted to an equal column width to fit within the view. Setting ColumnSizer to `Star` will disable the horizontal scrolling in the data grid. - -{% highlight c# %} -dataGrid.ColumnSizer = ColumnSizer.Star; -{% endhighlight %} - -![](SfDataGrid_images/CoumnSizer_img3.png) - -## ColumnSizer.Auto - -When the [SfDataGrid.ColumnSizer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ColumnSizer) is [Auto](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.ColumnSizer.html), the width of the `GridColumns` are adjusted based on the header text or cell contents. - -{% highlight c# %} -dataGrid.ColumnSizer = ColumnSizer.Auto; -{% endhighlight %} - -![](SfDataGrid_images/CoumnSizer_Img4.png) - -N> If any column is specified a width explicitly using the [GridColumn.Width](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_DefaultColumnWidth) property, that column is not considered for column sizing the width and skipped while applying the column sizer for grid columns. - -## How to - -### Apply ColumnSizer for a particular column - -You can apply column sizing to an individual column by using the [GridColumn.ColumnSizer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_ColumnSizer) property. The `GridColumn.ColumnSizer` property is also a type of [ColumnSizer](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.ColumnSizer.html). If the `GridColumn.ColumnSizer` is not explicitly set to a value, it takes the value of the [SfDataGrid.ColumnSizer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ColumnSizer) and applies the width to the columns accordingly. - -The following code example illustrates how to apply `ColumnSizer` for a particular column. - -{% highlight c# %} -GridTextColumn textColumn = new GridTextColumn(); -textColumn.MappingName = "CustomerID"; -textColumn.HeaderText = "Full Name"; -textColumn.ColumnSizer = ColumnSizer.Auto; -{% endhighlight %} - -### Apply ColumnSizer based on device orientation - -You can apply different column sizer based on the orientation of the device and the data grid will rearrange the view accordingly. - -Refer to the following code example in which the `SfDataGrid.ColumnSizer` is customized based on the orientation by checking the orientation of the device in the `ViewLayoutSubViews` override method of the `ViewController` which will be fired when the view changes. - -{% highlight c# %} -public override void ViewDidLayoutSubviews() -{ - base.ViewDidLayoutSubviews(); - if (UIDevice.CurrentDevice.Orientation == UIDeviceOrientation.LandscapeLeft || UIDevice.CurrentDevice.Orientation == UIDeviceOrientation.LandscapeRight) - this.datagrid.ColumnSizer = ColumnSizer.Star; - else - this.datagrid.ColumnSizer = ColumnSizer.Auto; - datagrid.Frame = new CoreGraphics.CGRect(0, 0, View.Frame.Width, View.Frame.Height ); -} -{% endhighlight %} - -![](SfDataGrid_images/ColumnSizer_Orientation.png) - -![](SfDataGrid_images/ColumnSizer_Orientation1.png) - -### Fill remaining width for any column - -The `SfDataGrid` allows to fill the remaining width in the view for any column using the [GridColumn.ColumnSizer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_ColumnSizer) property. - -The `GridColumn.ColumnSizer` has higher priority than the [SfDataGrid.ColumnSizer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ColumnSizer) property. Hence, the individual columns having the `GridColumn.ColumnSizer` property set will not be included in the column sizer calculations of the `SfDataGrid`. To fill the column with remaining width in the view, set the `GridColumn.ColumnSizer` property as [ColumnSizer.LastColumnFill](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.ColumnSizer.html). Refer to the following code example to achieve the same. - -In the following code snippet, the data grid is applied with `ColumnSizer.Star`, and the second column is applied with `ColumnSizer.LastColumnFill`. Hence, the second column will take up the remaining space after the other columns are rendered with star size. - -{% highlight c# %} -SfDataGrid dataGrid; -ViewModel viewModel; -protected override void OnCreate(Bundle savedInstanceState) -{ - base.OnCreate(savedInstanceState); - dataGrid = new SfDataGrid(this.BaseContext); - viewModel = new ViewModel(); - dataGrid.ItemsSource = viewModel.OrdersInfo; - dataGrid.AutoGenerateColumns = false; - - GridTextColumn orderIDColumn = new GridTextColumn(); - orderIDColumn.MappingName = "OrderID"; - - GridTextColumn customerIDColumn = new GridTextColumn(); - customerIDColumn.MappingName = "CustomerID"; - customerIDColumn.ColumnSizer = ColumnSizer.LastColumnFill; - - GridTextColumn freightColumn = new GridTextColumn(); - freightColumn.MappingName = "Freight"; - - GridTextColumn countryColumn = new GridTextColumn(); - countryColumn.MappingName = "Country"; - - dataGrid.Columns.Add(orderIDColumn); - dataGrid.Columns.Add(customerIDColumn); - dataGrid.Columns.Add(freightColumn); - dataGrid.Columns.Add(countryColumn); - - View.AddSubviews(dataGrid); -} -{% endhighlight %} - -![](SfDataGrid_images/FillRemainingColumns_Xamarin.IOS.png) - -### Refreshing column sizer for the data grid at runtime - -To refresh the column sizing for `SfDataGrid.Columns` at runtime, use the [SfDataGrid.GridColumnSizer.Refresh](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumnSizer.html#Syncfusion_SfDataGrid_GridColumnSizer_Refresh_System_Boolean_) property. - -Consider that `ColumnSizer.Auto` is applied to the data grid. If the underlying values are changed at runtime, refresh the column sizer as follows. - -{% highlight c# %} -SfDataGrid dataGrid; -ViewModel viewModel; -UIButton button; -public MyViewController() -{ - dataGrid = new SfDataGrid(); - viewModel = new ViewModel(); - button = new UIButton(); - button.SetTitle("ColumnSizer",UIControlState.Normal); - button.TouchDown += ColumnSizerChanged; - dataGrid.AutoGenerateColumns = true; - dataGrid.ItemsSource = viewModel.OrdersInfo; - dataGrid.AllowEditing = true; - dataGrid.ColumnSizer = ColumnSizer.Auto; - - View.AddSubviews(button); - View.AddSubviews(dataGrid); -} -private void ColumnSizerChanged(object sender, EventArgs e) -{ - //Refreshes the column sizer of the SfDataGrid - dataGrid.GridColumnSizer.Refresh(true); -} -{% endhighlight %} - -![](SfDataGrid_images/RefreshColumnSizer_Xamarin.IOS.gif) - -### Resetting column width to apply column sizer - -By default, the columns having the [GridColumn.Width](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_Width) property set will not be included for column sizer calculations of the data grid. To include the width columns and reset the column sizer at runtime, set the `GridColumn.Width` property to double.NaN before calling the [GridColumnSizer.Refresh()](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumnSizer.html#Syncfusion_SfDataGrid_GridColumnSizer_Refresh_System_Boolean_) method. Refer to the following code example to achieve the same. - -{% highlight c# %} -SfDataGrid dataGrid; -ViewModel viewModel; -UIButton button; -protected override void OnCreate(Bundle savedInstanceState) -{ - base.OnCreate(savedInstanceState); - layout = new LinearLayout(this.BaseContext); - layout.Orientation = Orientation.Vertical; - button = new Button(this.BaseContext); - button.Text = "Reset ColumnWidth"; - button.Click += ColumnSizerChanged; - dataGrid = new SfDataGrid(this.BaseContext); - viewModel = new ViewModel(); - dataGrid.AutoGenerateColumns = false; - dataGrid.ItemsSource = viewModel.OrdersInfo; - - GridTextColumn orderIDColumn = new GridTextColumn(); - orderIDColumn.MappingName = "OrderID"; - orderIDColumn.Width = 20; - - GridTextColumn customerIDColumn = new GridTextColumn(); - customerIDColumn.MappingName = "CustomerID"; - - GridTextColumn freightColumn = new GridTextColumn(); - freightColumn.MappingName = "Freight"; - - GridTextColumn countryColumn = new GridTextColumn(); - countryColumn.MappingName = "Country"; - - dataGrid.Columns.Add(orderIDColumn); - dataGrid.Columns.Add(customerIDColumn); - dataGrid.Columns.Add(freightColumn); - dataGrid.Columns.Add(countryColumn); - - View.AddSubviews(button); - View.AddSubviews(dataGrid); -} -{% endhighlight %} -{% highlight c# %} -private void ColumnSizerChanged(object sender, EventArgs e) -{ - //Resets the widths for the columns having GridColumn.Width property set - ResetColumnsWidth(); - dataGrid.GridColumnSizer.Refresh(true); -} -private void ResetColumnsWidth() -{ - foreach (var column in dataGrid.Columns) - { - // Setting NaN values to columns for which width is applied - if (!double.IsNaN(column.Width)) - { - column.Width = double.NaN; - } - } -} -{% endhighlight %} - -![](SfDataGrid_images/Reset_ColumnWidth_Xamarin.IOS.png) - -## Star column sizer ratio support - -To customize the `ColumnSizer.Star` width calculation, write a custom GridColumnSizer class derived from [GridColumnSizer](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumnSizer.html) and assign it to the `SfDataGrid.ColumnSizer` property. To implement your own logic to divide the column widths in different ratios, override the [SetStarWidthForColumns](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumnSizer.html#Syncfusion_SfDataGrid_GridColumnSizer_SetStarWidthForColumns_System_Double_System_Collections_Generic_IEnumerable_Syncfusion_SfDataGrid_GridColumn__) method in your custom GridColumnSizer class. - -To set star sizer ratio for an individual column, follow the code example. - -{% highlight c# %} -SfDataGrid dataGrid; -ViewModel viewModel; -protected override void OnCreate(Bundle savedInstanceState) -{ - base.OnCreate(savedInstanceState); - dataGrid = new SfDataGrid(this.BaseContext); - viewModel = new ViewModel(); - dataGrid.AutoGenerateColumns = false; - dataGrid.ItemsSource = viewModel.OrdersInfo; - dataGrid.ColumnSizer = ColumnSizer.Star; - // Assigns the custom column sizer to the SfDataGrid - dataGrid.GridColumnSizer = new CustomColumnSizer(this.dataGrid, viewModel); - - GridTextColumn orderIDColumn = new GridTextColumn(); - orderIDColumn.MappingName = "OrderID"; - //Assigns the ratio for OrderID column - viewModel.ColumnRatio.Add(orderIDColumn.MappingName, 3); - - GridTextColumn customerIDColumn = new GridTextColumn(); - customerIDColumn.MappingName = "CustomerID"; - //Assigns the ratio for CustomerID column - viewModel.ColumnRatio.Add(customerIDColumn.MappingName, 2); - - GridTextColumn freightColumn = new GridTextColumn(); - freightColumn.MappingName = "Freight"; - - GridTextColumn countryColumn = new GridTextColumn(); - countryColumn.MappingName = "Country"; - - dataGrid.Columns.Add(orderIDColumn); - dataGrid.Columns.Add(customerIDColumn); - dataGrid.Columns.Add(freightColumn); - dataGrid.Columns.Add(countryColumn); - - View.AddSubviews(dataGrid); -} -{% endhighlight %} - -The following code example demonstrates how the width is calculated for column, based on the `GetRatio` property in `SetStarWidthForColumns` method. - -{% highlight c# %} -public class CustomColumnSizer : GridColumnSizer -{ - SfDataGrid dataGrid; - ViewModel viewModel; - public CustomColumnSizer(SfDataGrid grid, ViewModel view) : base(grid) - { - dataGrid = grid; - viewModel = view; - } - protected override void SetStarWidthForColumns(double columnsWidth, IEnumerable columns) - { - var removedColumn = new List(); - var column = columns.ToList(); - var totalRemainingStarValue = columnsWidth; - double removedWidth = 0; - bool isRemoved; - while (column.Count > 0) - { - isRemoved = false; - removedWidth = 0; - var columnsCount = 0; - foreach (var data in column) - { - columnsCount += viewModel.GetRatio(data.MappingName); - } - double starWidth = Math.Floor((totalRemainingStarValue / columnsCount)); - var col = column.First(); - - //Calculate the ColumnSizer ratio for every column - starWidth *= viewModel.GetRatio(col.MappingName); - var columnSizer = DataGrid.GridColumnSizer; - var method = columnSizer.GetType().GetRuntimeMethods().FirstOrDefault(x => x.Name == "SetColumnWidth"); - var width = method.Invoke(columnSizer, new object[] { col, starWidth }); - double computeWidth = (double)width; - - if (starWidth != computeWidth && starWidth > 0) - { - isRemoved = true; - column.Remove(col); - foreach (var remColumn in removedColumn) - { - if (!column.Contains(remColumn)) - { - removedWidth += remColumn.ActualWidth; - column.Add(remColumn); - } - } - removedColumn.Clear(); - totalRemainingStarValue += removedWidth; - } - totalRemainingStarValue = totalRemainingStarValue - computeWidth; - if (!isRemoved) - { - column.Remove(col); - if (!removedColumn.Contains(col)) - removedColumn.Add(col); - } - } - } -} -{% endhighlight %} - -The following code example explains the `GetRatio` property of the `ViewModel` class. - -{% highlight c# %} -public class ViewModel : INotifyPropertyChanged -{ - public Dictionary ColumnRatio; - public ViewModel() - { - SetRowsToGenerate(50); - ColumnRatio = new Dictionary(); - } - - #region ItemsSource - - private ObservableCollection ordersInfo; - - public ObservableCollection OrdersInfo - { - get { return ordersInfo; } - set { this.ordersInfo = value; } - } - - internal int GetRatio(string mappingName) - { - if (ColumnRatio.ContainsKey(mappingName)) - return ColumnRatio.GetValueOrDefault(mappingName); - else - return 1; - } - - #endregion - - #region ItemSource Generator - - public void SetRowsToGenerate(int count) - { - OrderInfoRepository order = new OrderInfoRepository(); - ordersInfo = order.GetOrderDetails(count); - } - - #endregion - - #region INotifyPropertyChanged implementation - - public event PropertyChangedEventHandler PropertyChanged; - - public void RaisePropertyChanged(string propertyName) - { - if (PropertyChanged != null) - this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); - } - - #endregion -} -{% endhighlight %} - -![](SfDataGrid_images/StarColumnSizerRatio_Xamarin.IOS.png) diff --git a/xamarin-ios/SfDataGrid/Column-Types.md b/xamarin-ios/SfDataGrid/Column-Types.md deleted file mode 100644 index c527a168..00000000 --- a/xamarin-ios/SfDataGrid/Column-Types.md +++ /dev/null @@ -1,842 +0,0 @@ ---- -layout: post -title: Column Types | SfDataGrid | Xamarin.iOS | Syncfusion -description: Learn here all about Column types support in Syncfusion Xamarin.iOS SfDataGrid control, its elements and more. -platform: xamarin.ios -control: SfDataGrid -documentation: UG - ---- - -# Column Types in Xamarin.iOS SfDataGrid - -SfDataGrid contains different types of columns each with its own functionalities. You can use any column based on your requirements. - - -The below table describes you the types of column and its purpose of usage in SfDataGrid. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Column TypeDescription
GridColumnAbstract class. Base column type of all the columns in the SfDataGrid.
GridTextColumnTo be used to display string or numbers in each row.
TemplateColumn (i.e. GridTextColumn with UserCellType)To be used when you want to customize your column based on your requirements.
GridSwitchColumnTo be used when you want to display switch in each row.
GridImageColumnTo be used when you want to display an image in each row.
GridNumericColumnTo be used when you want to display a numeric data.
GridDateTimeColumnTo be used when you want to display the date time value.
GridPickerColumnTo be used when you want to display the IEnumerable data using Picker.
- - -## GridColumn - -[GridColumn](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html) is the base column type of all the columns in the SfDataGrid, hence `GridColumn` properties are used by all the columns. The following sub-sections explains you about the properties in the `GridColumn` and the customizations that can be done using those properties. - -### MappingName - -[GridColumn.MappingName](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_MappingName) associates the GridColumn with a property available in the underlying data source. While setting `MappingName` alone to the SfDataGrid, `GridColumn.DisplayBinding` will be automatically generated based on the `MappingName`. Data Manipulation operations like sorting, filtering, grouping will be done based on the `MappingName` property. - -### Header customizations - -#### HeaderCellTextSize - -The FontSize for the content of header cell in the `GridColumn` can be customized by using the [GridColumn.HeaderCellTextSize](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_HeaderCellTextSize) property. The default font size of the header cells in SfDataGrid is 14. -Refer the following code example to customize the header cell text size for the `GridColumn.HeaderCellTextSize`. - -{% highlight c# %} - -GridTextColumn column = new GridTextColumn() -{ - MappingName = "OrderID", - HeaderCellTextSize = 16 -}; - -{% endhighlight %} - -#### HeaderFont - -The FontFamily for the content of header cell in the `GridColumn` can be customized by using the [GridColumn.HeaderFont](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_HeaderFont) property. The default value font used in SfDataGrid is `Helvetica-Bold`. - -#### HeaderText - -[GridColumn.HeaderText](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_HeaderText) specifies the text displayed in the column header. If `HeaderText` is not defined, the `GridColumn.MappingName` will be assigned to the `HeaderText` and will be displayed as column header. - -#### HeaderTextAlignment -You can get or set the TextAlignment of the header cell in the `GridColumn` by using the [GridColumn.HeaderTextAlignment](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_HeaderTextAlignment) property. The default alignment for the header cells in SfDataGrid is `Center`. - -#### HeaderTemplate - -SfDataGrid allows you to customize the header cell based on your requirement by using the [GridColumn.HeaderTemplate](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_HeaderTemplate) property. - -The following code example shows you how to customize the header cell by loading a template in the header cell. - -{% highlight c# %} - -UILabel label = new UILabel(); -label.Text = "Order ID"; -label.TextAlignment = UITextAlignment.Center; - -GridTextColumn column = new GridTextColumn() -{ - MappingName = "OrderID", - HeaderTemplate = label -}; - -{% endhighlight %} - -#### HeaderTextMargin - -SfDataGrid allows you to get or set the padding for the header cell by using [GridColumn.HeaderTextMargin](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_HeaderTextMargin) property. - -The following code example shows you how to set the`HeaderTextMargin` property. - -{% highlight c# %} - -GridTextColumn orderId = new GridTextColumn(); -orderId.MappingName = "OrderID"; -orderId.HeaderTextMargin = 15; - -GridTextColumn employeeId = new GridTextColumn(); -employeeId.MappingName = "EmployeeID"; -employeeId.HeaderTextMargin = new Thickness(15, 0, 0, 0); - -{% endhighlight %} - - -### Column Width - -SfDataGrid allows you to customize the width of each `GridColumn` in the [SfDataGrid.Columns](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.Columns.html) collection. You can customize the column width by using the [GridColumn.Width](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_Width) property. By default this property will not be assigned any value and the `GridColumn` renders in view based on the value of [DefaultColumnWidth](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_DefaultColumnWidth) property in SfDataGrid. - -N> You can set the `IsHidden` property as `True` instead of setting column width as `0` to hide a column. - -Customizing the width for auto generated columns as shown below. - -{% highlight c# %} -// AutoGenerateColumn - -dataGrid.AutoGeneratingColumn += DataGrid_AutoGeneratingColumn; - -void dataGrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnArgs e){ -if (e.Column.MappingName == "OrderID") { - e.Column.Width = 100; - } -} - -// Manually generated column - -dataGrid.Columns.Add(new GridTextColumn() { MappingName = "OrderID" ,Width = 100 }); - -{% endhighlight %} - -### IsHidden -SfDataGrid allows you to hide a particular column using [GridColumn.IsHidden](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_IsHidden) property. The default value of the `IsHidden` property is `False`. - -N> You can set the `IsHidden` property as `True` instead of setting column width as `0` to hide a column. - -The following code example shows you how to hide the column using `IsHidden` property. - -{% highlight c# %} -// AutoGenerate Column - -dataGrid.AutoGeneratingColumn += DataGrid_AutoGeneratingColumn; - -void dataGrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnArgs e){ -if (e.Column.MappingName == "OrderID") { - e.Column.IsHidden = true; - } -} - -// Manually generated column - -dataGrid.Columns.Add(new GridTextColumn() { MappingName = "OrderID", IsHidden = true}); -{% endhighlight %} - -### TextMargin - -SfDataGrid allows you to get or set the padding for the [GridCell](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridCell.html) by using [GridColumn.TextMargin](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_TextMargin) property. - -The following code example shows you how to set the`TextMargin` property. - -{% highlight c# %} - -GridTextColumn orderId = new GridTextColumn(); -orderId.MappingName = "OrderID"; -orderId.TextMargin = 15; - -GridTextColumn employeeId = new GridTextColumn(); -employeeId.MappingName = "EmployeeID"; -employeeId.TextMargin = new Thickness(0, 0, 25, 0); - -{% endhighlight %} - - -## GridTextColumn - -[GridTextColumn](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridTextColumn.html) is derived from `GridColumn` and hence it inherits all the properties of `GridColumn`. Each of the record cells in `GridTextColumn` displays text based on the `MappingName` which associates the column with a property in the data source. - -The following code example creates `GridTextColumn`. - -{% highlight c# %} -dataGrid.Columns.Add(new GridTextColumn() { MappingName = "OrderID" }); -{% endhighlight %} - -The below topics explain you about the customizations that can be done in the `GridTextColumn` in SfDataGrid. - -### Formatting - -SfDataGrid allows you to format the value displayed in the `GridColumn` by using the [GridColumn.Format](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_Format) property. Assign the FormatString to this property based on the type of the property the `GridColumn` is associated with to format the value. You can use different [StringFormats](http://msdn.microsoft.com/en-us/library/fbxft59x(v=vs.90).aspx) to customize the value displayed in the record cells. - -The following code example shows you how to apply formatting for a `GridTextColumn`. - -{% highlight c# %} -dataGrid.Columns.Add (new GridTextColumn () {  - MappingName = "Freight", - Format = "C" -}); - -dataGrid.Columns.Add (new GridTextColumn () {  - MappingName = "ShippingDate", - Format = "dd/MM/yyyy" -}); -{% endhighlight %} - -N> For AutoGenerated columns the Formatting can be applied by handling the [SfDataGrid.AutoGeneratingColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AutoGenerateColumns) event. - -#### Formatting GridTextColumn with different Culture - -SfDataGrid allows you to apply different [CultureInfo](https://developer.xamarin.com/api/type/System.Globalization.CultureInfo/) for the `GridColumns` by using the [GridColumn.CultureInfo](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_CultureInfo) property. Assign the FormatString to this property based on the type of the property the GridColumn is associated with to format the value. You can use different `StringFormats` to customize the value displayed in the record cells. - -The following code example shows you how to apply different cultures for a `GridColumns`. - -{% highlight c# %} -dataGrid.Columns.Add (new GridTextColumn () {  - MappingName = "Freight", - Format = "C", - CultureInfo = new CultureInfo("en-US") -}); - -dataGrid.Columns.Add (new GridTextColumn () {  - MappingName = "OrderID", - Format = "C", - CultureInfo = new CultureInfo("en-GB") -}); -{% endhighlight %} - -For auto generated columns this is achievable by handling the `SfDataGrid.AutoGeneratingColumn` event. The following code example shows you how to apply different cultures for auto generated `GridColumns`. - -{% highlight c# %} -void GridAutoGeneratingColumns(object sender, AutoGeneratingColumnArgs e) -{ - if (e.Column.MappingName == "Freight") { - e.Column.Format = "C"; - e.Column.CultureInfo = new CultureInfo ("en-US"); - } else if (e.Column.MappingName == "OrderID") { - e.Column.Format = "C"; - e.Column.CultureInfo = new CultureInfo ("en-GB"); - } -} -{% endhighlight %} - -### Font and Alignment options - -#### CellTextSize - -The FontSize for the content of record cells in `GridColumn` can be customized by using the [GridColumn.CellTextSize](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_CellTextSize) property. The default font size of the record cells in SfDataGrid is 14. - -#### RecordFont - -The FontFamily for the content of header cell in the `GridColumn` can be customized by using the [GridColumn.RecordFont](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_RecordFont) property. The default value font used in SfDataGrid is `HelveticaNeue`. - -#### TextAlignment - -You can get or set the TextAlignment of the header cell in the GridColumn by using the [GridColumn.TextAlignment](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_TextAlignment) property. The default alignment for the record cells in SfDataGrid is `Center`. - -#### LineBreakMode - -You can wrap the record cell value when the text for the record cells exceeds the content area by setting [GridColumn.LineBreakMode](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_LineBreakMode) as `LineBreakMode.WordWrap` - -The following code example shows how to use `GridSwitchColumn`. - -{% tabs %} -{% highlight c# %} -dataGrid.Columns[0].LineBreakMode = LineBreakMode.WordWrap; -{% endhighlight %} -{% endtabs %} - - -## TemplateColumn - -TemplateColumn is actually the GridTextColumn with `UserCellType` specified and hence it inherits all the properties of GridColumn. It allows you to extend the functionality of GridColumns with your own view by creating custom GridCell to render in the column. - -The following code example shows how to create a TemplateColumn. - -{% highlight c# %} -GridTextColumn customerIdColumn = new GridTextColumn (); -customerIdColumn.UserCellType = typeof(CustomCell); -customerIdColumn.MappingName = "CustomerID"; -customerIdColumn.HeaderText = "Customer ID"; -dataGrid.Columns.Add(customerIdColumn); -{% endhighlight %} - -In order to create a template column in SfDataGrid, you need to specify the [UserCellType](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_UserCellType) of the column. `UserCellType` is the type of the view to be used in the `GridColumn` and it must be derived from the `GridCell`. (i.e. a custom GridCell which hosts the view of your own requirement). - -The following code example shows you how to create a custom GridCell and use it in a template column. - -{% highlight c# %} -//Creating a Template Column -GridTextColumn customerIdColumn = new GridTextColumn (); -customerIdColumn.UserCellType = typeof(CustomCell); -customerIdColumn.MappingName = "CustomerID"; -customerIdColumn.HeaderText = "Customer ID"; -dataGrid.Columns.Add(customerIdColumn); - -//Creating Custom GridCell -public class CustomCell : GridCell -{ - UILabel label; - - public CustomCell () - { - label = new UILabel (); - this.AddSubview (label); - this.CanRenderUnLoad = false; - } - - protected override void UnLoad () - { - this.RemoveFromSuperview (); - } - - public override void LayoutSubviews () - { - base.LayoutSubviews (); - this.label.Frame = new CGRect(Bounds.Left, Bounds.Top, Bounds.Width, Bounds.Height); - this.label.Text = DataColumn.CellValue.ToString (); - } -} -{% endhighlight %} - -The following screenshot shows how template columns are used in SfDataGrid - -![Template column in Xamarin.iOS SfDataGrid](SfDataGrid_images/TemplateColumns.png) - -## GridSwitchColumn - -The [GridSwitchColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSwitchColumn.html) is derived from [GridColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html), and hence it inherits all the properties of `GridColumn`. It loads a [UISwitch](https://developer.xamarin.com/api/type/MonoTouch.UIKit.UISwitch/) as the content of record cells in the column and responds to value changes in it. You can change the underlying data source by toggling the values shown in the `UISwitch`. To create `GridSwitchColumn` in SfDataGrid the property corresponding to the column in the underlying collection must be of type [bool](https://msdn.microsoft.com/en-us/library/system.boolean(v=vs.110).aspx). - -The following code example shows how to use `GridSwitchColumn`. - -{% highlight c# %} -dataGrid = new SfDataGrid(); -GridSwitchColumn switchColumn = new GridSwitchColumn() -{ - HeaderText = "Is Closed", - MappingName = "IsClosed" -}; -data.Column.Add(switchColumn); -{% endhighlight %} - -{% highlight c# %} -// Model class -public class OrderInfo -{ - private bool _isClosed; - - public bool IsClosed - { - get { return _isClosed; } - set - { - this._isClosed = value; - } - } -} - -// ViewModel class -public class ViewModel -{ - public ViewModel() - { - GetOrderDetails(50); - } - - #region ItemsSource - - private ObservableCollection ordersInfo; - - public ObservableCollection OrdersInfo - { - get { return ordersInfo; } - set { this.ordersInfo = value; } - } - - #endregion - - #region ItemSource Generator - - public void GetOrderDetails(int count) - { - var orderDetails = new ObservableCollection(); - for (int i = 1; i <= count; i++) - { - var order = new OrderInfo() - { - IsClosed = (i % 2) == 0 ? true : false - }; - orderDetails.Add(order); - } - ordersInfo = orderDetails; - } - - #endregion -} -{% endhighlight %} -![Grid switch column in Xamarin.iOS SfDataGrid](SfDataGrid_images/SwitchColumn.jpg) - -### Editing for switch column - -SfDatagrid allows you to edit the switch column by setting the [AllowEditing](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfDataGrid.XForms.SfDataGrid.html#Syncfusion_SfDataGrid_XForms_SfDataGrid_AllowEditingProperty) property as `true`. By default, `AllowEditing` is `true`. If you set `AllowEditing` as `false` you cannot check or uncheck the Switch column. - -The below code illustrates how to set the `AllowEditing`. - -{% highlight c#%} - -GridSwitchColumn column = new GridSwitchColumn(); - -column.MappingName = "IsClosed"; - -column.AllowEditing = true; - -{% endhighlight%} - -## GridImageColumn - -[GridImageColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridImageColumn.html) is derived from [GridColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html), and hence it inherits all the properties of `GridColumn`. It displays images as cell content of a column. To create `GridImageColumn` in SfDataGrid the property corresponding to the column in the underlying collection must be of type [UIImage](https://developer.xamarin.com/api/type/MonoTouch.UIKit.UIImage/). - -The [ImageMapStream](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.ImageMapStream.html) converts the memory stream to image data, which in turn is converted to `UIImage` by the [ToUIImage](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.Imagehelper.html#Syncfusion_SfDataGrid_ImageHelper_ToUIImage_Syncfusion_SfDataGrid_ImageMapStream_) extension method of the [ImageHelper](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.Imagehelper.html) static class. - -The following code example shows how to create a memory stream and use it to load images(embedded resource) in GridImageColumn using the above mentioned methods. - -{% highlight c# %} -GridImageColumn imageColumn = new GridImageColumn(); -imageColumn.MappingName = "Image"; -imageColumn.HeaderText = "Image"; -{% endhighlight %} - -{% highlight c# %} -// Model class -public class OrderInfo -{ - private UIImage image; - - public UIImage Image - { - get { return this.=image; } - set - { - this.image = value; - RaisePropertyChanged("Image"); - } - } -} - -// ViewModel class -public class ViewModel -{ - public ViewModel() - { - GetOrderDetails(50); - } - - #region ItemsSource - - private ObservableCollection ordersInfo; - - public ObservableCollection OrdersInfo - { - get { return ordersInfo; } - set { this.ordersInfo = value; } - } - - #endregion - - #region ItemSource Generator - - public void GetOrderDetails(int count) - { - var orderDetails = new ObservableCollection(); - for (int i = 1; i <= count; i++) - { - var order = new OrderInfo() - { - Image = ImageHelper.ToUIImage(new ImageMapStream(LoadResource("Image" + (i % 29) + ".png").ToArray())),// Need to give the image path properly - }; - orderDetails.Add(order); - } - ordersInfo = orderDetails; - } - - // Create memory stream - public MemoryStream LoadResource (String Name) - { - MemoryStream memory = new MemoryStream (); - - var assembly = Assembly.GetExecutingAssembly (); - - var path = String.Format ("GettingStarted.Resources.{0}", Name); - - var aStream = assembly.GetManifestResourceStream (path); - - aStream.CopyTo (memory); - - return memory; - } - #endregion -} -{% endhighlight %} - -![Grid image column in Xamarin.iOS SfDataGrid](SfDataGrid_images/ImageColumn.jpg) - -N> The images should have its BuildAction set as EmbeddedResource since we are getting the image as stream from an [Assembly.GetManifestResourceStream](https://developer.xamarin.com/api/member/System.Reflection.Assembly.GetManifestResourceStream/p/System.Type/System.String/) in the LoadResource method. - -## GridDateTimeColumn - -The [GridDateTimeColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridDateTimeColumn.html) is derived from [GridColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html) thereby inheriting all the properties of `GridColumn`. It displays the date information as the content of a column. To create `SfDataGrid.GridDateTimeColumn` in SfDataGrid, the property corresponding to the column in the underlying collection must be of type [DateTime](https://msdn.microsoft.com/en-us/library/system.datetime(v=vs.110).aspx). You can enable or disable editing for the particular column by setting the [GridColumn.AllowEditing](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_AllowEditing) property to true or false. In the editing mode it displays a customized `DatePicker` element that enables you to scroll through a list of dates between the [GridDateTimeColumn.MinimumDate](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridDateTimeColumn.html#Syncfusion_SfDataGrid_GridDateTimeColumn_MinimumDate) and [GridDateTimeColumn.MaximumDate](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridDateTimeColumn.html#Syncfusion_SfDataGrid_GridDateTimeColumn_MaximumDate) and select one from it. - -{% highlight c# %} -dataGrid = new SfDataGrid(); -GridDateTimeColumn dateColumn = new GridDateTimeColumn() -{ - MappingName = "ShippedDate", - HeaderText = "Shipped Date", - Format = "d" -}; -dataGrid.Columns.Add(dateColumn); -{% endhighlight %} - -{% highlight c# %} -// Model class -public class OrderInfo -{ - private DateTime shippedDate; - - public DateTime ShippedDate - { - get { return shippedDate; } - set - { - shippedDate = value; - RaisePropertyChanged("ShippedDate"); - } - } -} - -// ViewModel class -public class ViewModel -{ - private List OrderedDates; - - public ViewModel() - { - GetOrderDetails(50); - } - - #region ItemsSource - - private ObservableCollection ordersInfo; - - public ObservableCollection OrdersInfo - { - get { return ordersInfo; } - set { this.ordersInfo = value; } - } - - #endregion - - #region ItemSource Generator - - private List GetDateBetween(int startYear, int endYear, int count) - { - List date = new List(); - Random d = new Random(1); - Random m = new Random(2); - Random y = new Random(startYear); - for (int i = 0; i < count; i++) - { - int year = y.Next(startYear, endYear); - int month = m.Next(3, 13); - int day = d.Next(1, 31); - date.Add(new DateTime(year, month, day)); - } - return date; - } - - public void GetOrderDetails(int count) - { - var orderDetails = new ObservableCollection(); - this.OrderedDates = GetDateBetween(2000, 2014, count); - for (int i = 1; i <= count; i++) - { - var order = new OrderInfo() - { - ShippedDate = this.OrderedDates[i - 1], - }; - orderDetails.Add(order); - } - ordersInfo = orderDetails; - } - - #endregion -} -{% endhighlight %} - -![Grid datetime column in Xamarin.iOS SfDataGrid](SfDataGrid_images/DateTimeColumn.jpg) - -## GridPickerColumn - -The [GridPickerColumn](https://help.syncfusion.com/cr/xamarin-iOS/Syncfusion.SfDataGrid.GridPickerColumn.html) is derived from [GridColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html) thereby inheriting all the properties of `GridColumn`. It displays a list of items in the form of a picker as the content of a column. You can enable or disable editing for the particular column by setting the [GridColumn.AllowEditing](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_AllowEditing) property to true or false. In the editing mode it displays a customized `Picker` element that enables you to scroll through a list of values from the underlying collection and select one from it. The data source to `Picker` can be set by using [GridPickerColumn.ItemsSource](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridPickerColumn.html#Syncfusion_SfDataGrid_GridPickerColumn_ItemsSource) property. The picker column can be populated with data by the following ways. - -* Collection of primitive types -* Collection of user defined types (Custom objects) - -![Grid picker column in Xamarin.iOS SfDataGrid](SfDataGrid_images/PickerColumn.jpg) - -### Collection of primitive types - -You can create a `GridPickerColumn` and set its `ItemsSource` property to a simple collection to display the collection items in the picker drop down. -The following code example shows you how to load the `GridPickerColumn` with a simple string collection. - -{% highlight c# %} -dataGrid = new SfDataGrid(); -GridPickerColumn pickerColumn = new GridPickerColumn() -{ - BindingContext = viewModel, - ItemsSource = viewModel.CustomerNames, - MappingName = "DealerName", - HeaderText = "Dealer Name" - -}; -dataGrid.Columns.Add(pickerColumn); -{% endhighlight %} - -{% highlight c# %} -// ViewModel class -public class ViewModel -{ - public ObservableCollection CustomerNames { get; set; } - - public ViewModel() - { - this.CustomerNames = Customers.ToObservableCollection(); - } - - internal string[] Customers = new string[] { - "Adams", - "Crowley", - "Ellis", - "Gable", - "Irvine", - "Keefe", - "Mendoza", - "Owens", - "Rooney", - "Waddle", - }; -} -{% endhighlight %} - -### Collection of User Defined Types - -You can create a `GridPickerColumn` and set its ItemsSource property to a user-typed collection to display a list of user defined items in the picker drop down. Initially the picker column will be displayed with the values from the [GridColumn.MappingName](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_MappingName) property of the column if the [DisplayMemberPath](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridPickerColumn.html#Syncfusion_SfDataGrid_GridPickerColumn_DisplayMemberPath) and [ValueMemberPath](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridPickerColumn.html#Syncfusion_SfDataGrid_GridPickerColumn_ValueMemberPath) are not set. - -#### DisplayMemberPath - - Displays a value by comparing the values of the properties set as `GridColumn.MappingName` and `ValueMemberPath` in their respective underlying collections. If the `ValueMemberPath` property's values contains the `MappingName` property's current value, then its corresponding `DisplayMemberPath` property's value is displayed in the `GridCell`. Else the `GridCell` appears blank. However in the edit mode the values of the `DisplayMemberPath` property are displayed as the picker items. - -#### ValueMemberPath - - Once editing is ended the column having the `MappingName` equal to the `ValueMemberPath` has its data changed to the corresponding `ValueMemberPath` value for the selected `DisplayMemberPath` value in the picker. - -### Customization of picker dropdown values -The following code example shows you how to customize the picker data using `DisplayMemberPath` and `ValueMemberPath` - -{% highlight c# %} -sfGrid = new SfDataGrid(); -viewModel = new ViewModel(); -sfGrid.ItemsSource = viewModel.OrdersInfo; - -GridTextColumn orderIDColumn = new GridTextColumn(); -orderIDColumn.MappingName = "OrderID"; -orderIDColumn.HeaderText = "Order ID"; - -GridPickerColumn pickerColumn = new GridPickerColumn(); -pickerColumn.MappingName = "OrderID"; -pickerColumn.HeaderText = "Picker Column"; -pickerColumn.DisplayMemberPath = "EmployeeID"; -pickerColumn.ValueMemberPath = "OrderID"; -pickerColumn.ItemsSource = viewModel.PickerInfo; - -sfGrid.Columns.Add(orderIDColumn); -sfGrid.Columns.Add(pickerColumn); - -// ViewModel class -public class ViewModel -{ - public class ViewModel :INotifyPropertyChanged - { - public ViewModel () - { - SetRowsToGenerate (100); - this.PickerInfo = OrdersInfo.ToList(); - } - - #region ItemsSource - - private OrderInfoRepository order; - - private ObservableCollection ordersInfo; - - public ObservableCollection OrdersInfo - { - get { return ordersInfo; } - set { this.ordersInfo = value; RaisePropertyChanged("OrdersInfo"); } - } - - public List PickerInfo - { - get; - set; - } - - #endregion - - #region ItemSource Generator - - public void SetRowsToGenerate (int count) - { - order = new OrderInfoRepository (); - ordersInfo = order.GetOrderDetails (count); - } - - #endregion - - public ObservableCollection GetOrderDetails(int count) - { - ObservableCollection orderDetails = new ObservableCollection (); - - for (int i = 1; i <= count; i++) { - - var order = new OrderInfo () { - OrderID = i, - EmployeeID = i+5, - }; - orderDetails.Add (order); - } - return orderDetails; - } - - #region INotifyPropertyChanged implementation - - public event PropertyChangedEventHandler PropertyChanged; - - private void RaisePropertyChanged(String name) - { - if (PropertyChanged != null) - this.PropertyChanged(this, new PropertyChangedEventArgs(name)); - } - - #endregion - } -} -{% endhighlight %} - -The following screenshots explains the above code and shows the working of the `PickerColumn` with `ValueMemberPath` and `DisplayMemberPath` properties set. - -Here in the above code example underlying collection has 2 properties (OrderID,EmployeeID). We have created a `GridPickerColumn` with MappingName = OrderID, DisplayMemberPath = EmployeeID, ValueMemberPath = OrderID. EmployeeId has the values 6,7,8,9,10.... and OrderID has the values 1,2,3,4,5.... Initially the GridCells of the `PickerColumn` will be displayed with the values 6,7,8,9,10.... in row wise order based on the `DisplayMemberPath`. - -![Customizing picker dropdown values in Xamarin.iOS SfDataGrid](SfDataGrid_images/PickerColumn_DisplayMemberPath.png) - -Upon entering the edit mode at RowColumnIndex(1,1) , the Picker pop up opens and with the picker items as 6,7,8,9,10.... again based on the `DisplayMemberPath`. - -![Customizing picker popup values in Xamarin.iOS SfDataGrid](SfDataGrid_images/PickerColumn_PickerPopUp.png) - -When edit mode is exited by selecting a value(9) from the Picker pop up, the `GridCell` at RowColumn index (0,1) displays the corresponding OrderID value for the selected EmployeeID value which is 4. Note that the PickerColumn's `GridCell` data is not changed and only the OrderID columns data is changed to 4. - -![Customizing picker column values in Xamarin.iOS SfDataGrid](SfDataGrid_images/PickerColumn_Customization.png) - -## GridNumericColumn - -The [GridNumericColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridNumericColumn.html) is derived from [GridColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html) thereby inheriting all the properties of `GridColumn`. It is used to display numeric data. To create `GridNumericColumn` in SfDataGrid, the property corresponding to the column in the underlying collection must be a numeric type (int, double, float etc). You can enable or disable editing for the particular column by setting the [GridColumn.AllowEditing](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_AllowEditing) property to true or false. In the editing mode it displays the [SfNumericTextBox](https://help.syncfusion.com/cr/xamarin-ios/sfnumerictextbox) element. The below code example shows how to create a `GridNumericColumn` in SfDataGrid. - -{% highlight c# %} -dataGrid = new SfDataGrid(); - -GridNumericColumn numericColumn = new GridNumericColumn() -{ - MappingName = "ProductNo", - HeaderText = "Product No", - NumberDecimalDigits =0 -}; -dataGrid.Columns.Add(numericColumn); -{% endhighlight %} - -### Number Formatting - -`GridNumericColumn` allows you to format the numeric data with culture-specific information. - -* [NumberDecimalDigits](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridNumericColumn.html#Syncfusion_SfDataGrid_GridNumericColumn_NumberDecimalDigits) - You can change the number of decimal digits to be displayed after the decimal point using `GridNumericColumn.NumberDecimalDigits` property. - -* [NumberDecimalSeparator](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridNumericColumn.html#Syncfusion_SfDataGrid_GridNumericColumn_NumberDecimalSeparator) - By default, the dot (.) operator separates the decimal part of numeric value .You can use any operator as decimal separator using `GridNumericColumn.NumberDecimalSeparator` property. - -* [NumberGroupSeparator](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridNumericColumn.html#Syncfusion_SfDataGrid_GridNumericColumn_NumberGroupSeparator) - By default, the comma (,) separates group of digits before the decimal point. You can use any operator as group separator using `GridNumericColumn.NumberGroupSeparator` property. - -* [NumberGroupSizes](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridNumericColumn.html#Syncfusion_SfDataGrid_GridNumericColumn_NumberGroupSizes) - You can change the number of digits in each group before the decimal point on numeric values using `GridNumericColumn.NumberGroupSizes` property. - -* [NumberNegativePattern](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridNumericColumn.html#Syncfusion_SfDataGrid_GridNumericColumn_NumberNegativePattern) - You can format the pattern of negative numeric values using `GridNumericColumn.NumberNegativePattern`. - -* [MinValue](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridEditorColumn.html#Syncfusion_SfDataGrid_GridEditorColumn_MinValue) - You can set the minimum value of the numeric column using `GridNumericColumn.MinValue` property. -* [MaxValue](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridEditorColumn.html#Syncfusion_SfDataGrid_GridEditorColumn_MaxValue) - You can set the maximum value of the numeric column using `GridNumericColumn.MaxValue` property. - -![Number formatting in Xamarin.iOS SfDataGrid](SfDataGrid_images/NumericColumn.jpg) - -## Row Header - -RowHeader is a special column which is placed as first cell of each row and it will always be frozen. To enable the RowHeader in SfDataGrid, you need to set the [SfDataGrid.ShowRowHeader](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ShowRowHeader) property as `true`. - -Further, SfDataGrid allows you to customize the row header width using the [SfDataGrid.RowHeaderWidth](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_RowHeaderWidth) property. The default value of `SfDataGrid.RowHeaderWidth` is 20. - -The below code example illustrates how to enable and customize the row header in SfDataGrid. - -{% highlight c# %} - -dataGrid.ShowRowHeader = true; -dataGrid.RowHeaderWidth = 50; - -{% endhighlight %} diff --git a/xamarin-ios/SfDataGrid/Columns.md b/xamarin-ios/SfDataGrid/Columns.md deleted file mode 100644 index 1328afd7..00000000 --- a/xamarin-ios/SfDataGrid/Columns.md +++ /dev/null @@ -1,314 +0,0 @@ ---- -layout: post -title: Columns | SfDataGrid | Xamarin.iOS | Syncfusion -description: How to create and add columns, different ways to create columns and its customizations in a SfDataGrid. -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- - -# Columns - -The data grid creates and add columns in two ways: - -* Automatic Columns generation based on the underlying collection. -* Manually defining columns in C#. - - -## Automatic columns generation - -The data grid creates columns automatically based on the [SfDataGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AutoGenerateColumns) property. Columns are generated based on the type of individual properties in the underlying collection which is set as ItemsSource. For example, [GridNumericColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridNumericColumn.html) is added for the int type property. For remaining types, [GridTextColumn](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridTextColumn.html) will be created. Following table shows the column type created for the respective data type. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Data Tye Column
string and object GridTextColumn
int, float, double, decimal, and its respective nullable types GridNumericColumn
DateTime GridDateTimeColumn
bool GridSwitchColumn
enum GridPickerColumn
UIImage GridImageColumn
- -You can refer to the sample [here](http://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoGenerateColumn_IOS572781242) to know the codes for defining properties in the Model class and populating the data for generating different types of column automatically. - -### AutoGenerateColumns with different modes - -The auto generation of the columns in SfDataGrid is based on the [SfDataGrid.AutoGenerateColumnsMode](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AutoGenerateColumnsMode) property. - -The `SfDataGrid.AutoGenerateColumnsMode` determines how to create columns when `SfDataGrid.AutoGenerateColumns` is set to `true`. It also decides whether to retain grouping and sorting when the ItemsSource is changed. - -The `SfDataGrid.AutoGenerateColumnsMode` is of type [AutoGenerateColumnsMode](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AutoGenerateColumnsMode) which has the following five options. - - - - - - - - - - - - - - - - - - - - - - - - - - -
Modes Description
{{'[None](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.AutoGenerateColumnsMode.html)'| markdownify }} Stores only the columns that are defined in SfDataGrid.Columns collection.
When changing the ItemsSource, the grouping and sorting for explicitly defined SfDataGrid.Columns alone will be retained.
{{'[Reset](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.AutoGenerateColumnsMode.html)'| markdownify }} Retains the defined columns explicitly in the application level and creates columns newly for all the other properties in a data source.
When changing the ItemsSource, grouping and sorting for explicitly defined `SfDataGrid.Columns` alone will be retained.
{{'[ResetAll](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.AutoGenerateColumnsMode.html)'| markdownify }} When changing the ItemsSource, the columns for the previous data source are cleared and the columns will be created newly for the new data source. Even when columns are explicitly defined it does not consider the defined columns and creates the column based on the underlying collection.
Further, when changing the ItemsSource, grouping and sorting for all the columns will be cleared.
{{'[RetainOld](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.AutoGenerateColumnsMode.html)'| markdownify }} When changing the ItemsSource, it creates columns for all fields in the data source when the grid does not have any explicit definition for columns. When columns are defined explicitly, the defined columns are retained and new columns are not created.
Similarly, when changing the ItemsSource and when the grid have any explicit definition for columns, grouping and sorting are retained as it is.
{{'[SmartReset](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.AutoGenerateColumnsMode.html)'| markdownify }} Retains the columns defined explicitly in the application level and the columns with MappingName identical to the properties in the new data source. Creates columns newly for all the other properties in the data source.
Similarly, it retains grouping and sorting of the columns that are defined explicitly in application level and the columns with MappingName identical to the properties in the new data source.
- -Default value of the `SfDataGrid.AutoGenerateColumns` property is `true` and `SfDataGrid.AutoGenerateColumnsMode` is `Reset`. Hence, by default, the data grid creates columns automatically for every non-explicitly defined public property in the underlying collection bound to its `ItemsSource` property. - -N> When you change items source for the data grid at runtime, the columns are generated on the basis of option set for `SfDataGrid.AutoGenerateColumnsMode`. - -### Customize automatically generated columns - -When the `SfDataGrid.AutoGenerateColumns` is `true`, the [SfDataGrid.AutoGeneratingColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html) event is raised for each GridColumn. This event receives two arguments namely, sender which is the data grid and [AutoGeneratingColumnArgs](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.AutoGeneratingColumnArgs.html). - -The `AutoGeneratingColumnArgs` object contains the following property: - -* [Column](https://help.syncfusion.com/cr/xamarin-ios/): This property returns the created column using which you can customize the column. -* [Cancel](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.ComponentModel.CancelEventArgs.Cancel)&rd=true): This property cancels the column creation. -* PropertyType: This property provides the type of underlying model property for which the column is created. - -You can skip generating a column by handling the `SfDataGrid.AutoGeneratingColumn` event as shown as follows: - -{% highlight c# %} -dataGrid.AutoGeneratingColumn += GridAutoGeneratingColumns; - -void GridAutoGeneratingColumns(object sender, AutoGeneratingColumnArgs e) -{ - if (e.Column.MappingName == "EmployeeID") - e.Cancel = true; -} -{% endhighlight %} - -Customizing the width for auto generated columns as shown below. - -{% highlight c# %} -void dataGrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnArgs e){ -if (e.Column.MappingName == "OrderID") { - e.Column.Width = 100; - } -} -{% endhighlight %} - -You can also apply formatting for auto generated columns as shown below. - -{% highlight c# %} -void GridAutoGeneratingColumns(object sender, AutoGeneratingColumnArgs e) -{ - if (e.Column.MappingName == "Freight") { - e.Column.Format = "C"; - e.Column.CultureInfo = new CultureInfo ("en-US"); - } else if (e.Column.MappingName == "ShippingDate") - e.Column.Format = "dd/MM/yyyy"; -} -{% endhighlight %} - -You can perform any desired operation based on the property type of the underlying model object as follows. - -{% highlight c# %} -void GridAutoGeneratingColumns(object sender,AutoGeneratingColumnEventArgs e) -{ - if(e.PropertyType == typeof(string)) - { - // Here we have hidden the columns if the underlying property type is string. - e.Column.IsHidden = true; - } -} -{% endhighlight c# %} - -You can also customize a column’s header text, sorting, alignment, padding, etc. by handling the `SfDataGrid.AutoGeneratingEvent`. - - -## Manually generated columns - -The data grid also defines the columns manually by adding the grid column objects to the `SfDataGrid.Columns` collection. To view the manually defined columns, set the `SfDataGrid.AutoGenerateColumns` property to `false`. There are different types of columns available in the data grid, and you can create any column through code. - -The following code example illustrates creating columns manually in the data grid: - -{% highlight c# %} -dataGrid.AutoGenerateColumns = false; - -GridTextColumn orderIdColumn = new GridTextColumn (); -orderIdColumn.MappingName = "OrderID"; -orderIdColumn.HeaderText = "Order ID"; - -GridTextColumn customerIdColumn = new GridTextColumn (); -customerIdColumn.MappingName = "CustomerID"; -customerIdColumn.HeaderText = "Customer ID"; - -GridTextColumn customerColumn = new GridTextColumn (); -customerColumn.MappingName = "Customer"; - -GridTextColumn countryColumn = new GridTextColumn (); -countryColumn.MappingName = "ShipCountry"; -countryColumn.HeaderText = "Ship Country"; - -dataGrid.Columns.Add (orderIdColumn); -dataGrid.Columns.Add (customerIdColumn); -dataGrid.Columns.Add (customerColumn); -dataGrid.Columns.Add (countryColumn); -{% endhighlight %} - -## Resizing columns - -The data grid allows resizing the columns by tapping and dragging the right border of the column headers. Resizing can be enabled or disabled by setting the [SfDataGrid.AllowResizingColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AllowResizingColumn) property. A resizing indicator is displayed while resizing a column. - -N> Resizing considers the [GridColumn.MinimumWidth](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_MinimumWidth) and [GridColumn.MaximumWidth](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_MaximumWidth) of the column and will not resize the past minimum and maximum width constraints. - - -{% highlight c# %} -dataGrid.AllowResizingColumn = true; -{% endhighlight %} - -![](SfDataGrid_images/Resizing_HitTest_iOS.png) -![](SfDataGrid_images/Resizing_OnMoved.png) - -N> The resizing indicator appears when tapping the right corner of the column header. - -You can interactively hide a column by setting the `GridColumn.MinimumWidth` property to 0 and resizing the column to a width less than 0. - -### Resizing modes - -The data grid allows two modes of resizing which can be set using the [SfDataGrid.ResizingMode](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ResizingMode) property. The available resizing modes are: - -* [OnMoved](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.ResizingMode.html): The resizing indicator is moved based on the touch point and the width of the column is updated as the resizing indicator moves. -* [OnTouchUp](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.ResizingMode.html): The resizing indicator is moved based on the touch point but however the width of the column is updated only on a touch up operation. - -N> Default resizing mode is `OnMoved`. - -The following image shows the resizing mode `OnMoved`. - -![](SfDataGrid_images/Resizing_OnMoved.png) - -The following image shows the resizing mode `OnTouchUp`. - -![](SfDataGrid_images/Resizing_OnTouchUp.png) - -### Resizing events - -The resizing operation can be handled by using the [SfDataGrid.ColumnResizing](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html) event. The `SfDataGrid.ColumnResizing` event is fired upon starting to resize a column and will be continuously fired till the resizing operation ends. - -By handling the `SfDataGrid.ColumnResizing` event, you can also cancel the resizing of a particular column. - -The `SfDataGrid.ColumnResizing` event provides the following properties through [GridResizingEventArgs](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridResizingEventArgs.html). - -* [Index](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridResizingEventArgs.html#Syncfusion_SfDataGrid_GridResizingEventArgs_Index): Returns the index of the resizing column. -* [NewValue](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridResizingEventArgs.html#Syncfusion_SfDataGrid_GridResizingEventArgs_NewValue): Returns the current width of the column being resized. -* [ResizingState](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridResizingEventArgs.html#Syncfusion_SfDataGrid_GridResizingEventArgs_ResizingState): Returns the current state of the user interaction through a value from the ProgressStates enum. -* [Cancel](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.ComponentModel.CancelEventArgs.Cancel)&rd=true): Returns a Boolean property to cancel the event and the resizing operation. - -### Cancel resizing for a column - -You can cancel resizing for a particular column using the [SfDataGrid.ColumnResizing](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html) event. You can cancel the resizing operation of a column based on the different arguments provided in the `GridResizingEventArgs`. - -The following code example shows how to cancel resizing for a column using the `SfDataGrid.ColumnResizing` event using the `Index` value. - -{% highlight c# %} - this.dataGrid.ResizingColumns += dataGrid_ResizingColumns; - private void DataGrid_ColumnResizing(object sender, GridResizingEventArgs e) - { - //Code to end resizing if ColumnIndex is 2 - if (e.Index == 2) - e.Cancel = true; - } -{% endhighlight %} - -The following code example shows how to cancel resizing for a column using the `SfDataGrid.ColumnResizing` event using the `NewValue` value. - -{% highlight c# %} - this.dataGrid.ResizingColumns += dataGrid_ResizingColumns; - private void DataGrid_ColumnResizing(object sender, GridResizingEventArgs e) - { - //Code to end resizing if Column's Width is >= 100 - if (e.NewValue >= 100 ||) - e.Cancel = true; - } -{% endhighlight %} - -The following code example shows how to cancel resizing for a column using the `SfDataGrid.ColumnResizing` event using the `ProgressStates` value. - -{% highlight c# %} - this.dataGrid.ResizingColumns += dataGrid_ResizingColumns; - private void DataGrid_ColumnResizing(object sender, GridResizingEventArgs e) - { - //Code to end resizing if interaction state is Progressing - if (e.ResizingState = ProgressStates.Progressing) - e.Cancel = true; - } -{% endhighlight %} - -You can cancel resizing for a particular column using the `SfDataGrid.ColumnResizing` event. The following code example shows how to cancel resizing for a column using the `SfDataGrid.ColumnResizing` event. - -{% highlight c# %} - this.dataGrid.ResizingColumns += dataGrid_ResizingColumns; - private void DataGrid_ColumnResizing(object sender, GridResizingEventArgs e) - { - //Code to end resizing if ColumnIndex is 2 or Column's Width is >= 100 or if interaction state is Progressing - if (e.Index == 2 || e.NewValue >= 100 || e.ResizingState = ProgressStates.Progressing) - e.Cancel = true; - } -{% endhighlight %} - -## Picker closed event - -This event is available for both the `GridPickerColumn` and the `GridDateTimeColumn`.The [GridPickerColumn.Closed](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridPickerColumn.html) and the [GridDateTimeColumn.Closed](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridDateTimeColumn.html) events will be triggered whenever the "Done" button is pressed in Picker editor and DateTime editor of the `GridPickerColumn` and `GridDateTimeColumn` respectively. This event handler contains the parameter of type [PickerClosedEventArgs](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.PickerClosedEventArgs.html) that contains the following properties. - -* [OldValue](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.PickerClosedEventArgs.html#Syncfusion_SfDataGrid_PickerClosedEventArgs_OldValue) : Gets the old value of the picker. -* [NewValue](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.PickerClosedEventArgs.html#Syncfusion_SfDataGrid_PickerClosedEventArgs_NewValue) : Gets the newly selected value of the picker. -* [Action](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.PickerClosedEventArgs.html#Syncfusion_SfDataGrid_PickerClosedEventArgs_Action) : Returns string value "Commit" when "Done" button is pressed or "Cancel" when the picker view is collapsed without pressing "Done" button. - -The following code illustrates how to hook the `Closed` event and get the picker details. - -{% highlight c# %} - - //For GridPickerColumn event has been raised. - GridPickerColumn pickerColumn= new GridPickerColumn() { MappingName = "ShipCountry" }; - pickerColumn.Closed += Closed_Method; - dataGrid.Columns.Add(pickerColumn); - - //For GridDateTimeColumn event has been raised. - GridDateTimeColumn dateTimeColumn = new GridDateTimeColumn() { MappingName = "ShippingDate" }; - dateTimeColumn.Closed += Closed_Method; - dataGrid.Columns.Add(dateTimeColumn); - - private void Closed_Method(object sender, PickerClosedEventArgs e) - { - var newValue = e.NewValue; - var oldValue = e.OldValue; - var action = e.Action; - } - -{% endhighlight %} diff --git a/xamarin-ios/SfDataGrid/Data-Binding.md b/xamarin-ios/SfDataGrid/Data-Binding.md deleted file mode 100644 index 8d77ba2b..00000000 --- a/xamarin-ios/SfDataGrid/Data-Binding.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -layout: post -title: Data Binding | SfDataGrid | Xamarin.iOS | Syncfusion -description: Learn here how to bind the data from different sources in Syncfusion Xamarin.iOS DataGrid (SfDataGrid) control with more detail. -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- - -# Data Binding from different sources in Xamarin.iOS SfDataGrid - -The SfDataGrid is bound to an external data source to display the data. It supports the data sources such as [List](https://msdn.microsoft.com/en-us/library/6sh2ey19(v=vs.110).aspx), [ObservableCollection](https://msdn.microsoft.com/en-us/library/ms668604(v=vs.110).aspx), and so on. [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ItemsSource) property helps to bind the SfDataGrid with the collection of objects. - -In order to bind the data source of the SfDataGrid, set the `SfDataGrid.ItemsSource` property as shown below such that each row in the SfDataGrid would bind to an object in the data source and each column would bind to a property in the data model object. - -{% highlight c# %} -OrderInfoRepository viewModel = new OrderInfoRepository (); -dataGrid.ItemsSource = viewModel.OrderInfoCollection; -{% endhighlight %} - -If the data source implements `ICollectionChanged` interface, then SfDataGrid will automatically refresh the view when an item is added, removed or cleared. When you add or remove an item in `ObservableCollection`, the SfDataGrid automatically refreshes the view as the `ObservableCollection` implements the [INotifyCollectionChanged](https://msdn.microsoft.com/en-us/library/system.collections.specialized.inotifycollectionchanged(v=vs.110).aspx). But when you do the same in `List`, SfDataGrid will not refresh the view automatically. - -If the data model implements the `INotifyPropertyChanged` interface, then the SfDataGrid responds to the property change in runtime to update the view. - -## Binding with IEnumerable - -SfDataGrid control supports to bind any collection that implements the [IEnumerable](https://msdn.microsoft.com/en-us/library/system.collections.ienumerable) interface. All the data operations such as sorting, grouping, filtering are supported when you are binding collection derived from `IEnumerable`. - -## Binding with DataTable - -SfDataGrid control supports to bind the [DataTable](https://msdn.microsoft.com/en-us/library/system.data.datatable). SfDataGrid control automatically refresh the UI when you are binding `DataTable` as `ItemsSource` when rows are added, removed or cleared. - -The following code illustrates how to create and bind `DataTable` as `ItemsSource` to SfDataGrid. - -{% highlight c# %} -// In ViewModel - -public class ViewModel -{ - public ViewModel() - { - SetRowsToGenerate(50); - } - - private DataTable dataTable; - - public DataTable DataTable - { - get { return dataTable; } - set { this.dataTable = value; } - } - - public void SetRowsToGenerate (int count) - { - dataTable = new DataTable(); - dataTable.Columns.Add("Name"); - dataTable.Columns.Add("ID"); - - for (int i = 1; i < count; i++) - { - dataTable.Rows.Add("Name" + i.ToString(),10000 + i); - } - } -} - -// In MyViewController.cs - -SfDataGrid dataGrid = new SfDataGrid(); -ViewModel viewModel = new ViewModel(); -dataGrid.ItemsSource = viewModel.DataTable; - -this.View.Add(dataGrid); -{% endhighlight %} - -Below are the limitations when binding DataTable as `ItemsSource` to SfDataGrid. - -* Custom sorting is not supported. -* [SfDataGrid.View.Filter](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Filter) is not supported. -* Advanced Filtering does not support Case Sensitive filtering. -* [GridUnboundColumn.Expression](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridUnboundColumn.html#Syncfusion_SfDataGrid_GridUnboundColumn_Expression) is not supported. This can be achieved by using the [DataColumn](https://msdn.microsoft.com/en-us/library/System.Data.DataColumn) of DataTable by setting [DataColumn.Expression](https://msdn.microsoft.com/en-us/library/system.data.datacolumn.expression) property. -* [SfDataGrid.LiveDataUpdateMode](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_LiveDataUpdateMode) is not supported. -* Filtering with [TimeSpan](https://msdn.microsoft.com/en-us/library/system.timespan) values is not supported. -* Filtering with sub second components in `DateTime` values is not supported. - -## Binding Complex properties - -SfDataGrid control provides support to bind complex property to its columns. To bind the complex property to [GridColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html), set the complex property path to [MappingName](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_MappingName). - -{% highlight c# %} -this.dataGrid.Columns.Add(new GridTextColumn() { MappingName = "OrderID.Order" }); -{% endhighlight %} - -## Binding Indexer properties - -SfDataGrid control provides support to bind an indexer property to its columns. To bind an indexer property to [GridColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html), set the indexer property path to [MappingName](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_MappingName). - -{% highlight c# %} -this.dataGrid.Columns.Add(new GridTextColumn() { MappingName = "CustomerID[0].Customer" }); -{% endhighlight %} - -## View - -DataGrid has the [View](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_View) property of type [ICollectionViewAdv](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.Data.CollectionViewAdv.html) interface that implements `ICollectionView` interface. `View` is responsible for maintain and manipulation data and other advanced operations like `Sorting`, `Grouping`, and etc. - -When you bind Collection to `ItemsSource` property of SfDataGrid, then `View` will be created and maintains the operations on `Data` such as `Grouping`, `Sorting`, `Insert`, `Delete`, and `Modification`. - -N> DataGrid creates different types of views derived from `ICollectionViewAdv` interface based on `ItemsSource`. - -I> `View` related properties can be used only after creating `SfDataGrid` view. Hence changes related to view can be done in `SfDataGrid.GridViewCreated` or `SfDataGrid.GridLoaded` event or in runtime only. - -The following property is associated with `View`. - -### LiveDataUpdateMode - -SfDataGrid provides support to update the view during data manipulation operations and property changes using LiveDataUpdateMode(https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.Data.LiveDataUpdateMode.html). It allows you to customize when to update the view based on the `SfDataGrid.View.LiveDataUpdateMode` property. - - - - - - - - - - - - - - - - - - -
LiveDataUpdateModeDescription
DefaultData operations are not updated
AllowSummaryUpdateSummaries are updated during data manipulation change
AllowDataShapingDataOperations like sorting, grouping and filtering are updated during data manipulation change
- -{% highlight c# %} -dataGrid.GridViewCreated += DataGrid_GridViewCreated; -private void DataGrid_GridViewCreated(object sender, GridViewCreatedEventArgs e) -{ - dataGrid.View.LiveDataUpdateMode = LiveDataUpdateMode.Default; -} -{% endhighlight %} - -The following events are associated with `View`. - -### RecordPropertyChanged - -[RecordPropertyChanged](https://help.syncfusion.com/cr/xamarin-ios/) event is raised when the `DataModel` property value is changed, if the `DataModel` implements the `INotifyPropertyChanged` interface. The event receives with two arguments namely sender that handles the `DataModel` and [PropertyChangedEventArgs](http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.ComponentModel.PropertyChangedEventArgs)&rd=true) as argument. - -`PropertyChangedEventArgs` has below property, - -[PropertyName](https://msdn.microsoft.com/en-us/library/system.componentmodel.propertychangedeventargs.propertyname)  - It denotes the `PropertyName` of the changed value. - -### CollectionChanged - -[CollectionChanged](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.Data.CollectionViewAdv.html) event is raised whenever that is some change in `Records / DisplayElements` collection. The event receives two arguments namely sender that handles `View` object and [NotifyCollectionChangedEventArgs](http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs)&rd=true) as argument. - -`NotifyCollectionChangedEventArgs` has below properties, - -[Action](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs.Action)&rd=true) - It contains the current action. (i.e.) `Add`, `Remove`, ` Move`, `Replace`, `Reset`. - -[NewItems](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs.NewItems)&rd=true) - It contains the list of new items involved in the change. - -[OldItems](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs.OldItems)&rd=true) - It contains the list of old items affected by the `Action`. - -[NewStartingIndex](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs.NewStartingIndex)&rd=true) - It contains the index at which the change occurred. - -[OldStartingIndex](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs.OldStartingIndex)&rd=true) - It contains the index at which the `Action` occurred. - -### SourceCollectionChanged - -[SourceCollectionChanged](https://help.syncfusion.com/cr/xamarin-ios/) event is raised when you make changes in `SourceCollection` for example add or remove the collection. The event receives two arguments namely sender that handles `GridQueryableCollectionViewWrapper` object and `NotifyCollectionChangedEventArgs` as argument. - -`NotifyCollectionChangedEventArgs` has below properties, - -[Action](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs.Action)&rd=true) - It contains the current action. (i.e.) `Add`, `Remove`, `Move`, `Replace`, `Reset`. - -[NewItems](http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs.NewItems)&rd=true) - It contains the list of new items involved in the change. - -[OldItems](http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs.OldItems)&rd=true) - It contains the list of old items affected by the `Action`. - -[NewStartingIndex](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs.NewStartingIndex)&rd=true) - It contains the index at which the change occurred. - -[OldStartingIndex](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.Collections.Specialized.NotifyCollectionChangedEventArgs.OldStartingIndex)&rd=true) - It contains the index at which the `Action` occurred. - -The following is the methods that are associated with View which can be used to defer refresh the view. - - - - - - - - - - - - - - -
-Method Name - -Description -
-DeferRefresh - -Enter the defer cycle so that you can perform all data operations in view and update once. -
-BeginInit & EndInit - -When BeginInit method is called it suspends all the updates until EndInit method is called. You can suspend and resume all the operations in these methods and update the view at once. -
- -### Data Virtualization -SfDataGrid allows you to load large amount of data in less time by setting SfDataGrid.EnableDataVirtualization property to true. - -To set the EnableDataVirtualization property, follow the code example: - -{% highlight c# %} -datagrid.EnableDataVirtualization = true; -{% endhighlight %} diff --git a/xamarin-ios/SfDataGrid/Filtering.md b/xamarin-ios/SfDataGrid/Filtering.md deleted file mode 100644 index 2d917fda..00000000 --- a/xamarin-ios/SfDataGrid/Filtering.md +++ /dev/null @@ -1,561 +0,0 @@ ---- -layout: post -title: Filtering | SfDataGrid | Xamarin.iOS | Syncfusion -description: Filter the records in view using properties in Xamarin.iOS SfDataGrid by simply setting a predicate to the view. -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- - -# Filtering - -SfDataGrid provides support for view filtering. - -## View Filtering - -SfDataGrid provides support to filter the records in view by setting `SfDataGrid.View.Filter` property where `Filter` is a `predicate`. - -In order to filter the records in SfDataGrid, you have to assign the filtered strings to the `ViewModel.FilterText` property which will be later applied in `Filter predicate` that is assigned to `SfDataGrid.View.Filter` in OnFilterChanged() method. - -N> To update the filtering for the newly added row or column, set the `SfDataGrid.View.LiveDataUpdateMode` to `LiveDataUpdateMode.AllowDataShaping`. - -The following code example illustrates the delegate, properties, and methods used in the `ViewModel` class in order to perform the filtering operation. - -{% highlight c# %} -// ViewModel.cs - -#region Filtering - -#region Fields - -private string filterText = ""; -private string selectedColumn = "All Columns"; -private string selectedCondition = "Equals"; -internal delegate void FilterChanged(); -internal FilterChanged filterTextChanged; - -#endregion - -#region Property - -public string FilterText -{ - get { return filterText; } - set - { - filterText = value; - OnFilterTextChanged(); - RaisePropertyChanged("FilterText"); - } -} - -public string SelectedCondition -{ - get { return selectedCondition; } - set { selectedCondition = value; } -} - -public string SelectedColumn -{ - get { return selectedColumn; } - set { selectedColumn = value; } -} - -#endregion - -#region Private Methods - -private void OnFilterTextChanged() -{ - filterTextChanged(); -} - -private bool MakeStringFilter(OrderInfo o, string option, string condition) -{ - var value = o.GetType().GetProperty(option); - var exactValue = value.GetValue(o, null); - exactValue = exactValue.ToString().ToLower(); - string text = FilterText.ToLower(); - var methods = typeof(string).GetMethods(); - if (methods.Count() != 0) - { - if (condition == "Contains") - { - var methodInfo = methods.FirstOrDefault(method => method.Name == condition); - bool result1 = (bool)methodInfo.Invoke(exactValue, new object[] { text }); - return result1; - } - else if (exactValue.ToString() == text.ToString()) - { - bool result1 = String.Equals(exactValue.ToString(), text.ToString()); - if (condition == "Equals") - return result1; - else if (condition == "NotEquals") - return false; - } - else if (condition == "NotEquals") - { - return true; - } - return false; - } - else - return false; -} - -private bool MakeNumericFilter(OrderInfo o, string option, string condition) -{ - var value = o.GetType().GetProperty(option); - var exactValue = value.GetValue(o, null); - double res; - bool checkNumeric = double.TryParse(exactValue.ToString(), out res); - if (checkNumeric) - { - switch (condition) - { - case "Equals": - try - { - if (exactValue.ToString() == FilterText) - { - if (Convert.ToDouble(exactValue) == (Convert.ToDouble(FilterText))) - return true; - } - } - catch (Exception e) - { - Console.WriteLine(e); - } - break; - case "NotEquals": - try - { - if (Convert.ToDouble(FilterText) != Convert.ToDouble(exactValue)) - return true; - } - catch (Exception e) - { - Console.WriteLine(e); - return true; - } - break; - } - } - return false; -} - -#endregion - -#region Public Methods - -public bool FilerRecords(object o) -{ - double res; - bool checkNumeric = double.TryParse(FilterText, out res); - var item = o as OrderInfo; - if (item != null && FilterText.Equals("")) - { - return true; - } - else - { - if (item != null) - { - if (checkNumeric && !SelectedColumn.Equals("All Columns")) - { - bool result = MakeNumericFilter(item, SelectedColumn, SelectedCondition); - return result; - } - else if (SelectedColumn.Equals("All Columns")) - { - if (item.CustomerID.ToLower().Contains(FilterText.ToLower()) || - item.Country.ToLower().Contains(FilterText.ToLower()) || item.Freight.ToString().ToLower().Contains(FilterText.ToLower()) || item.OrderID.ToString().ToLower().Contains(FilterText.ToLower())) - return true; - return false; - } - else - { - bool result = MakeStringFilter(item, SelectedColumn, SelectedCondition); - return result; - } - } - } - return false; -} - -#endregion - -#endregion -{% endhighlight %} - -The following code example illustrates how to create a `UISearchBar` and apply the filtered records to `ViewModel.FilterText` property in `SearchView.QueryTextChange` event. - -{% highlight c# %} -// Code-Behind - -UISearchBar filterText = new UISearchBar(); -filterText.PlaceHolder = "Search in All Columns"; -filterText.TextChanged += OnFilterTextChanged; -filterText.CancelButtonClicked += CancelButtonClicked; - -private void OnFilterTextChanged(object sender, SearchView.QueryTextChangeEventArgs e) -{ - viewModel.FilterText = e.SearchText; -} - -private void CancelButtonClicked(object sender, EventArgs e) -{ - filterText.ResignFirstResponder(); - filterText.SetShowsCancelButton(false, true); - filterText.ResignFirstResponder(); -} -{% endhighlight %} - -![DataGrid with filtered data](SfDataGrid_images/Filtering_img1.png) - -Once you create a `UISearchBar` and a view model, you can perform filtering by setting `SfDataGrid.View.Filter` property. You have to call the `SfDataGrid.View.RefreshFilter()` method after you set the filtered records to the `SfDataGrid.View.Filter` property as like in below code example. - -{% highlight c# %} -// Code-Behind - -viewModel.filterTextChanged = OnFilterChanged; //where ‘filterTextChanged’ is a delegate declared in ViewModel class. - -private void OnFilterChanged() -{ - if (dataGrid.View != null) - { - this.dataGrid.View.Filter = viewModel.FilerRecords; - this.dataGrid.View.RefreshFilter(); - } -} -{% endhighlight %} - -## Applying DataTable's RowFilter to DataGrid - -To filter the rows in SfDataGrid using [DataView.RowFilter](https://docs.microsoft.com/en-us/dotnet/api/system.data.dataview.rowfilter?view=netframework-4.8) expression, set the value of [SfDataGrid.CanUseViewFilter](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_CanUseViewFilter) property to `true`. The default filter which created in DataView can be applied or canceled through this property. - -## Filter individual columns - -You can filter the records in all the columns or in particular column using the codes in the below code example. - -For example, you can filter the records in `OrderID` or any other particular column alone.The following code example illustrates how to create an option view to select a column and a condition. Also, it illustrates how the records will be filtered based on the column and the condition selected. - -{% highlight c# %} -// OptionView class - -public partial class OptionsView : UIView -{ - private FilterViewModel filterModel; - private UITableView table; - private UISearchBar bar; - private UITableView filterConditionTable; - List items; - Filtering ParentView; - public OptionsView () - { - items = new List () - table = new UITableView (); - filterConditionTable = new UITableView (); - table.SectionIndexTrackingBackgroundColor = UIColor.FromRGB (0, 121, 255); - filterConditionTable.AllowsSelection = true; - this.AddSubview (filterConditionTable); - this.AddSubview (table); - } - - public OptionsView (FilterViewModel model, UISearchBar bar , Filtering parentView) : this () - { - this.ParentView = parentView; - this.filterModel = model; - var columnNames = filterModel.BookInfo.GetType ().GetGenericArguments () [0].GetProperties (); - this.bar = bar; - - foreach (var property in columnNames) { - items.Add (property.Name); - } - - table.Source = new OptionsTableSource (items); - filterConditionTable.Source = new FilterOptionsTableSource (new List () - { - "Contains", - "Equals", - "Not Equals" - }); - - this.AddSubview (filterConditionTable); - this.AddSubview (table); - } - - public override void RemoveFromSuperview () - { - base.RemoveFromSuperview (); - filterModel.SelectedColumn = (table.Source as OptionsTableSource).SelectedItem; - filterModel.SelectedCondition = (filterConditionTable.Source as FilterOptionsTableSource).SelectedItem; - - if (filterModel.SelectedColumn != null && filterModel.SelectedCondition != null) - { - this.bar.Placeholder = "Search " + filterModel.SelectedColumn + " with " + filterModel.SelectedCondition; - if(this.bar.Text != "") - this.ParentView.OnFilterChanged (); - } - else if((filterModel.SelectedColumn != null && filterModel.SelectedCondition == null)||(filterModel.SelectedColumn == null && filterModel.SelectedCondition != null)) - { - var alert = new UIAlertView ("Error", "Should Select Both ColumnName and Condition Type", null, "Cancel", null); - alert.Frame = new CGRect (50, this.Frame.GetMidX (), 60, this.Frame.GetMidY ()); - alert.Show (); - } - } - - public override void LayoutSubviews () - { - table.Frame = (new CGRect (0, 0, this.Frame.Width, (this.Frame.Height / 2)+13)); - filterConditionTable.Frame=(new CGRect (0, table.Bounds.Bottom + 2, this.Frame.Width, this.Frame.Height)); - base.LayoutSubviews (); - } -} - -public class OptionsTableSource : UITableViewSource -{ - public List TableItems; - string cellIdentifier = "TableCell"; - string[] keys = new string[] { }; - public string SelectedItem = null; - - public OptionsTableSource(List items) - { - TableItems = items; - keys = new string[] { "ColumnName" }; - } - - public override nint RowsInSection(UITableView tableView, nint section) - { - return TableItems.Count; - } - - public override UITableViewCell GetCell(UITableView tableView, Foundation.NSIndexPath indexPath) - { - UITableViewCell cell = tableView.DequeueReusableCell(cellIdentifier); - // if there are no cells to reuse, create a new one - if (cell == null) - cell = new UITableViewCell(UITableViewCellStyle.Default, cellIdentifier); - cell.TextLabel.Text = TableItems[indexPath.Row]; - cell.SelectionStyle = UITableViewCellSelectionStyle.Blue; - return cell; - } - - public override nint NumberOfSections(UITableView tableView) - { - return keys.Length; - } - - public override void RowSelected(UITableView tableView, Foundation.NSIndexPath indexPath) - { - SelectedItem = TableItems[indexPath.Row]; - } - public override string TitleForHeader(UITableView tableView, nint section) - { - return keys[section]; - } -} - -public class FilterOptionsTableSource : UITableViewSource -{ - public List TableItems; - string cellIdentifier = "TableCell"; - string[] keys = new string[] { }; - public string SelectedItem = null; - - public FilterOptionsTableSource(List items) - { - TableItems = items; - keys = new string[] { "Filter Condition Type" }; - } - - public override nint RowsInSection(UITableView tableView, nint section) - { - return TableItems.Count; - } - - public override UITableViewCell GetCell(UITableView tableView, Foundation.NSIndexPath indexPath) - { - UITableViewCell cell = tableView.DequeueReusableCell(cellIdentifier); - // if there are no cells to reuse, create a new one - if (cell == null) - cell = new UITableViewCell(UITableViewCellStyle.Subtitle, cellIdentifier); - cell.TextLabel.Text = TableItems[indexPath.Row]; - cell.SelectionStyle = UITableViewCellSelectionStyle.Blue; - return cell; - } - - public override void WillDisplay(UITableView tableView, UITableViewCell cell, Foundation.NSIndexPath indexPath) - { - if (cell.Selected) - { - cell.BackgroundColor = UIColor.Red; - } - } - - public override nint NumberOfSections(UITableView tableView) - { - return keys.Length; - } - - public override void RowSelected(UITableView tableView, Foundation.NSIndexPath indexPath) - { - SelectedItem = TableItems[indexPath.Row]; - } - - public override string TitleForHeader(UITableView tableView, nint section) - { - return keys[section]; - } -} -{% endhighlight %} - -![DataGrid with data filtered based on columns](SfDataGrid_images/Filtering_img2.png) - -## Filter based on conditions - -In addition to the column based filtering, you can filter the records based on some conditions. For example, you can filter the records based on the input you given or you can filter the records contrast to your input. You can achieve the condition based filtering for all the columns or any particular column. - -You can filter the records in the view based on any of the below conditions, - -* Equals -* NotEquals -* Contains - -The above conditions are the mostly used conditions. However, you can add any other conditions based on your requirement and alter the below code example based on your condition. - -{% highlight c# %} -// ViewModel.cs - -public bool FilerRecords(object o) -{ - double res; - bool checkNumeric = double.TryParse(FilterText, out res); - var item = o as OrderInfo; - - if (item != null && FilterText.Equals("")) - { - return true; - } - else - { - if (item != null) - { - if (checkNumeric && !SelectedColumn.Equals("All Columns")) - { - bool result = MakeNumericFilter(item, SelectedColumn, SelectedCondition); - return result; - } - else if (SelectedColumn.Equals("All Columns")) - { - if (item.CustomerID.ToLower().Contains(FilterText.ToLower()) || - item.Country.ToLower().Contains(FilterText.ToLower()) || item.Freight.ToString().ToLower().Contains(FilterText.ToLower()) || item.OrderID.ToString().ToLower().Contains(FilterText.ToLower())) - return true; - return false; - } - else - { - bool result = MakeStringFilter(item, SelectedColumn, SelectedCondition); - return result; - } - } - } - return false; -} - -private bool MakeStringFilter(OrderInfo o, string option, string condition) -{ - var value = o.GetType().GetProperty(option); - var exactValue = value.GetValue(o, null); - exactValue = exactValue.ToString().ToLower(); - string text = FilterText.ToLower(); - var methods = typeof(string).GetMethods(); - if (methods.Count() != 0) - { - if (condition == "Contains") - { - var methodInfo = methods.FirstOrDefault(method => method.Name == condition); - bool result1 = (bool)methodInfo.Invoke(exactValue, new object[] { text }); - return result1; - } - else if (exactValue.ToString() == text.ToString()) - { - bool result1 = String.Equals(exactValue.ToString(), text.ToString()); - if (condition == "Equals") - return result1; - else if (condition == "NotEquals") - return false; - } - else if (condition == "NotEquals") - { - return true; - } - return false; - } - else - return false; -} - -private bool MakeNumericFilter(OrderInfo o, string option, string condition) -{ - var value = o.GetType().GetProperty(option); - var exactValue = value.GetValue(o, null); - double res; - bool checkNumeric = double.TryParse(exactValue.ToString(), out res); - if (checkNumeric) - { - switch (condition) - { - case "Equals": - try - { - if (exactValue.ToString() == FilterText) - { - if (Convert.ToDouble(exactValue) == (Convert.ToDouble(FilterText))) - return true; - } - } - catch (Exception e) - { - Console.WriteLine(e); - } - break; - case "NotEquals": - try - { - if (Convert.ToDouble(FilterText) != Convert.ToDouble(exactValue)) - return true; - } - catch (Exception e) - { - Console.WriteLine(e); - return true; - } - break; - } - } - return false; -} -{% endhighlight %} - -![DataGrid with data filtered based on conditions](SfDataGrid_images/Filtering_img3.png) - -## Clear filtering - -SfDataGrid allows you to clear the applied filtering by setting the `SfDataGrid.View.Filter` property to `null`. - -The below code example illustrates how to clear the applied filtering in SfDataGrid. - -{% highlight c# %} -// Code-Behind - -private void OnFilterChanged() -{ - if (dataGrid.View != null) - { - this.dataGrid.View.Filter = null; - this.dataGrid.View.RefreshFilter(); - } -} -{% endhighlight %} diff --git a/xamarin-ios/SfDataGrid/Freeze-Panes.md b/xamarin-ios/SfDataGrid/Freeze-Panes.md deleted file mode 100644 index c51494bc..00000000 --- a/xamarin-ios/SfDataGrid/Freeze-Panes.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: post -title: Freeze Panes | SfDataGrid | Xamarin.iOS | Syncfusion -description: How to freeze rows and columns in a SfDataGrid. -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- - -# Freeze panes - -SfDataGrid allows you to freeze the rows and columns when scrolling the grid. - -## Freeze Rows - -SfDataGrid provides extensive support to freeze the rows at the top of the view below the header row by setting the [SfDataGrid.FrozenRowsCount](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_FrozenRowsCount) property. - -The following code example illustrates freezing two rows in SfDataGrid. - -{% highlight c# %} -//Setting number of rows to freeze in SfDataGrid -dataGrid.FrozenRowsCount = 2; -{% endhighlight %} - -### Limitation - -* `FrozenRowsCount` should be lesser than the number of rows that is displayed in View. -* For example: -If you have 10 rows in view, then you set `FrozenRowsCount` to a maximum value of 9. - -N> Header row is frozen by default and works regardless of the `FrozenRowsCount` property. - - -## Freeze Columns - -SfDataGrid also provides support to freeze the columns at the left of the view by setting the [SfDataGrid.FrozenColumnsCount](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_FrozenColumnsCount) property. - -The following code example illustrates freezing two columns in SfDataGrid. - -{% highlight c# %} -//Setting number of columns to freeze in SfDataGrid -dataGrid.FrozenColumnsCount = 2;  -{% endhighlight %} - -### Limitation - -* `FrozenColumnsCount` should be lesser than number of columns displayed in View. -* For example: -If you have 5 columns in view, then you can set `FrozenColumnsCount` to a maximum value of 4. - -N> RowHeader is frozen by default and works regardless of the `FrozenColumnsCount` property. diff --git a/xamarin-ios/SfDataGrid/Getting-Started.md b/xamarin-ios/SfDataGrid/Getting-Started.md deleted file mode 100644 index dc28f29e..00000000 --- a/xamarin-ios/SfDataGrid/Getting-Started.md +++ /dev/null @@ -1,486 +0,0 @@ ---- -layout: post -title: Getting started | SfDataGrid | Xamarin.iOS | Syncfusion -description: Getting started with Xamarin.iOS DataGrid and walk through to create a demo application from the scratch. -platform: xamarin.ios -control: SfDataGrid -documentation: ug ---- - -# Getting Started with Xamarin.iOS DataGrid (SfDataGrid) - -This section provides a quick overview for working with SfDataGrid for Xamarin.iOS. You will walk through the entire process of creating a real world SfDataGrid. - - -## Assembly deployment - -After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders, - -{Syncfusion Essential Studio Installed location}\Essential Studio\{{ site.releaseversion }}\Xamarin\lib - -Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\{{ site.releaseversion }}\Xamarin\lib - -N> Assemblies can be found in unzipped package location in Mac - -## NuGet configuration - -To install the required NuGet for the SfDataGrid control in the application, configure the NuGet packages of the Syncfusion components. - -Refer to the following KB to configure the NuGet packages of the Syncfusion components: - -[How to configure package source and install Syncfusion NuGet packages in an existing project?](https://www.syncfusion.com/kb/7441/how-to-configure-package-source-and-install-syncfusion-nuget-packages-in-an-existing-project) - -The following NuGet package should be installed to use the SfDataGrid control in the application. - - - - - - - - - - -
Project Required package
Xamarin.iOS Syncfusion.Xamarin.SfDataGrid.iOS
- -### Adding SfDataGrid Reference - -Syncfusion Xamarin components are available in [nuget.org](https://www.nuget.org/). To add SfDataGrid to your project, open the NuGet package manager in Visual Studio, and search for [Syncfusion.Xamarin.SfDataGrid.IOS](https://www.nuget.org/packages/Syncfusion.Xamarin.SfDataGrid.ios/#), and then install it. - -![SfDataGrid in nuget.org](SfDataGrid_images/SfDataGrid_IOS.png) - -To know more about obtaining our components, refer to this [link](https://help.syncfusion.com/xamarin-ios/introduction/download-and-installation). Also, if you prefer to manually refer the assemblies instead of NuGet, refer the list of assemblies mentioned in the table below. - - - - - - - - - - -
ProjectRequired assemblies
Xamarin.iOSSyncfusion.Linq.iOS.dll
Syncfusion.SfDataGrid.iOS.dll
Syncfusion.GridCommon.Portable.dll
Syncfusion.SfNumericTextBox.iOS.dll
- -To export the SfDataGrid to Excel and PDF formats, search for [Syncfusion.Xamarin.SfGridConverter.IOS](https://www.nuget.org/packages/Syncfusion.Xamarin.SfGridConverter.ios/) in the NuGet package manager, and then install it. - -![DataGridExport in Xamarin.iOS](SfDataGrid_images/SfGridConverter_iOS.png) - -If you prefer to manually refer the assemblies instead of NuGet, refer the list of assemblies mentioned in the table below. - - - - - - - - - - -
ProjectRequired assemblies
Xamarin.iOSSyncfusion.SfGridConverter.iOS.dll
pcl\Syncfusion.Compression.Portable.dll
pcl\Syncfusion.Pdf.Portable.dll
pcl\Syncfusion.XlsIO.Portable.dll
- -I> Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key) to know about registering Syncfusion license key in your Xamarin application to use our components. - -## Create a simple SfDataGrid - -This section explains how to create a SfDataGrid and configure it. The SfDataGrid control can be configured entirely in C# code or using story board. This is how the final output will look like on iOS devices. - -![SfDataGrid in Xamarin.iOS](SfDataGrid_images/GettingStarted.png) - -You can download the entire source code of this demo for Xamarin.iOS from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted-670371090). - -In this walk through, you will create a new application that contains the SfDataGrid which includes the below topics. - -* [Creating the project](#creating-the-project) -* [Adding SfDataGrid in Xamarin.iOS](#adding-sfdatagrid-in-xamarinios) -* [Create data model](#create-datamodel-for-the-sfdatagrid) -* [Binding data](#binding-data-to-sfdatagrid) -* [Defining columns](#defining-columns) -* [Sorting](#sorting) -* [Grouping](#grouping) -* [Selection](#selection) -* [Editing](https://help.syncfusion.com/xamarin-ios/sfdatagrid/editing) - -## Creating the project - -Create a new iOS application in Xamarin Studio or Visual Studio for Xamarin.iOS. - -## Adding SfDataGrid in Xamarin.iOS using story board - -1. Add a new story board inside the project. -2. Drag the SfDataGrid control from toolbox and drop it into the story board. Preview for SfDataGrid will be shown. -3. Open the properties window of SfDataGrid and set the required properties. - -![SfDataGrid renderer in designer page](SfDataGrid_images/StoryBoard_SfDataGrid_ios.gif) - -### Setting the SfDataGrid properties in story board - -Set the identity name and required properties for SfDataGrid in story board. - -![SfDataGrid properties](SfDataGrid_images/Storyboard_property_SfDataGrid_ios.png) - -Set the identity name and required properties for SfDataPager in story board. - -![SfDataGrid properties](SfDataGrid_images/Storyboard_property_SfDataPager_ios.png) - -{% tabs %} - -{% highlight c# %} -namespace Grid -{ - public partial class MyViewController : UIViewController - { - ViewModel viewModel; - public MyViewController() : base("MyViewController",null) - { - } - public override void ViewDidLoad() - { - base.ViewDidLoad(); - // Perform any additional setup loading the view, typically from a nib. - viewModel = new ViewModel(); - sfPager.Source = viewModel.OrdersInfo; - sfGrid.ItemSource = sfPager.PagedSource; - } - public override void DidReceiveMemoryWarning() - { - base.DidReceiveMemoryWarning(); - // Release any cached data, images, etc that aren't in use. - } - } -} - -{% endhighlight %} - -{% endtabs %} - -You can download the entire source code of this sample [here](http://www.syncfusion.com/downloads/support/directtrac/general/ze/custom_designer_sfdatagrid_ios-764618167). - -Refer to this link to know the properties that can be configured using story board for SfDataGrid. - -## Adding SfDataGrid in Xamarin.iOS using C# code - -1. Add the required assembly references to the project as discussed in the [Assembly deployment](#assembly-deployment) section. - -2. Import SfDataGrid control namespace Syncfusion.SfDataGrid. - -3. Create an instance of SfDataGrid control and add as a SubView to a UIViewController. - -{% tabs %} -{% highlight c# %} -using Syncfusion.SfDataGrid; -public partial class GettingStartedViewController : UIViewController -{ - SfDataGrid dataGrid; - - static bool UserInterfaceIdiomIsPhone { - get { return UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone; } - } - - public GettingStartedViewController () - : base (UserInterfaceIdiomIsPhone ? "GettingStartedViewController_iPhone" : "GettingStartedViewController_iPad", null) - { - dataGrid = new SfDataGrid (); - dataGrid.HeaderRowHeight = 45; - dataGrid.RowHeight = 45; - } - - public override void ViewDidLoad () - { - base.ViewDidLoad (); - dataGrid.Frame = new CGRect (0, 0, View.Frame.Width, View.Frame.Height); - View.AddSubview (dataGrid); - } -} -{% endhighlight %} -{% endtabs %} - -You can also set HeaderRowHeight and RowHeight for SfDataGrid using story board. - -![SfDataGrid properties](SfDataGrid_images/GettingStarted_HeaderRowHeight_RowHeight_ios.png) - -Run the application to render the following output. - -![SfDataGrid with RowHeight and HeaderRowHeight](SfDataGrid_images/SfDataGridWithoutTopPadding.png) - -The [Frame](https://developer.xamarin.com/api/property/UIKit.UIView.Frame/) is used to arrange a view in Xamarin.iOS. By default a view in Xamarin.iOS will be arranged without any padding from the title bar. Hence the content of the arranged view will overlap with the title bar if the top position of its `Frame` is set as `0`. - -To overcome the above problem, the top position of the view's `Frame` has to be customized accordingly to position the view below the title bar in iOS. Refer the below code example in which the top position of the SfDataGrid's `Frame` is set to 30 to overcome the problem. - -{% tabs %} -{% highlight c# %} -public override void ViewDidLoad () -{ - base.ViewDidLoad (); - dataGrid.Frame = new CGRect (0, 30, View.Frame.Width, View.Frame.Height); - View.AddSubview (dataGrid); - } - {% endhighlight %} -{% endtabs %} - - Run the application with the above code to render the following output. - -![SfDataGrid with top padding](SfDataGrid_images/SfDataGridWithTopPadding.png) - -## Create DataModel for the SfDataGrid - -SfDataGrid is a data-bound control. Hence you must create a data model to bind it to the control. - -Create a simple data source as shown in the following code example in a new class file and save it as OrderInfo.cs file. - -{% tabs %} -{% highlight c# %} -public class OrderInfo -{ - private int orderID; - private string customerID; - private string customer; - private string shipCity; - private string shipCountry; - - public int OrderID { - get { return orderID; } - set { this.orderID = value; } - } - - public string CustomerID { - get { return customerID; } - set { this.customerID = value; } - } - - public string ShipCountry { - get { return shipCountry; } - set { this.shipCountry = value; } - } - - public string Customer { - get { return this.customer; } - set { this.customer = value; } - } - - public string ShipCity { - get { return shipCity; } - set { this.shipCity = value; } - } - - public OrderInfo (int orderId, string customerId, string country, string customer, string shipCity) - { - this.OrderID = orderId; - this.CustomerID = customerId; - this.Customer = customer; - this.ShipCountry = country; - this.ShipCity = shipCity; - } -} -{% endhighlight %} -{% endtabs %} - -N> If you want your data model to respond to property changes, then implement `INotifyPropertyChanged` interface in your model class - -Create a model repository class with OrderInfo collection property initialized with required number of data objects in a new class file as shown in the following code example and save it as OrderInfoRepository.cs file. - -{% tabs %} -{% highlight c# %} -public class OrderInfoRepository -{ - private ObservableCollection orderInfo; - public ObservableCollection OrderInfoCollection { - get { return orderInfo; } - set { this.orderInfo = value; } - } - - public OrderInfoRepository () - { - orderInfo = new ObservableCollection (); - this.GenerateOrders (); - } - - private void GenerateOrders () - { - orderInfo.Add (new OrderInfo (1001, "Maria Anders", "Germany", "ALFKI", "Berlin")); - orderInfo.Add (new OrderInfo (1002, "Ana Trujillo", "Mexico", "ANATR", "Mexico D.F.")); - orderInfo.Add (new OrderInfo (1003, "Ant Fuller", "Mexico", "ANTON", "Mexico D.F.")); - orderInfo.Add (new OrderInfo (1004, "Thomas Hardy", "UK", "AROUT", "London")); - orderInfo.Add (new OrderInfo (1005, "Tim Adams", "Sweden", "BERGS", "Lula")); - orderInfo.Add (new OrderInfo (1006, "Hanna Moos", "Germany", "BLAUS", "Mannheim")); - orderInfo.Add (new OrderInfo (1007, "Andrew Fuller", "France", "BLONP", "Strasbourg")); - orderInfo.Add (new OrderInfo (1008, "Martin King", "Spain", "BOLID", "Madrid")); - orderInfo.Add (new OrderInfo (1009, "Lenny Lin", "France", "BONAP", "Marseilles")); - orderInfo.Add (new OrderInfo (1010, "John Carter", "Canada", "BOTTM", "Tsawassen")); - orderInfo.Add (new OrderInfo (1011, "Martin King", "UK", "AROUT", "London")); - orderInfo.Add (new OrderInfo (1012, "Anne Wilson", "Germany", "BLAUS", "Mannheim")); - orderInfo.Add (new OrderInfo (1013, "Hanna Kyle", "France", "BLONP", "Strasbourg")); - orderInfo.Add (new OrderInfo (1014, "Gina Irene", "UK", "AROUT", "London")); - } -} -{% endhighlight %} -{% endtabs %} - -## Binding data to SfDataGrid - -In order to bind the data source of the SfDataGrid, set the [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ItemsSource) property as shown below. You can bind the data source of the SfDataGrid as follows. - -The following code example binds the collection created in previous step to `SfDataGrid.ItemsSource` property. - -{% tabs %} -{% highlight c# %} -OrderInfoRepository viewModel = new OrderInfoRepository (); -dataGrid.ItemsSource = viewModel.OrderInfoCollection; -{% endhighlight %} -{% endtabs %} -Now run the application to render the following output. - -![Data Virtualization in SfDataGrid for Xamarin.iOS](SfDataGrid_images/Overview.png) - -## Defining Columns - -By default, the SfDataGrid automatically creates columns for all the properties in the data source. The type of the column generated depends on the type of data in the column. When the columns are auto-generated, you can handle the [SfDataGrid.AutoGeneratingColumn](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html) event to customize or cancel the columns before they are added to the Columns collection in SfDataGrid. - -You can also define the columns manually by setting the [SfDataGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AutoGenerateColumns) property to false and by adding the `GridColumn` objects to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AutoGenerateColumns) collection. The following code example illustrates how this can be done. - -{% tabs %} -{% highlight c# %} -dataGrid.AutoGenerateColumns = false; - -GridTextColumn orderIdColumn = new GridTextColumn (); -orderIdColumn.MappingName = "OrderID"; -orderIdColumn.HeaderText = "Order ID"; - -GridTextColumn customerIdColumn = new GridTextColumn (); -customerIdColumn.MappingName = "CustomerID"; -customerIdColumn.HeaderText = "Customer ID"; - -GridTextColumn customerColumn = new GridTextColumn (); -customerColumn.MappingName = "Customer"; -customerColumn.HeaderText = "Customer"; - -GridTextColumn countryColumn = new GridTextColumn (); -countryColumn.MappingName = "ShipCountry"; -countryColumn.HeaderText = "Ship Country"; - -dataGrid.Columns.Add (orderIdColumn); -dataGrid.Columns.Add (customerIdColumn); -dataGrid.Columns.Add (customerColumn); -dataGrid.Columns.Add (countryColumn); -{% endhighlight %} -{% endtabs %} - -## Sorting - -SfDataGrid allows you to apply sorting on its data by setting the [SfDataGrid.AllowSorting](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AllowSorting) property to true. - -You can also set the sorting for SfDataGrid using story board. - -![Sorting via story board in SfDataGrid fo Xamarin.iOS](SfDataGrid_images/GettinStarted_AllowSorting_StoryBoard_SfDataGrid.png) - - {% tabs %} -{% highlight c# %} -dataGrid.AllowSorting = true; -{% endhighlight %} -{% endtabs %} -Run the application and touch the header cell to sort the data and the following output will be displayed. - -![Sorting in SfDataGrid in Xamarin.iOS](SfDataGrid_images/Sorting.png) - -You can also configure sorting by adding the column to the [SfDataGrid.SortColumnDescriptions](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SortColumnDescriptions) collection as below. - -{% tabs %} -{% highlight c# %} -dataGrid.SortColumnDescriptions.Add (new SortColumnDescription () { ColumnName = "CustomerID" }); -{% endhighlight %} -{% endtabs %} - -## Grouping - -SfDataGrid allows you to group a column by adding the column to the [SfDataGrid.GroupColumnDescriptions](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SortColumnDescriptions) collection as shown below. - -{% tabs %} -{% highlight c# %} -dataGrid.GroupColumnDescriptions.Add (new GroupColumnDescription () { ColumnName = "ShipCountry" }); -{% endhighlight %} -{% endtabs %} - -Run the application to render the following output. - -![Grouping in SfDatGrid in Xamarin.iOS](SfDataGrid_images/Grouping.png) - -## Selection - -SfDataGrid allows you to select the row/rows by setting the [SfDataGrid.SelectionMode](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectionMode) property. You can set the `SfDataGrid.SelectionMode` property to single, multiple, single deselect or none based on your requirements. Information about the row/rows selected can be tracked using [SfDataGrid.SelectedItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectedItem) and [SfDataGrid.SelectedItems](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectedItems) properties. - - -## Loading SfDataGrid with customized height and width - -SfDataGrid can be loaded with specific height and width by specifying the height and width of the `SfDataGrid.Frame` property. - -To load SfDataGrid with specific height and width, follow the code example: -{% tabs %} -{% highlight c# %} -public override void ViewDidLayoutSubviews() -{ - dataGrid.Frame = new CGRect(85, 130, 200, 380); - base.ViewDidLayoutSubviews(); -} -{% endhighlight %} -{% endtabs %} - -You can also set the custom height and width to SfDataGrid using story board. - -![Custom width and height via story board in SfDataGrid for Xamarin.iOS](SfDataGrid_images/GettingStarted_Custom_Width_and_Height_Storyboard_SfDatagrid_iOS.png) - -The following screenshot shows how the SfDataGrid is loaded with specific height and width: - -![SfDataGrid with specific heigt and width](SfDataGrid_images/Loading_with specific_height_and_width.png) - -## Properties configured using story board - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties Attribute Name
AlternatingRowColorAlternating Row Color
AlternationCountAlternation Count
AllowPullToRefresh Allow Pull To Refresh
AllowLoadMoreAllow Load More
AllowEditingAllow Editing
AllowSortingAllow Sorting
AllowMultiSortingAllow Multi Sorting
AllowTriStateSortingAllow Tri State Sorting
AllowDraggingColumnAllow Dragging Column
AllowDraggingRowAllow Dragging Row
AllowResizingColumnAllow Resizing Column
AutoGenerateColumnsAuto Generate Columns
AutoGenerateColumnsModeAuto Generate Columns Mode
AutoEllipsisModeAuto Ellipsis Mode
CellBorderStyleCell Border Style
ColumnSizerColumn Sizer
DefaultColumnWidthDefault Column Width
DataFetchSizeData Fetch Size
EditTapActionEdit Tap Action
EditorSelectionBehaviorEditor Selection Behavior
EnableDataVirtualizationEnable Data Virtualization
FrozenRowsCountFrozen Rows Count
FrozenColumnsCountFrozen Columns Count
GroupCaptionTextFormatGroup Caption Text Format
GroupingModeGrouping Mode
HeaderRowHeightHeader Row Height
IndentColumnWidthIndent Column Width
OrientationOrientation
NumericButtonBackgroundNumeric Button Background
NumericButtonCountNumeric Button Count
PageCountPage Count
PageSizePage Size
ResizingModeResizing Mode
RowHeightRow Height
RowHeaderWidthRow Header Width
ScrollingModeScrolling Mode
SelectionForegroundSelection Foreground
SelectionModeSelection Mode
SelectedIndexSelected Index
ShowRowHeaderShow Row Header
ShowColumnWhenGroupedShow Column When Grouped
SortTapActionSort Tap Action
UseOnDemandPagingUse On Demand Paging
\ No newline at end of file diff --git a/xamarin-ios/SfDataGrid/Grouping.md b/xamarin-ios/SfDataGrid/Grouping.md deleted file mode 100644 index bb0fae17..00000000 --- a/xamarin-ios/SfDataGrid/Grouping.md +++ /dev/null @@ -1,360 +0,0 @@ ---- -layout: post -title: Grouping | SfDataGrid | Xamarin.iOS | Syncfusion -description: How to group a column in a SfDataGrid and about the properites and customizations in grouping. -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- - -# Grouping - -A group represents a collection of records that belong to a particular category. When grouping is applied, the data is organized into a hierarchical structure based on matching field values. The records having identical values in the grouped column are combined to form a group. Each group is identified by its [CaptionSummaryRow](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_CaptionSummaryRow) to get the underlying records in view. - -N> To update grouping for the newly added row or column, set the `SfDataGrid.View.LiveDataUpdateMode` to `LiveDataUpdateMode.AllowDataShaping`. - -N> When `BeginInit` method is called it suspends all the updates until `EndInit` method is called. - -## Programmatic Grouping - -SfDataGrid also allows to perform grouping from the code by defining the [GroupColumnDescription](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GroupColumnDescription.html) object and adding it in the [SfDataGrid.GroupColumnDescriptions](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GroupColumnDescriptions.html) collection. SfDataGrid groups the data based on the `GroupColumnDescription` object that is added to this collection. - -`GroupColumnDescription` object holds following two properties: - -* [ColumnName](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GroupColumnDescription.html#Syncfusion_SfDataGrid_GroupColumnDescription_ColumnName): Name of the grouped column. -* [Converter](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GroupColumnDescription.html#Syncfusion_SfDataGrid_GroupColumnDescription_Converter): Get the `IValueConverter` as input that helps to apply the custom grouping. - -The following code example illustrates how to apply grouping by a column in SfDataGrid. - -{% highlight c# %} - dataGrid.GroupColumnDescriptions.Add (new GroupColumnDescription () { - ColumnName = "CustomerID", -}); -{% endhighlight %} - -The following screenshot shows the output rendered when grouping is applied. -![](SfDataGrid_images/Grouping.png) - -## MultiGrouping - -The SfDataGrid also allows to group the data against one or more columns by using the `SfDataGrid.GroupingMode` property. When the `GroupingMode` is set as `GroupingMode.Multiple`, the data will be organized into hierarchical tree structure based on identical values of that column. MultiGrouping feature works similarly as MultiSorting feature. Initially, the data is grouped according to the first column added in the `GroupColumnDescriptions` collection. When more columns are added to the `GroupColumnDescriptions`, the newly added column will be grouped in consideration to the previous group(s). This results in a tree like hierarchy. - -{% highlight c# %} - -this.dataGrid.GroupingMode = GroupingMode.Multiple; - -{% endhighlight %} - -The following screenshot shows the output rendered when above code is executed: -![](SfDataGrid_images/MultiColumnGrouping.png) - -## Indent column customizations - -Indent columns are the columns present to the left of the `CaptionSummaryRows` when `GroupingMode` is set as multiple. The number of indent cells in each `CaptionSummaryRow` will be determined by the level of that `Group`. For example, the first group will have only one indent cell and the next immediate group will have an extra indent cell. It keeps on adding by one for each lower level groups to maintain the tree structure. Each data row will have indent cells count equal to the level of the last sub group in view. The following customizations can be done for the indent cells. - -### Customize indent column width - -By default, the width of the indent column is 20. To customize the width, use the `IndentColumnWidth` property. - -{% highlight c# %} - -this.dataGrid.IndentColumnWidth = 60; - -{% endhighlight %} - -### Customize indent column background color - -Set background color to the indent cells based on the row where indent cells present. To set the desired background color, use the `GetIndentBackgroundColor()` override method in the custom `DataGridStyle` class. Refer to this [link](https://help.syncfusion.com/xamarin-android/sfdatagrid/styles) to know how to apply custom styles to the SfDataGrid. - -{% highlight c# %} - -this.dataGrid.GridStyle = new CustomStyle(); - -public class CustomStyle : DataGridStyle -{ - public override UIColor GetIndentBackgroundColor(RowType rowType) - { - if (rowType == RowType.DefaultRow) - return UIColor.Orange; - if (rowType == RowType.CaptionCoveredRow) - return UIColor.Blue; - else return UIColor.LightGray; - } -} - -{% endhighlight %} - -The following screenshot shows the output rendered when above code is executed: -![](SfDataGrid_images/IndentColumnStyling.png) - -## Expand groups while grouping - -You can expand all the groups while grouping by setting [SfDataGrid.AutoExpandGroups](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AutoExpandGroups) to `true`. So, when user group any column, then all groups will be in expanded state. - -{% highlight c# %} -this.dataGrid.AutoExpandGroups = true; -this.dataGrid.AllowGroupExpandCollapse = true; -{% endhighlight %} - -## Expand or collapse the groups - -By default, the groups will be in expanded state in a SfDataGrid. However, you can expand or collapse a group in runtime by setting the [SfDataGrid.AllowGroupExpandCollapse](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AllowGroupExpandCollapse) as `true`. - -{% highlight c# %} -this.dataGrid.AllowGroupExpandCollapse = true; -{% endhighlight %} - -### Expand or collapse all the groups - -You can expand or collapse all the groups at programmatically at runtime by using [SfDataGrid.ExpandAllGroup](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ExpandAllGroup) and [SfDataGrid.CollapseAllGroup](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_CollapseAllGroup) methods. - -{% tabs %} -{% highlight c# %} -this.dataGrid.ExpandAllGroup(); -this.dataGrid.CollapseAllGroup(); -{% endhighlight %} -{% endtabs %} - -### Expand or collapse a specific group - -You can expand or collapse specific group by using [SfDataGrid.ExpandGroup](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ExpandGroup_Syncfusion_Data_Group_) and [SfDataGrid.CollapseGroup](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_CollapseGroup_Syncfusion_Data_Group_) methods. - -{% highlight c# %} -var group = (dataGrid.View.Groups[0] as Group); -this.dataGrid.ExpandGroup(group); -this.dataGrid.CollapseGroup(group); -{% endhighlight %} - -![](SfDataGrid_images/GroupExpandCollapse.png) - -## Custom Grouping - -SfDataGrid allows you to group a column based on custom logic when the standard grouping techniques do not meet the requirements. To achieve the custom grouping, you need to write a converter that implements `IValueConverter` with your custom grouping logic and assign that converter to the [GroupColumnDescription.Converter](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GroupColumnDescription.html#Syncfusion_SfDataGrid_GroupColumnDescription_Converter) property. - -The following code example illustrates how to set the custom grouping converter for the group description that is added to group the Freight column. - -{% highlight c# %} -dataGrid.GroupColumnDescriptions.Add (new GroupColumnDescription () { - ColumnName = "Freight", - Converter = new GroupConverter() -}); -{% endhighlight %} - -The following code example illustrates the converter used for applying custom grouping logic. - -{% highlight c# %} -public class GroupConverter : IValueConverter -{ - public GroupConverter() - { - - } - - public object Convert(object value, Type targetType, object parameter, CultureInfo culture) - { - var orderInfo = value as OrderInfo; - if (orderInfo.Freight > 0 && orderInfo.Freight <= 250) - return "<=250"; - else if (orderInfo.Freight > 250 && orderInfo.Freight <= 500) - return ">250 & <=500"; - else if (orderInfo.Freight > 500 && orderInfo.Freight <= 750) - return ">500 & <=750"; - else - return ">1000"; - } - - public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) - { - return null; - } -} -{% endhighlight %} - -## Display based grouping using group mode property - -By default column grouping occurs based on the value in the underlying collection thereby creating a new group for each new value of that column. However you can also group a column based on the Display value by setting the [GridColumn.GroupMode](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_GroupMode) property as `Display`. In the below code example we have set [GridColumn.Format](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridColumn.html#Syncfusion_SfDataGrid_GridColumn_Format) property as "#" which displays only the rounded off value in the `GridCell`. - -{% highlight c# %} -GridNumericColumn cargoWeight = new GridTextColumn(); -cargoWeight.MappingName = "ShipmentWeight"; -cargoWeight.GroupMode = Syncfusion.Data.DataReflectionMode.Display; -cargoWeight.Format = "#"; -{% endhighlight%} - -The below screenshot shows the comparison between the two Group modes. GroupMode.Value on the left and GroupMode.Display on the right. -![](SfDataGrid_images/GroupMode.png) - -## Clearing or removing a group - -To clear grouping applied to SfDataGrid, remove the items from the `SfDataGrid.GroupColumnDescriptions` collection or clear the collection. - -Refer to the following code snippets to remove grouping applied: - -{% highlight c# %} -public class MyViewController:UIViewController -{ - SfDataGrid dataGrid; - ViewModel viewModel; - UIButton clearGroupingButton; - UIStackView stackView; - public MyViewController() - { - dataGrid = new SfDataGrid(); - viewModel = new ViewModel(); - clearGroupingButton = new UIButton(); - stackView = new UIStackView(); - } - - public override void ViewDidLoad() - { - base.ViewDidLoad(); - dataGrid.ItemsSource = viewModel.OrdersInfo; - dataGrid.GroupColumnDescriptions.Add(new GroupColumnDescription() - { - ColumnName = "Freight", - }); - stackView.Axis = UILayoutConstraintAxis.Vertical; - clearGroupingButton.SetTitle("Remove Grouping", UIControlState.Normal); - clearGroupingButton.BackgroundColor=UIColor.White; - clearGroupingButton.SetTitleColor(UIColor.Black, UIControlState.Normal); - clearGroupingButton.TouchDown += ClearGroupingButton_TouchDown; - clearGroupingButton.HeightAnchor.ConstraintEqualTo(200).Active = true; - dataGrid.HeightAnchor.ConstraintEqualTo(600).Active=true; - stackView.AddArrangedSubview(removeGroupingButton); - stackView.AddArrangedSubview(dataGrid); - this.View.AddSubview(stackView); - } - - private void ClearGroupingButton_TouchDown(object sender, System.EventArgs e) - { - //Clearing the Group - dataGrid.GroupColumnDescriptions.Clear(); - - //Removing the Group based on group item - //var groupColumn = dataGrid.GroupColumnDescriptions[0]; - //dataGrid.GroupColumnDescriptions.Remove(groupColumn); - - //Removing the Group based on group index - //dataGrid.GroupColumnDescriptions.RemoveAt(0); - } - - public override void ViewDidLayoutSubviews() - { - stackView.Frame = new CGRect(0, 30, this.View.Frame.Width, this.View.Frame.Height); - base.ViewDidLayoutSubviews(); - } -} -{% endhighlight %} - -Run the application to render the following output: - -![](SfDataGrid_images/Remove_Grouping.png) - -N> You can also clear or remove the grouping on [GridTapped event](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html), [GridDoubleTapped event](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html), or [GridLongPressed event](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html). - -## Events - -### GroupExpanding event - -The [SfDataGrid.GroupExpanding](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html) event occurs when the group is being expanded. - -The [GroupChangingEventArgs](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GroupChangingEventArgs.html) of the `GroupExpanding` event provides the information about the expanding group and it has the following members. - -[Syncfusion.Data.Group](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GroupChangingEventArgs.html#Syncfusion_SfDataGrid_GroupChangingEventArgs_Group) - Gets the group that’s being expanded. - -[Cancel](https://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(System.ComponentModel.CancelEventArgs.Cancel)&rd=true) – Decides whether to cancel the group expansion. - -You can cancel the group expansion by setting `GroupChangingEventArgs.Cancel` to `true`. - -{% highlight c# %} -this.dataGrid.GroupExpanding += dataGrid_GroupExpanding; - -void dataGrid_GroupExpanding(object sender, Syncfusion.SfDataGrid.GroupChangingEventArgs e) -{ - if (e.Group.Key.Equals(1001)) - e.Cancel = true; -} -{% endhighlight %} - -### GroupExpanded event - -The [SfDataGrid.GroupExpanded](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html) event occurs after the group is expanded. - -The [GroupChangedEventArgs](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GroupChangedEventArgs.html) of the `GroupExpanded` event provides the information about the expanded group and it has the following member. - -[Syncfusion.Data.Group](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GroupChangedEventArgs.html#Syncfusion_SfDataGrid_GroupChangedEventArgs_Group) - Gets the expanded group. - -### GroupCollapsing event - -The [SfDataGrid.GroupCollapsing](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html) event occurs when the group is being collapsed. - -The `GroupChangingEventArgs` of the `GroupCollapsing` event provides the information about the collapsing group and it contains the following member. - -`Syncfusion.Data.Group` - Gets the group that’s being collapsed. - -`Cancel` – Decides whether to cancel the group collapsing. - -You can cancel the group is being collapsed by using `GroupChangingEventArgs.Cancel` of `GroupCollapsing` event. - -{% highlight c# %} -this.dataGrid.GroupCollapsing += dataGrid_GroupCollapsing; - -void dataGrid_GroupCollapsing(object sender, Syncfusion.SfDataGrid.GroupChangingEventArgs e) -{ - if (e.Group.Key.Equals(1001)) - e.Cancel = true; -} -{% endhighlight %} - -### GroupCollapsed event - -The [SfDataGrid.GroupCollapsed](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html) event occurs after the group is collapsed. - -`GroupChangedEventArgs` of the `GroupCollapsed` event provides the information about collapsed group and it contains the following member. - -`Syncfusion.Data.Group` - Gets the collapsed group. - -## Animate group expand/collapse icon - -SfDatagrid loads two different icons for denoting the group expanded and collapsed state. However, SfDataGrid allows you to rotate the expander icon animatedly for denoting the collapsed status by overriding the `DataGridStyle.GetGroupCollapseIcon` method and returning `null`. - -The below code example illustrates how to enable the group/expand collapse icons animation by writing a custom style. - -{% tabs %} -{% highlight c# %} - -//Apply custom style to SfDataGrid from code - -dataGrid.GridStyle = new CustomStyle (); - -//Custom Style class - -public class CustomStyle : DataGridStyle -{ - public CustomStyle () - { - - } - public override ImageSource GetGroupCollapseIcon() - { - return null; - } -} - -{% endhighlight %} -{% endtabs %} - -## Hiding the column when grouped - -In SfDataGrid a column will be generated with the default column width by default. In order to group by a column that should not be visible in view, add the column to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfDataGrid.XForms.SfDataGrid.html#Syncfusion_SfDataGrid_XForms_SfDataGrid_Columns) collection and set its width as 0. Thus the column will be grouped and will not be visually seen. Please refer the below code example. - -{% highlight c# %} -dataGrid.Columns.Add (new GridTextColumn () {  - MappingName = "ShippingDate", - Width = 0 -}); - -dataGrid.GroupColumnDescriptions.Add (new GroupColumnDescription () {  - ColumnName = "ShippingDate" -}); -{% endhighlight %} diff --git a/xamarin-ios/SfDataGrid/LoadMore.md b/xamarin-ios/SfDataGrid/LoadMore.md deleted file mode 100644 index 58c052f5..00000000 --- a/xamarin-ios/SfDataGrid/LoadMore.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -layout: post -title: Load More | SfDataGrid | Xamarin.iOS | Syncfusion -description: How to perform load more and it's properties and customizations in a Xamarin.iOS DataGrid (SfDataGrid). -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- -# Load More in Xamarin.iOS DataGrid (SfDataGrid) - -SfDataGrid lets you to enable the LoadMore option by setting the [SfDataGrid.AllowLoadMore](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AllowLoadMore) property to `true` and by setting the [SfDataGrid.LoadMoreCommand](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_LoadMoreCommand) property. When the LoadMore is enabled, the SfDataGrid provides an option of loading a subset of data to its data source in the runtime using the [LoadMoreView](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_LoadMoreView). - -On scrolling down, when the grid reaches the maximum offset an interactive load more view is displayed in view. On tapping the load more view it triggers a command to add more data to the data source of the grid in runtime. - - -## LoadMoreCommand - -SfDataGrid lets you load records to its data source in runtime by triggering an `ICommand` binded to the `SfDataGrid.LoadMoreCommand` property. When you tap the load more view, if the `CanExecute` of the `ICommand` returns true, then this command is triggered to load the records in runtime. - -You need to set the [SfDataGrid.IsBusy](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_IsBusy) property to true before loading the items to notify the grid that more items are loaded to it and set the property to false after loading the items to the grid. When loading the items, you can also alter the time for the LoadMore animation from the sample by setting a delay based on your requirement. - -The following code example illustrates how to enable and load items in the runtime. - -{% highlight c# %} -//Enable load more in SfDataGrid -dataGrid.AllowLoadMore = true; -dataGrid.LoadMoreCommand = new Command(ExecuteLoadMoreCommand); - -private async void ExecuteLoadMoreCommand() -{ - this.dataGrid.IsBusy = true; - await Task.Delay(new TimeSpan(0, 0, 5)); - viewModel.LoadMoreItems (); - this.dataGrid.IsBusy = false; -} - -//ViewModel.cs -internal void LoadMoreItems() -{ - for (int i = 0; i < 20; i++) - this.OrdersInfo.Add(order.GenerateOrder(OrdersInfo.Count + 1)); -} - -//Command.cs -public class Command : ICommand -{ - private Action execute; - private bool canExecute = true; - - public event EventHandler CanExecuteChanged; - - public Command(Action action) - { - execute = action; - } - - public bool CanExecute(object parameter) - { - return canExecute; - } - - public void Execute(object parameter) - { - changeCanExecute(true); - execute.Invoke(); - } - - private void changeCanExecute(bool canExecute) - { - this.canExecute = canExecute; - if (CanExecuteChanged != null) - CanExecuteChanged(this, new EventArgs()); - } -} - -{% endhighlight %} - -## Customize Load More Display Text - -You can customize the text displayed in the `LoadMoreView` by setting the [SfDataGrid.LoadMoreText](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_LoadMoreText) property as below. - -{% highlight c# %} -//setting load more text in SfDataGrid -dataGrid.LoadMoreText = "Load More Items"; -{% endhighlight %} - -## Customize LoadMoreView Position - -You can also customize the position in which the `LoadMoreView` is displayed to either `top` or `bottom` based on your requirements. - -{% highlight c# %} -//Enable load more in SfDataGrid -dataGrid.LoadMorePosition = LoadMoreViewPosition.Bottom; -{% endhighlight %} - -## Customize LoadMoreView - -SfDataGrid also allows you to customize the `LoadMoreView` based on your requirements. To do this you need to write your custom `LoadMoreView` class inheriting from the `LoadMoreView` and perform the LoadMoreOperation based on your requirement. - -The following code example illustrates how to customize the `LoadMoreView` in SfDataGrid. - -{% highlight c# %} -public class CustomLoadMoreView : LoadMoreView -{ - private Button loadMoreView; - - public CustomLoadMoreView() - { - this.BackgroundColor = Color.Red; - loadMoreView = new Button (); - loadMoreView.Text = "LoadItems"; - this.Children.Add(loadMoreView); - loadMoreView.Clicked += loadMoreView_Tapped; - } - - void loadMoreView_Tapped (object sender, EventArgs e) - { - if (this.LoadMoreCommand != null) - { - this.LoadMoreCommand.Execute(null); - } - } - - protected override void LayoutChildren(double x, double y, double width, double height) - { - loadMoreView.Layout(new Rectangle(x, y, width, height)); - } -} -{% endhighlight %} - -Running the application renders the following output. - -![LoadMore in Xamarin iOS DataGrid](SfDataGrid_images/LoadMore.png) \ No newline at end of file diff --git a/xamarin-ios/SfDataGrid/OverView.md b/xamarin-ios/SfDataGrid/OverView.md deleted file mode 100644 index 2feb6cc0..00000000 --- a/xamarin-ios/SfDataGrid/OverView.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -layout: post -title: Overview | SfDataGrid | Xamarin.iOS | Syncfusion -description: Overview in Xamarin.iOS DataGrid helps you to create customizable features used to display and manipulate a large amount of data in a tabular view. -platform: xamarin.ios -control: SfDataGrid -documentation: ug ---- - -# Overview in Xamarin.iOS DataGrid (SfDataGrid) - -The SfDataGrid control is available in Xamarin.Forms, Xamarin.Android and Xamarin.iOS. It helps you to create entirely customizable features used to display and manipulate a large amount of data in a tabular view. The following table lists the key features of the SfDataGrid in Xamarin.Forms, Xamarin.Android and Xamarin.iOS. - -I> Xamarin.Forms is unique by offering a single language(C#) and runtime that works across all three mobile platforms of iOS, Android, and UWP. So SfDataGrid for Xamarin.Forms works in all three platforms. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeaturesXamarin.Forms
(Android, iOS and UWP)
Xamarin.AndroidXamarin.iOS
Diagonal Scrolling
Sorting
Custom Sorting
Grouping
Custom Grouping
Summaries
Filtering
Editing
Resizing Columns
Selection
Load More
Pull To Refresh
Swiping
Column Drag and Drop
Row Drag and Drop
Template Column
Custom Cell
Styles
Conditional Styles
Exporting
Row Freezing
Column Freezing
Row Height Customization
- -Click [here](http://help.syncfusion.com/xamarin/sfdatagrid/overview) to checkout SfDataGrid for Xamarin.Forms. -Click [here](http://help.syncfusion.com/xamarin-android/sfdatagrid/overview) to checkout SfDataGrid for Xamarin.Android. - - -![Overview in Xamarin iOS DataGrid](SfDataGrid_images/Overview.png) - -![Getting Started in Xamarin iOS DataGrid](SfDataGrid_images/GettingStarted.png) \ No newline at end of file diff --git a/xamarin-ios/SfDataGrid/Paging.md b/xamarin-ios/SfDataGrid/Paging.md deleted file mode 100644 index a1ab47e4..00000000 --- a/xamarin-ios/SfDataGrid/Paging.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -layout: post -title: Paging in Xamarin.iOS SfDataGrid Control | Syncfusion -description: Learn here about Paging support in Syncfusion Essential Studio Xamarin.iOS SfDataGrid Control, its elements, and more. -platform: xamarin.ios -control: SfDataGrid -documentation: ug ---- - -# Paging in Xamarin.iOS SfDataGrid -The SfDataGrid provides interactive support to manipulate data using the [SfDataPager](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.html) control. It also provides built-in options to page data on demand when dealing with large volumes of data. SfDataGrid lets you to place the `SfDataPager` above or below it as per your requirement which lets you to easily manage the data paging. - -To use the paging functionality in SfDataGrid add the below namespace to your project. -`Syncfusion.SfDataGrid.DataPager` - -## Normal Paging - -SfDataGrid performs paging of data using the `SfDataPager`. Follow the below procedure to enable paging in SfDataGrid. - -* Create a new SfDataPager instance and bind the data collection to the [SfDataPager.Source](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.SfDataPager.html#Syncfusion_SfDataGrid_DataPager_SfDataPager_Source) property based on which [SfDataPager.PagedSource](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.SfDataPager.html#Syncfusion_SfDataGrid_DataPager_SfDataPager_PagedSource) is created internally. -* Bind the `PagedSource` property to the [ItemsSource](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ItemsSource) of the SfDataGrid. -* Set the number of rows to be displayed in a page by setting the [SfDataPager.PageSize](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.SfDataPager.html#Syncfusion_SfDataGrid_DataPager_SfDataPager_PageSize) property. -* Set the number of buttons that need to be displayed in view by setting the [SfDataPager.NumericButtonCount](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.SfDataPager.html#Syncfusion_SfDataGrid_DataPager_SfDataPager_NumericButtonCount) property. - -N> The `SfDataPager.PageSize` property should not be assigned with a value of 0. - -The following code example shows how to implement paging in SfDataGrid for Xamarin.iOS. - -{% highlight c# %} - public partial class ViewController : UIViewController -{ - SfDataGrid SfGrid; - SfDataPager SfDataPager; - - public ViewController() - { - } - static bool UserInterfaceIdiomIsPhone - { - get { return UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Phone; } - } - - public override void ViewDidLoad () - { - base.ViewDidLoad (); - View.BackgroundColor=UIColor.White; - - SfDataPager = new SfDataPager(); - SfDataPager.PageSize = 15; - SfDataPager.Source = new PagingViewModel().OrdersInfo; - SfDataPager.NumericButtonBackground = UIColor.Cyan; - SfDataPager.NumericButtonCount = 20; - View.AddSubview(this.SfDataPager); - - SfGrid = new SfDataGrid (); - SfGrid.ItemsSource = SfDataPager.PagedSource; - SfGrid.ShowRowHeader = false; - SfGrid.HeaderRowHeight = 45; - SfGrid.RowHeight = 45; - View.AddSubview (this.SfGrid); - } - - public override void LayoutSubviews () - { - this.SfDataPager.Frame = new CGRect(0, 0, this.Frame.Width + 5, 100); - this.SfGrid.Frame = new CGRect (0, 100, this.Frame.Width, this.Frame.Height - 100); - base.LayoutSubviews (); - } -} -{% endhighlight %} - -The following screenshot shows the final outcome upon execution of the above code - -![Xamarin.iOS SfDataGrid Paging](SfDataGrid_images/Paging_img1.jpeg) - -N> `SfDataPager` provides the scrolling animation, while taping the [FirstPageButton](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.NavigationButtons.html) or [LastPageButton](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.NavigationButtons.html) button. - -## On Demand Paging - -In normal Paging, data collection is entirely loaded initially to the `SfDataPager`. However, SfDataGrid also allows you to load the data for the current page dynamically by setting the set [SfDataPager.UseOnDemandPaging](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.SfDataPager.html#Syncfusion_SfDataGrid_DataPager_SfDataPager_UseOnDemandPaging) to `true`. -To load current page item dynamically you must hook the [OnDemandLoading](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.SfDataPager.html) event. In the `OnDemandLoading` event, use the[LoadDynamicItems](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.SfDataPager.html#Syncfusion_SfDataGrid_DataPager_SfDataPager_LoadDynamicItems_System_Int32_System_Collections_IEnumerable_) method to load the data for the corresponding page in `SfDataPager`. -The `OnDemandLoading` event is triggered when the pager moves to the corresponding page. The `OnDemandLoading` event contains the following event arguments: - -* [StartIndex](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.OnDemandLoadingEventArgs.html#Syncfusion_SfDataGrid_DataPager_OnDemandLoadingEventArgs_StartIndex) : Corresponding page start index. -* [PageSize](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataPager.OnDemandLoadingEventArgs.html#Syncfusion_SfDataGrid_DataPager_OnDemandLoadingEventArgs_PageSize) : Number of items to be loaded for that page. - -The following code example illustrates how to load data for the DataPager control dynamically. - -{% highlight c# %} -private void OnDemandPageLoading(object sender, OnDemandLoadingEventArgs args) -{ - sfDataPager.LoadDynamicItems(args.StartIndex, source.Skip(args.StartIndex).Take(args.PageSize)); -} -{% endhighlight %} - -N>In OnDemandPaging, you cannot assign a value for the Source property in SfDataPager. - -When you use `OnDemandPaging`, `SfDataPager.PagedSource` loads only the current page data. Upon navigation to another page, `OnDemandLoading` event is fired which loads another set of data but maintains the previous page data also. When you navigate to previous page again, OnDemandLoading event is not fired and the required data is loaded which was maintained in cache. However for further performance enhancement if you don’t want to maintain the previous page data, you can call [Syncfusion.Data.PagedCollectionView.ResetCache()](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.Data.PagedCollectionView.html#Syncfusion_Data_PagedCollectionView_ResetCache) in `OnDemandLoading` event. ResetCache method call resets the cache except current page. - -The following code example illustrates how to use ResetCache method: - -{% highlight c# %} - private void OnDemandPageLoading(object sender, OnDemandLoadingEventArgs args) -{ - sfDataPager.LoadDynamicItems(args.StartIndex, source.Skip(args.StartIndex).Take(args.PageSize)); - (sfDataPager.PagedSource as PagedCollectionView).ResetCache(); -} - -{% endhighlight %} - -## Custom Appearance - -The following code example shows how to implement paging with custom appearance in SfDataGrid for Xamarin.iOS. - -{% highlight c# %} -sfDataPager.AppearanceManager = new CustomAppearance(); -{% endhighlight %} - -{% highlight c# %} -public class CustomAppearance : AppearanceManager -{ - public override Color GetNavigationButtonBackgroundColor() - { - return Color.Rgb(34, 34, 34); - } - public override Color GetNumericButtonBackgroundColor() - { - return Color.Rgb(0, 255, 0); - } - public override Color GetNumericButtonForegroundColor() - { - return Color.Rgb(82, 82, 82); - } - public override Color GetNumericButtonSelectionBackgroundColor() - { - return Color.Rgb(255, 0, 0); - } - public override Color GetNumericButtonSelectionForegroundColor() - { - return Color.Rgb(0, 0, 255); - } -} -{% endhighlight %} - -The following screenshot shows the final outcome upon execution of the above code - -![Xamarin.iOS SfDataGrid Custom Page Appearance](SfDataGrid_images/CustomPageAppearence.png) - diff --git a/xamarin-ios/SfDataGrid/PullToRefresh.md b/xamarin-ios/SfDataGrid/PullToRefresh.md deleted file mode 100644 index 0cb7cf83..00000000 --- a/xamarin-ios/SfDataGrid/PullToRefresh.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -layout: post -title: Pull To Refresh | SfDataGrid | Xamarin.iOS | Syncfusion -description: How to perform pull to refresh and it's properties and customizations in a SfDataGrid. -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- - -# Pull To Refresh - -SfDataGrid lets you to enable the PullToRefresh option by setting the [SfDataGrid.AllowPullToRefresh](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AllowPullToRefresh) property to `true` and by setting the [SfDataGrid.PullToRefreshCommand](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_PullToRefreshCommand) property. When the PullToRefresh is enabled, the SfDataGrid provides support for refreshing the data source in the runtime while doing the PullToRefresh action. - -## Pull to Refresh Command - -SfDataGrid lets you refresh the data in view in runtime by triggering an `ICommand` binded to the `SfDataGrid.PullToRefreshCommand` property. While you perform PullToRefresh action, if the progress bar meets 100 %, then this command is triggered to refresh the records in view. - -You need to set the [SfDataGrid.IsBusy](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_IsBusy) property to `true` before refreshing the records to notify the grid that PullToRefresh action is being performed and set the property to false after the view is refreshed. You can also alter the time for the PullToRefresh animation from the sample by setting a delay based on your requirement. - -The following code example illustrates how to enable and perform PullToRefresh operation in SfDataGrid. - -{% tabs %} - -{% highlight c# %} -//Enable PullToRefresh in SfDataGrid -dataGrid.AllowPullToRefresh = true; -dataGrid.PullToRefreshCommand = new Command(ExecutePullToRefreshCommand); - -private async void ExecutePullToRefreshCommand() -{ - this.dataGrid.IsBusy = true; - await Task.Delay(new TimeSpan(0, 0, 5)); - viewModel.ItemsSourceRefresh (); - this.dataGrid.IsBusy = false; -} - -//ViewModel.cs -internal void ItemsSourceRefresh() -{ - int count = random.Next (1, 6); - - for (int i = 11000; i < 11000 + count; i++) { - int value = i + random.Next (100, 150); - this.OrdersInfo.Insert (0, order.RefreshItemsSource (value)); - } -} - -//Command.cs -public class Command : ICommand -{ - private Action execute; - private bool canExecute = true; - - public event EventHandler CanExecuteChanged; - - public Command(Action action) - { - execute = action; - } - - public bool CanExecute(object parameter) - { - return canExecute; - } - - public void Execute(object parameter) - { - changeCanExecute(true); - execute.Invoke(); - } - - private void changeCanExecute(bool canExecute) - { - this.canExecute = canExecute; - if (CanExecuteChanged != null) - CanExecuteChanged(this, new EventArgs()); - } -} -{% endhighlight %} - -{% endtabs %} - -Running the application renders the following output. - -![DataGrid with Pull to Refresh functionality](SfDataGrid_images/PullToRefresh.png) - -## Host DataGrid inside Pull to Refresh control - -SfPullToRefresh is a refresh control that allows you to interact and refresh the view loaded in it. When the SfDataGrid is hosted inside the SfPullToRefresh, it is used to refresh the item while performing the pull to refresh action. - -For more details and code example for hosting the SfDataGrid inside SfPullToRefresh, refer [here](https://help.syncfusion.com/xamarin-ios/sfpulltorefresh/customizing-pullablecontent#sfdatagrid) - -The final output will look like on iOS, Android and Windows Phone devices as shown below. - -![Hosting DataGrid inside Pull to Refresh component](SfDataGrid_images/SfDatagrid_Refresh_iOS.gif) diff --git a/xamarin-ios/SfDataGrid/Row-Height-Customization.md b/xamarin-ios/SfDataGrid/Row-Height-Customization.md deleted file mode 100644 index a6432c1f..00000000 --- a/xamarin-ios/SfDataGrid/Row-Height-Customization.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -layout: post -title: Row Height Customization | SfDataGrid | Xamarin.iOS | Syncfusion -description: How to customize the height of rows in a SfDataGrid. -platform: xamarin.ios -control: SfDataGrid -documentation: ug ---- - -# Row Height Customization - -SfDataGrid provides you the options to customize the header row height and the row height of all the grid rows or particular rows based on your requirements. The following sections illustrates you about how to achieve this customization in SfDataGrid. - - -## Customize HeaderRowHeight - -SfDataGrid allows you to customize the height of the header row by setting the [SfDataGrid.HeaderRowHeight](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_HeaderRowHeight) property. The default value of this property is 40. This property responds to runtime changes and hence you can customize it based on your requirement. Setting `SfDataGrid.HeaderRowHeight` to zero will collapse the header row in view. - -The following code example illustrates how to customize header row height in SfDataGrid. - -{% highlight c# %} - -//Customizing header row height in SfDataGrid -dataGrid.HeaderRowHeight = 50;  -{% endhighlight %} - -## GridRowSizingOptions - -SfDataGrid allows you to customize the grid row's height with various customizing options while auto calculating the row height based on content using the `GridRowSizingOptions`. - -### Calculate rows height based on certain columns - -SfDataGrid allows you to calculate the RowHeight with exclude certain columns using `ExcludeColumns` property. - -The following code example illustrates calculating the height of the grid rows based on certain columns. -{% highlight c# %} - - private void DataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) -{ - GridRowSizingOptions options = new GridRowSizingOptions(); - options.ExcludeColumns.Add("Description"); - options.ExcludeColumns.Add("CustomerID"); - if (e.RowIndex == 0) - { - e.Height = 50; - } - else - { - e.Height = dataGrid.GetRowHeight(e.RowIndex, options); - } - e.Handled = true; -} -{% endhighlight %} - -### Calculate row height including hidden column's content - -SfDataGrid allows you to calculate the row height based on content by including/excluding the hidden columns using the `CanIncludeHiddenColumns` property. -The following code example illustrates how to calculate Height include with hidden columns . -{% highlight c# %} - - private void DataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) -{ - GridRowSizingOptions options = new GridRowSizingOptions(); - options.CanIncludeHiddenColumns = true; - if (e.RowIndex == 0) - { - e.Height = 50; - } - else - { - e.Height = dataGrid.GetRowHeight(e.RowIndex, options); - } - e.Handled = true; -} -{% endhighlight %} - -## Customize RowHeight for all rows - -SfDataGrid allows you to customize the height of the grid rows in the scrolling region by setting the [SfDataGrid.RowHeight](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_RowHeight) property. The default value of this property is 50. This property responds to runtime changes and hence you can customize it based on your requirement. Setting this property will change the height of all the rows in the body region with the common value. Setting `SfDataGrid.RowHeight` to zero will collapse all the rows in the grid. - -The following code example illustrates how to customize header row height in SfDataGrid. - -{% highlight c# %} -//Customizing row height in SfDataGrid -dataGrid.RowHeight = 60; -{% endhighlight %} - - -## Reset row height at runtime - -SfDataGrid allows you to customize the height of a grid row on demand by handling the [SfDataGrid.QueryRowHeight](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html) event. This event is raised for the grid rows whenever they come to view and hence you can customize the height of a particular row on demand by using the row index. Setting height to zero will collapse all the row in the grid. - -### QueryRowHeight - -`SfDataGrid.QueryRowHeight` is the event that returns row heights on demand. This event receives two arguments namely the sender that handles the SfDataGrid and the [QueryRowHeightEventArgs](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.QueryRowHeightEventArgs.html). The `QueryRowHeightEventArgs` has the following properties. - -* [RowIndex](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.QueryRowHeightEventArgs.html#Syncfusion_SfDataGrid_QueryRowHeightEventArgs_RowIndex): The property RowIndex helps you to identify a particular row in the grid. -* [Height](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.QueryRowHeightEventArgs.html#Syncfusion_SfDataGrid_QueryRowHeightEventArgs_Height): This property sets and returns the height for a grid row on demand. Default line size for the rows is 50. -* [Handled](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridHandledEventArgs.html#Syncfusion_SfDataGrid_GridHandledEventArgs_Handled): This property decides whether the specified height can be set to row or not. The default value is `false`. When this property is not set, the decided height is not set to the row. - -The following code example illustrates how to hook the `SfDataGrid.QueryRowHeight` event and customize a row‘s height in SfDataGrid. - -{% highlight c# %} -//Hooks QueryRowHeight event in SfDataGrid -dataGrid.QueryRowHeight += DataGrid_QueryRowHeight;   - -//Event to set the row height on demand -void DataGrid_QueryRowHeight (object sender, QueryRowHeightEventArgs e) -{ - //Sets height of the fifth row - if (e.RowIndex == 5) { - e.Height = 100; - e.Handled = true; - } -} -{% endhighlight %} - -### QueryRowHeights Customization - -SfDataGrid allows you to query a range of rows programmatically by using the [SfDataGrid.QueryingRowHeights](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html) method based on the requirement. - -QueryRowHeights has two arguments start index and end index. -* Start index: It indicates, from which row index the `SfDataGrid.QueryRowHeight` event has to fire. -* End index: It indicates the end row index for the `SfDataGrid.QueryRowHeight` event to fire. - -The following code illustrates how to customize the row height for a range of rows in SfDataGrid. - -{% highlight c# %} - -//Customizing the QueryingRowHeights in SfDataGrid -dataGrid.QueryingRowHeights(2,5); -//Its starts to query the rows from second row to the fifth row. -{% endhighlight %} - - -## Auto fit the grid rows based on content - -SfDataGrid provides support for AutoRowHeight feature by which you can customize the row's height based on the content. This can be achieved by using the `SfDatagrid.QueryRowHeight` event and [SfDatagrid.GetRowHeight](http://help.syncfusion.com/cr/xamarin-ios) method. `SfDatagrid.QueryRowHeight` event returns the row height on demand and `SfDatagrid.GetRowHeight` method returns the height of the row based on the content. - -N> Row drag and drop operation is not supported while customizing the row height based on content. - -The following code example illustrates how to hook the `SfDatagrid.QueryRowHeight` event and auto fit a row's height based on the content in SfDataGrid. - -{% highlight c# %} -//Hooks QueryRowHeight event in SfDataGrid to set the row height on demand -dataGrid.QueryRowHeight += DataGrid_QueryRowHeight;   - -private void DataGrid_QueryRowHeight (object sender, QueryRowHeightEventArgs e) -{ - if (e.RowIndex != 0) { - //Calculates and sets height of the row based on its content - e.Height = dataGrid.GetRowHeight(e.RowIndex); - e.Handled = true; - } -} -{% endhighlight %} - -![](SfDataGrid_images/AutoRowHeight_iOS.png) - -## Customize caption summary row height - -SfDataGrid allows you to customize the height of the `CaptionSummaryRow` by setting the height of the caption rows in the `SfDataGrid.QueryRowHeight` event. By default the `CaptionSummaryRow` renders with the height of the [SfDataGrid.RowHeight](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_RowHeight) which is `50` - -The following code example illustrates how to customize CaptionSummaryRow height in SfDataGrid. - -{% highlight c# %} -//Hooks QueryRowHeight event in SfDataGrid to set the CaptionSummaryRow height on demand -dataGrid.QueryRowHeight += DataGrid_QueryRowHeight; - -private void DataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) -{ - if (dataGrid.IsCaptionSummaryRow(e.RowIndex)) - { - e.Height = 70; - e.Handled = true; - } -} -{% endhighlight %} - -![](SfDataGrid_images/CaptionSummaryRowHeight.png) - - -## customize table summary row height - -SfDataGrid allows you to customize the height of the `TableSummaryRow` by setting the height of the table summary rows in the `SfDataGrid.QueryRowHeight` event. By default the `TableSummaryRow` renders with the height of the [SfDataGrid.RowHeight](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_RowHeight) which is `50`. - -The following code example illustrates how to customize header row height in SfDataGrid. - -{% highlight c# %} -//Hooks QueryRowHeight event in SfDataGrid to set the CaptionSummaryRow height on demand -dataGrid.QueryRowHeight += DataGrid_QueryRowHeight; - -private void DataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) -{ - if (dataGrid.IsTableSummaryRow(e.RowIndex)) - { - e.Height = 70; - e.Handled = true; - } -} -{% endhighlight %} - -![](SfDataGrid_images/TableSummaryRowHeight.png) - -## How to ? - -### Optimize performance when using QueryRowHeight event - -By default the `SfDataGrid.QueryRowHeight` event will be fired each time a row comes into the view. If you want to prevent the same row from being queried again, you can check if the `Height` property in the `QueryRowHeightEventArgs` is not equal to the `SfDataGrid.RowHeight` property which prevents from the same row being queried again. The following code example illustrates how to enhance the performance by preventing the the same row from being queried again. - -{% highlight c# %} -//Hooks QueryRowHeight event in SfDataGrid to set the row height on demand -dataGrid.QueryRowHeight += DataGrid_QueryRowHeight; - -private void DataGrid_QueryRowHeight (object sender, QueryRowHeightEventArgs e) -{ - // Code to skip querying of a row if already queried - if (e.Height != dataGrid.RowHeight) - return; - if (e.RowIndex != 0)  - { - //Calculates and sets the height of the row based on its content. - e.Height = dataGrid.GetRowHeight(e.RowIndex); - e.Handled = true; - } -} -{% endhighlight %} diff --git a/xamarin-ios/SfDataGrid/Selection.md b/xamarin-ios/SfDataGrid/Selection.md deleted file mode 100644 index b35e14cb..00000000 --- a/xamarin-ios/SfDataGrid/Selection.md +++ /dev/null @@ -1,373 +0,0 @@ ---- -layout: post -title: Selection | SfDataGrid | Xamarin.iOS | Syncfusion -description: How to enable selection, about the selection modes, properties, events and customizations available for selection in a SfDataGrid. -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- - -# Selection in Xamarin.iOS.DataGrid (SfDataGrid) - -This section explains how to enable selection in the SfDataGrid and about the selection modes, properties, events that involves in selection and customizations available for selection. - -The SfDataGrid selects a specific row or group of rows either programmatically or by touch interactions. To enable selection in the SfDataGrid, set the [SfDataGrid.SelectionMode](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectionMode) property to a value other than `None`. The SfDataGrid has different selection modes as listed as follows: - -## Selection modes - - - - - - - - - - - - - - - - - - - - - -
Modes Description
{{'[None](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SelectionMode.html)'| markdownify }} Disables selection and no rows can be selected. This is the default value.
{{'[Single](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SelectionMode.html)'| markdownify }} Allows selecting a single row. Upon selecting the next row, the selection in the previous row is cleared.
{{'[Multiple](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SelectionMode.html)'| markdownify }} Allows selecting more than one row. Selection is not cleared when selecting more than one record. When clicking on a selected row for the second time, selection is cleared.
{{'[SingleDeselect](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SelectionMode.html)'| markdownify }} Allows selecting only a single row: however tapping the row adjacent to the selection is cleared. Similar to single mode, upon selecting the next row the selection in the previous row is cleared.
- -{% tabs %} -{% highlight c# %} -dataGrid.SelectionMode = SelectionMode.Multiple; -{% endhighlight %} -{% endtabs %} - -![DataGrid in multiple selection mode](SfDataGrid_images/MultipleSelection.PNG) - -## Getting selected rows - -The SfDataGrid provides `SelectedIndex`,`SelectedItem` and `CurrentItem` properties to get details of the selected rows when the selection mode is `Single`, `Multiple` and `SingleDeselect`. - -[SfDataGrid.SelectedItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectedItem): Provides the underlying data object of the selected row. It denotes the first selected row in multiple selection. -[SfDataGrid.SelectedIndex](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectedIndex): Provides the index of `SfDataGrid.SelectedItem`. -[SfDataGrid.CurrentItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_CurrentItem): Provides the underlying data object of the currently selected row in the data grid. It denotes the first selected row in multiple selection. - -### Row selection - -When multiple rows are selected, the `SelectedItems` and `SelectionController.SelectedRows` properties provide information of all the selected rows. - -[SfDataGrid.SelectedItems](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectedItems): Provides all the selected records of the selected items when multiple selection is enabled. -[SfDataGrid.SelectionController.SelectedRows](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectionController): Provides the collection of underlying model object(row data) of all selected items. - -### CurrentItem vs SelectedItem - -Both the [SelectedItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectedItem) and [CurrentItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_CurrentItem) returns the same data object when selection mode is single. When multiple selection is enabled, the initially selected row will be maintained in the `SelectedItem` and the currently selected row will be maintained in the `CurrentItem - -## Programmatic selection - -When the `SfDataGrid.SelectionMode` is other than `None`, you can also select the row or rows in the SfDataGrid from the code by setting the [SfDataGrid.SelectedIndex](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectedIndex), [SfDataGrid.SelectedItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectedItem), or [SfDataGrid.SelectedItems](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectedItems) property based on the selection mode. The following code example illustrates how to enable selection from code. - -When the selection mode is `Single`, you can programmatically select a row in two ways: by setting the row index to the `SfDataGrid.SelectedIndex` property, or by setting the underlying object to be selected to the `SfDataGrid.SelectedItem` property. - -The following code example illustrates how to programmatically select a row from the code. - -{% tabs %} -{% highlight c# %} -//Perform selection using selected index -dataGrid.SelectedIndex = 3; - -//Perform selection using selected item -dataGrid.SelectedItem = viewModel.OrdersInfo [5]; -{% endhighlight %} -{% endtabs %} - -When the selection mode is Multiple you can programmatically select more than one row by adding the underlying object to be selected to the `SfDataGrid.SelectedItems` property. - -The following code example illustrates how to programmatically select more than one row from the code. - -{% tabs %} -{% highlight c# %} -//Perform multiple selection using selected item -dataGrid.SelectedItems.Add (viewModel.OrdersInfo [4]); -dataGrid.SelectedItems.Add (viewModel.OrdersInfo [6]); -dataGrid.SelectedItems.Add (viewModel.OrdersInfo [8]); -{% endhighlight %} -{% endtabs %} - -The following screenshot shows the programmatic selection in the data grid: - -![DataGrid in programmatic multiple selection](SfDataGrid_images/MultipleSelection.PNG) - -### Scroll to selected item - -You can scroll programmatically to the selected item by passing the `SelectedIndex` to the [SfDataGrid.ScrollToRowIndex](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_ScrollToRowIndex_System_Int32_Syncfusion_SfDataGrid_ScrollToPosition_) method. Refer the below code snippet for the same. - -{% tabs %} -{% highlight c# %} -dataGrid.ScrollToRowIndex((int)dataGrid.SelectedIndex); -{% endhighlight %} -{% endtabs %} - -## Clear selection - -Data grid allows you to clear the selection applied in the grid rows either by setting the `SfDataGrid.SelectionMode` to `None` or by calling the [SfDataGrid.SelectionController.ClearSelection ()](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfDataGrid.XForms.GridSelectionController.html#Syncfusion_SfDataGrid_XForms_GridSelectionController_ClearSelection) method. - -{% tabs %} -{% highlight c# %} -//Clear selection using selection mode -dataGrid.SelectionMode = SelectionMode.None; - -//Clear selection using selection controller -dataGrid.SelectionController.ClearSelection (); -{% endhighlight %} -{% endtabs %} - -N> Selected items and the selections will be cleared whenever the ItemsSource is changed at runtime. - -## Row header selection - -Data grid allows you to select the grid row(s) upon tapping them over the grid cells. It also allows you to select the grid rows when you tap the row header cells. To enable selection in the data grid, set the `SfDataGrid.SelectionMode` property to a value other than `None. - -### Select records in the data grid when tapping only on the row header cells - -The data grid allows you to select a specific row or group of rows by touching the grid cells. However, to select the record only when tapping the row header cells, use the `SfDataGrid.SelectionChanging` event. - -{% tabs %} -{% highlight c# %} - -dataGrid.SelectionMode = SelectionMode.Single; - -private void DataGrid_SelectionChanging(object sender, GridSelectionChangingEventArgs e) -{ - e.Cancel = true; -} - -private void DataGrid_GridTapped(object sender, GridTappedEventsArgs e) -{ - if(e.RowColumnIndex.ColumnIndex == 0) - { - dataGrid.SelectedIndex = e.RowColumnIndex.RowIndex; - } -} - -{% endhighlight %} -{% endtabs %} - -N> To enable the row header in the data grid, set the `SfDataGrid.ShowRowHeader` to `true. - -## Selection animation - -The data grid supports selecting one or more rows programmatically or by touch interactions. In addition, the control also provides extensibility to animate the selected rows. - -It can be done by extending the [GridSelectionController](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSelectionController.html ). - -Refer to the following example in which a CustomSelectionController is derived from `GridSelectionController` and an instance of it is assigned to the [SfDataGrid.SelectionController](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectionController ) property to perform selection animation. - -{% tabs %} -{% highlight c# %} -dataGrid.SelectionController = new CustomSelectionController(dataGrid); -dataGrid.SelectionMode = SelectionMode.Multiple; -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight c# %} -public class CustomSelectionController : GridSelectionController -{ - public CustomSelectionController(SfDataGrid dataGrid) - { - this.SelectedRows = new GridSelectedRowsCollection(); - this.DataGrid = dataGrid; - } - protected override void SetSelectionAnimation(VirtualizingCellsControl rowElement) - { - rowElement.Alpha = 0.75f; - UIView.Animate(1, 1, UIViewAnimationOptions.CurveLinear, () => - { - rowElement.Alpha = 1f; - }, null); - } -} -{% endhighlight %} -{% endtabs %} - -![DataGrid with selection animation](SfDataGrid_images/SelectionAnimation.gif) - -## Events in selection - -The SfDataGrid provides the following events for selection: - -* [SfDataGrid.SelectionChanging](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html): Raised while selecting a row at the execution time before the row is selected. So, it allows canceling selection action by setting the Cancel property of [GridSelectionChangingEventArgs](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSelectionChangingEventArgs.html). -* [SelectionChanged](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html): Raised after the column is selected. - -These two events are triggered with `GridSelectionChangingEventArgs` and [GridSelectionChangedEventArgs](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSelectionChangedEventArgs.html) that contains the following properties. - -* [AddedItems](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSelectionChangedEventArgs.html#Syncfusion_SfDataGrid_GridSelectionChangedEventArgs_AddedItems): Gets the collection of underlying data objects added to selection. -* [RemovedItems](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSelectionChangedEventArgs.html#Syncfusion_SfDataGrid_GridSelectionChangedEventArgs_RemovedItems): Gets the collection of underlying data objects removed from selection. - -The following code example illustrates how to hook the `SfDataGrid.SelectionChanging` event and cancel the selection of a column. - -{% tabs %} -{% highlight c# %} -dataGrid.SelectionChanging += DataGrid_SelectionChanging; - -void DataGrid_SelectionChanging (object sender, GridSelectionChangingEventArgs e) -{ - e.Cancel = true; -} -{% endhighlight %} -{% endtabs %} - -The following code explains how to get the selected item in code-behind, by making use of the `SfDataGrid.SelectionChanged` event. - -{% tabs %} -{% highlight c# %} -dataGrid.SelectionChanged += DataGrid_SelectionChanged; - -private void DataGrid_SelectionChanged (object sender, GridSelectionChangedEventArgs e) -{ - // Gets the selected item. - var selectedItems = e.AddedItems[0]; -} -{% endhighlight %} -{% endtabs %} - -### CurrentItem - -The [SfDataGrid.CurrentItem](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_CurrentItem) property holds the underlying data of the last selected row in data Grid. - -Get the current item in the `SfDataGrid.SelectionChanged` event by setting the `SfDataGrid.SelectionMode` as `Multiple` or `SingleDeselect`. If the `SelectionMode` is `Single`, currentItem and selectedItem are same. - -{% tabs %} -{% highlight c# %} -dataGrid.SelectionMode = SelectionMode.Multiple; - -dataGrid.SelectionChanged += DataGrid_SelectionChanged; - -void DataGrid_SelectionChanged (object sender, GridSelectionChangedEventArgs e) -{ - var currentItem = dataGrid.CurrentItem; - - //your codes -} -{% endhighlight %} -{% endtabs %} - -## Customizing Selection Appearance - -### Adding multiple selection colors - -The SfDataGrid supports selecting one or more rows either programmatically or by touch interactions. By default, the SfDataGrid applies a common background color for the selected rows based on the current theme. However, it also provides extensibility to have multiple selection colors when touching the rows by writing a custom SelectionController derived from [GridSelectionController](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSelectionController.html) and assigning it to the [SfDataGrid.SelectionController](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SelectionController) property. Override the GetSelectionColor() method to apply different colors for selection at runtime. - -The following code example illustrates how to set different colors for the selected rows in the SfDataGrid. - -{% tabs %} -{% highlight c# %} -sfGrid.SelectionController = new CustomSelectionController(sfGrid); -sfGrid.SelectionMode = SelectionMode.Multiple; -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight c# %} -public class CustomSelectionController : GridSelectionController -{ - public Color[] SelectionColors { get; set; } - - public CustomSelectionController(SfDataGrid datagrid) - { - this.DataGrid = datagrid; - SelectionColors = new Color[11] - { - UIColor.Orange, - UIColor.FromRGB(201,93,55), - UIColor.FromRGB(123,149,52), - UIColor.Red, - UIColor.Black, - UIColor.Brown, - UIColor.FromRGB(42,159,214), - UIColor.Gray,UIColor.FromRGB(24,123,67), - UIColor.Purple,UIColor.FromRGB(72,173,170) - }; - } - //Code to set multiple selection colors - public override Color GetSelectionColor(int rowIndex, object rowData) - { - if (SelectionColors != null) - return SelectionColors[rowIndex % 11]; - else - return Color.Blue; - } -} -{% endhighlight %} -{% endtabs %} - -The following screenshot shows the final outcome upon execution of the above code. - -![DataGrid with multi selection colors](SfDataGrid_images/AddingMultipleColors.PNG) - -### Changing selection background and foreground Color - -The SfDataGrid allows you to change the selection background and foreground color by returning the required color in the `GetSelectionBackgroundColor` and `GetSelectionForegroundColor` properties overrides in the custom style class overriding from [DataGridStyle](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataGridStyle.html), and assign it to the [SfDataGrid.GridStyle](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_GridStyle) property. - -{% tabs %} -{% highlight c# %} -//Apply custom style to SfDataGrid from code -dataGrid.GridStyle = new SelectionStyle(); -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight c# %} -//Custom style class -public class SelectionStyle : DataGridStyle -{ - public SelectionStyle() - { - } - - public override Color GetSelectionBackgroundColor() - { - return Color.Blue; - } - - public override Color GetSelectionForegroundColor() - { - return Color.White; - } -} -{% endhighlight %} -{% endtabs %} - -![DataGrid selection background style](SfDataGrid_images/SelectionColor.PNG) - -## Changing current cell border color - -The SfDataGrid allows you to change the current cell border color applied to the grid cells when entering the edit mode by returning the required color in the `GetCurrentCellBorderColor` override of your custom style class derived from [DataGridStyle](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataGridStyle.html), and assign it to the [SfDataGrid.GridStyle](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_GridStyle) property. - -{% tabs %} -{% highlight c# %} -//Apply custom style to SfDataGrid from code -dataGrid.GridStyle = new SelectionStyle(); -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight c# %} -//Custom style class -public class SelectionStyle : DataGridStyle -{ - public SelectionStyle() - { - } - - public override Color GetCurrentCellBorderColor() - { - return Color.Pink; - } -} -{% endhighlight %} -{% endtabs %} - -![DataGrid current cell border](SfDataGrid_images/CurrentcellBorder.PNG) \ No newline at end of file diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/Filtering.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/Filtering.png deleted file mode 100644 index 548e4576..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/Filtering.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/GettingStarted.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/GettingStarted.png deleted file mode 100644 index c980b733..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/GettingStarted.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/GroupMode.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/GroupMode.png deleted file mode 100644 index cf7e34c6..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/GroupMode.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/Grouping.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/Grouping.png deleted file mode 100644 index c7595aba..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/Grouping.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/LoadMore.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/LoadMore.png deleted file mode 100644 index 19b75177..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/LoadMore.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/Overview.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/Overview.png deleted file mode 100644 index 7502fddb..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/Overview.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/Paging_img1.jpeg b/xamarin-ios/SfDataGrid/SfDataGrid_images/Paging_img1.jpeg deleted file mode 100644 index 91abd75e..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/Paging_img1.jpeg and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/PullToRefresh.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/PullToRefresh.png deleted file mode 100644 index c6fe013a..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/PullToRefresh.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/SortIconCustomization.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/SortIconCustomization.png deleted file mode 100644 index b3b4deba..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/SortIconCustomization.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/Sorting.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/Sorting.png deleted file mode 100644 index cee2e995..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/Sorting.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/Styles.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/Styles.png deleted file mode 100644 index 42c2c4fc..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/Styles.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/Summary.jpeg b/xamarin-ios/SfDataGrid/SfDataGrid_images/Summary.jpeg deleted file mode 100644 index 38f0bc3b..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/Summary.jpeg and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/SfDataGrid_images/TemplateColumns.png b/xamarin-ios/SfDataGrid/SfDataGrid_images/TemplateColumns.png deleted file mode 100644 index d081b5b6..00000000 Binary files a/xamarin-ios/SfDataGrid/SfDataGrid_images/TemplateColumns.png and /dev/null differ diff --git a/xamarin-ios/SfDataGrid/Sorting.md b/xamarin-ios/SfDataGrid/Sorting.md deleted file mode 100644 index b2f83505..00000000 --- a/xamarin-ios/SfDataGrid/Sorting.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -layout: post -title: Sorting | SfDataGrid | Xamarin.iOS | Syncfusion -description: How to sort the data and about the properties and events that involve in sorting in a SfDataGrid. -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- - -# Sorting - -The SfDataGrid allows applying sorting on its data by setting the [SfDataGrid.AllowSorting](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AllowSorting) property to `true`. It allows sorting the data adjacent to one or more columns. When sorting is applied, the SfDataGrid automatically rearranges the data to match the current sort criteria. When `SfDataGrid.AllowSorting` is `true`, you can sort the data simply by tapping the column header you wish to sort. Once sorting is applied, the SfDataGrid shows a sort icon in the respective column header indicating the direction of sorting. - -N> To update sorting for a newly added row or column, set the `SfDataGrid.View.LiveDataUpdateMode` to `LiveDataUpdateMode.AllowDataShaping`. - -## Programmatic sorting - -The SfDataGrid also allows performing sorting from the code. This requires you to manually define the [SortColumnDescription](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SortColumnDescription.html) objects and add it in the [SfDataGrid.SortColumnDescriptions](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SortColumnDescriptions) collection. The SfDataGrid sorts the data based on the `SortColumnDescription` objects added to this collection. - -The `SortColumnDescription` object holds following two properties: - -* [ColumnName](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SortColumnDescription.html#Syncfusion_SfDataGrid_SortColumnDescription_ColumnName): Name of the sorted column. -* [SortDirection](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SortColumnDescription.html#Syncfusion_SfDataGrid_SortColumnDescription_SortDirection): An object of type ListSortDirection that defines the sorting direction. - -The following code example illustrates this. - -{% highlight c# %} -dataGrid.AllowSorting = true; - -dataGrid.SortColumnDescriptions.Add (new SortColumnDescription () { - ColumnName = "OrderID", - SortDirection = ListSortDirection.Descending -}); -{% endhighlight %} - -The following screenshot shows the sorting functionality in the SfDataGrid. - -![](SfDataGrid_images/Sorting.png) - -## Tri-state sorting - -In addition to sort the data in ascending or descending order, the SfDataGrid also allows you to unsort the data to the original order by clicking the header again after sorting to descending order by setting the [SfDataGrid.AllowTriStateSorting](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AllowTriStateSorting) property to `true`. When this property is set, sorting in each column iterates through three sort states; ascending, descending, and unsorted. - -The following code example shows how to enable tri-state sorting in the SfDataGrid. - -{% highlight c# %} -dataGrid.AllowTriStateSorting = true; -{% endhighlight %} - -![](SfDataGrid_images/Tristate_Sorting.gif) - -## Multi-column sorting - -The SfDataGrid allows sorting the data against more than one column by setting the [SfDataGrid.AllowMultiSorting](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AllowMultiSorting) property to `true`. The number of columns by which the data can be sorted is unlimited. To apply sorting for multiple columns, tap the desired column headers after setting the `SfDataGrid.AllowMultiSorting` property. - -The following code example shows how to enable multi-sorting in the SfDataGrid. - -{% highlight c# %} -dataGrid.AllowMultiSorting = true; -{% endhighlight %} - -![](SfDataGrid_images/MultiColumn_Sorting.gif) - -## Sort column in double-click - -By default, the column gets sorted when the column header is clicked. You can change this behavior to sort the column by double-clicking by setting the [SfDataGrid.SortTapAction](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SortTapAction) property as [DoubleTap](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SortTapAction.html). - -The following code example shows how to set `SortTapAction` is `DoubleTap` in the SfDataGrid. - -{% highlight c# %} - -dataGrid.SortTapAction=SortTapAction.DoubleTap; - -{% endhighlight %} - -## Sorting Events - -The SfDataGrid provides the following events for the sorting functionality: - -* [SortColumnsChanging](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html): Raised while sorting the column at execution time before the column gets sorted. It helps to cancel the sorting action by setting the Cancel property of [DataGridSortColumnsChangingEventArgs](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html). -* [SortColumnsChanged](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html): Raised after the column is sorted. - -These two events are triggered with `DataGridSortColumnsChangingEventArgs` and [DataGridSortColumnsChangedEventArgs](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataGridSortColumnsChangedEventArgs.html) that contains the following properties. - -* [AddedItems](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataGridSortColumnsChangedEventArgs.html#Syncfusion_SfDataGrid_DataGridSortColumnsChangedEventArgs_AddedItems): Gets the collection of `SortColumnDescription` objects added to `SfDataGrid.SortColumnDescriptions` collection for sorting. -* [RemovedItems](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataGridSortColumnsChangedEventArgs.html#Syncfusion_SfDataGrid_DataGridSortColumnsChangedEventArgs_RemovedItems): Gets the collection of `SortColumnDescription` objects removed from `SfDataGrid.SortColumnDescriptions` collection. - -The following code example illustrates how to hook the `SortColumnsChanging` event and cancel the sorting of a column. - -{% highlight c# %} -dataGrid.SortColumnsChanging += DataGrid_SortColumnsChanging; -{% endhighlight %} - -{% highlight c# %} -void DataGrid_SortColumnsChanging (object sender, DataGridSortColumnsChangingEventArgs e) -{ - if(e.AddedItems[0].ColumnName == "OrderID") - { - e.Cancel = true; - } -} -{% endhighlight %} - - -## Custom sorting - -The SfDataGrid allows sorting columns based on custom logic when the standard sorting techniques do not meet the requirements. For each column, you can apply different sorting criteria by adding `SortComparer` objects to [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_SortComparers) collection. - -A `SortComparer` object has the following properties: - -* PropertyName: Defines the [MappingName]() of the column that applies custom sorting. -* Comparer: Gets or sets the custom comparer that implements the `IComparer` and `ISortDirection interfaces. - -The following code example illustrates how to perform custom sorting for FirstName column based on the string length of the names. - -{% highlight c# %} -dataGrid.SortComparers.Add (new SortComparer () { - PropertyName = "FirstName", - Comparer = new CustomComparer() -}); - -dataGrid.SortColumnDescriptions.Add (new SortColumnDescription () { - ColumnName = "FirstName", - SortDirection = ListSortDirection.Descending -}); -{% endhighlight %} - -The following code example illustrates how to write a Custom Comparer. - -{% highlight c# %} -public class CustomComparer : IComparer, ISortDirection -{ - public int Compare(object x, object y) - { - int nameX; - int nameY; - - //For OrderInfo type data - if (x.GetType () == typeof(OrderInfo)) { - //Calculating the length of FirstName in OrderInfo objects - nameX = ((OrderInfo)x).FirstName.Length; - nameY = ((OrderInfo)y).FirstName.Length; - } - - //For Group type data                                    - else if (x.GetType () == typeof(Group)) { - //Calculating the group key length - nameX = ((Group)x).Key.ToString ().Length; - nameY = ((Group)y).Key.ToString ().Length; - } else { - nameX = x.ToString ().Length; - nameY = y.ToString ().Length; - } - - // Objects are compared and return the SortDirection - if (nameX.CompareTo (nameY) > 0) - return SortDirection == ListSortDirection.Ascending ? 1 : -1; - else if (nameX.CompareTo (nameY) == -1) - return SortDirection == ListSortDirection.Ascending ? -1 : 1; - else - return 0;  - } - - //Gets or sets the SortDirection value - public ListSortDirection SortDirection { get; set; } -} -{% endhighlight %} - -## Animate sorting icons - -The SfDatagrid loads two different icons for denoting the `Ascending` and `Descending` sort direction states. However, the SfDataGrid allows rotating the `DataGridStyle.GetHeaderSortIndicatorUp` icon animatedly for denoting the descending state by overriding the `DataGridStyle.GetHeaderSortIndicatorDown` method and returning `null`. - -The following code example illustrates how to enable the sorting icons animation by writing a custom style. - -{% tabs %} -{% highlight c# %} - -//Apply custom style to SfDataGrid from code - -dataGrid.GridStyle = new CustomStyle (); - -//Custom Style class - -public class CustomStyle : DataGridStyle -{ - public CustomStyle () - { - - } - public override ImageSource GetHeaderSortIndicatorDown() - { - return null; - } -} - -{% endhighlight %} -{% endtabs %} - -## How to disable sorting for an individual column - -The SfDataGrid allows disabling the sorting for an individual columns by using the [GridColumn.AllowSorting](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AllowSorting) property. The default value of this property is `true` so, all the columns in the [SfDataGrid.Columns](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_Columns) collection can be sorted when `SfDataGrid.AllowSorting` is set to `true`. - -To disable sorting for an individual column, follow the code example. - -### For auto generated column - -{% highlight c# %} -public MyViewController() -{ - dataGrid = new SfDataGrid(); - viewModel = new ViewModel(); -} - -public override void ViewDidLoad() -{ - base.ViewDidLoad(); - dataGrid.ItemsSource = viewModel.OrdersInfo; - dataGrid.AllowSorting = true; - dataGrid.AutoGeneratingColumn += DataGrid_AutoGeneratingColumn; - this.View.AddSubview(dataGrid); -} - -private void DataGrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnEventArgs e) -{ - // Sorting will not be done for the Freight column - if (e.Column.MappingName == "Freight") - e.Column.AllowSorting = false; -} - -public override void ViewDidLayoutSubviews() -{ - dataGrid.Frame = new CGRect(0, 30, this.View.Frame.Width, this.View.Frame.Height); - base.ViewDidLayoutSubviews(); -} -{% endhighlight %} - -### For manually defined column - -{% highlight c# %} -public MyViewController() -{ - dataGrid = new SfDataGrid(); - viewModel = new ViewModel(); -} - -public override void ViewDidLoad() -{ - base.ViewDidLoad(); - dataGrid.ItemsSource = viewModel.OrdersInfo; - dataGrid.AutoGenerateColumns = false; - dataGrid.AllowSorting = true; - dataGrid.Columns.Add(new GridTextColumn() { MappingName = "OrderID" }); - // Sorting will not be done for the Freight column - dataGrid.Columns.Add(new GridTextColumn() { MappingName = "Freight", AllowSorting = false }); - dataGrid.Columns.Add(new GridTextColumn() { MappingName = "Country" }); - this.View.AddSubview(dataGrid); -} - -public override void ViewDidLayoutSubviews() -{ - dataGrid.Frame = new CGRect(0, 30, this.View.Frame.Width, this.View.Frame.Height); - base.ViewDidLayoutSubviews(); -} -{% endhighlight %} \ No newline at end of file diff --git a/xamarin-ios/SfDataGrid/Styles.md b/xamarin-ios/SfDataGrid/Styles.md deleted file mode 100644 index 07616029..00000000 --- a/xamarin-ios/SfDataGrid/Styles.md +++ /dev/null @@ -1,299 +0,0 @@ ---- -layout: post -title: Styles | SfDataGrid | Xamarin.iOS | Syncfusion -description: How to apply styles for the elements in a SfDataGrid. -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- - -# Styles - -SfDataGrid allows you to apply style to all of its elements by writing a Style class overriding from [DataGridStyle](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataGridStyle.html) and assigning it to the [SfDataGrid.GridStyle](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_GridStyle) property. - -The following example explains you how to apply custom style to SfDataGrid. - -{% highlight c# %} -//Apply custom style to SfDataGrid from code -dataGrid.GridStyle = new Dark (); -{% endhighlight %} - -{% highlight c# %} -//Custom style class -public class Dark : DataGridStyle -{ - public Dark() - { - } - - public override UIColor GetHeaderBackgroundColor() - { - return UIColor.FromRGB(15, 15, 15); - } - - public override UIColor GetHeaderForegroundColor() - { - return UIColor.FromRGB(255, 255, 255); - } - - public override UIColor GetRecordBackgroundColor() - { - return UIColor.FromRGB(43, 43, 43); - } - - public override UIColor GetRecordForegroundColor() - { - return UIColor.FromRGB(255, 255, 255); - } - - public override UIColor GetSelectionBackgroundColor() - { - return UIColor.FromRGB(42, 159, 214); - } - - public override UIColor GetSelectionForegroundColor() - { - return UIColor.FromRGB(255, 255, 255); - } - - public override UIColor GetCaptionSummaryRowBackgroundColor() - { - return UIColor.FromRGB(02, 02, 02); - } - - public override UIColor GetCaptionSummaryRowForeGroundColor() - { - return UIColor.FromRGB(255, 255, 255); - } - - public override UIColor GetBorderColor() - { - return UIColor.FromRGB(81, 83, 82); - } - - public override UIColor GetLoadMoreViewBackgroundColor() - { - return UIColor.FromRGB(242, 242, 242); - } - - public override UIColor GetLoadMoreViewForegroundColor() - { - return UIColor.FromRGB(34, 31, 31); - } - - public override UIColor GetAlternatingRowBackgroundColor() - { - return UIColor.Cyan; - } - -} -{% endhighlight %} - -The following picture shows the grid loaded in different styles. - -![](SfDataGrid_images/Styles.png) - -## Applying alternate row style -SfDataGrid allows you to apply the alternative row style by writing a custom grid style deriving from [DataGridStyle](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataGridStyle.html) and assigning it to the [SfDataGrid.GridStyle](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_GridStyle) property. -{% highlight c# %} -//Apply alternative row style -dataGrid.GridStyle = new CustomStyle (); - -// Custom style class -public class CustomGridStyle : DataGridStyle -{ - public CustomGridStyle() - { - } - public override UIColor GetAlternatingRowBackgroundColor() - { - return UIColor.Gray; - } -} -{% endhighlight %} - -![](SfDataGrid_images/AlternateRowStyle.png) - -## Customizing the alternation count - -SfDataGrid allows you to customize the alternate row count for applying the alternate row style using the [SfDataGrid.AlternationCount](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_AlternationCount) property. - -The below code illustrates how to set the alternate row count. - -{% highlight c# %} - -//Apply alternative row count -dataGrid.AlternationCount = 3; - -{% endhighlight %} - -![](SfDataGrid_images/AlernationCount.png) - -## Border Customization - -SfDatagrid allows you to customize the grid borders to vertical, horizontal, both or none based on requirements. Override the [DataGridStyle.GetGridLinesVisibility](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.DataGridStyle.html#Syncfusion_SfDataGrid_DataGridStyle_GetGridLinesVisibility) method to customize the borders in SfDataGrid. - -{% highlight c# %} -//Apply custom style to SfDataGrid from code -dataGrid.GridStyle = new CustomStyle (); -{% endhighlight %} - -{% highlight c# %} -//Custom Style class -public class CustomStyle : DataGridStyle -{ - public CustomStyle () - { - } - public override GridLinesVisibility GetGridLinesVisibility() - { - return base.GetGridLinesVisibility(); - } -} -{% endhighlight %} - -Following are the lists of options available to customize the grid borders. - -* [Both](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridLinesVisibility.html) -* [Horizontal](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridLinesVisibility.html) -* [Vertical](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridLinesVisibility.html) -* [None](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridLinesVisibility.html) - -### Both - -`GridLinesVisibility.Both` allows you to display the DataGrid with both Horizontal and Vertical borders. -{% highlight c# %} -public override GridLinesVisibility GetGridLinesVisibility() -{ - return GridLinesVisibility.Both; -} -{% endhighlight %} - -The following screenshot shows the final outcome upon execution of the above code. - -![](SfDataGrid_images/BorderCustomization_Both.png) - -### Horizontal - -`GridLinesVisibility.Horizontal` allows you to display the DataGrid with Horizontal border only -{% highlight c# %} -public override GridLinesVisibility GetGridLinesVisibility() -{ - return GridLinesVisibility.Horizontal; -} -{% endhighlight %} - -The following screenshot shows the final outcome upon execution of the above code. - -![](SfDataGrid_images/BorderCustomization_Horizontal.png) - -### Vertical - -`GridLinesVisibility.Vertical` allows you to display the DataGrid with Vertical border only -{% highlight c# %} -public override GridLinesVisibility GetGridLinesVisibility() -{ - return GridLinesVisibility.Vertical; -} -{% endhighlight %} - -The following screenshot shows the final outcome upon execution of the above code. - -![](SfDataGrid_images/BorderCustomization_Vertical.png) - -### None - -`GridLinesVisibility.None` allows you to display the DataGrid without borders -{% highlight c# %} -public override GridLinesVisibility GetGridLinesVisibility() -{ - return GridLinesVisibility.None; -} -{% endhighlight %} - -The following screenshot shows the final outcome upon execution of the above code. - -![](SfDataGrid_images/BorderCustomization_None.png) - -## Customizing the sort icons in header - -You can load any desired image as the sort icon in the SfDataGrid using the GetHeaderSortIndicatorDown and GetHeaderSortIndicatorUp overrides of the `DataGridStyle` class. The following code example illustrates how to change the SortIcon in SfDataGrid. - -{% highlight c# %} - -//Apply custom style to SfDataGrid from code -dataGrid.GridStyle = new Custom(); - -public class Custom : DataGridStyle -{ - - public override UIImage GetHeaderSortIndicatorUp() - { - return UIImage.FromFile("SortDown.png"); - } - - public override UIImage GetHeaderSortIndicatorDown() - { - return UIImage.FromFile("SortUp.png"); - } - -} -{% endhighlight %} - -The following screenshots shows the final outcome of the above code -![](SfDataGrid_images/SortIconCustomization.png) - -N> The image's BuildAction must be set to BundleResource so that we can access the image via its name. - -## Customizing resizing indicator - -You can change the color of the resizing indicator using the GetResizingIndicatorColor override of the `DataGridStyle` class. The following code example illustrates how to change the color of the ResizingIndicator in SfDataGrid. - -{% highlight c# %} - -//Apply custom style to SfDataGrid from code -dataGrid.GridStyle = new Custom(); - -public class Custom : DataGridStyle -{ - public override UIColor GetResizingIndicatorColor() - { - return UIColor.Blue; - } -} -{% endhighlight %} - -## Border width customization -SfDataGrid allows you to customize the border width of the grid cells and the header cells. -The default border width of the grid cell and the header cell is 0.5f. - -Refer the below code snippet to customize the width of the grid cells and header cells. - -{% highlight c# %} - - //Apply custom style to SfDataGrid from code - dataGrid.GridStyle = new CustomStyle(); - - - public class CustomStyle : DataGridStyle - { - public CustomStyle() - { - - } - - // Customize border width for grid cells - public override float GetBorderWidth() - { - return 5; - } - - // Customize border width for header cells - public override float GetHeaderBorderWidth() - { - return 5; - } - - } - -{% endhighlight %} \ No newline at end of file diff --git a/xamarin-ios/SfDataGrid/Summary.md b/xamarin-ios/SfDataGrid/Summary.md deleted file mode 100644 index 13c718b4..00000000 --- a/xamarin-ios/SfDataGrid/Summary.md +++ /dev/null @@ -1,793 +0,0 @@ ---- -layout: post -title: Summary | SfDataGrid | Xamarin.iOS | Syncfusion -description: How to apply summaries for the elements in a SfDataGrid. -platform: xamarin.ios -control: SfDataGrid -documentation: UG ---- - -# Summary - -The data grid supports to display the concise information about the bound data objects using summaries. The control provides the following summary types: - -* **Caption Summary**: Used to display the summary information in the caption of the group. -* **Group Summary** - Used to display summary information of data objects in each group. -* **Table Summary**: Used to display the summary information at top and/or bottom in the data grid. - -![](SfDataGrid_images/Summary.PNG) - -Summary rows are represented by using the [GridSummaryRow](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html). Each `GridSummaryRow` hold summary information of columns in the [SummaryColumns](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_SummaryColumns) property . The `SummaryColumns` contains the collection of [GridSummaryColumn](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html) which carries name, format, and summary aggregate type of the column. - -Additional information can be derived from the data like sum, average, maximum, minimum, and count using summaries in the data grid. These summary values can be computed for groups or for the entire control using `GridSummaryRow` and `GridSummaryColumn` that implements [ISummaryRow](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.Data.ISummaryRow.html) and [ISummaryColumn](http://help.syncfusion.com/cr/xamarin-ios/Syncfusion.Data.ISummaryColumn.html) interfaces. - -N> The Summary does not refresh with data. To update summary for the newly added row or if any values in the summary column is modified, set the [SfDataGrid.View.LiveDataUpdateMode](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_LiveDataUpdateMode) to `LiveDataUpdateMode.AllowDataShaping` or `LiveDataUpdateMode.AllowSummaryUpdate`. - -## Caption summaries - -The data grid provides built-in support for caption summaries. The caption summary value is calculated based on the records in a group and the summary information will be displayed in the caption of a group. - -The following screenshot shows the built-in caption summary of a group: - -![](SfDataGrid_images/Captionsummaries.PNG) - -### Formatting built-in caption summary - -By default, the summary value displayed in caption summary rows are based on the [SfDataGrid.GroupCaptionTextFormat](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_GroupCaptionTextFormat) property. - -Default group caption format is `{ColumnName}: {Key} - {ItemsCount} Items`. - -* **ColumnName**: Displays the name of the currently grouped column. -* **Key**: Displays the key value of the group. -* **ItemsCount**: Displays the number of items in a group. - -![](SfDataGrid_images/Formattingbuiltincaptionsummary.PNG) - -The group caption text format can be customized by setting the `SfDataGrid.GroupCaptionTextFormat` property. The following code example illustrates how to customize group caption text in the data grid: - -{% highlight c# %} -//Customized group caption text -dataGrid.GroupCaptionTextFormat = "{ColumnName} : {Key}"; -{% endhighlight %} - -The following screenshot shows the outcome of the previous code: - -![](SfDataGrid_images/Formattingbuiltincaptionsummary1.PNG) - - -### Displaying summary in the row - -The summary information can be displayed in a row by setting the [GridSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_ShowSummaryInRow) to `true` and by defining summary columns. You have to define the [GridSummaryRow.Title](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_Title) based on the [GridSummaryColumn.Name](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_Name) property to format summary columns value in a row. - -{% highlight c# %} -GridSummaryRow summaryRow = new GridSummaryRow(); -summaryRow.Title = "Total Salary:{TotalSalary} for {ProductCount} items"; -summaryRow.ShowSummaryInRow = true; -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "TotalSalary", - MappingName = "Salary", - Format = "{Sum:c}", - SummaryType = SummaryType.DoubleAggregate -}); -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "ProductCount", - MappingName = "Salary", - Format = "{Count}", - SummaryType = SummaryType.CountAggregate -}); -dataGrid.CaptionSummaryRow= summaryRow; -{% endhighlight %} - -The following screenshot shows the outcome for both values of `ShowSummaryInRow` to `true`: - -![](SfDataGrid_images/Displayingsummaryintherow.PNG) - - -### Displaying summary in the column - -The summary information can be displayed in the column by setting the `GridSummaryRow.ShowSummaryInRow` to `false` and by defining summary columns. The `SfDataGrid.GridSummaryColumn` is the object of [GridSummaryRow.SummaryColumns](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_SummaryColumns) collection that contains the following important properties: - -* [Name](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_Name): Defines name of the `GridSummaryColumn` to denote the `GridSummaryColumn` in `GridSummaryRow` with the Title. -* [MappingName](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_MappingName): Defines the corresponding column name that is used for the summary calculation. -* [SummaryType](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_SummaryType): Defines the `SummaryType` (enum) property to define the aggregate type for the summary calculation. - -The `data grid` control provides the following predefined aggregates: - - * CountAggregate - * Int32Aggregate - * DoubleAggregate - -The [CustomAggregate](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_CustomAggregate) defines the `CustomAggregate` class object when the summary type is set as `custom` that calculates custom summaries. - -The [Format](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_Format) `string` property formats the summary value and displays it. It may contain two parts separated by a colon (:). First part denotes the aggregate function name, and second part denotes display format of the summary value. - -Refer to [Formatting Summary](#_Formatting_Summary) section to know more about how to format summary and [Aggregate Types](#_Aggregate_Types) section to know about different summary types. - -In the following code snippet, the summary is defined for the `Salary` column: - -{% highlight c# %} -GridSummaryRow summaryRow = new GridSummaryRow(); -summaryRow.ShowSummaryInRow = false; -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "CaptionSummary", - MappingName = "Salary", - Format = "{Sum:c}", - SummaryType = SummaryType.DoubleAggregate -}); -dataGrid.CaptionSummaryRow= summaryRow; -{% endhighlight %} - -![](SfDataGrid_images/Displayingsummaryinthecolumn.PNG) - - -## Group summary - -Group summary values are calculated based on records in the group. The summary information will be displayed at the bottom of each group. You can view the group summary row by expanding the corresponding group header. The data grid adds any number of group summary row. - -Add group summary rows in the data grid by adding the [GridGroupSummaryRow](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridGroupSummaryRow.html) to [SfDataGrid.GroupSummaryRows](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GroupSummaryRowControl.html) collection. - -### Displaying summary in the row - -The summary information can be displayed in the row by setting the [GridGroupSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_ShowSummaryInRow) to `true` and by defining summary columns. You have to define the [GridGroupSummaryRow.Title](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_Title) based on the [GridGroupSummaryColumn.Name](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_Name) property to format summary columns value in a row. - -Refer to [Formatting Summary](https://help.syncfusion.com/xamarin-ios/sfdatagrid/summary#formatting-summary) section to know more about how to format summary. - -{% highlight c# %} -this.dataGrid.GroupSummaryRows.Add(new GridGroupSummaryRow() -{ - ShowSummaryInRow = true, - Title = "Total Salary: {Salary} for {customerID} members", - SummaryColumns = new ObservableCollection() - { - new GridSummaryColumn() - { - Name="Salary", - MappingName="Salary", - SummaryType=SummaryType.DoubleAggregate, - Format="{Sum}" - }, - new GridSummaryColumn() - { - Name="customerID", - MappingName="customerID", - Format="{Count}", - SummaryType=SummaryType.CountAggregate - } - } -}); -{% endhighlight %} - -![](SfDataGrid_images/DisplayGroupSummaryForEntireRow.png) - -### Displaying summary in the column - -The summary information can be displayed in the column by setting the [GridGroupSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_ShowSummaryInRow) to `false` and by defining summary columns. To calculate summary based on the column, specify the following properties: - -1. [GridSummaryColumn.MappingName](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_MappingName): Provides MappingName of the column (Property name of data object) that you want to calculate summary. -2. [GridSummaryColumn.SummaryType](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_SummaryType): Provides different built-in summary calculation functions for various types. -3. [GridSummaryColumn.Format](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_Format): Provides format string for the summary based on support function name in the specified SummaryType. - -Refer to [Formatting Summary](https://help.syncfusion.com/xamarin-ios/sfdatagrid/summary#formatting-summary) section to know more about how to format summary and [Aggregate Types](https://help.syncfusion.com/xamarin-ios/sfdatagrid/summary#aggregate-types) section to know about different Summary Types. - -In the following code snippet, summary is defined for `Salary` and `CustomerID` columns: - -{% highlight c# %} -this.dataGrid.GroupSummaryRows.Add(new GridGroupSummaryRow() -{ - ShowSummaryInRow = false, - SummaryColumns = new ObservableCollection() - { - new GridSummaryColumn() - { - Name="Salary", - MappingName="Salary", - SummaryType=SummaryType.DoubleAggregate, - Format="{Sum}" - }, - new GridSummaryColumn() - { - Name="customerID", - MappingName="CustomerID", - Format="Total members - {Count:d}", - SummaryType=SummaryType.CountAggregate - } - } -}); -{% endhighlight %} - -![](SfDataGrid_images/DisplayGroupSummaryForIndividualColumn.png) - -## Table summaries - -The data grid provides built-in support for table summaries. The table summary value is calculated based on all records in the control. - -Add table summary row in the data grid by adding the [GridTableSummaryRow](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridTableSummaryRow.html) to the [SfDataGrid.TableSummaryRows](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_TableSummaryRows) collection. - -The following screenshot illustrates table summary rows in the data grid: - -![](SfDataGrid_images/Tablesummaries1.PNG) - -{% highlight c#%} -GridTableSummaryRow summaryRow1 = new GridTableSummaryRow(); -summaryRow1.Title = "Total Salary:{TotalSalary} for {ProductCount} members"; -summaryRow1.ShowSummaryInRow = true; -summaryRow1.Position = Position.Top; -summaryRow1.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "TotalSalary", - MappingName = "Salary", - Format = "{Sum:c}", - SummaryType = SummaryType.DoubleAggregate -}); -summaryRow1.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "ProductCount", - MappingName = "Salary", - Format = "{Count}", - SummaryType = SummaryType.CountAggregate -}); -sfGrid.TableSummaryRows.Add(summaryRow1); - -GridTableSummaryRow summaryRow2 = new GridTableSummaryRow(); -summaryRow2.ShowSummaryInRow = false; -summaryRow2.Position = Position.Top; -summaryRow2.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "TotalSalary", - MappingName = "Salary", - Format = "{Sum}", - SummaryType = SummaryType.DoubleAggregate -}); -sfGrid.TableSummaryRows.Add(summaryRow2); -{% endhighlight %} - -![](SfDataGrid_images/Tablesummaries2.PNG) - -### Displaying summary in the row - -The summary information can be displayed in the row by setting the [GridTableSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_ShowSummaryInRow) to `true` and by defining summary columns. You have to define the [GridTableSummaryRow.Title](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_Title) based on the [GridSummaryColumn.Name](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_Name) property to format summary columns value in a row. - -{% highlight c#%} -GridTableSummaryRow summaryRow = new GridTableSummaryRow(); -summaryRow.Title = "Total Salary:{TotalSalary} for {ProductCount} members"; -summaryRow.ShowSummaryInRow = true; -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "TotalSalary", - MappingName = "Salary", - Format = "{Sum:c}", - SummaryType = SummaryType.DoubleAggregate -}); -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "ProductCount", - MappingName = "Salary", - Format = "{Count}", - SummaryType = SummaryType.CountAggregate -}); -sfGrid.TableSummaryRows.Add(summaryRow); -{% endhighlight %} - -The following screenshot shows the table summary row if `ShowSummaryInRow` is `true`: - -![](SfDataGrid_images/TableDisplayingsummaryintherow.PNG) - -### Displaying summary in the column - -The summary information can be displayed in the column by setting the `GridTableSummaryRow.ShowSummaryInRow` to `false` and by defining summary columns. The `GridSummaryColumn` is the object of [GridTableSummaryRow.SummaryColumns](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_SummaryColumns) collection that contains the following important properties: - -* [Name](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_Name): Defines name of the `GridSummaryColumn` to denote the `GridSummaryColumn` in `GridTableSummaryRow` with the Title. -* [MappingName](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_MappingName): Defines the corresponding column name that is used for the summary calculation. -* [SummaryType](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_SummaryType): Defines the `SummaryType` (enum) property to define the aggregate type for the summary calculation. - -The data grid control provides the following predefined aggregates: - - * CountAggregate - * Int32Aggregate - * DoubleAggregate - -The [CustomAggregate](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_CustomAggregate) defines the `CustomAggregate` class object when the summary type is set as `custom` that calculates custom summaries. - -The [Format](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_Format) `string` property formats the summary value and displays it. It may contain two parts separated by a colon (:). First part denotes the aggregate function name, and second part denotes display format of the summary value. - -Refer to [Formatting Summary](#_Formatting_Summary) section to know more about how to format summary and [Aggregate Types](#_Aggregate_Types) section to know about different summary types. - -In the following code snippet, summary is defined for the `Salary` column: - -{% highlight c#%} -GridTableSummaryRow summaryRow = new GridTableSummaryRow(); -summaryRow.ShowSummaryInRow = false; -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "TableSummary", - MappingName = "Salary", - Format = "{Sum}", - SummaryType = SummaryType.DoubleAggregate -}); -sfGrid.TableSummaryRows.Add(summaryRow); -{% endhighlight c#%} - -The following screenshot shows the table summary row if `ShowSummaryInRow` is `false`: - -![](SfDataGrid_images/TableDisplayingsummaryinthecolumn.PNG) - -### Positioning TableSummaryRows - -The data grid add table summary rows either at top or bottom positions using the [GridTableSummaryRow.Position](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridTableSummaryRow.html#Syncfusion_SfDataGrid_GridTableSummaryRow_Position) property. - -{% highlight c#%} -GridTableSummaryRow topSummaryRow = new GridTableSummaryRow(); -topSummaryRow.Position = Position.Top; -topSummaryRow.ShowSummaryInRow = false; -topSummaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "TotalSalary", - MappingName = "Salary", - Format = "{Sum}", - SummaryType = SummaryType.DoubleAggregate -}); -sfGrid.TableSummaryRows.Add(topSummaryRow); - -GridTableSummaryRow bottomSummaryRow = new GridTableSummaryRow(); -bottomSummaryRow.Position = Position.Bottom; -bottomSummaryRow.Title = "Total Salary:{TotalSalary} for {ProductCount} members"; -bottomSummaryRow.ShowSummaryInRow = true; -bottomSummaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "TotalSalary", - MappingName = "Salary", - Format = "{Sum:c}", - SummaryType = SummaryType.DoubleAggregate -}); -bottomSummaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "ProductCount", - MappingName = "Salary", - Format = "{Count}", - SummaryType = SummaryType.CountAggregate -}); -sfGrid.TableSummaryRows.Add(bottomSummaryRow); -{% endhighlight %} - -The following screenshot illustrates the positioning of table summary rows in the data grid: - -![](SfDataGrid_images/PositioningTableSummaryRows.PNG) - - -## Formatting summary - -In the following sections, formatting is explained using the `CaptionSummary`: - -### Defining summary function - -In the following code snippet, the `Format` property is defined to display the sum of `Salary` by specifying the function name inside curly braces: - -N> `DoubleAggregate` is used as `SummaryType` which has the count, max, min, average, and sum functions. - -{% highlight c# %} -GridSummaryRow summaryRow = new GridSummaryRow(); -summaryRow.ShowSummaryInRow = false; -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "CaptionSummary", - MappingName = "Salary", - Format = "{Sum}", - SummaryType = SummaryType.DoubleAggregate -}); -dataGrid.CaptionSummaryRow= summaryRow; -{% endhighlight %} - -![](SfDataGrid_images/Definingsummaryfunction.PNG) - - -### Formatting summary value - -Format the summary value by setting the appropriate format after the aggregate function followed by colon(:) in the [GridSummaryColumn.Format](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_Format) property. - -In the following code snippet, the `Salary` column summary is formatted using `c` format specifier. Refer to [here](https://msdn.microsoft.com/en-us/library/dwhawy9k.aspx?f=255&MSPPError=-2147217396) to know about how to set different format. - -{% highlight c# %} -GridSummaryRow summaryRow = new GridSummaryRow(); -summaryRow.ShowSummaryInRow = false; -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "CaptionSummary", - MappingName = "Salary", - Format = "{Sum:c}", - SummaryType = SummaryType.DoubleAggregate -}); -dataGrid.CaptionSummaryRow= summaryRow; -{% endhighlight %} - -![](SfDataGrid_images/Formattingsummaryvalue.PNG) - - -### Displaying additional content in the summary - -You can append additional content with summary value using `GridSummaryColumn.Format` property. - -In the following code snippet, `Total:` text is appended before the summary value: - -{% highlight c# %} -GridSummaryRow summaryRow = new GridSummaryRow(); -summaryRow.ShowSummaryInRow = false; -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "CaptionSummary", - MappingName = "Salary", - Format = "Total:{Sum:c}", - SummaryType = SummaryType.DoubleAggregate -}); -dataGrid.CaptionSummaryRow= summaryRow; -{% endhighlight %} - -![](SfDataGrid_images/Displayingadditionalcontentinthesummary.PNG) - - -### Formatting summary for row using the Title property - -Format the summary value for the row using the [GridSummaryRow.Title](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryRow.html#Syncfusion_SfDataGrid_GridSummaryRow_Title) when `ShowSummaryInRow` set to `true`. - -{% highlight c# %} -GridSummaryRow summaryRow = new GridSummaryRow(); -summaryRow.Title = "Total Salary:{TotalSalary} for {ProductCount} items"; -summaryRow.ShowSummaryInRow = true; -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "TotalSalary", - MappingName = "Salary", - Format = "{Sum:c}", - SummaryType = SummaryType.DoubleAggregate -}); -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "ProductCount", - MappingName = "Salary", - Format = "{Count}", - SummaryType = SummaryType.DoubleAggregate -}); -dataGrid.CaptionSummaryRow= summaryRow; -{% endhighlight %} - -![](SfDataGrid_images/FormattingsummaryforrowusingtheTitleproperty.PNG) - -N> The above formatting section is explained using the `caption summary` but the formatting can also be applied for `TableSummaries`. - -## Aggregate types - -Specify different summary aggregate types by using the [GridSummaryColumn.SummaryType](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_SummaryType) property and use the built-in function in `GridSummaryColumn.Format`. - -List of predefined aggregate types and its built-in functions are as follows: - - - - - - - - - - - - - - - - - - - - - - -
-Aggregate Type - -Built-in function -
-CountAggregate - -Count -
-Int32Aggregate - -Count, max, min, average, and sum. -
-DoubleAggregate - -Count, max, min, average, and sum. -
-Custom - -Used for custom summaries -
- -N> The above aggregate types can be applied for both `CaptionSummaries` and `TableSummaries`. - -## Custom summaries - -The data grid implements your own aggregate functions when the built-in aggregate functions do not meet your requirement. - -Calculate the summary values based on custom logic using the [GridSummaryColumn.CustomAggregate](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridSummaryColumn.html#Syncfusion_SfDataGrid_GridSummaryColumn_CustomAggregate) property. - -### Implementing custom aggregate - -1. Create custom aggregate class by deriving from [ISummaryAggregate](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.Data.ISummaryAggregate.html) interface. -2. In the `CalculateAggregateFunc` method, you have to calculate the summary and assign it to the property. - -In the following code snippet, the `Standard Deviation` is calculated for the quantity of products: - -{% highlight c# %} -public class CustomAggregate : ISummaryAggregate -{ - public CustomAggregate() - { - - } - - public double StdDev { get; set; } - - public Action CalculateAggregateFunc() - { - return (items, property, pd) => - { - var enumerableItems = items as IEnumerable; - if (pd.Name == "StdDev") - { - this.StdDev = enumerableItems.StdDev(q => q.OrderID); - } - }; - } -} - -public static class LinqExtensions -{ - public static double StdDev(this IEnumerable values, Func selector) - { - double value = 0; - var count = values.Count(); - if (count > 0) - { - double? avg = values.Average(selector); - double sum = values.Select(selector).Sum(d => - { - if (d.HasValue) - { - return Math.Pow(d.Value - avg.Value, 2); - } - return 0.0; - }); - value = Math.Sqrt((sum) / (count - 1)); - } - return value; - } -} -{% endhighlight %} - -Assign the custom aggregate to `GridSummaryColumn.CustomAggregate` property and set the `SummaryType` as `Custom`. The `GridSummaryColumn.Format` property is defined based on property name in custom aggregate `StdDev`. - -{% highlight c# %} -GridSummaryRow summaryRow = new GridSummaryRow(); -summaryRow.Title = "Standard Deviation:{CaptionSummary}"; -summaryRow.ShowSummaryInRow = true; -summaryRow.SummaryColumns.Add(new GridSummaryColumn() -{ - Name = "CaptionSummary", - CustomAggregate = new CustomAggregate(), - MappingName = "OrderID", - Format = "{StdDev}", - SummaryType = Syncfusion.Data.SummaryType.Custom -}); -dataGrid.CaptionSummaryRow = summaryRow; -{% endhighlight %} - -![](SfDataGrid_images/Customsummaries.PNG) - -N> The above custom summaries section is explained using `CaptionSummary` but the custom summaries can also be applied for `TableSummaries`. - - -## Overriding summary renderer - -Each summary cell in the data grid is associated with its own cell renderer. The data grid allows to extend this renderer to customize the grid cells based on your requirement. Customization can be applied by overriding the available virtual methods in the each cell renderer. - -Each summary has a specific key using which the custom summary renderer can be registered to the [SfDataGrid.CellRenderers](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.SfDataGrid.html#Syncfusion_SfDataGrid_SfDataGrid_CellRenderers) collection. Remove the key from collection and add a new entry with the same key along with the instance of custom renderer to register. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Types of summaryRendererKey
Table summaryGridTableSummaryCellRenderer TableSummary
Caption summaryGridCaptionSummaryCellRenderer CaptionSummary
Group summaryGridSummaryCellRenderer GroupSummary
- -### Customizing table summary - -The data grid allows customizes the table summary by extending [GridTableSummaryCellRenderer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridTableSummaryCellRenderer.html) class. - -To customize the table summary, follow the code example: - -{% highlight c#%} - -// To remove default summary and Add custom summary. - -public class Summary : ContentPage -{ - public Summary() - { - InitializeComponent(); - dataGrid.CellRenderers.Remove("TableSummary"); - dataGrid.CellRenderers.Add("TableSummary", new GridTableSummaryCellRendererExt()); - } -} - - public class GridTableSummaryCellRendererExt : GridTableSummaryCellRenderer - { - public GridTableSummaryCellRendererExt() - { - } - - public override void OnInitializeDisplayView(DataColumnBase dataColumn, UILabel view) - { - base.OnInitializeDisplayView(dataColumn, view); - view.BackgroundColor = UIColor.DarkGray; - view.TextAlignment = UITextAlignment.Center; - view.AdjustsFontSizeToFitWidth = true; - view.TextColor = UIColor.White; - view.Font = UIFont.FromName("Baskerville-SemiBoldItalic", 20); - - - } - } -{% endhighlight %} - -The following screenshot shows the outcome upon execution of the previous code: - -![](SfDataGrid_images/Customizingtablesummary.PNG) - -### Customizing caption summary - -The data grid allows customizes the caption summary by extending [GridCaptionSummaryCellRenderer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridCaptionSummaryCellRenderer.html) class. - - -{% highlight c#%} - -// To remove default summary and Add custom summary. - -public class Summary : ContentPage -{ - public Summary() - { - InitializeComponent(); - dataGrid.CellRenderers.Remove("CaptionSummary"); - dataGrid.CellRenderers.Add("CaptionSummary", new GridCaptionSummaryCellRendererExt()); - } -} - -public class GridCaptionSummaryCellRendererExt : GridCaptionSummaryCellRenderer - { - public GridCaptionSummaryCellRendererExt() - { - } - - public override void OnInitializeDisplayView(DataColumnBase dataColumn, UILabel view) - { - base.OnInitializeDisplayView(dataColumn, view); - view.BackgroundColor = UIColor.DarkGray; - view.TextAlignment = UITextAlignment.Center; - view.AdjustsFontSizeToFitWidth = true; - view.TextColor = UIColor.White; - view.Font = UIFont.FromName("Baskerville-SemiBoldItalic", 20); - } - } -{% endhighlight %} - -![](SfDataGrid_images/Customizingcaptionsummary.PNG) - -### Customizing Group summary - -The data grid allows customizes the group summary by extending [GridGroupSummaryCellRenderer](https://help.syncfusion.com/cr/xamarin-ios/Syncfusion.SfDataGrid.GridGroupSummaryCellRenderer.html) class. - -{% highlight c#%} - -public class MyViewController:UIViewController -{ - SfDataGrid dataGrid; - ViewModel viewModel; - public MyViewController() - { - dataGrid = new SfDataGrid(); - viewModel = new ViewModel(); - dataGrid.ItemsSource = viewModel.OrdersInfo; - dataGrid.AutoGenerateColumns = false; - dataGrid.Columns.Add(new GridTextColumn() { MappingName = "OrderID", Width = 80 }); - dataGrid.Columns.Add(new GridTextColumn() { MappingName = "Salary", Width = 90}); - dataGrid.Columns.Add(new GridTextColumn() { MappingName = "CustomerID", Width = 140}); - dataGrid.Columns.Add(new GridTextColumn() { MappingName = "Country", Width = 70}); - - // To remove default summary and Add custom summary. - dataGrid.CellRenderers.Remove("GroupSummary"); - dataGrid.CellRenderers.Add("GroupSummary", new GridGroupSummaryCellRendererExt()); - - dataGrid.GroupColumnDescriptions.Add(new GroupColumnDescription() - { - ColumnName = "Salary" - }); - - dataGrid.GroupSummaryRows.Add(new GridGroupSummaryRow() - { - ShowSummaryInRow = true, - Title = "Total Salary: {Salary} for {customerID} members", - SummaryColumns = new ObservableCollection() - { - new GridSummaryColumn() - { - Name="Salary", - MappingName="Salary", - SummaryType=SummaryType.DoubleAggregate, - Format="{Sum}" - }, - new GridSummaryColumn() - { - Name="customerID", - MappingName="customerID", - Format="{Count}", - SummaryType=SummaryType.CountAggregate - } - } - }); - - View.BackgroundColor = UIColor.White; - View.AddSubview(dataGrid); - - public override void ViewDidLayoutSubviews() - { - base.ViewDidLayoutSubviews(); - dataGrid.Frame = new CoreGraphics.CGRect(0, 0, View.Frame.Width, View.Frame.Height); - } - } -} - -// Custom CellRenderer -public class GridGroupSummaryCellRendererExt : GridGroupSummaryCellRenderer -{ - public GridGroupSummaryCellRendererExt() - { - } - - public override void OnInitializeDisplayView(DataColumnBase dataColumn, UILabel view) - { - base.OnInitializeDisplayView(dataColumn, view); - view.BackgroundColor = UIColor.DarkGray; - view.TextAlignment = UITextAlignment.Center; - view.TextColor = UIColor.White; - view.Font = UIFont.FromName("Baskerville-SemiBoldItalic", 12); - } -} -{% endhighlight %} - -![](SfDataGrid_images/CustomizingGroupSummary.PNG) - -You can download the sample demo [here](http://www.syncfusion.com/downloads/support/directtrac/general/ze/SummaryDemo_iOS1565656637). diff --git a/xamarin-ios/SfSchedule/Overview.md b/xamarin-ios/SfSchedule/Overview.md deleted file mode 100755 index e806b637..00000000 --- a/xamarin-ios/SfSchedule/Overview.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: post -title: Overview of Syncfusion Essential Schedule iOS -description: Learn here all about introduction of Syncfusion Xamarin.iOS Schedule (SfSchedule) control, its features, and more. -platform: xamarin.iOS -control: SfSchedule -documentation: ug ---- - -# Xamarin.iOS Schedule (SfSchedule) Overview - -Essential Schedule for Xamarin.iOS provides all the common scheduling functionalities to create and manage appointments as well as exposes a gesture friendly UI to perform all common operations likes selection, navigation, etc. **Essential** **Schedule** is a perfect solution for developers looking to add advanced, feature rich **Schedule** to their applications. - -![Schedule in xamarin ios](GettingStarted_images/GettingStarted.png) - -## Key features - -**Built-in Views** — Schedule provides five different types of views such as Day, WorkWeek, Week, Timeline and Month. - -**Recurrence Appointment** — Recurring appointments can be created with Daily, weekly, monthly, and yearly recurrence patterns which is supported in ICalc standard. - -**Customization** — Control has simple APIs allowing for elegant customizations. You can edit the look to match the rest of your application. - -**Localization** — The built-in content of the user interface can be changed according to culture that is needed. Also, it has built-in culture support for basic items such us day and month text representations.