how to make a cell uneditable dynamically

Hi, how to make a cell uneditable dynamically

sai

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

sai

June 23,

I didnot test this but try this

obj.getRowTemplate(rowIndex).getItemTemplate(itemIndex).setAttribute("readOnly","true")

Kini

June 24,

I've tried this but it doesn't seem to work, I am using input templates for the columns.

sai

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.
HTH

<html>
<head>
    <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>
    <style>
        .active-controls-grid {height: 100%; font: menu;}
    </style>

    <script>
        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"];
    </script>
</head>
<body>
    <script>

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) { 
            switchToTextMode() 
        } 
        template = this; 
//////////////////////////////////////////
      this.action("AskForEdition"); 
if (editable == "no"){   template = null;  } 
////////////////////////////////////////
else{
        template.element().className += " active-edit-mode "; 
        template.element().innerHTML = editor; 
        editor.element().focus(); 
    editor.setEvent("ondblclick", editor.element().focus()); 
  }
  }

    obj.setEvent("ondblclick", switchToEditMode); 

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

My.Templates.Input.create();
//**********************************
/////////////////////////////////////

    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);

document.write(obj);
    </script>
</body>
</html>

Carlos

June 26,

Thanx a lot carlos, This works fine.

sai

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?

ren

January 9,

Check out this post for a Firefox edit-Template cursor-fix (I think not included in V.1.0.2):
/javascript.forum.3536.13/saving-updates-to-a-database.html

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)

Carlos

January 9,

This topic is archived.

how to make a cell uneditable dynamically

See also:

Search

New Data Grid

Version 2