On Click Edit

Hi Alex,

Congratulations on the development of a wonderful grid. I workfor an organization which would like to use a grid in one of their applications. Some of our options were WebGrid, Active Widget ...

We are currently pursuing ActiveWidgets since we felt this would be a good match. If we are able to implement additional functionality we would use this.

I am a newbie in javascript and am trying to add some functionality to the grid that we require for the final implementation.

(1) on click edit and (2) submission of grid data are my immediate concerns

Based on the samples and other forum messages I read I have implemented "on click edit template". Can you please check and let me know if I am going in the right direction.

/*

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) 
            {
                this.setAttribute("value", currentVal);
                if(mainDiv.onChangeAction( currentVal, name, row, col ) == true) 
                {
                    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("onclick", 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();