<commit_before><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>SlickGrid example 4: Model</title>
		<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="../slick.pager.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="../css/custom-theme/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="../slick.columnpicker.css" type="text/css" media="screen" charset="utf-8" />
		<style>
		.cell-title {
			font-weight: bold;
		}

		.cell-effort-driven {
			text-align: center;
		}
	</style>
	</head>
	<body>
		<div style="width:600px;float:left;">
			<div class="grid-header" style="width:100%">
				<label>SlickGrid</label>
                <span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel" onclick="toggleFilterRow()"></span>
			</div>
			<div id="myGrid" style="width:100%;height:500px;"></div>
			<div id="pager" style="width:100%;height:20px;"></div>
		</div>

		<div class="options-panel" style="width:320px;margin-left:650px;">
			<b>Search:</b>
			<hr/>
			<div style="padding:6px;">
				<label style="width:200px;float:left">Show tasks with % at least: </label>
				<div style="padding:2px;">
					<div style="width:100px;display:inline-block;" id="pcSlider"></div>
				</div>
				<br/>
				<label style="width:200px;float:left">And title including:</label>
				<input type=text id="txtSearch" style="width:100px;">
				<br/><br/>
				<button id="btnSelectRows">Select first 10 rows</button>
			</div>
		</div>

		<div style="margin-left:650px;margin-top:40px;;">
			<h2>Demonstrates:</h2>

			<ul>
				<li>a filtered Model (DataView) as a data source instead of a simple array</li>
				<li>grid reacting to model events (onRowCountChanged, onRowsChanged)</li>
				<li>
					<b>FAST</b> DataView recalculation and <b>real-time</b> grid updating in response to data changes.<br/>
					The grid holds <b>50'000</b> rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 rows.
				</li>
				<li>adding new rows, bidirectional sorting</li>
				<li>column options:  setValueHandler, cannotTriggerInsert</li>
				<li><font color=red>NOTE:</font>  all filters are immediately applied to new/edited rows</li>
				<li>Handling row selection against model changes.</li>
				<li>Paging.</li>
                <li>inline filter panel</li>
			</ul>
		</div>

        <div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;">
            Show tasks with title including <input type="text" id="txtSearch2">
            and % at least &nbsp; <div style="width:100px;display:inline-block;" id="pcSlider2"></div>
        </div>

		<script language="JavaScript" src="../lib/firebugx.js"></script>

		<script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script>
		<script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
		<script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script>
		<script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script>

		<script language="JavaScript" src="../slick.editors.js"></script>
		<script language="JavaScript" src="../slick.grid.js"></script>
		<script language="JavaScript" src="../slick.model.js"></script>
		<script language="JavaScript" src="../slick.pager.js"></script>
		<script language="JavaScript" src="../slick.columnpicker.js"></script>

		<script>
		var dataView;
		var grid;
		var data = [];
		var selectedRowIds = [];

		var columns = [
			{id:"sel", name:"#", cssClass:"cell-selection", width:40, cannotTriggerInsert:true, resizable:false,  unselectable:true },
			{id:"title", name:"Title", field:"title", width:120, minWidth:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator, setValueHandler:updateItem, sortable:true},
			{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor, setValueHandler:updateItem, sortable:true},
			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor, setValueHandler:updateItem, sortable:true},
			{id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem, sortable:true},
			{id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem, sortable:true},
			{id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor, setValueHandler:updateItem, cannotTriggerInsert:true, sortable:true}
		];

		var options = {
			editable: true,
			enableAddRow: true,
			enableCellNavigation: true,
			asyncEditorLoading: true,
			forceFitColumns: false,
            showSecondaryHeaderRow: true,
            secondaryHeaderRowHeight: 25
		};

		var sortcol = "title";
		var sortdir = 1;<commit_msg>Updated the example to hide the inline filter panel by default.<commit_after><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>SlickGrid example 4: Model</title>
		<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="../slick.pager.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="../css/custom-theme/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="../slick.columnpicker.css" type="text/css" media="screen" charset="utf-8" />
		<style>
		.cell-title {
			font-weight: bold;
		}

		.cell-effort-driven {
			text-align: center;
		}
	</style>
	</head>
	<body>
		<div style="width:600px;float:left;">
			<div class="grid-header" style="width:100%">
				<label>SlickGrid</label>
                <span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel" onclick="toggleFilterRow()"></span>
			</div>
			<div id="myGrid" style="width:100%;height:500px;"></div>
			<div id="pager" style="width:100%;height:20px;"></div>
		</div>

		<div class="options-panel" style="width:320px;margin-left:650px;">
			<b>Search:</b>
			<hr/>
			<div style="padding:6px;">
				<label style="width:200px;float:left">Show tasks with % at least: </label>
				<div style="padding:2px;">
					<div style="width:100px;display:inline-block;" id="pcSlider"></div>
				</div>
				<br/>
				<label style="width:200px;float:left">And title including:</label>
				<input type=text id="txtSearch" style="width:100px;">
				<br/><br/>
				<button id="btnSelectRows">Select first 10 rows</button>
			</div>
		</div>

		<div style="margin-left:650px;margin-top:40px;;">
			<h2>Demonstrates:</h2>

			<ul>
				<li>a filtered Model (DataView) as a data source instead of a simple array</li>
				<li>grid reacting to model events (onRowCountChanged, onRowsChanged)</li>
				<li>
					<b>FAST</b> DataView recalculation and <b>real-time</b> grid updating in response to data changes.<br/>
					The grid holds <b>50'000</b> rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 rows.
				</li>
				<li>adding new rows, bidirectional sorting</li>
				<li>column options:  setValueHandler, cannotTriggerInsert</li>
				<li><font color=red>NOTE:</font>  all filters are immediately applied to new/edited rows</li>
				<li>Handling row selection against model changes.</li>
				<li>Paging.</li>
                <li>inline filter panel</li>
			</ul>
		</div>

        <div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;">
            Show tasks with title including <input type="text" id="txtSearch2">
            and % at least &nbsp; <div style="width:100px;display:inline-block;" id="pcSlider2"></div>
        </div>

		<script language="JavaScript" src="../lib/firebugx.js"></script>

		<script language="JavaScript" src="../lib/jquery-1.4.1.min.js"></script>
		<script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
		<script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script>
		<script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script>

		<script language="JavaScript" src="../slick.editors.js"></script>
		<script language="JavaScript" src="../slick.grid.js"></script>
		<script language="JavaScript" src="../slick.model.js"></script>
		<script language="JavaScript" src="../slick.pager.js"></script>
		<script language="JavaScript" src="../slick.columnpicker.js"></script>

		<script>
		var dataView;
		var grid;
		var data = [];
		var selectedRowIds = [];

		var columns = [
			{id:"sel", name:"#", cssClass:"cell-selection", width:40, cannotTriggerInsert:true, resizable:false,  unselectable:true },
			{id:"title", name:"Title", field:"title", width:120, minWidth:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator, setValueHandler:updateItem, sortable:true},
			{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor, setValueHandler:updateItem, sortable:true},
			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor, setValueHandler:updateItem, sortable:true},
			{id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem, sortable:true},
			{id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem, sortable:true},
			{id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor, setValueHandler:updateItem, cannotTriggerInsert:true, sortable:true}
		];

		var options = {
			editable: true,
			enableAddRow: true,
			enableCellNavigation: true,
			asyncEditorLoading: true,
			forceFitColumns: false,
            secondaryHeaderRowHeight: 25
		};

		var sortcol = "title";
		var sortdir = 1;
{'fraction_non_alphanumeric': 0.18203198494825965, 'fraction_numerical': 0.020884289746001882, 'mean_word_length': 4.6789529914529915, 'pattern_counts': {'":': 0, '<': 217, '<?xml version=': 0, '>': 217, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5741321', 'n_tokens_mistral': 3963, 'n_tokens_neox': 3440, 'n_words': 705}