ActiveWidgets • how to make a cell uneditable dynamically

Hi, how to make a cell uneditable dynamically

all cells are uneditable by default, no need to do so.

i am using the input template for the grid and i want to make some cells uneditable based on a condition

I didnot test this but try this

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

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

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>

Thanx a lot carlos, This works fine.

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?

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)

how to make a cell uneditable dynamically

Forum search