3.0 beta 2

how to make a cell uneditable dynamically

Hi, how to make a cell uneditable dynamically
June 22,
all cells are uneditable by default, no need to do so.
Jim Hunter
June 22,
i am using the input template for the grid and i want to make some cells uneditable based on a condition
June 23,
I didnot test this but try this


June 24,
I've tried this but it doesn't seem to work, I am using input templates for the columns.
June 25,
To do it, you need to modify "a few" the templates involved asking for a global variable-value switched inside a new Action defined previously for the object (obj.setAction("xxx")).
I made you an example that only allows to edit any cell avobe line 5.

    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
    <link href="lib/grid.css" rel="stylesheet" type="text/css" ></link>
    <script src="lib/grid.js"></script>
        .active-controls-grid {height: 100%; font: menu;}

        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"],
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"]
        var myColumns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];

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

// ************************************************* 
//    Input Cell Template. 
// *************************************************** 
My.Templates.Input = Active.Templates.Text.subclass(); 

My.Templates.Input.create = function(){ 
    var obj = this.prototype; 

//    editor is not part of the template, 
//    there is only one single instance of editor object. 
    var editor = new Active.HTML.INPUT; 
    editor.setClass("templates", "input"); 
    editor.setAttribute("type", "text"); 
    editor.setAttribute("value", function(){ 
        return template.getItemProperty("text"); 

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

    function switchToEditMode(){ 
        if (template) { 
        template = this; 
if (editable == "no"){   template = null;  } 
        template.element().className += " active-edit-mode "; 
        template.element().innerHTML = editor; 
    editor.setEvent("ondblclick", editor.element().focus()); 

    obj.setEvent("ondblclick", switchToEditMode); 

    function switchToTextMode(){ 
        var value = editor.element().value; 
        template.setItemProperty("text", value); 
        template = null; 
    editor.setEvent("onblur", switchToTextMode); 


    var obj = new Active.Controls.Grid;
    obj.setRowProperty("count", 10);
    obj.setColumnProperty("count", 5);
    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setDataText = function(value, i, j){myData[i][j]=value}
    obj.setColumnProperty("text", function(i){return myColumns[i]});
var editable = "";

obj.setAction("AskForEdition", function(src){ 
 if (src.getRowProperty("index") > 4 ){editable = "no"};
else {editable = "yes"}

var myvar0 = new My.Templates.Input;
var myvar1 = new My.Templates.Input;
var myvar2 = new My.Templates.Input;
var myvar3 = new My.Templates.Input;
var myvar4 = new My.Templates.Input;

obj.setColumnTemplate(myvar0, 0);
obj.setColumnTemplate(myvar1, 1);
obj.setColumnTemplate(myvar2, 2);
obj.setColumnTemplate(myvar3, 3);
obj.setColumnTemplate(myvar4, 4);

June 26,
Thanx a lot carlos, This works fine.
June 26,
beautiful.but after modified like this,it can't active when use other browser except ie.second.I want use some other editors(or selectors) not just input,such as textarea,select(a list of option)...what can we do?modify the input template?
January 9,
Check out this post for a Firefox edit-Template cursor-fix (I think not included in V.1.0.2):

Regarding your second question , the best choice is using a separate form, (where you can conditionally enable/disable editing on each control ), especially if need to use some data-validation, but for simple cases, is not a big effort to add two lines to a few custom templates.
(Or maybe I could not find any better solution)
January 9,

This topic is archived.

See also:

Back to support forum


Version 2

Looking for AW 2.6 ?
The old site is here.