-
-
Save varmint/f7c4e8a222352d71b6d4 to your computer and use it in GitHub Desktop.
SlickGrid Dynamic Columns with Frozen Columns
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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