PDA

View Full Version : [CLOSED] Disabling checkbox grid column cell based on data.



SymSure
Aug 07, 2012, 9:42 PM
Hi,

How do you achieve the solution posted on this thread

http://forums.ext.net/showthread.php?10059-CLOSED-CheckColumn-disable-enable-depending-on-data

for V2. I want to be able to disable some checkboxes (gray it out) based on the data in the record.

Regards

Daniil
Aug 08, 2012, 6:33 AM
Hi,

Here you are.

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>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var myRenderer = function (value, metadata, record) {
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkheader'],
editable = record.get("test1") === "editable";

if (value) {
cls.push(cssPrefix + 'grid-checkheader-checked');
}

if (!editable) {
cls.push("checkcolumn-disabled-" + (value ? "checked" : "unchecked"));
}

return '<div class="' + cls.join(' ') + '">*</div>';
}
</script>

<style type="text/css">
.checkcolumn-disabled-checked {
background-image: url(resources/images/checked-disabled.gif) !important;
}

.checkcolumn-disabled-unchecked {
background-image: url(resources/images/unchecked-disabled.gif) !important;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:CheckColumn
runat="server"
ID="CheckColumn1"
Text="Checked"
DataIndex="test2"
Editable="true">
<Renderer Fn="myRenderer" />
</ext:CheckColumn>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server">
<Listeners>
<BeforeEdit Handler="if ((e.column.id === 'CheckColumn1') &&
!(e.record.get('test1') === 'editable')) {

return false; //to cancel editing
}"/>
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</body>
</html>

The images:
45884589

SymSure
Aug 09, 2012, 5:25 AM
Thanks that worked