When windowWidthToRenderVertically is null, determine minimal widths columns can take before
forcing vertical rendering for the grid.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
							allowedColumnWidthPerType : {
								string: 120,
								number: 50,
								bool: 50,
								date: 80,
								object: 150
							}
						}
					]
				});

				//Get
				var allowedColumnWidthPerType = $(".selector").igGridResponsive("option", "allowedColumnWidthPerType");
			 

• bool

  Type:

  number

  Default:

  50

  Minimal width in pixels bool columns can take before forcing vertical rendering.

  Code Sample

   
  					//Initialize
  					$(".selector").igGrid({
  						features : [
  							{
  								name : "Responsive",
  								allowedColumnWidthPerType : {
  									bool: 50
  								}
  							}
  						]
  					});
  
  					//Get
  					var allowedBoolColumnWidth = $(".selector").igGridResponsive("option", "allowedColumnWidthPerType").bool;
  				 

• date

  Type:

  number

  Default:

  80

  Minimal width in pixels date columns can take before forcing vertical rendering.

  Code Sample

   
  					//Initialize
  					$(".selector").igGrid({
  						features : [
  							{
  								name : "Responsive",
  								allowedColumnWidthPerType : {
  									date: 50
  								}
  							}
  						]
  					});
  
  					//Get
  					var allowedDateColumnWidth = $(".selector").igGridResponsive("option", "allowedColumnWidthPerType").date;
  				 

• number

  Type:

  number

  Default:

  50

  Minimal width in pixels number columns can take before forcing vertical rendering.

  Code Sample

   
  					//Initialize
  					$(".selector").igGrid({
  						features : [
  							{
  								name : "Responsive",
  								allowedColumnWidthPerType : {
  									number: 50
  								}
  							}
  						]
  					});
  
  					//Get
  					var allowedNumberColumnWidth = $(".selector").igGridResponsive("option", "allowedColumnWidthPerType").number;
  				 

• object

  Type:

  number

  Default:

  150

  Minimal width in pixels object columns can take before forcing vertical rendering.

  Code Sample

   
  					//Initialize
  					$(".selector").igGrid({
  						features : [
  							{
  								name : "Responsive",
  								allowedColumnWidthPerType : {
  									object: 50
  								}
  							}
  						]
  					});
  
  					//Get
  					var allowedObjectColumnWidth = $(".selector").igGridResponsive("option", "allowedColumnWidthPerType").object;
  				 

• string

  Type:

  number

  Default:

  120

  Minimal width in pixels string columns can take before forcing vertical rendering.

  Code Sample

   
  					//Initialize
  					$(".selector").igGrid({
  						features : [
  							{
  								name : "Responsive",
  								allowedColumnWidthPerType : {
  									string: 50
  								}
  							}
  						]
  					});
  
  					//Get
  					var allowedStringColumnWidth = $(".selector").igGridResponsive("option", "allowedColumnWidthPerType").string;
  				 

A list of column settings that specifies how columns will react based on the environment the grid is run on.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
							columnSettings : [
								{
									columnIndex: 0,
									classes: "ui-hidden-phone"
								}
							]
						}
					]
				});

				//Get
				var colSettings = $(".selector").igGridResponsive("option", "columnSettings");
			 

• classes

  Type:

  string

  Default:

  ""

  A list of predefined classes to decide element's visibility on.

  Code Sample

   
  						//Initialize
  						$(".selector").igGrid({
  							features : [
  								{
  									name : "Responsive",
  									columnSettings : [
  										{
  											columnIndex: 0,
  											classes: "ui-hidden-tablet"
  										}
  									]
  								}
  							]
  						});
  					 

• columnIndex

  Type:

  number

  Default:

  null

  Column index. Can be used in place of column key. The preferred way of populating a column setting is to always use the column keys as identifiers.

  Code Sample

   
  						//Initialize
  						$(".selector").igGrid({
  							features : [
  								{
  									name : "Responsive",
  									columnSettings : [
  										{
  											columnIndex: 0,
  											classes: "ui-hidden-tablet"
  										}
  									]
  								}
  							]
  						});
  					 

• columnKey

  Type:

  string

  Default:

  null

  Column key. This is a required property in every column setting if columnIndex is not set.

  Code Sample

   
  						//Initialize
  						$(".selector").igGrid({
  							features : [
  								{
  									name : "Responsive",
  									columnSettings : [
  										{
  											columnKey: "ProductId",
  											classes: "ui-hidden-tablet"
  										}
  									]
  								}
  							]
  						});
  					 

• configuration

  Type:

  object

  Default:

  null

  A configuration object to use for the responsive functionality. Uses the keys defined in the widget's responsiveModes object. The classes property is not used if this one is set.

  Code Sample

   
  						//Initialize
  						$(".selector").igGrid({
  							features : [
  								{
  									name : "Responsive",
  									columnSettings : [
  										{
  											columnKey: "ProductDescription",
  											configuration: {
  												phone: {
  													hidden: true
  												},
  												tablet: {
  													template: "<span style='color:green;'>${ProductDescription}</span>"
  												}
  											}
  										}
  									]
  								}
  							]
  						});
  					 

Enable or disable the responsive vertical rendering for the grid.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
							enableVerticalRendering : false
						}
					]
				});

				//Get
				var enableVerticalRendering = $(".selector").igGridResponsive("option", "enableVerticalRendering");
			 

If this option is set to true the widget will ensure the grid's width is always set to 100%.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
							forceResponsiveGridWidth : true
						}
					]
				});

				//Get
				var text = $(".selector").igGridResponsive("option", "forceResponsiveGridWidth");
			 

Enables/disables feature inheritance for the child layouts. NOTE: It only applies for igHierarchicalGrid.

The width of the properties column when vertical rendering is enabled.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
							propertiesColumnWidth : "30%"
						}
					]
				});
				//Get
				var propertiesColumnWidth = $(".selector").igGridResponsive("option", "propertiesColumnWidth");
			 

If this option is set to true an igResponsiveContainer widget will be attached to the igGrid control which will notify the feature when changes in the width of the container occur.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
							reactOnContainerWidthChanges : true
						}
					]
				});

				//Get
				var text = $(".selector").igGridResponsive("option", "reactOnContainerWidthChanges");

				//Set
				$(".selector").igGridResponsive("option", "reactOnContainerWidthChanges", true);
			 

The recognized types of environments and their configuration.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
							responsiveModes : {
								phone: "infragistics",
								tablet: "infragistics",
								desktop: "infragistics"
							}
						}
					]
				});

				//Get
				var text = $(".selector").igGridResponsive("option", "responsiveModes");

				//Set
				var responsiveModes = {
					phone: "infragistics",
					tablet: "infragistics",
					desktop: "infragistics"
				};

				$(".selector").igGridResponsive("option", "responsiveModes", responsiveModes);
			 

The amount of pixels the window needs to resize with for the grid to respond.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
							responsiveSensitivity : 20
						}
					]
				});

				//Get
				var text = $(".selector").igGridResponsive("option", "responsiveSensitivity");
			 

Specifies a template to render a record with in a list-view style layout per mode.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
								singleColumnTemplate: {
							phone:
							"<div class='right' style='float: left; font-size: 1.1em;'>" +
							"<span>Name:&nbsp;</span><span>${Name}</span><br/>" +
							"<span>Phone:&nbsp;</span><span><a href='${PhoneUrl}'>${Phone}</a></span><br/>" +
							"<span>HireDate:&nbsp;</span><span>${HireDate}</span><br/>" +
							"</div>"
							,

							tablet:
								"<div class='right' style='float: left; font-size: 1.1em;'>" +
								"<span>Name:&nbsp;</span><span>${Name}</span><br/>" +
								"<span>Phone:&nbsp;</span><span><a href='${PhoneUrl}'>${Phone}</a></span><br/>" +
								"<span>HireDate:&nbsp;</span><span>${HireDate}</span><br/>" +
								"</div>"
							}
						}
					]
				});

				//Get
				$(".selector").igGridResponsive("option", "singleColumnTemplate")
			 

The width of the values column when vertical rendering is enabled.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
							valuesColumnWidth: "60%"
						}
					]
				});
				//Get
				var valuesColumnWidth = $(".selector").igGridResponsive("option", "valuesColumnWidth");
			 

The window's width under which the grid will render its contents vertically.

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "Responsive",
							windowWidthToRenderVertically: "60%"
						}
					]
				});
				//Get
				var windowWidthToRenderVertically = $(".selector").igGridResponsive("option", "windowWidthToRenderVertically");