Working With IgniteUI Grid Control

IgniteUI is a product kit, introduced by the company Infragistics. Here, we are going to use the Grid controls available in the kit. We will create an MVC Application in Visual Studio. I hope you will like this.

Background

As I am an MVP in C # Corner, I got a chance to be a part of the  C# Corner Annual Conference 2016. We were offered the ultimate license of the IgniteUI product. I would like to thank Mr.Jason Beres and Mr.Dhananjay Kumar for this.

Now, let us come to the point, if you don’t have any license, no worries, you can always give an evaluation a try. If you wish to do so, please download the toolkit from here.

Download source code

Prerequisites

As I said in the introduction part, we are going to create an IgniteUI grid in MVC Application, so you must have a Visual Studio, installed in your machine.
  • Visual Studio
  • SQL

Table of Contents

  • Download and install IgniteUI.
  • Configure MVC Application.
  • Set up a database.
  • Creating models and entity.
  • Creating IgniteUI Grid.

Download and install IgniteUI

Once you download the needed files from the download link provided above, you are good to go and install it in your machine. Extract the downloaded file. Now, double click on the exe file named Infragistics_20161_Platform. Please apply your license key, if you have or you can use it as a trial. I am going to apply the license key which I got.

Apply License Key

Apply License Key

Select the components you require.

Platform Installer
 
Platform Installer will start its installation.

Now, the installing will get started.

Installing IgniteUI
Installing IgniteUI

Once, the installing is finished, you will see a pop up as preceding. You will be given a chance to register your product there and be a part of the forum and community.

Install Finished
 
Installation finished.

Configure MVC Application

As you have finished your installing, we can create  an MVC Application now. Open your Visual Studio and click new project. Name your project. Here, I am going to name my project as IgniteUIGrid. Select MVC template and click OK.

Click the reference and add DLL reference of IgiteUI from C:\Program Files (x86)\Infragistics\2016.1\Ignite UI\MVC\MVC6\Bin\dnx451 or from which ever folder, you installed IgniteUI.

Add IgniteUI Reference
 
Add IgniteUI Reference.

Thus, we have set our Application, ready for the action.

Set up database
  1. USE [master] GO  
  2. /****** Object: Database [TrialsDB] Script Date: 5/12/2016 10:56:41 AM ******/  
  3. CREATE DATABASE [TrialsDB] CONTAINMENT = NONE ON PRIMARY (  
  4. NAME = N 'TrialsDB', FILENAME = N 'C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB.mdf',  
  5. SIZE = 3072KB, MAXSIZE = UNLIMITED,  
  6. FILEGROWTH = 1024KB  
  7. ) LOG ON (  
  8. NAME = N 'TrialsDB_log', FILENAME = N 'C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB_log.ldf',  
  9. SIZE = 1024KB, MAXSIZE = 2048GB, FILEGROWTH = 10 %  
  10. ) GO ALTER DATABASE [TrialsDB]  
  11. SET  
  12. COMPATIBILITY_LEVEL = 110 GO IF (  
  13. 1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled')  
  14. begin EXEC [TrialsDB].[dbo].[sp_fulltext_database] @action = 'enable' end GO ALTER DATABASE [TrialsDB]  
  15. SET  
  16. ANSI_NULL_DEFAULT OFF GO ALTER DATABASE [TrialsDB]  
  17. SET  
  18. ANSI_NULLS OFF GO ALTER DATABASE [TrialsDB]  
  19. SET  
  20. ANSI_PADDING OFF GO ALTER DATABASE [TrialsDB]  
  21. SET  
  22. ANSI_WARNINGS OFF GO ALTER DATABASE [TrialsDB]  
  23. SET  
  24. ARITHABORT OFF GO ALTER DATABASE [TrialsDB]  
  25. SET  
  26. AUTO_CLOSE OFF GO ALTER DATABASE [TrialsDB]  
  27. SET  
  28. AUTO_CREATE_STATISTICS ON GO ALTER DATABASE [TrialsDB]  
  29. SET  
  30. AUTO_SHRINK OFF GO ALTER DATABASE [TrialsDB]  
  31. SET  
  32. AUTO_UPDATE_STATISTICS ON GO ALTER DATABASE [TrialsDB]  
  33. SET  
  34. CURSOR_CLOSE_ON_COMMIT OFF GO ALTER DATABASE [TrialsDB]  
  35. SET  
  36. CURSOR_DEFAULT GLOBAL GO ALTER DATABASE [TrialsDB]  
  37. SET  
  38. CONCAT_NULL_YIELDS_NULL OFF GO ALTER DATABASE [TrialsDB]  
  39. SET  
  40. NUMERIC_ROUNDABORT OFF GO ALTER DATABASE [TrialsDB]  
  41. SET  
  42. QUOTED_IDENTIFIER OFF GO ALTER DATABASE [TrialsDB]  
  43. SET  
  44. RECURSIVE_TRIGGERS OFF GO ALTER DATABASE [TrialsDB]  
  45. SET  
  46. DISABLE_BROKER GO ALTER DATABASE [TrialsDB]  
  47. SET  
  48. AUTO_UPDATE_STATISTICS_ASYNC OFF GO ALTER DATABASE [TrialsDB]  
  49. SET  
  50. DATE_CORRELATION_OPTIMIZATION OFF GO ALTER DATABASE [TrialsDB]  
  51. SET  
  52. TRUSTWORTHY OFF GO ALTER DATABASE [TrialsDB]  
  53. SET  
  54. ALLOW_SNAPSHOT_ISOLATION OFF GO ALTER DATABASE [TrialsDB]  
  55. SET  
  56. PARAMETERIZATION SIMPLE GO ALTER DATABASE [TrialsDB]  
  57. SET  
  58. READ_COMMITTED_SNAPSHOT OFF GO ALTER DATABASE [TrialsDB]  
  59. SET  
  60. HONOR_BROKER_PRIORITY OFF GO ALTER DATABASE [TrialsDB]  
  61. SET  
  62. RECOVERY FULL GO ALTER DATABASE [TrialsDB]  
  63. SET  
  64. MULTI_USER GO ALTER DATABASE [TrialsDB]  
  65. SET  
  66. PAGE_VERIFY CHECKSUM GO ALTER DATABASE [TrialsDB]  
  67. SET  
  68. DB_CHAINING OFF GO ALTER DATABASE [TrialsDB]  
  69. SET  
  70. FILESTREAM(NON_TRANSACTED_ACCESS = OFF) GO ALTER DATABASE [TrialsDB]  
  71. SET  
  72. TARGET_RECOVERY_TIME = 0 SECONDS GO ALTER DATABASE [TrialsDB]  
  73. SET  
  74. READ_WRITE GO  
Create table with data
  1. USE [TrialsDB]  
  2. GO  
  3. /****** Object: Table [dbo].[Product] Script Date: 5/12/2016 10:54:48 AM ******/  
  4. SET ANSI_NULLS ON  
  5. GO  
  6. SET QUOTED_IDENTIFIER ON  
  7. GO  
  8. CREATE TABLE [dbo].[Product](  
  9. [ProductID] [intNOT NULL,  
  10. [Name] [nvarchar](maxNOT NULL,  
  11. [ProductNumber] [nvarchar](25) NOT NULL,  
  12. [MakeFlag] [bitNOT NULL,  
  13. [FinishedGoodsFlag] [bitNOT NULL,  
  14. [Color] [nvarchar](15) NULL,  
  15. [SafetyStockLevel] [smallintNOT NULL,  
  16. [ReorderPoint] [smallintNOT NULL,  
  17. [StandardCost] [money] NOT NULL,  
  18. [ListPrice] [money] NOT NULL,  
  19. [Size] [nvarchar](5) NULL,  
  20. [SizeUnitMeasureCode] [nchar](3) NULL,  
  21. [WeightUnitMeasureCode] [nchar](3) NULL,  
  22. [Weight] [decimal](8, 2) NULL,  
  23. [DaysToManufacture] [intNOT NULL,  
  24. [ProductLine] [nchar](2) NULL,  
  25. [Class] [nchar](2) NULL,  
  26. [Style] [nchar](2) NULL,  
  27. [ProductSubcategoryID] [intNULL,  
  28. [ProductModelID] [intNULL,  
  29. [SellStartDate] [datetime] NOT NULL,  
  30. [SellEndDate] [datetime] NULL,  
  31. [DiscontinuedDate] [datetime] NULL,  
  32. [rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,  
  33. [ModifiedDate] [datetime] NOT NULL  
  34. ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]  
  35. GO  
  36. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (1, N'Adjustable Race', N'AR-5381', 0, 0, NULL, 1000, 750, 0.0000, 0.0000, NULLNULLNULLNULL, 0, NULLNULLNULLNULLNULL,CAST(0x0000921E00000000 AS DateTime), NULLNULL, N'694215b7-08f7-4c0d-acb1-d734ba44c0c8'CAST(0x00009A5C00A53CF8 AS DateTime))  
  37. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (2, N'Bearing Ball', N'BA-8327', 0, 0, NULL, 1000, 750, 0.0000, 0.0000, NULLNULLNULLNULL, 0, NULLNULLNULLNULLNULL,CAST(0x0000921E00000000 AS DateTime), NULLNULL, N'58ae3c20-4f3a-4749-a7d4-d568806cc537'CAST(0x00009A5C00A53CF8 AS DateTime))  
  38. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (3, N'BB Ball Bearing', N'BE-2349', 1, 0, NULL, 800, 600, 0.0000, 0.0000, NULLNULLNULLNULL, 1, NULLNULLNULLNULLNULL,CAST(0x0000921E00000000 AS DateTime), NULLNULL, N'9c21aed2-5bfa-4f18-bcb8-f11638dc2e4e'CAST(0x00009A5C00A53CF8 AS DateTime))  
  39. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (4, N'Headset Ball Bearings', N'BE-2908', 0, 0, NULL, 800, 600, 0.0000, 0.0000, NULLNULLNULLNULL, 0, NULLNULLNULLNULLNULL,CAST(0x0000921E00000000 AS DateTime), NULLNULL, N'ecfed6cb-51ff-49b5-b06c-7d8ac834db8b',  CAST(0x00009A5C00A53CF8 AS DateTime))  
  40. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (316, N'Blade', N'BL-2036', 1, 0, NULL, 800, 600, 0.0000, 0.0000, NULLNULLNULLNULL, 1, NULLNULLNULLNULLNULL,CAST(0x0000921E00000000 AS DateTime), NULLNULL, N'e73e9750-603b-4131-89f5-3dd15ed5ff80'CAST(0x00009A5C00A53CF8 AS DateTime))  
  41. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (317, N'LL Crankarm', N'CA-5965', 0, 0, N'Black', 500, 375, 0.0000, 0.0000, NULLNULLNULLNULL, 0, NULL, N'L 'NULLNULLNULL,CAST(0x0000921E00000000 AS DateTime), NULLNULL, N'3c9d10b7-a6b2-4774-9963-c19dcee72fea'CAST(0x00009A5C00A53CF8 AS DateTime))  
  42. INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (318, N'ML Crankarm', N'CA-6738', 0, 0, N'Black', 500, 375, 0.0000, 0.0000, NULLNULLNULLNULL, 0, NULL, N'M 'NULLNULLNULL,CAST(0x0000921E00000000 AS DateTime), NULLNULL, N'eabb9a92-fa07-4eab-8955-f0517b4a4ca7'CAST(0x00009A5C00A53CF8 AS DateTime))  
Creating models and entity

If you don’t know how to create an entity in your solution, please read it here. I have mentioned the steps to be followed in that article. Once you create the entity, you are good to go.

Here, I am assuming that you have created an entity and got a model class as preceding.
  1. //------------------------------------------------------------------------------  
  2. // <auto-generated>  
  3. // This code was generated from a template.  
  4. //  
  5. // Manual changes to this file may cause unexpected behavior in your application.  
  6. // Manual changes to this file will be overwritten if the code is regenerated.  
  7. // </auto-generated>  
  8. //------------------------------------------------------------------------------  
  9. namespace IgniteUIGrid.Models   
  10. {  
  11.     using System;  
  12.     using System.Collections.Generic;  
  13.     public partial class Product {  
  14.         public int ProductID {  
  15.             get;  
  16.             set;  
  17.         }  
  18.         public string Name {  
  19.             get;  
  20.             set;  
  21.         }  
  22.         public string ProductNumber {  
  23.             get;  
  24.             set;  
  25.         }  
  26.         public bool MakeFlag {  
  27.             get;  
  28.             set;  
  29.         }  
  30.         public bool FinishedGoodsFlag {  
  31.             get;  
  32.             set;  
  33.         }  
  34.         public string Color {  
  35.             get;  
  36.             set;  
  37.         }  
  38.         public short SafetyStockLevel {  
  39.             get;  
  40.             set;  
  41.         }  
  42.         public short ReorderPoint {  
  43.             get;  
  44.             set;  
  45.         }  
  46.         public decimal StandardCost {  
  47.             get;  
  48.             set;  
  49.         }  
  50.         public decimal ListPrice {  
  51.             get;  
  52.             set;  
  53.         }  
  54.         public string Size {  
  55.             get;  
  56.             set;  
  57.         }  
  58.         public string SizeUnitMeasureCode {  
  59.             get;  
  60.             set;  
  61.         }  
  62.         public string WeightUnitMeasureCode {  
  63.             get;  
  64.             set;  
  65.         }  
  66.         public Nullable < decimal > Weight {  
  67.             get;  
  68.             set;  
  69.         }  
  70.         public int DaysToManufacture {  
  71.             get;  
  72.             set;  
  73.         }  
  74.         public string ProductLine {  
  75.             get;  
  76.             set;  
  77.         }  
  78.         public string Class {  
  79.             get;  
  80.             set;  
  81.         }  
  82.         public string Style {  
  83.             get;  
  84.             set;  
  85.         }  
  86.         public Nullable < int > ProductSubcategoryID {  
  87.             get;  
  88.             set;  
  89.         }  
  90.         public Nullable < int > ProductModelID {  
  91.             get;  
  92.             set;  
  93.         }  
  94.         public System.DateTime SellStartDate {  
  95.             get;  
  96.             set;  
  97.         }  
  98.         public Nullable < System.DateTime > SellEndDate {  
  99.             get;  
  100.             set;  
  101.         }  
  102.         public Nullable < System.DateTime > DiscontinuedDate {  
  103.             get;  
  104.             set;  
  105.         }  
  106.         public System.Guid rowguid {  
  107.             get;  
  108.             set;  
  109.         }  
  110.         public System.DateTime ModifiedDate {  
  111.             get;  
  112.             set;  
  113.         }  
  114.     }  
  115. }  
Creating IgniteUI Grid

Now, we are going to create a controller and view to show the grid. Click the controller-> Add-> Controller. This will show you a pop up as preceding.

Ignite UI Controlelr With View
 
Ignite UI Controlelr With View

Have you noticed that there are two new items, Ignite UI controller with view and Ignite UI view? Click on the first option. This will generate a controller and a view according to your model selection. Let's do that.

In the next pop up, you can see the options to set your view and also your IgniteUI control.

Configure view and controller
 
Configure view and controller

In the next tab, you can configure your widget, according to your requirement. Now, please select the features you would like to have in your grid. As of now, I am going to select Filtering, Sorting, paging.

Configure IgniteUI widget
 
Configure IgniteUI widget

This will generate a controller, named Scaffold, and a view accordingly. Let us rename it to MyGrid. Thus, your MyGridController.cs file will look as preceding.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Data.Entity;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7. using Infragistics.Web.Mvc;  
  8. namespace IgniteUIGrid.Controllers  
  9. {  
  10.     public class MyGridController: Controller {  
  11.         private IgniteUIGrid.Models.TrialsDBEntities db = newIgniteUIGrid.Models.TrialsDBEntities();  
  12.         public ActionResult View() {  
  13.             var model = db.Products.AsQueryable();  
  14.             return View(model);  
  15.         }  
  16.     }  
  17. }  
Now, what about the view? Yes, it is also being generated for you. Cool right? Below is the generated view.
  1. @using Infragistics.Web.Mvc;  
  2. @model IQueryable < IgniteUIGrid.Models.Product > @(Html.Infragistics().Grid(Model).ID("igGrid").Width("100%").AutoGenerateColumns(false).Columns(column => {}).Features(f =>   
  3. {  
  4.     f.Filtering().Mode(FilterMode.Simple);  
  5.     f.Paging().PageSize(5);  
  6.     f.Resizing();  
  7.     f.Sorting().Mode(SortingMode.Single);  
  8. })  
  9. .DataBind().Render())  
By default, the grid width is set to 600px. Here, I have changed it to 100 percent.

Once you have set everything, go to your shared view folder, open _Layout.cshtml and add the following references to the view.
  1. <!-- Ignite UI Required Combined CSS Files -->  
  2. <link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css"rel="stylesheet" />  
  3. <link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css"rel="stylesheet" />  
  4. <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>  
  5. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  6. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>  
  7. <!-- Ignite UI Required Combined JavaScript Files -->  
  8. <script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script>  
  9. <script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js"></script>   
Now, run your Application. You can see a grid is populated, as preceding.

application

Yes, you are right. It looks clumsy. We will solve this by selecting only the required columns, for which you need to change the grid settings, as given below:
  1. @(Html.Infragistics().Grid(Model).ID("igGrid").Width("100%").AutoGenerateColumns(false).Columns(column =>  
  2. {  
  3.     column.For(x => x.ProductID).HeaderText("Product ID").Width("30%");  
  4.     column.For(x => x.Name).HeaderText("Name").Width("30%");  
  5.     column.For(x => x.ProductNumber).HeaderText("Number").Width("20%");  
  6.     column.For(x => x.SellEndDate).HeaderText("Sell End Date").Width("20%");  
  7.     column.For(x => x.SellStartDate).HeaderText("Sell Start Date").Width("30%");  
  8.     column.For(x => x.Size).HeaderText("Size").Width("30%");  
  9. }).Features(f => {  
  10.     f.Filtering().Mode(FilterMode.Simple);  
  11.     f.Paging().PageSize(5);  
  12.     f.Resizing();  
  13.     f.Sorting().Mode(SortingMode.Single);  
  14. }).DataBind().Render())  
Run your Application and see the result.

Ignite UI Grid With Only Selected Columns
 
Ignite UI Grid With Only Selected Columns

Now, let us add a few more columns, set the grid width, fix one column as stable (should not move while scrolling) and set the primary key. To add these features, you must change your settings as follows.
  1. @(Html.Infragistics().Grid(Model).ID("igGrid").Width("100%").Height("500px").PrimaryKey("ProductID").AutoGenerateColumns(false).AutoGenerateLayouts(false).Columns(column =>  
  2. {  
  3.     column.For(x => x.ProductID).HeaderText("Product ID").Width("30%");  
  4.     column.For(x => x.Name).HeaderText("Name").Width("30%");  
  5.     column.For(x => x.ProductNumber).HeaderText("Number").Width("20%");  
  6.     column.For(x => x.SellEndDate).HeaderText("Sell End Date").Width("20%");  
  7.     column.For(x => x.SellStartDate).HeaderText("Sell Start Date").Width("30%");  
  8.     column.For(x => x.Size).HeaderText("Size").Width("30%");  
  9. }).Features(f => {  
  10.     f.Filtering().Mode(FilterMode.Simple);  
  11.     f.Paging().PageSize(5);  
  12.     f.Sorting().Mode(SortingMode.Single);  
  13.     f.ColumnFixing().FixingDirection(ColumnFixingDirection.Left);  
  14.     f.ColumnFixing();  
  15. }).DataBind().Render())  
Now, if you run your grid, you may get an error as infragistics.lob.js:160 Uncaught Error: Column Fixing requires a different column width setting. The width of the column with key ProductID should be set in the pixels.. This is the reason we have set the column width of our keys in percentage. Let us change it to pixel and try again.
  1. Columns(column =>  
  2. {  
  3.     column.For(x => x.ProductID).HeaderText("Product ID").Width("130px");  
  4.     column.For(x => x.Name).HeaderText("Name").Width("250px");  
  5.     column.For(x => x.ProductNumber).HeaderText("Number").Width("150px");  
  6.     column.For(x => x.SellEndDate).HeaderText("Sell End Date").Width("270px");  
  7.     column.For(x => x.SellStartDate).HeaderText("Sell Start Date").Width("270px");  
  8.     column.For(x => x.Size).HeaderText("Size").Width("130px");  
  9.     column.For(x => x.ListPrice).HeaderText("List Price").Width("150px");  
  10. })  
Run your grid. You can see the option to fix the columns.

Fix_column_in_Ignite_UI_Grid
 
Fix_column_in_Ignite_UI_Grid

Once you fix the column and try to scroll the column, your fixed column will not move. You can set the same for other columns too.

After_fixed_columns_in_Ignite_UI_Grid
 
After_fixed_columns_in_Ignite_UI_Grid

I hope you have got some knowledge about the Ignite UI grid control. That’s all for today. See you soon with other Ignite UI controls.

Conclusion

Did I miss anything which you may think is required? Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without the comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, ASP.NET Forum, instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help, if I can. 

Please see this article in my blog here.


Similar Articles