Available in the Full Version

Spreadsheet - Spreadsheet Sort Dialog Configurations

This sample demonstrate the worksheet custom sort dialog.
Wj
Sheet1
Sheet1
Custom Sorting
Font Color
Cell Color
Cell Values
CFI (Conditional Formatting Icon)
CFI State
Apple
Green
16
0
FALSE
Banana
Yellow
17
1
TRUE
Cherry
Red
18
1
TRUE
Grape
Purple
19
0
FALSE
Orange
Orange
20
1
TRUE
Watermelon
Pink
21
0
FALSE

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>Spreadsheet Custom Sort Dialog Configurations</title>

	<!--<meta http-equiv="x-ua-compatible" content="IE=9">-->
	<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;
        }
    </style>

</head>
<body>
	<div id="spreadsheet1"></div>
	<script type="text/javascript">
		$( function () {
			if ($("#spreadsheet1").length !== 0) {
				$("#spreadsheet1").igSpreadsheet({
					height: "600",
					width: "100%",
					activeWorksheetChanged: function (evt, ui) {
						if (ui.newActiveWorksheetName == "Statistics") {
							$("#spreadsheet1").igSpreadsheet("option", "activeCell", "E7");
						} else {
							$("#spreadsheet1").igSpreadsheet("option", "activeCell", "J15");
						}
					}
				});

				var workbook = null;
				var xhr = new XMLHttpRequest();
				xhr.open('GET', '/data-files/CustomSortData.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];
						setInitialSettings();
					}, function () {
						console.log("fail");
					})
				};
				xhr.send();

				function setInitialSettings() {
					$("#spreadsheet1").igSpreadsheet("option", "workbook", workbook);
					var ws = workbook.worksheets("Sheet1");
					$("#spreadsheet1").igSpreadsheet("option", "activeWorksheet", ws);
					$("#spreadsheet1").igSpreadsheet("option", "activeCell", "J15");
					$("#spreadsheet1").igSpreadsheet("option", "zoomLevel", "95");
				}
			}
		});
	</script>
</body>
</html>