On Click Text box and Select Templates - Comments/Suggestions welcom

Click Text box template

/*****************************************************************

    ActiveWidgets Grid 1.0.0 (Free Edition).
    Copyright (C) 2004 ActiveWidgets Ltd. All Rights Reserved. 
    More information at http://www.activewidgets.com/

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.

    Supports editing on Click.
    This is achieved by creating a Div with a input tag and 
    toggling visiblity of the input element

*****************************************************************/

/*

Provides ability to edit the grid control cell on click

*/

if (!window.Prima) Prima=[]; 
if (!Prima.Templates) Prima.Templates=[]; 

Prima.Templates.ClickInput = Active.System.Template.subclass(); 

Prima.Templates.ClickInput.create = function()
{ 
/**************************************************************** 
    Click Input Cell template. 
*****************************************************************/ 

    // ---------- DIV ---------------
    var mainDiv = this.prototype; 

    mainDiv.setTag("div");
    mainDiv.setClass("templates", "box");
    mainDiv.setContent("html", function(){return this.generateHtml();} );
    mainDiv.setAttribute("name", function(){ return this.getName("maindiv"); } ); 

    mainDiv.getName = function(prefix)
    { 
        var r = this.getRowProperty("index"); 
        var c = this.getColumnProperty("index"); 
        if (!r) r = 0; 
        if (!c) c = 0; 
        return prefix + "_" +r+ "_" +c; 
    }

    /** 
     * This function can be overridden to receive change events from the 
     * rendered grid input elements 
     */ 
    mainDiv.onChangeAction = function( newVal, name, row, col ) 
    {
         myData[row][col]=newVal;
         return true;
    } 

    mainDiv.generateHtml = function()
    {
        var row = this.getRowProperty("index"); 
        var col = this.getColumnProperty("index"); 

        // ---------- INPUT ---------------
        var inputDiv = new Active.HTML.DIV;
        inputDiv.setClass("templates","clickinput"); 
        inputDiv.setStyle("display", "none");

        var input = new Active.HTML.INPUT;
        input.setClass("templates", "clickinput");
        input.setAttribute("type", "text");
        input.setAttribute("value", this.getItemProperty("text"));
        input.setEvent("onblur", function(event) { this.makeUneditable( event ); } ); 
    
        // set the content of the display div
        inputDiv.setContent(input.toString());
        
        input.makeUneditable = function(event)
        {
            var originalVal = this.getAttribute("value");
            var currentVal = this.element().value; 			
            if (currentVal!=originalVal) 
            {
                if(mainDiv.onChangeAction( currentVal, name, row, col ) == true) 
                {
                    this.setAttribute("value", currentVal);
                    dispDiv.setContent("html",currentVal);
                }
            }			
            inputDiv.setStyle("display", "none");
            dispDiv.setStyle("display", "block");
            dispDiv.refresh();
        }
        // ---------- INPUT ---------------

        var html = new Array(); 
        html.push(inputDiv);

        var dispDiv = new Active.HTML.DIV;
        dispDiv.setClass("templates", "clickinput");
        dispDiv.setContent("html",this.getItemProperty("text"));
        dispDiv.setEvent("ondblclick", function(event) { this.makeEditable( event ); } ); 

        dispDiv.makeEditable = function(event)
        {
            this.setStyle("display", "none");
            inputDiv.setStyle("display", "block");
            input.element().focus();
        }

        html.push(dispDiv);
        return html.join(""); 
    }
    // ---------- DIV ---------------
}; 

Prima.Templates.ClickInput.create();

Click Select template


Still working on this

/*****************************************************************

    ActiveWidgets Grid 1.0.0 (Free Edition).
    Copyright (C) 2004 ActiveWidgets Ltd. All Rights Reserved. 
    More information at http://www.activewidgets.com/

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.

    Supports editing on Click.
    This is achieved by creating a Div with a input tag and 
    toggling visiblity of the input element

*****************************************************************/

/*

Provides ability to edit the grid control cell on click

*/

if (!window.Prima) Prima=[]; 
if (!Prima.Templates) Prima.Templates=[]; 

Prima.Templates.ClickSelect = Active.System.Template.subclass(); 
Prima.Templates.ClickSelect.prototype._options = new Array();

Prima.Templates.ClickSelect.create = function()
{ 
/**************************************************************** 
    Click Input Cell template. 
*****************************************************************/ 

    // ---------- DIV ---------------
    var mainDiv = this.prototype; 

    mainDiv.setTag("div");
    mainDiv.setClass("templates", "box");
    mainDiv.setContent("html", function(){return this.generateHtml();} );
    mainDiv.setAttribute("name", function(){ return this.getName("maindiv"); } ); 

    mainDiv.getName = function(prefix)
    { 
        var r = this.getRowProperty("index"); 
        var c = this.getColumnProperty("index"); 
        if (!r) r = 0; 
        if (!c) c = 0; 
        return prefix + "_" +r+ "_" +c; 
    }

    /** 
     * This function can be overridden to receive change events from the 
     * rendered grid input elements 
     */ 
    mainDiv.onChangeAction = function( newVal, name, row, col ) 
    {
         myData[row][col]=newVal;
         return true;
    } 

    //------------------------------------------------------------ 
    //Add the text value pair to the select dropdown list 
    //------------------------------------------------------------ 
    mainDiv.addOption = function( text, value ) 
    { 
        this._options.push( new Array( value ? value : text, text) ); 
    } 

    mainDiv.clearOptions = function() 
    { 
        this._options = new Array(); 
    } 
    
    mainDiv.getOptions = function() 
    { 
        return this._options;
    } 

    mainDiv.generateHtml = function()
    {
        var row = this.getRowProperty("index"); 
        var col = this.getColumnProperty("index"); 
        var textVal = this.getItemProperty("text");
        var inputOptions = this._options;

        // ---------- INPUT ---------------
        var inputDiv = new Active.HTML.DIV;
        inputDiv.setClass("templates","clickinput"); 
        inputDiv.setStyle("display", "none");

        var input = new Active.System.HTML;
        input.setTag("select"); 
        input.setClass("templates", "input"); 
        input.setEvent("onblur", function(event) { this.makeUneditable( event ); } ); 
        input.setContent( "options", function() 
        { 
            var optionsHTML = new Array(); 
            var foundMe = false; 
            for( i=0; i< inputOptions.length; i++ )
            { 
                var oTag = new Active.System.HTML(); 
                var val = inputOptions[i][0]; 
                oTag.setTag("option"); 
                oTag.setAttribute( "value", val ); 
                oTag.setContent("text",inputOptions[i][1]); 		
                if ( val==textVal )
                {
                    oTag.setAttribute( "selected","true" ); 
                    foundMe = true; 
                } 
                optionsHTML.push( oTag ); 
            } 
            
            if (!foundMe) 
            { 
                optionsHTML.push("<option value=\""+textVal+"\" selected=\"true\">"+textVal+"</option>"); 
            } 
            return optionsHTML.join(""); 
        }); 

        inputDiv.setContent(input.toString());
        
        input.makeUneditable = function(event)
        {
            var originalVal = this.getAttribute("value");
            var currentVal = this.element().value;
            if (currentVal!=originalVal) 
            {
                if(mainDiv.onChangeAction( currentVal, name, row, col ) == true) 
                {
                    this.setAttribute("value", currentVal);

                    // obtain the text to display
                    var bFound = false;
                    for( i=0; i< inputOptions.length; i++ )
                    { 
                        var val = inputOptions[i][0]; 
                        var text = inputOptions[i][1];

                        if(val == currentVal)
                        {
                            bFound = true;
                            dispDiv.setContent("html",text);
                            break;
                        }
                    }

                    if(bFound == false)
                    {
                            dispDiv.setContent("html",currentVal);
                    }
                }
            }			
            inputDiv.setStyle("display", "none");
            dispDiv.setStyle("display", "block");
            dispDiv.refresh();
        }
        // ---------- INPUT ---------------

        var html = new Array(); 
        html.push(inputDiv);

        var dispDiv = new Active.HTML.DIV;
        dispDiv.setClass("templates", "clickinput");
        dispDiv.setContent("html",this.getItemProperty("text"));
        dispDiv.setEvent("ondblclick", function(event) { this.makeEditable( event ); } ); 

        dispDiv.makeEditable = function(event)
        {
            this.setStyle("display", "none");
            inputDiv.setStyle("display", "block");
            input.element().focus();
        }

        html.push(dispDiv);
        return html.join(""); 
    }
    // ---------- DIV ---------------
}; 

Prima.Templates.ClickSelect.create();

Just wanted to add a note that these templates borrow heavily from the template I found on the messages forum

This code may be very slow for large amount of data. I just posted a different solution:

http://www.activewidgets.com/messages/1394-0.htm

Please note that data editing is not part of the released version and might be difficult (or even not possible) to implement.

Thanks for your template; I will use that.

I have one question Alex. Currently we are looking for a grid with editing ability using a combo box and edit box only. Based on the Edit box template you have provided I have modified the select template also. With this we are set for now.

Since you have written that data editing is difficult or impossible I was wondering what you have in mind. We are implementing a project here and would probably require licenses for your grid, however your statement above has made us wait and think. I would like know what exactly are your concerns, and should we proceed with the active widgets grid.

Finally I have to implement a couple of other features on you grid to complete my task, please let me know in case you think these feature are implementable

(1) Submitting changes in the grid
(2) Coloring rows with different colors + preventing editing of a particular row.

Other questions are regarding the future
(1) In which version do you expect to release treegrid?
(2) How long do you expect to support the Grid?
(3) Would you be changing the grid soon to allow for editing ability?

Thanks and once again congratulations on your wonderful project

Hi Alex,

Could you please take me minute and answer my question? Really appreciate your assitance

Yes, sure. Sorry for the delays.

First, by saying data editing might be difficult I was trying to warn you that because this functionality is not part of the released product there is a lot of unknowns. The framework was designed to fully support data editing but so far the testing on this part was minimal. If you are comfortable with the source and can live with what you have now - go ahead. Buying the commercial license will get you enough attention from my side to fix broken parts but if you want to be ahead of the game the enhancements is still your job.

Now your questions:

> Submitting changes in the grid
The existing data models do not support this yet but I don't see any problems here.

> Coloring rows with different colors + preventing editing of a particular row.
Easy. Look at the cell coloring example (\examples\grid\cell colors.htm).

> In which version do you expect to release treegrid?
Q1 2005

> How long do you expect to support the Grid?
As long as enough people are buying the commercial licenses.

> Would you be changing the grid soon to allow for editing ability?
Yes, the editing should be in Q3 2004 release. Very much in line with the example I've just made.

How to place several grids with more than one select, where each select eh different one of the other?

Bhaskar, about your Click Select Template, I have two things I'm trying to work on.

When the page loads, it displays the text, not the value. For example, I load an option like..

dropBox1.addOption( "Yes","1");

The gird will show '1'. But once I click on the gird, the dropbox will appear with 'yes' and then if i click off, the yes will stay up. I'm just trying to make it on loadup, to show the text, and not the value.

Also, it saves the choice (text) i pick on the grid with text, but when I grab the value, it still stays at '1', so it's not saving the new choice (value) that I picked.

Hi Bhasker,

The select boxes do not fit into the grid columns perfectly. Since I new to this forum. Can you let me know how to set the template to a particular column of the grid.

Have you modified your template file since this one, Bhaskar?

Hi,

Yes I have modified the template and am using it in a application I developed. Pasting the template below hope it helps

Thanks

if (!window.Prima) Prima=[]; 
if (!Prima.Templates) Prima.Templates=[]; 

Prima.Templates.StatusSelect = Active.Templates.Text.subclass(); 
Prima.Templates.StatusSelect.prototype._options = new Array();

Prima.Templates.StatusSelect.create = function() 
{ 
    var obj = this.prototype; 

    //------------------------------------------------------------ 
    //Add the text value pair to the select dropdown list 
    //------------------------------------------------------------ 
    obj.addOption = function( text, value ) 
    { 
        this._options.push( new Array( value ? value : text, text) ); 
    } 

    obj.clearOptions = function() 
    { 
        this._options = new Array(); 
    } 
    
    obj.getOptions = function() 
    { 
        return this._options;
    } 

    // editor is not part of the template, 
    // there is only one single instance of editor object. 
    var editor = new Active.HTML.DIV; 
    editor.setTag("select");
    editor.setClass("templates", "input"); 
    editor.setAttribute("type", "text"); 
    editor.setEvent("onblur", function(event) { this.switchToTextMode( event ); } ); 
    editor.setContent( "options", function() 
    {
        var text = template.getItemProperty("text");
        var inputOptions = obj._options;

        var optionsHTML = new Array(); 
        for( i=0; i< inputOptions.length; i++ )
        { 
            var oTag = new Active.System.HTML(); 
            var val = inputOptions[i][0]; 
            var txt = inputOptions[i][1];
            oTag.setTag("option"); 
            oTag.setAttribute( "value", val ); 
            oTag.setContent("text",inputOptions[i][1]); 		
            if ( text==txt )
            {
                oTag.setAttribute( "selected","true" ); 
            } 
            optionsHTML.push( oTag ); 
        } 
        
        return optionsHTML.join(""); 
    }); 

    // template variable provides temporary reference 
    // to the parent template during edit mode. 
    var template; 

    function switchToEditMode()
    {
        template = this; 
        template.element().style.padding = 0; 
        template.element().innerHTML = editor; 
        editor.element().focus(); 
    } 

    obj.setEvent("ondblclick", switchToEditMode); 

    function switchToTextMode()
    { 
        var originalText = template.getItemProperty("text");
        var value = editor.element().value; 
        var selectedIndex = editor.element().selectedIndex;
        var text = editor.element().options[selectedIndex].text;

        // we want to compare the text in the grid
        // grid display only the text
        if(originalText != text)
        {
            template.setItemProperty("text", text);
            template.setItemProperty("value", value); 
            if(obj.onChangeEvent)
            {
                obj.onChangeEvent();
            }
        }
        template.refresh(); 
        template = null; 
    }

    obj.onChangeEvent = function()
    {
        // alert("User must override this function to recieve the events");
    }


    editor.setEvent("onblur", switchToTextMode); 
}; 

Prima.Templates.StatusSelect.create();

I get an error with this line, under SwitchToTextMode()

template.setItemProperty("value", value);

I just removed it, and things seem to work fine. Right now, this is how i populate the boxes..

dropBox4.addOption( "Ordered",1 );
dropBox4.addOption( "Lost Order",2 );
dropBox4.addOption( "Pending 0 To 30 Days",3 );
dropBox4.addOption( "Pending 30 To 60 Days",4 );
dropBox4.addOption( "Budget Proposal Only",5 );
obj.setColumnTemplate(dropBox4,6);

Soon I'll be making this information come from an XML file instead of hardcoding it in.

But my question is, will my program still work without it assigning the new vlaue? (the line I took out)?

Hi John,


I am not certain why you are getting the error. If you provide me more details I can try looking at it. I doubt that the program will work if the switch to text mode function fails


Thanks

Here is the SwitchToTextMode()

if(originalText != text) 
        { 
            template.setItemProperty("text", text); 
            
            alert(value);
            
            template.setItemProperty("value", value);

I get the error:
Object doesn't support this property or method

I do get the right 'value' in there, but the line template.setItemProperty("value", value) causes the error. I comment the line out, and everything works fine.

When I do a getItemProperty("value"), i get the text of the box, in lower case.

Hi Bhaskar, just a simple question (I hope),
I try to use your "Click Text box template" on two grids in the same page, but even I try with separates file.js and rename most of it's variables and template names , only one of them is working.
Have you ever experienced this?
Thanks

Sorry, another one : I can't edit the empty cells, (the html is not shown) any thoughts ?
Thanks...again

I am using the module to edit empty cells so I think this would work.

Have you set the editor the column where you see the empty cell.

Thanks

Hi,

Anyway I would recommed you move to the editor implemented by Alex.


Thanks

Hi,

Listed below is the snippet of the Select template sample code. If I apply the select Template to two columns ( say apply the obj.setColumnTemplate(dropBox3,0) & obj.setColumnTemplate(dropBox4,1)). The Select object shows the same number of items for both the columns (i.e column 0 and column 1). Can any of you let me know what the problem here might be ...

<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>

<!-- grid format -->
<style>
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>

<!-- grid data -->
<script>
if (!window.Prima) Prima=[];
if (!Prima.Templates) Prima.Templates=[];

Prima.Templates.StatusSelect = Active.Templates.Text.subclass();
Prima.Templates.StatusSelect.prototype._options = new Array();

Prima.Templates.StatusSelect.create = function()
{
var obj = this.prototype;

//------------------------------------------------------------
//Add the text value pair to the select dropdown list
//------------------------------------------------------------
obj.addOption = function( text, value )
{
this._options.push( new Array( value ? value : text, text) );
}

obj.clearOptions = function()
{
this._options = new Array();
}

obj.getOptions = function()
{
return this._options;
}

// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.DIV;
editor.setTag("select");
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setEvent("onblur", function(event) { this.switchToTextMode( event ); } );
editor.setContent( "options", function()
{
var text = template.getItemProperty("text");
var inputOptions = obj._options;

var optionsHTML = new Array();
for( i=0; i< inputOptions.length; i++ )
{
var oTag = new Active.System.HTML();
var val = inputOptions[i][0];
var txt = inputOptions[i][1];
oTag.setTag("option");
oTag.setAttribute( "value", val );
oTag.setContent("text",inputOptions[i][1]);
if ( text==txt )
{
oTag.setAttribute( "selected","true" );
}
optionsHTML.push( oTag );
}

return optionsHTML.join("");
});

// template variable provides temporary reference
// to the parent template during edit mode.
var template;

function switchToEditMode()
{
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
}

obj.setEvent("ondblclick", switchToEditMode);

function switchToTextMode()
{
var originalText = template.getItemProperty("text");
var value = editor.element().value;
var selectedIndex = editor.element().selectedIndex;
var text = editor.element().options[selectedIndex].text;

// we want to compare the text in the grid
// grid display only the text
if(originalText != text)
{
template.setItemProperty("text", text);
template.setItemProperty("value", value);
if(obj.onChangeEvent)
{
obj.onChangeEvent();
}
}
template.refresh();
template = null;
}

obj.onChangeEvent = function()
{
// alert("User must override this function to recieve the events");
}


editor.setEvent("onblur", switchToTextMode);
};

Prima.Templates.StatusSelect.create();
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];

var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<script>

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// set number of rows/columns
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 5);

// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});

// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
var dropBox3 = new Prima.Templates.StatusSelect;
dropBox3.addOption( "MSFT",1 );
dropBox3.addOption( "ORCL",2 );
dropBox3.addOption( "SYMC",3 );
obj.setColumnTemplate(dropBox3,0);

var dropBox4 = new Prima.Templates.StatusSelect;
dropBox4.addOption( "Microsoft Corporation",1 );
dropBox4.addOption( "Oracle Corporation",2 );
dropBox4.addOption( "Symantec Corporation",3 );
obj.setColumnTemplate(dropBox4,1);

// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});

// write grid html to the page
document.write(obj);

</script>
</body>
</html>

I'm not sure if I read your description correctly but your asking why both columns show 3 items....

That is because you added 3 items to both boxes:

var dropBox3 = new Prima.Templates.StatusSelect;
dropBox3.addOption( "MSFT",1 );
dropBox3.addOption( "ORCL",2 );
dropBox3.addOption( "SYMC",3 );
obj.setColumnTemplate(dropBox3,0);

var dropBox4 = new Prima.Templates.StatusSelect;
dropBox4.addOption( "Microsoft Corporation",1 );
dropBox4.addOption( "Oracle Corporation",2 );
dropBox4.addOption( "Symantec Corporation",3 );
obj.setColumnTemplate(dropBox4,1);