Available in the Full Version

Spreadsheet - View Configuration

This sample demonstrates how to use part of the action methods that are supported by the igSpreadsheet control.
Gridlines
Headings
Formula bar
Wj
Fill
Font
Split
Fill
75% Gray
50% Gray
25% Gray
12.5% Gray
6.25% Gray
Horz Stripe
Vert Strip
Rev Diag Stripe
Diag Stripe
Diag Cross Hatch
Thick Diag Cross
Thin Horz Stripe
Thin Vert Stripe
Thin Rev Diag Stripe
Thin Diag Stripe
Thin Horz Cross
Thin Diag Cross
Horz 1
Horz 2
Horz 3
c
def
Vert 1
Vert 2
Vert 3
Diag Up 1
Diag Up 2
Diag Up 3
Center
g

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>igSpreadsheet Configuration</title>

	<!--<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />-->
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

	<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.excel-bundled.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.spreadsheet-bundled.js"></script>

	<style>

         .ui-igspreadsheet .ui-menu-item {
            white-space:nowrap;
        }

		.sampleContainer .ui-tabs .ui-tabs-panel {
            background:#efefef;
            border-radius:0;
            border-color:#ddd;
            border-bottom:none;
		}


        .sampleContainer .ui-tabs {
            padding: 0;
            border-radius:0;
            border:none;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav {
            padding:0;
            background:transparent;
            border:none;
        }

        .clearfix:after {
          content: "";
          display: table;
          clear: both;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-default {
            background:transparent;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-default,
        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active {
            border:none;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-default:hover {
            background:#efefef;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active {
            background:#efefef;
            color:#333;
            border: 1px solid #ddd;
            border-bottom: none;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active a {
            color:#333;
            font-weight:bold;
        }

        .sampleContainer .ui-tabs .ui-tabs-nav li.ui-state-active:hover {
            background:#efefef;
            color:#333;
            border: 1px solid #ddd;
            border-bottom: none;
        }

        #freeze {
            margin-right: 10px;
        }

        #zoomSlider {
            max-width: 30%;
            min-width: 100px;
            float: left;
            margin: 9px 9px 9px 0px;
        }

        .spreadsheet-sample-btn,
        #freeze,
        #zoomSlider,
        .f-left {
            float: left;
        }

        .spreadsheet-sample-btn
        {
            max-width: 200px;
            padding: 8px;
            background: #fff;
            color:#444;
            text-align: center;
            border-radius: 3px;
            font-size: 12px;
            text-transform: uppercase;
            margin-right: 10px;
            cursor:pointer;
            border:1px solid #ccc;
        }

        .spreadsheet-sample-btn:hover {
            border-color:#09f;
        }

        #bold {
            font-weight:bold
        }

        #italic {
            font-style:italic;
        }

        #underline {
            text-decoration:underline;
        }

        #delSheet:hover,
        #delContent:hover
         {
            color:#fff;
            background:indianred;
        }

        #delSheet,
        #delContent {
            border-color:indianred;
            color:indianred;
        }

        .ui-widget.ui-widget-content.spreadsheet-sample {
            border:none;
            border-radius:0;
        }

        .show-row {
            position:relative;
            margin-bottom:10px;
        }
        .show-row:last-of-type {
            margin-bottom:0;
        } 
        .spreadsheet-sample .show-row-checkbox {
            position:absolute;
            left:0;
            top:0;
        }
        .show-row-text {
            padding-left:23px;
            display:inline-block;
        }

        .spreadsheet-icon {
            background:url('/images/samples/spreadsheet/sprite.png');
            width:16px;
            height:16px;
            overflow:hidden;
        }

        .zoom-in-icon {
            background-position: 0 0;
        }
         .zoom-out-icon {
            background-position: 0 -16px;
        }

        .zoom-selection {
            background-position: 0 -32px;
        }

        .zoom-reset {
            background-position: 0 -224px;
        }

        .ribbon-bold {
            background-position: 0 -304px;
        }

        .ribbon-italic {
            background-position: 0 -320px;
        }

        .ribbon-underline {
            background-position: 0 -208px;
        }

        .spreadsheet-sample a {
            color:#666!important;
        }

        .spreadsheet-sample  .ui-slider {
            background:#555;
        }

        .spreadsheet-sample .ui-slider-handle {
            background:#fff;
        }

		.decimal-places-enabled {
			position: relative;
			min-width: 400px;
			float: left;
			margin: 10px;
		}

			.decimal-places-enabled #decimalPlaces {
				margin-right: 6px;
				border-radius: 3px;
				position: absolute;
				left: 0;
				top: 15px;
			}

		.label-decimal {
			display:inline-block;
			position: absolute;
			left: 23px;
			top: 15px;
		}

		.ui-igeditor-input-container,
		.ui-igedit-container {
			border-radius: 3px;
		}
		.decimal-places-count-container {
			position: relative;
			float: left;
			margin-top: 10px;
		}

		.ui-igedit-input {
			/*font-size: 12px!important;
			font-weight: bold;
			text-align: center!important;*/
		}

	</style>
	<meta charset="utf-8" />
</head>
<body>

	<div class="actions spreadsheet-sample" id="tabs">
		<ul>
			<li><a href="#tabs-1">Show</a></li>
			<li><a href="#tabs-2">Zoom Level</a></li>
			<li><a href="#tabs-3">Sheet</a></li>
			<li><a href="#tabs-4">Formatting</a></li>
			<li><a href="#tabs-5">Delete</a></li>
		</ul>

		<div class="show clearfix" id="tabs-1">
			<div class="show-row">
                <span for="gridlines" class="show-row-text">
                    <div id="gridlines" class="show-row-checkbox"></div>
                    Gridlines
                </span>
            </div>
            <div class="show-row">
                <span for="headings" class="show-row-text">
                    <div id="headings" class="show-row-checkbox"></div>
                    Headings
                </span>
            </div>
            <div class="show-row">
                <span for="formulabar" class="show-row-text">
                    <div id="formulabar" class="show-row-checkbox"></div>
                    Formula bar
                </span>
            </div>
        </div>

		<div class="zoom clearfix" id="tabs-2">
			<div class="zoom-slider f-left">
                <div id="zoomOut" class="spreadsheet-sample-btn">
                    <div class="spreadsheet-icon zoom-in-icon"></div>
                </div>

                <div id="zoomSlider"></div>

                <div id="zoomIn" class="spreadsheet-sample-btn">
                    <div class="spreadsheet-icon zoom-out-icon"></div>
                </div>
            </div>

			<div class="f-left">
                <div id="zoom" class="spreadsheet-sample-btn">
                    <div class="spreadsheet-icon zoom-reset"></div>
                </div>

                <div id="zoomSelection" class="spreadsheet-sample-btn">
                    <div class="spreadsheet-icon zoom-selection"></div>
                </div>
            </div>
		</div>

		<div class="sheet clearfix" id="tabs-3">
			<div id="freeze"></div>
			<div id="split" class="spreadsheet-sample-btn">Split</div>
		</div>

		<div class="formatting clearfix" id="tabs-4">

			<div id="bold" class="spreadsheet-sample-btn">
                <div class="spreadsheet-icon ribbon-bold"></div>
            </div>

			<div id="italic" class="spreadsheet-sample-btn">
                <div class="spreadsheet-icon ribbon-italic"></div>
            </div>

			<div id="underline" class="spreadsheet-sample-btn">
                <div class="spreadsheet-icon ribbon-underline"></div>
            </div>

			<div class="clearfix"></div>

			<div class="decimal-places-count-container">
				<div id="decimalPlacesCount"></div>
			</div>

			<div class="decimal-places-enabled">
				<div id="decimalPlaces"></div>
				<span class="label-decimal">Enable decimal places formatting</span>
			</div>

		</div>

		<div class="delete clearfix" id="tabs-5">
			<div id="delSheet" class="spreadsheet-sample-btn">Delete Sheet</div>
			<div id="delContent" class="spreadsheet-sample-btn">Delete Content</div>
		</div>

	</div>
	<div id="spreadsheet2"></div>
	<script type="text/javascript">
		$( function () {
			if ($("#spreadsheet2").length !== 0) {
				$("#tabs").tabs();
				$("#spreadsheet2").igSpreadsheet({
					height: "600",
					width: "100%"
				});

				var workbook = null;
				var xhr = new XMLHttpRequest();
				xhr.open('GET', '/data-files/FormattingData.xlsx', true);
				xhr.responseType = 'arraybuffer';

				xhr.onload = function (e) {
					// response is unsigned 8 bit integer
					var responseArray = new Uint8Array(this.response);
					$.ig.excel.Workbook.load(responseArray, function () {
						workbook = arguments[0];
						$("#spreadsheet2").igSpreadsheet("option", "workbook", workbook);
					}, function () {
						console.log("fail");
					})
				};

				xhr.send();

				$("#zoomSlider").slider({
					change: function (event, ui) {
						$("#spreadsheet2").igSpreadsheet("option", "zoomLevel", ui.value);
					},
					min: 10,
					max: 400,
					value: 100,
					step: 1
				});

				$("#zoomIn").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "zoomIn");
					var zoomInLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
					$("#zoomSlider").slider("value", zoomInLevel);
				});
				$("#zoomOut").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "zoomOut");
					var zoomOutLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
					$("#zoomSlider").slider("value", zoomOutLevel);
				});
				$("#zoom").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "zoomTo100");
					var zoomLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
					$("#zoomSlider").slider("value", zoomLevel);
				});
				$("#zoomSelection").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "zoomToSelection");
					var zoomSelectionLevel = $('#spreadsheet2').igSpreadsheet('option', "zoomLevel");
					$("#zoomSlider").slider("value", zoomSelectionLevel);
				});

				$("#split").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "toggleSplitPanes");
				});

				$("#gridlines").igCheckboxEditor({
					checked: true,
					valueChanged: function (evt, ui) {
						if (ui.newState) {
							$("#spreadsheet2").igSpreadsheet("option", "areGridlinesVisible", true);
						} else {
							$("#spreadsheet2").igSpreadsheet("option", "areGridlinesVisible", false);
						}
					}
				});
				$("#headings").igCheckboxEditor({
					checked: true,
					valueChanged: function (evt, ui) {
						if (ui.newState) {
							$("#spreadsheet2").igSpreadsheet("option", "areHeadersVisible", true);
						} else {
							$("#spreadsheet2").igSpreadsheet("option", "areHeadersVisible", false);
						}
					}
				});
				$("#formulabar").igCheckboxEditor({
					checked: true,
					valueChanged: function (evt, ui) {
						if (ui.newState) {
							$("#spreadsheet2").igSpreadsheet("option", "isFormulaBarVisible", true);
						} else {
							$("#spreadsheet2").igSpreadsheet("option", "isFormulaBarVisible", false);
						}
					}
				});
				var listItems = [{ id: 1, action: "freeze pane" }, { id: 2, action: "freeze first row" }, { id: 3, action: "freeze first column" }];
				$("#freeze").igCombo({
					dataSource: listItems,
					textKey: "action",
					valueKey: "action",
					width: "150px",
					enableClearButton : false,
					autoSelectFirstMatch: false,
					selectionChanged: function (evt, ui) {
						if (ui.items[0].data.id == 1) {
							if (ui.items[0].data.action == "unfreeze pane") {
								var currentValue = ui.items[0].data.action;
								listItems[0].action = "freeze pane";
								$("#freeze").igCombo("dataBind");
								$("#freeze").igCombo("text", currentValue);
							} else {
								var paneValue = ui.items[0].data.action;
								listItems[0].action = "unfreeze pane";
								$("#freeze").igCombo("dataBind");
								$("#freeze").igCombo("text", paneValue);
							}
							$('#spreadsheet2').igSpreadsheet('executeAction', "toggleFreezePanes");
						} else if (ui.items[0].data.id == 2) {
							$('#spreadsheet2').igSpreadsheet('executeAction', "freezeFirstRow");
							listItems[0].action = "unfreeze pane";
							$("#freeze").igCombo("dataBind");
							$("#freeze").igCombo("value", ui.items[0].data.action);
						} else {
							$('#spreadsheet2').igSpreadsheet('executeAction', "freezeFirstColumn");
							listItems[0].action = "unfreeze pane";
							$("#freeze").igCombo("dataBind");
							$("#freeze").igCombo("value", ui.items[0].data.action);
						}
					}
				});
				$("#delSheet").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "deleteWorksheets");
				});
				$("#delContent").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "clearContents");
				});
				$("#bold").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "toggleBold");
				});
				$("#italic").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "toggleItalic");
				});
				$("#underline").click(function () {
					$('#spreadsheet2').igSpreadsheet('executeAction', "toggleUnderline");
				});

				$("#decimalPlaces").igCheckboxEditor({
					valueChanged: function (evt, ui) {
						$("#spreadsheet2").igSpreadsheet("option", "isFixedDecimalEnabled", ui.newState);
						$("#decimalPlacesCount").igNumericEditor("option", "disabled", !ui.newState);
					}
				}).igNotifier({
					width: 200,
					showOn: "mouseenter",
					mode: "popover",
					appendTo: ".decimal-places-enabled",
					direction: "right",
					position: "right",
					notifyLevel: "info",
					headerTemplate: {
						closeButton: false
					},
					locale: {
						infoMsg: "Indicates whether a fixed decimal place is automatically added when a whole number is entered while in edit mode."
					},
					closeOnBlur: true
				});;

				$("#decimalPlacesCount").igNumericEditor({
					minValue: 1,
					maxValue: 10,
					disabled: true,
					value: $("#spreadsheet2").igSpreadsheet("option", "fixedDecimalPlaceCount"),
					width: 34,
					height: 34,
					valueChanged: function (evt, ui) {
						$("#spreadsheet2").igSpreadsheet("option", "fixedDecimalPlaceCount", ui.newValue);
					}
				}).igNotifier({
					width: 200,
					showOn: "mouseenter",
					mode: "popover",
					appendTo: ".decimal-places-count-container",
					direction: "right",
					position: "right",
					notifyLevel: "info",
					headerTemplate: {
						closeButton: false
					},
					locale: {
						infoMsg: "Number of decimal places by which a whole number typed in during edit mode should be adjusted."
					},
					closeOnBlur: true
				});
			}
		});
	</script>
</body>
</html>