Skip to content

Instantly share code, notes, and snippets.

@varmint
Created September 28, 2011 12:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save varmint/f7c4e8a222352d71b6d4 to your computer and use it in GitHub Desktop.
Save varmint/f7c4e8a222352d71b6d4 to your computer and use it in GitHub Desktop.
SlickGrid Dynamic Columns with Frozen Columns
<!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">
<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.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;
}
.cell-reorder {
cursor: move;
background: url("/include/SlickGrid/images/drag-handle.png") no-repeat center center;
}
.score-higher {
color: green;
xfont-weight: bold;
}
.score-lower {
color: red;
xfont-weight: bold;
}
</style>
<title>Assessment Maintenance</title>
<script language="JavaScript" src="../lib/firebugx.js"></script>
<script language="JavaScript" src="../lib/jquery-1.6.4.min.js"></script>
<script language="JavaScript" src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.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 language="javascript">
var docStrandMax;
//Strand SlickGrid Variables
var grid;
var columns = [];
columns.push({id:"lastname", name:"Last Name", field:"LastName", width:100});
columns.push({id:"firstname", name:"First Name", field:"FirstName", width:100});
var data = [];
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
multiSelect: false,
frozenColumn: 1
};
function scoreDiffFormatter(row, cell, value, columnDef, dataContext) {
if (value > 0)
return "<span class='score-higher'>" + value + "</span>";
else if (value < 0)
return "<span class='score-lower'>" + value + "</span>";
else
return value;
}
$(function()
{
grid = new Slick.Grid($("#myGrid"), data, columns, options);
grid.onCellChange = function(row,col,item){
if(validateScore(row,col)){
calcTotals(row);
data[row].isdirty=true;
grid.setData(data);
grid.render();
return true;
}
grid.gotoCell(row,col);
return false;
};
}
);
// End SlickGrid Code
function validateScore(r,c){
var cols = grid.getColumns();
var ms = cols[c].maxscore;
if(cols[c].isstrand){
var val = data[r][cols[c].field];
if(val != "" && parseInt(val)!=0){
if(parseInt(val) && parseInt(ms)){
if((parseInt(val) > parseInt(ms)) || (parseInt(val) < 0)){
alert("The value range for this strand is from 0 to " + ms);
data[r][cols[c].field]="";
return false;
}
else
return true;
}
else{
alert("Score must be numeric.");
data[r][cols[c].field]="";
return false;
}
}
else
return true;
}
return true;
}
function calcTotals(row){
var cols = grid.getColumns();
var tot=0;
for(var i=0; i < cols.length; i++){
if(cols[i].field.substring(0,6) =="strand"){
if(parseInt(data[row][cols[i].field]))
tot += parseInt(data[row][cols[i].field]);
}
}
//Set the TotalScore
data[row].TotalScore = tot;
data[row].ScoreVsELP = tot - data[row].ELP;
return true;
}
function commitGridEdits(){
grid.getEditController().commitCurrentEdit();
}
function lstSchool_onChange(){
lstTeacher_onChange();
}
function lstTeacher_onChange(){
//clear the grid
removeAllRows();
lstSubject_onChange();
}
function lstSubject_onChange(){
lstBenchmarkInst_onChange();
}
function lstBenchmarkInst_onChange(){
var lstInst = document.getElementById("lstBenchmarkInst");
var tnum = document.getElementById("Teacher_Number");
var xml = "<AAA ColSet='Strands' Teacher_Number='" + tnum.value + "' BenchmarkInstKey='" + lstInst.value + "'/>";
//var strResult = XMLRequest("rsData.asp", xml, false, "", "GETBENCHMARKDATA");
//alert(strResult);
//var doc = XMLLoadDoc(strResult);
strResult = "<AAA><ROW BenchmarkStrandKey='1' StrandDesc='Something' MaxScore='6'/></AAA>";
if (window.DOMParser)
{
parser=new DOMParser();
var doc=parser.parseFromString(strResult,"text/xml");
}
else // Internet Explorer
{
doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(strResult);
}
columns = [];
columns.push({id:"lastname", name:"Last Name", field:"LastName", width:100});
columns.push({id:"firstname", name:"First Name", field:"FirstName", width:100});
columns.push({id:"totalScore", name:"Total", field:"TotalScore", width:50});
columns.push({id:"elp", name:"ELP", field:"ELP", width:50});
columns.push({id:"diffScore", name:"+/-", field:"ScoreVsELP", formatter:scoreDiffFormatter, width:50});
var nodes = doc.getElementsByTagName("ROW");
for(var i=0; i<nodes.length;i++){
columns.push({id:"strandkey" + nodes[i].getAttribute("BenchmarkStrandKey"), isstrand:true, name:nodes[i].getAttribute("StrandDesc"), field:"strand" + nodes[i].getAttribute("BenchmarkStrandKey"), maxscore:nodes[i].getAttribute("MaxScore"), benchmarkstrandkey:nodes[i].getAttribute("BenchmarkStrandKey"), editor:TextCellEditor, width:70});
}
columns.push({id:"user1", name:"User 1", field:"UserDef1", isuserdef:true, editor:TextCellEditor, width:55});
columns.push({id:"user2", name:"User 2", field:"UserDef2", isuserdef:true, editor:TextCellEditor, width:55});
columns.push({id:"user3", name:"User 3", field:"UserDef3", isuserdef:true, editor:TextCellEditor, width:55});
columns.push({id:"user3", name:"User 4", field:"UserDef3", isuserdef:true, editor:TextCellEditor, width:55});
columns.push({id:"user3", name:"User 5", field:"UserDef3", isuserdef:true, editor:TextCellEditor, width:55});
columns.push({id:"user3", name:"User 6", field:"UserDef3", isuserdef:true, editor:TextCellEditor, width:55});
columns.push({id:"user3", name:"User 7", field:"UserDef3", isuserdef:true, editor:TextCellEditor, width:55});
columns.push({id:"user3", name:"User 8", field:"UserDef3", isuserdef:true, editor:TextCellEditor, width:55});
columns.push({id:"user3", name:"User 9", field:"UserDef3", isuserdef:true, editor:TextCellEditor, width:55});
//grid.setColumns(columns);
grid.setColumns(columns);
loadGrid();
}
function lstSection_onChange(){
loadGrid();
}
function removeAllRows(){
var selrow;
var deldata = grid.getData();
deldata.splice (0, 9999);
grid.setData (deldata);
grid.render();
}
function loadGrid(){
//removeAllRows();
var lstInst = document.getElementById("lstBenchmarkInst");
var lstCont = document.getElementById("lstContentArea");
var lstSect = document.getElementById("lstSection");
var tnum = document.getElementById("Teacher_Number");
//turn on the section box if we have more than one section
if(lstSect.options.length > 1){
var divSect = document.getElementById("spanSection");
divSect.style.display="";
//var divSect = document.getElementById("divSectionTitle");
//divSect.style.display="";
}
//var xml = "<AAA ColSet='Detail' Teacher_Number='" + tnum.value + "' SubjectAreaKey='" + lstCont.value + "' BenchmarkInstKey='" + lstInst.value + "' Section='" + lstSect.value + "'/>";
//var strResult = XMLRequest("rsData.asp", xml, false, "", "GETBENCHMARKSCORE");
//var doc = XMLLoadDoc(strResult);
strResult = "<AAA>";
for(var q=0; q<20; q++){
strResult += "<ROW FirstName='" + q + "' LastName='" + q + "'/>";
}
strResult += "</AAA>";
if (window.DOMParser)
{
parser=new DOMParser();
var doc=parser.parseFromString(strResult,"text/xml");
}
else // Internet Explorer
{
doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(strResult);
}
var nodes = doc.getElementsByTagName("ROW");
for(var i=0; i<nodes.length;i++){
//breaks if i dont put in this line
data.push({LastName:nodes[i].getAttribute("LastName")});
for (var j = 0; j < nodes[i].attributes.length; j++) {
var attr = nodes[i].attributes[j];
data[i][attr.name] = attr.value;
}
//calcTotals(i);
}
grid.setData(data);
grid.render();
}
function renderPageXML(){
var row;
var xml
var xmlscore="";
var xmluserdef="";
var xmlcurruserdef="";
var lstInst = document.getElementById("lstBenchmarkInst");
//scores
//alert("rows: " + data.length);
for(var x=0; x<data.length; x++){
row = data[x];
if(row.isdirty){
var cols = grid.getColumns();
for(var i=0; i < cols.length; i++){
//scores
if(cols[i].isstrand && (parseInt(data[x][cols[i].field])>=0 || data[x][cols[i].field]=="")){
xmlscore += "<SCORE ";
xmlscore += "BenchmarkInstKey='" + lstInst.value + "' ";
xmlscore += "BenchmarkStrandKey='" + cols[i].benchmarkstrandkey + "' ";
xmlscore += "TEMS_Student_Id='" + data[x]["Student_Id"] + "' ";
//alert(data[x][cols[i].field]);
if(data[x][cols[i].field]=="")
xmlscore += "Score='-99'";
else
xmlscore += "Score='" + data[x][cols[i].field] + "'";
xmlscore += "/>";
}
//user defined fields
if(cols[i].isuserdef && (typeof data[x][cols[i].field] != "undefined")){
if(xmlcurruserdef == ""){
xmlcurruserdef += "<USERDEF ";
xmlcurruserdef += "Course_Number='" + data[x]["Course_Number"] + "' ";
xmlcurruserdef += "TEMS_Student_Id='" + data[x]["Student_Id"] + "' ";
}
if(data[x][cols[i].field]=="")
xmlcurruserdef += cols[i].field + "='_9x9x_' ";
else
xmlcurruserdef += cols[i].field + "='" + data[x][cols[i].field] + "' ";
}
}
xmlcurruserdef += "/>";
xmluserdef += xmlcurruserdef;
xmlcurruserdef=""
}
}
xml = "<AAA><BENCHMARK><SCORES>" + xmlscore + "</SCORES><USERDEFS>" + xmluserdef + "</USERDEFS></BENCHMARK></AAA>";
return xml;
}
function btnSave_onClick(){
commitGridEdits();
var xml = renderPageXML();
var strResult = XMLRequest("rsData.asp", xml, false, "", "SaveBenchmarkScores");
xml = XMLLoadDoc(strResult);
if(xml.documentElement.getAttribute("ReturnCode") != "0"){
alert("Save failed. (SaveBenchmarkScores)");
return false;
}
else
alert("Benchmark scores saved successfully.");
loadGrid();
}
</script>
</head>
<body>
<form action="" name="formAssessManager" method="POST">
<table class="window" align=center border=1 frame="box" rules="none" cellpadding="2" cellspacing="0" width="800px">
<tr>
<td xcolspan="4" class="pageTitle">Benchmark</td>
</tr>
<tr height="30px">
<td xcolspan="3" class="sectionHeader">
<table border="0" cellpadding="1" cellspacing="0" width="100%">
<tr>
<td>
<span style="">
School: <select id="lstSchool" style='width:150px' onChange='lstSchool_onChange()'><option>School 1</option><option>School 2</option></select>
</span>
</td>
<td colspan="2">
<span style="">
Teacher:<select id="lstTeacher" style='width:150px' onChange='lstTeacher_onChange()'><option>Teacher 1</option><option>Teacher 2</option></select>
</span>
</td>
</tr>
<tr>
<td>
<span>
Subject:<select id="lstTeacher" style='width:150px' onChange='lstSubject_onChange()'><option>Subject 1</option><option>Subject 2</option></select>
</span>
</td>
<td>
<span style="display:none;padding:10px" id="spanSection">
Period:<select id="lstSection" style='width:50px' onChange='lstSection_onChange()'><option>Period 1</option><option>Period 2</option></select>
</span>
</td>
<td>
<span>
Administration:<select id="lstBenchmarkInst" style='width:144px' onChange='lstBenchmarkInst_onChange()'></select>
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td xcolspan="3" valign=top>
<div>
<div id="myGrid" style="width:792px;height:300px;"></div>
</div>
</td>
</tr>
<tr>
<td align="center"><input style="width:80px" type="button" value="Save" name="btnSave" onClick="btnSave_onClick();"></td>
</tr>
</table>
<input type="text" id=txtDebug style="width:500px; display:none;">
<input type="text" id="BenchmarkKey" name="BenchmarkKey" style="display:none;">
<input type="text" id="Teacher_Number" name="Teacher_Number" style="display:none;" value="">
<input type="text" id="BMAction" name="BMAction" style="display:none;">
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment