AjaxGrid with Source
Bagi yang butuh source code AjaxGrid (GridView bisa tambah row baru diclient) bisa dilihat dibawah. Sorry, belum sempet buat tutorialnya.
/*** AjaxGridColumnType Enum ***/
function AjaxGridColumnTypeEnum(){
this.REGULAR_CHECKBOX = 0;
this.REGULAR_TEXTBOX = 1;
this.UC_DATELOOKUP = 2;
this.REGULAR_DROPDOWNLIST = 3;
this.REGULAR_RADIOBUTTON = 4;
this.UC_TEXTBOXWITHIDLOOKUP = 5;
this.COMBINATION_CHECKBOXDROPDOWNLIST = 6;
this.UC_TEXTBOXLOOKUP = 7;
this.UC_DROPDOWNLISTMODEL1 = 8;
this.UC_DROPDOWNLISTMODEL3 = 9;
this.UC_TEXTBOXWITHID = 10;
}var AjaxGridColumnType = new AjaxGridColumnTypeEnum();
/*** CreateAjaxColumn ***/
function CreateAjaxColumn(ColumnType, HTMLElement){
switch(ColumnType){
case AjaxGridColumnType.REGULAR_CHECKBOX:
{
return new RegularCheckBoxColumn(HTMLElement);
}
break;
case AjaxGridColumnType.REGULAR_TEXTBOX:
{
return new RegularTextBoxColumn(HTMLElement);
}
break;
case AjaxGridColumnType.UC_DATELOOKUP:
{
return new UCDateLookupColumn(HTMLElement);
}
break;
case AjaxGridColumnType.REGULAR_DROPDOWNLIST:
{
return new RegularDropDownListColumn(HTMLElement);
}
break;
case AjaxGridColumnType.COMBINATION_CHECKBOXDROPDOWNLIST:
{
return new CombinationCheckboxDropDownListColumn(HTMLElement);
}
break;
case AjaxGridColumnType.UC_TEXTBOXLOOKUP:
{
return new UCTextBoxLookup(HTMLElement);
}
case AjaxGridColumnType.UC_DROPDOWNLISTMODEL1:
{
return new UCDropDownListModel1(HTMLElement);
}
case AjaxGridColumnType.UC_DROPDOWNLISTMODEL3:
{
return new UCDropDownListModel3(HTMLElement);
}
case AjaxGridColumnType.UC_TEXTBOXWITHID:
{
return new UCTextBoxWithID(HTMLElement);
}
default:
alert('Unknown ColumnType in CreateAjaxColumn: ' + ColumnType);
break;
}
return null;
}
/*** GridViewAdapter class ***/
function GridViewAdapter(GridViewClientIDString){
this.GridView = eval('document.all.' + GridViewClientIDString);
if(!this.GridView){
alert('GridViewClientIDString: ' + GridViewClientIDString + ' is not valid in GridViewAdapter');
}
this.GetRow = function(RowIndex){
var rows = this.GetRows();
if(!rows){
alert('Failed to get rows in GridViewAdapter.GetRow() function.');
return null;
}
if(RowIndex >= rows.length){
alert('Index out of bound in GridViewAdapter.GetRow() Grid: ' + this.GridView.id);
}
return rows[RowIndex];
}
this.GetRows = function(){
return this.GridView.tBodies[0].rows;
}
this.AddRow = function(NewRow){
this.GridView.tBodies[0].appendChild(NewRow);
}
this.RemoveRow = function(RowIndex){
this.GridView.deleteRow(RowIndex);
}
}
/*** AjaxGridColumn class ***/
function AjaxGridColumn(ColumnName, ColumnType){
this.ColumnName = ColumnName;
this.ColumnType = ColumnType;
}
/*** AutoAddRowInfo class ***/
function AutoAddRowInfo(ColIndexToAddAutoAddRowHandler, AutoAddRowEventName, ControlTag){
}
/*** AjaxGridRow class ***/
function AjaxGridRow(AjaxGridObject, RowIndex){
this.AjaxGridObject = AjaxGridObject;
this.GridViewAdapter = AjaxGridObject.GridView;
this.RowIndex = RowIndex;
this.GetCell = function(ColumnIndex){
var CellRow = this.GridViewAdapter.GetRow(this.RowIndex);
if(!this.AjaxGridObject.Columns[ColumnIndex]){
alert('Invalid ColumnIndex : ' + ColumnIndex + ' in AjaxGridRow.GetCell()');
}
var CellColumnType = this.AjaxGridObject.Columns[ColumnIndex].ColumnType;
var HTMLElement = CellRow.cells[ColumnIndex].children[0];
return CreateAjaxColumn(CellColumnType, HTMLElement);
}
}
/*** AjaxGrid class ***/
function AjaxGrid(GridViewClientID, IsContainsHeader, InstanceName, AutoAddRowInfoInstance){
this.OriginalRow = null;
this.Columns = new Array();
this.GridView = new GridViewAdapter(GridViewClientID);
this.DataSource = "";
this.IsContainsHeader = IsContainsHeader;
this.InstanceName = InstanceName;
this.beginRequestHandlerAdded = false;
this.Binding = false;
this.GetRow = function(RowIndex){
//Plus 1 to RowIndex, because the grid contains header.
var theRowIndex = this.GetDataRowIndex(RowIndex);
// return this.GridView.GetRow(theRowIndex);
return new AjaxGridRow(this, theRowIndex);
}
this.GetRows = function(){
return this.GridView.GetRows();
}
this.DataBind = function(){
this.Binding = true;
this.OriginalRow = this.GridView.GetRow(1).cloneNode(true);
this.DataSource = eval(this.DataSource);
if(this.ColIndexOfTabKeyDown == -1){
this.ColIndexOfTabKeyDown = this.Columns.length - 1;
}
//this.addAutoNewRowEvent(this.ColIndexOfTabKeyDown, this.GridView.GetRow(1), this.GridView.GetRows().length);
if(this.OnRowCreated){
this.OnRowCreated(this.GetRow(1));
}
var rowsMinus = this.DataSource.length - (this.GetRows().length - 1);
for(i = 1; i <= rowsMinus; i++){
this.AddNewRow();
}
for(dsRowIndex = 0; dsRowIndex < this.DataSource.length; dsRowIndex++){
if(this.OnRowDataBound){
var rowIndex = dsRowIndex+1;
var currentGridRow = this.GetRow(rowIndex);
var currentDataSourceRow = this.DataSource[dsRowIndex];
this.OnRowDataBound(currentGridRow, currentDataSourceRow);
}
}
this.Binding = false;
}
}
AjaxGrid.prototype.ColIndexOfTabKeyDown = -1;
AjaxGrid.prototype.OnSaveState = function(){}
AjaxGrid.prototype.SaveGridState = function(){
this.OnSaveState();
//this.ClearRows();
}
AjaxGrid.prototype.ClearRows = function(){
while(this.GridView.GetRows().length > 1){
this.RemoveRow(this.GridView.GetRows().length - 1);
}
}
AjaxGrid.prototype.OnInsertEventForAutoAddRow = function(PreviousRow, TargetRow){
}
AjaxGrid.prototype.GetDataRowIndex = function(RowIndex){
var theRowIndex = RowIndex;
// if(this.IsContainsHeader){
// theRowIndex += 1;
// }
return theRowIndex;
}
AjaxGrid.prototype.OnRowCreated = function(NewRow){
}
AjaxGrid.prototype.CreateNewRow = function(){
var newRow = this.OriginalRow.cloneNode(true);
var rowCountBeforeAdded = this.GridView.GetRows().length;
this.GridView.AddRow(newRow);
var rowIndex = rowCountBeforeAdded;
for(colIndex = 0; colIndex < this.Columns.length; colIndex++){
var columnName = this.Columns[colIndex].ColumnName;
switch(this.Columns[colIndex].ColumnType){
case AjaxGridColumnType.UC_DATELOOKUP:
{
var inputs = newRow.cells[colIndex].getElementsByTagName("INPUT");
var txt = null;
var btn = null;
if(inputs[0].type.toLowerCase() == "text".toLowerCase()){
txt = inputs[0];
btn = inputs[1];
}
else{
txt = inputs[1];
btn = inputs[0];
}
txt.setAttribute("id", "txt_r" + rowIndex + "_c_" + colIndex + "_" + columnName);
btn.setAttribute("id", "btn_r" + rowIndex + "_c_" + colIndex + "_" + columnName);
Calendar.setup({inputField: txt.id, ifFormat: "%d.%m.%Y", button: btn.id});
}
break;
case AjaxGridColumnType.UC_DROPDOWNLISTMODEL1:
{
this.GetRow(rowIndex).GetCell(colIndex).TextBoxID.TextBoxElement.setAttribute("id", "txt_r" + rowIndex + "_c_" + colIndex + "_" + columnName);
this.GetRow(rowIndex).GetCell(colIndex).Button.ButtonElement.setAttribute("id", "btn_r" + rowIndex + "_c_" + colIndex + "_" + columnName);
this.GetRow(rowIndex).GetCell(colIndex).TextBoxDescription.TextBoxElement.setAttribute("id", "txt_d" + rowIndex + "_c_" + colIndex + "_" + columnName);
this.GetRow(rowIndex).GetCell(colIndex).TextBoxID.TextBoxElement.setAttribute("name", "txt_r" + rowIndex + "_c_" + colIndex + "_" + columnName);
this.GetRow(rowIndex).GetCell(colIndex).Button.ButtonElement.setAttribute("name", "btn_r" + rowIndex + "_c_" + colIndex + "_" + columnName);
this.GetRow(rowIndex).GetCell(colIndex).TextBoxDescription.TextBoxElement.setAttribute("name", "txt_d" + rowIndex + "_c_" + colIndex + "_" + columnName);
}
break;
}
}
if(this.OnRowCreated){
this.OnRowCreated(this.GetRow(rowIndex));
}
return newRow;
}
function displayHourglassCursor(){
document.body.style.cursor = 'wait';
}
function resetCursor(){
document.body.style.cursor = 'default';
}
AjaxGrid.prototype.OnValidateRow = function(RowIndex, Row){
return true;
}
AjaxGrid.prototype.RemoveRow = function(RowIndex){
displayHourglassCursor();
var theRowIndex = RowIndex;//this.GetDataRowIndex(RowIndex);
this.GridView.RemoveRow(theRowIndex);
resetCursor();
}
AjaxGrid.prototype.OnRowDataBound = function(CurrentGridRow, CurrentDataSourceRow)
{
}
AjaxGrid.prototype.IsRowValid = function(){
return false;
}
AjaxGrid.prototype.AddNewRow = function(){
//var newRow = this.CreateNewRow();//this.OriginalRow.cloneNode(true);
this.CreateNewRow();
//this.GridView.AddRow(newRow);
}
Array.prototype.Counter = 0;
Array.prototype.Add = function(AjaxGridColumnInstance){
this[AjaxGridColumnInstance.ColumnName] = AjaxGridColumnInstance;
this[this.Counter] = AjaxGridColumnInstance;
this.Counter++;
this.length = this.Counter;
}
/*** End of AjaxGrid class ***/
/*** AjaxGridColumns ****/
function ValidateINPUTElement(ColumnTypeString, InputElement, HTMLElement, InputType){
if(!InputElement){
alert('Invalid HTMLElement for ' + ColumnTypeString + ' : ' + HTMLElement);
}
if(!InputElement.type){
alert('InputElement.type is invalid for ColumnTypeString: ' + ColumnTypeString +
', InputElement.tagName: ' + InputElement.tagName + ', HTMLElement.tagName: ' + HTMLElement.tagName +
', InputType : ' + InputType);
}
if(InputElement.type.toLowerCase() != InputType.toLowerCase()){
alert('HTMLElement for ' + ColumnTypeString + ' is not a ' + InputType + ' : ' + HTMLElement.type);
}
}
function UCDropDownListModel3(HTMLElement){
this.TextBoxID = new RegularTextBoxColumn(HTMLElement.childNodes[0].childNodes[0].childNodes[0].rows[0].cells[0].childNodes[0]);
this.Button = new RegularButtonColumn(HTMLElement.childNodes[0].childNodes[0].childNodes[0].rows[0].cells[1].childNodes[0]);
this.ListBox = new RegularListBoxColumn(HTMLElement.childNodes[0].childNodes[0].childNodes[0].rows[1].cells[0].childNodes[0].childNodes[0]);
}
function UCDropDownListModel1(HTMLElement){
this.Elements = new Array();
this.DropDownListModel3 = new UCDropDownListModel3(HTMLElement);
this.TextBoxID = this.DropDownListModel3.TextBoxID;
this.Button = this.DropDownListModel3.Button;
this.ListBox = this.DropDownListModel3.ListBox;
this.TextBoxDescription = new RegularTextBoxColumn(HTMLElement.childNodes[0].childNodes[0].childNodes[0].rows[0].cells[3].childNodes[0]);
this.SetSelectedIndex = function(value){
this.ListBox.SetSelectedIndex(value);
this.Button.SetText("5");
try{
this.Button.ButtonElement.click();
}catch(ex){
alert("SetSelectedIndex Error: " + ex);
}
}
this.GetSelectedIndex = function(value){
return this.ListBox.GetSelectedIndex();
}
}
function UCTextBoxWithID(HTMLElement){
this.TextBoxID = new RegularTextBoxColumn(HTMLElement.tBodies[0].rows[0].cells[0].childNodes[0]);
this.TextBoxDescription = new RegularTextBoxColumn(HTMLElement.tBodies[0].rows[0].cells[2].childNodes[0]);
this.SetID = function(value){
this.TextBoxID.SetText(value);
}
this.GetID = function(){
return this.TextBoxID.GetText();
}
this.SetDescription = function(value){
this.TextBoxDescription.SetText(value);
}
this.GetDescription = function(){
return this.TextBoxDescription.GetText();
}
}
function RegularCheckBoxColumn(HTMLElement){
if(HTMLElement.tagName != "INPUT") HTMLElement = HTMLElement.childNodes[0];
this.CheckBoxElement = HTMLElement;
ValidateINPUTElement("RegularCheckBoxColumn", this.CheckBoxElement, HTMLElement, "checkbox");
this.GetChecked = function(){
return this.CheckBoxElement.checked;
}
this.SetChecked = function(value){
this.CheckBoxElement.checked = value;
}
}
function RegularTextBoxColumn(HTMLElement){
this.TextBoxElement = HTMLElement;
ValidateINPUTElement("RegularTextBoxColumn", this.TextBoxElement, HTMLElement, "text");
this.GetText = function(){
return this.TextBoxElement.value;
}
this.SetText = function(value){
this.TextBoxElement.value = value;
}
}
function RegularButtonColumn(HTMLElement){
this.ButtonElement = HTMLElement;
ValidateINPUTElement("RegularButtonColumn", this.ButtonElement, HTMLElement, "button");
this.GetText = function(){
return this.ButtonElement.value;
}
this.SetText = function(value){
this.ButtonElement.value = value;
}
this.Click = function(){
this.ButtonElement.click();
}
}
function RegularListBoxColumn(HTMLElement){
this.ListBoxElement = HTMLElement;
this.GetText = function(){
return this.ListBoxElement.value;
}
this.SetSelectedIndex = function(value){
this.ListBoxElement.selectedIndex = value;
}
this.GetSelectedIndex = function(value){
return this.ListBoxElement.selectedIndex;
}
}
function getTextBoxAndButton(HTMLElement, ObjectHolder){
var inputs = HTMLElement.getElementsByTagName("INPUT");
var txt = null;
var btn = null;
if(inputs[0].type.toLowerCase() == "text".toLowerCase()){
txt = inputs[0];
if(inputs.length >= 2){
btn = inputs[1];
}
}
else{
if(inputs.length >= 2){
txt = inputs[1];
}
btn = inputs[0];
}
ObjectHolder.TextBoxElement = txt;
ObjectHolder.ButtonElement = btn;
}
function UCDateLookupColumn(HTMLElement){
getTextBoxAndButton(HTMLElement, this);
this.SetDate = function(value){
this.TextBoxElement.value = value;
this.TextBoxElement.onblur();
}
this.GetDateString = function(){
return this.TextBoxElement.value;
}
this.focus = function(){
this.TextBoxElement.focus();
this.TextBoxElement.scrollIntoView();
}
}
function UCTextBoxLookup(HTMLElement){
getTextBoxAndButton(HTMLElement, this);
this.SetText = function(value){
this.TextBoxElement.value = value;
}
this.GetText = function(){
return this.TextBoxElement.value;
}
}
function ValidateSELECTElement(ColumnTypeString, InputElement, HTMLElement, InputType){
if(!InputElement){
alert('Invalid HTMLElement for ' + ColumnTypeString + ' : ' + HTMLElement);
}
if(InputElement.type.toLowerCase() != InputType.toLowerCase()){
alert('HTMLElement for ' + ColumnTypeString + ' with type : ' + InputElement.type + ' is not a ' + InputType + ' : ' + HTMLElement);
}
}
function RegularDropDownListColumn(HTMLElement){
this.DropDownElement = HTMLElement;
ValidateSELECTElement("RegularDropDownListColumn", this.DropDownElement, HTMLElement, "select-one");
this.GetSelectedValue = function(){
return this.DropDownElement.value;
}
this.SetSelectedValue = function(value){
var i = -1;
for(i = 0; i < this.DropDownElement.options.length; i++){
if(this.DropDownElement.options
.value.toLowerCase() = value.toLowerCase()){
break;
}
}
this.SetSelectedIndex(i);
}
this.GetSelectedIndex = function(){
return this.DropDownElement.selectedIndex;
}
this.SetSelectedIndex = function(value){
this.DropDownElement.selectedIndex = value;
}
this.GetSelectedItem = function(){
return new AjaxOptionElement(this.DropDownElement.options[this.GetSelectedIndex()]);
}
}
function AjaxOptionElement(HTMLElement){
this.OptionElement = HTMLElement;
this.GetText = function(){
return this.OptionElement.text;
}
this.GetValue = function(){
return this.OptionElement.value;
}
}
function CombinationCheckboxDropDownListColumn(HTMLElement){
this.CheckBoxElement = new RegularCheckBoxColumn(HTMLElement.parentNode.children[0]);//.parentNode.getElementsByTagName("INPUT"));
this.DropDownElement = new RegularDropDownListColumn(HTMLElement.parentNode.children[1]);//(HTMLElement.parentNode.getElementsByTagName("SELECT"));
}
/*** End of AjaxGridColumns ****/
////////////////////////////////////////////////////////////////////////////////////////////////////