PDA

View Full Version : [CLOSED] Disabling/Enabling a column on checkbox selection/deselection



arjunrvasisht
May 04, 2015, 3:50 PM
I have a gridpanel with 2 columns, One is a normal column field and the other is an editor field which i have inside a component column. On checkbox check and uncheck i want to enable and disable the columns. I could get this done on checkbox selection model's select and deselect handler for Component column. But am not being able to do it for the normal columns. Please help in disabling/enabling a normal column on checkbox selection/deselection.

this is my columns code:


<ColumnModel ID="ColumnModel1">
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="Name" Text="Tier2" Width="270" Hideable="false">

</ext:Column>
<ext:ComponentColumn ID="ComponentColumn2" Namespace="App" runat="server" Editor="true" DataIndex="DisplayName" Width="270" Text="Name As On Metric Upload File" Align="Center">
<Component>
<ext:TextField ID="TextField2" runat="server" Namespace="App">
<Listeners>
<Render Fn="disableTier2DisplayName"></Render>
</Listeners>
</ext:TextField>

</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>


below is the code am calling on checkbox selection model's deselect handler for disabling the component column:



function disableDisAssociatedEmployee3() {
App.mainContentPlaceholder_ComponentColumn2.getCom ponent(record).disable();
}


Like the way I am accessing component column for disabling, how do i access Column1 to disable it.

Daniil
May 05, 2015, 3:07 PM
Hi @arjunrvasisht,

Please clarify what do you exactly mean by disabling a regular Column? Do you need a cell to look disabled?

arjunrvasisht
May 06, 2015, 9:13 AM
Yes Daniil, I want the cell to be liked disabled.

Daniil
May 06, 2015, 4:23 PM
I can suggest the following solution.

Example

<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "1", "text 1", true },
new object[] { "2", "text 2", true },
new object[] { "3", "text 3", true }
};
}
}
</script>

<!DOCTYPE html>

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

<style>
.cell-disabled {
color: gray;
}
</style>

<script>
var disableRenderer = function(value, metaData, record) {
var sm = this.getSelectionModel();

if (record.data.textDisabled) {
metaData.innerCls = "cell-disabled";
}

return value;
};

var onSelect = function(sm, record, index) {
record.set("textDisabled", false);
};

var onDeselect = function(sm, record, index) {
record.set("textDisabled", true);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="text" />
<ext:ModelField Name="textDisabled" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="id" />
<ext:Column runat="server" Text="Text" DataIndex="text">
<Renderer Fn="disableRenderer" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server">
<Listeners>
<Select Fn="onSelect" />
<Deselect Fn="onDeselect" />
</Listeners>
</ext:CheckboxSelectionModel>
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>