Hello again!
There is a way to achieve this using Renderer.
But to cancel editing I suggest to use the BeforeEdit event as before.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.Store.Primary;
store.DataSource = new object[] {
new object[] {"non-editable", true },
new object[] {"editable", true },
new object[] {"non-editable", false },
new object[] {"editable", false }
};
store.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var myRenderer = function(value, metadata, record) {
metadata.css += " x-grid3-check-col-td";
var editable = (record.get("test1") == "editable");
return '<div class="x-grid3-check-col' + (value ? "-on" : "") +
" x-grid3-cc-" + this.dataIndex +
(!editable ? " myDisabledClass" + (value ? "-on" : "") : "") +
'"> </div>';
}
</script>
<style type="text/css">
.myDisabledClass-on {
background-image: url(Images/checked-disabled.gif) !important;
}
.myDisabledClass {
background-image: url(Images/unchecked-disabled.gif) !important;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:CheckColumn
ColumnID="CheckColumn1"
Header="Checked"
DataIndex="test2"
Editable="true">
<Renderer Fn="myRenderer" />
</ext:CheckColumn>
</Columns>
</ColumnModel>
<Listeners>
<BeforeEdit Handler="if ((e.grid.getColumnModel().getIndexById('CheckColumn1') == e.column) &&
(e.record.get('test1') == 'non-editable')) {
return false; //to cancel editing
}"/>
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>
I attached the images that I used in the example.
Just put them to an Images folder within your solution folder or set a respective url.
