Available in the Full Version
Spreadsheet - Filter Dialog
This is a basic sample showing the spreadsheet's filtering capabilities. Inside the Worksheet, a table and region is defined in code to accomidate the button interaction. Clicking on "Show Table Dialog" generates a table from the data and shows the Filter Dialog based on the pre-selected Applicant for the values under 'B1'. Clicking on "Show Region Dialog" generates a region from the data and shows the Filter Dialog based on the pre-selected Applicant for the values under 'B1'.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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>
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.scroll.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.popover.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.notifier.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.shared.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.validator.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.combo.css"/>
<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>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.excel-bundled.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.spreadsheet-bundled.js"></script>
</head>
<body>
<div>
<input class="spreadsheet-sample-btn" id="showTableDialog" type="button" value="Show Filter Dialog for Table" onclick="showTableDialog()">
<input class="spreadsheet-sample-btn" id="showRegionDialog" type="button" value="Show Filter Dialog for Region" onclick="showRegionDialog()">
<div id="spreadsheet"></div>
</div>
<script>
var workbook;
var worksheet;
var table;
$(function () {
var editingEnabled = true;
//Initializing igSpreadsheet
$("#spreadsheet").igSpreadsheet({
height: "300",
width: "75%",
isFormulaBarVisible: true,
editModeEntering: function (e, args) {
return editingEnabled;
}
});
createTableWorkbook()
});
//display the workbook via igSpreadsheet
function loadWorkbook(workbook) {
$("#spreadsheet").igSpreadsheet("option", "workbook", workbook);
}
function createTableWorkbook() {
workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
var sheet = workbook.worksheets().add('Sheet1');
sheet.columns(0).setWidth(72, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(1).setWidth(160, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(2).setWidth(110, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(3).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
// Create a to-do list table with columns for tasks and their priorities.
sheet.getCell('A1').value('ID');
sheet.getCell('B1').value('Applicant');
sheet.getCell('C1').value('Status');
sheet.getCell('D1').value('Comment');
// Populate the table with data
sheet.getCell('A2').value(3224);
sheet.getCell('B2').value('Armin Barrywater');
sheet.getCell('C2').value('Approved');
sheet.getCell('D2').value('');
sheet.getCell('A3').value(3244);
sheet.getCell('B3').value('Georgi Angelchov');
sheet.getCell('C3').value('In Review');
sheet.getCell('D3').value('Underwriter is out until next week.');
sheet.getCell('A4').value(3257);
sheet.getCell('B4').value('Imelda Sanchez');
sheet.getCell('C4').value('In Review');
sheet.getCell('D4').value('');
sheet.getCell('A5').value(3226);
sheet.getCell('B5').value('Perry Kane');
sheet.getCell('C5').value('On Hold');
sheet.getCell('D5').value('Waiting on paperwork from customer.');
sheet.getCell('A6').value(3225);
sheet.getCell('B6').value('Shiela Donahue');
sheet.getCell('C6').value('New');
sheet.getCell('D6').value('');
sheet.getCell('A7').value(3235);
sheet.getCell('B7').value('Xavier Fannello');
sheet.getCell('C7').value('New');
sheet.getCell('D7').value('');
loadWorkbook(workbook);
workbook = $("#spreadsheet").igSpreadsheet("option", "workbook");
worksheet = workbook.worksheets('Sheet1');
}
function showTableDialog() {
worksheet = workbook.worksheets('Sheet1');
worksheet.filterSettings().clearRegion();
worksheet.tables().clear();
table = worksheet.tables().add('A1:D8', true);
var executed = $("#spreadsheet").igSpreadsheet("showFilterDialogForTable", table.columns(1));
}
function showRegionDialog() {
worksheet = workbook.worksheets('Sheet1');
worksheet.tables().remove(table);
worksheet.filterSettings().setRegion("A1:D8");
var executed = $("#spreadsheet").igSpreadsheet("showFilterDialogForWorksheet", 1);
}
</script>
</body>
</html>