Editable row?

Hi !

Is it posibble to have editable rows within the grid ?

For example a want to create a row that has 3 columns : the first column has an EDIT control, the second a COMBOBOX and the third one a CHECKBOX...

Thanks,
Vasile

As far as i know, cant be, but lets see what the developer says,

at the end, a Grid without edition capabilities, isnt a practical grid, and cant be aplied in a final application.

No, not in the current version. Today the grid has only two types of cell templates: text and image, both read-only. The grid itself does support editing (i.e. passing modified values back to the data model). So the only thing missing is the cell templates (editors). Which should come relatively soon...

I'm almost done adding editing, assuming mysql / php backend.. However, it's annoying that events like highlight and sequences like SHIFT+END or SHIFT+HOME don't work inside the grid. What's up with that?

The text selection is disabled by default (see source/lib/system/control.js). You can enable it for the grid (or better for your editable cell template only) using code like this:

obj.setEvent("onselectstart", function(event){event.cancelBubble = true});

This is how I would start building edit box cell template:

<style>
.active-templates-edit INPUT {
width: 100%;
height: 100%;
border: none;
font: menu;
}
</style>


<script>
Active.Templates.Edit = Active.System.Template.subclass();

Active.Templates.Edit.create = function(){
var obj = this.prototype;
obj.setClass("templates", "edit");
obj.setEvent("onselectstart", function(event){event.cancelBubble = true});

var input = new Active.HTML.INPUT;
input.setAttribute("value", function(){return this.getItemProperty("text")});

obj.setContent("input", input);
};

Active.Templates.Edit.create();
</script>


<script>
var obj = new Active.Controls.Grid;
obj.setTemplate("column", new Active.Templates.Edit);
...
</script>

Hello,
First of all, this is a very well written grid.
I am new to Javascript and CSS, but learning. So sorry if my questions are really silly.

I was looking for a grid on the web that would give me copy/paste and cell editing. I could not find one for free. I got this grid and implemented the copy/paste functionality as per my requirement.
Now, stuck with cell editing. I read this forum. Added the above mentioned code and also got the grid in an in cell edit mode.
But now, reading the data from Grid and placing it to the Array sitting behind on tab out it is not happening.

I don't have clue how to do it. Any suggestions would be helpfull?

Thanks,

In your column template you're probably calling this.getProperty("item/text") to get the cell content. To send the data back you need to call this.setProperty("item/text") inside a column template AND implement obj.setDataText(text) method on the grid itself.

I've implemented the above, and would like to receive events when the content in one of the cells changes. So far I've been unsuccessful.
I've tried

obj.setEvent("oncontextmenu", null);
obj.setEvent("onselectstart", null);

plus

obj.setAction("change", function(src){alert("change");});

or

obj.setEvent("onchange", function(event){alert("change");});

Does anyone have any Ideas?

You can try:

var row =  obj.getTemplate("row");
row.setEvent("onChange", function(){this.action("CellChanged")});
obj.setTemplate("row", row);
var Changed = function(src){alert(this.getDataText(src.getProperty
     ("item/index"),YourColumnNumber))};
obj.setAction("CellChanged",Changed );

Alex, has this feature been implemented now? If not, any plans for editable rows to be supported?

I would like to sugget you add the year to the posting date.

Thank you!