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.
Show
Zoom Level
Sheet
Formatting
Delete
Gridlines
Headings
Formula bar
Split
Enable decimal places formatting
Delete Sheet
Delete Content
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

Show In JsFiddle
Copy to Clipboard
HTML
                    <!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.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.excel-bundled.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.1/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>
Ignite UI for jQuery | Samples

Search Results

Spreadsheet - View Configuration

Code View
