PDA

View Full Version : [CLOSED] CheckColumn Interceptor Function



softmachine2011
Sep 14, 2012, 12:49 PM
Hi,

Related to this thread http://forums.ext.net/showthread.php?13542-CLOSED-CheckColumn-in-GridPanel I'm migrating this to Ext.NET 2.1.

This is the final JS code that we implement:



onBeforeRender: function () {
Ext.ux.CheckColumn.prototype.onMouseDown = Ext.ux.CheckColumn.prototype.onMouseDown.createInt erceptor(myInterceptor);
},

myInterceptor: function (e, t) {
if (this.editable && t.className && Ext.fly(t).hasClass("x-grid3-cc-" + this.dataIndex)) {
var rIndex = this.grid.getView().findRowIndex(t);

var record = this.grid.store.getAt(rIndex);

var cIndex = record.fields.keys.indexOf(this.dataIndex);
var titulo = record.data[record.fields.items[1].name];
var total = record.data[record.fields.items[2].name];

if (record.fields.items[1].name == this.dataIndex)
titulo = !titulo;

if (record.fields.items[2].name == this.dataIndex)
total = !total;

if (!(titulo || total)) {
record.data[record.fields.items[3].name] = false;
}

return (cIndex == 3 && (titulo || total)) || cIndex != 3;
}

return false;
},


Right now, how can I use the interceptor? If you could tell me this, migrate the other function will be easy.

Daniil
Sep 14, 2012, 4:07 PM
Hi,

This way.

Ext.ux.CheckColumn.prototype.onMouseDown = Ext.Function.createInterceptor(Ext.ux.CheckColumn. prototype.onMouseDown, myInterceptor);
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Function-method-createInterceptor

It is related to the CHANGELOG item #40.
http://examples2.ext.net/#/Getting_Started/Release_Documents/CHANGELOG/

softmachine2011
Sep 18, 2012, 9:31 AM
Hi,

Interceptor seems to work or not crashes like before.

But replaced function doesn't fire...

I adapted your test case of v1.x and have the same behaviour



<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[] { true },
new object[] { false },
new object[] { true }
};
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 onBeforeRender = function () {
Ext.ux.CheckColumn.prototype.onMouseDown = Ext.Function.createInterceptor(Ext.ux.CheckColumn. prototype.onMouseDown, interceptor);
}
var interceptor = function (e, t) {
alert('hi!');
if (this.editable && t.className && Ext.fly(t).hasClass("x-grid3-cc-" + this.dataIndex)) {
var rIndex = this.grid.getView().findRowIndex(t),
dataIndex = this.dataIndex,
record = this.grid.store.getAt(rIndex),
value = record.data[this.dataIndex];
return rIndex === 0 || rIndex === 2;
}
return false;
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:CheckColumn runat="server" Text="Test" DataIndex="test" Editable="true" />
</Columns>
</ColumnModel>
<Listeners>
<BeforeRender Fn="onBeforeRender" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>


Could you help me?

Daniil
Sep 18, 2012, 12:53 PM
Yes, there is no onMouseDown function anymore. You should look into the processEvent function. Here is the CheckColumn script.

<Ext.NET sources root>\Ext.Net\Build\Ext.Net\extnet\src\grid\column\Chec kColumn.js

softmachine2011
Sep 19, 2012, 8:05 AM
Well possibly I use 'checkchange' event because is the event that do the same for me.

Like this:
ASPX


<ext:CheckColumn runat="server" DataIndex="Titulo" Width="40" Text="Header Column
Editable="true">
<Listeners>
<CheckChange Fn="MyNamespace.onColumnCheckChange" />
</Listeners>
</ext:CheckColumn>


JS

onColumnCheckChange: function (column, rowIndex, record, eOpts) {
if (someCondition)
record.set('MyDataIndex', true || false);
}

With this I can set value of other cell than clicked, and with get function I can obtain value from the cells based on his data index.

But now my problem is how can I obtain a determined cell based on index or dataindex to enable or disable the check input?

For clarify my requirements:

I have a gridpanel with N rows.
Each row have 4 columns (1 normal column and 3 checkcolumn)
Last check column must be enabled only when any of other check columns are checked in his own row. And if the result is that last check must be disabled, it must be unchecked too.


I think that obtaining checkbox elements in the row I can perform this, in fact now I only need to obtain last checkbox element to enable or disable it, could you help me?

Daniil
Sep 19, 2012, 9:40 AM
Could you, please, provide a simple sample to test with?

softmachine2011
Sep 19, 2012, 9:59 AM
Hi, here you are the test case:



<!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 onColumnCheckChange = function (column, rowIndex, record, eOpts) {
if (record.get('MyCheck1') == false && record.get('MyCheck2') == false) {
record.set('MyCheck3', false);
//TODO: MyCheck3 of this row would be disabled
}
else {
//TODO: MyCheck3 of this row would be enabled
}
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="MyText" Type="String" />
<ext:ModelField Name="MyCheck1" Type="Boolean" />
<ext:ModelField Name="MyCheck2" Type="Boolean" />
<ext:ModelField Name="MyCheck3" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="MyText" DataIndex="MyText" />
<ext:CheckColumn runat="server" Text="MyCheck1" DataIndex="MyCheck1" Editable="true">
<Listeners>
<CheckChange Fn="onColumnCheckChange" />
</Listeners>
</ext:CheckColumn>
<ext:CheckColumn runat="server" Text="MyCheck2" DataIndex="MyCheck2" Editable="true">
<Listeners>
<CheckChange Fn="onColumnCheckChange" />
</Listeners>
</ext:CheckColumn>
<ext:CheckColumn runat="server" Text="MyCheck3" DataIndex="MyCheck3" Editable="true">
<Listeners>
<CheckChange Fn="onColumnCheckChange" />
</Listeners>
</ext:CheckColumn>
</Columns>
</ColumnModel>

</ext:GridPanel>
</form>
</body>
</html>


Only I need to perform actions in TODO comments.

Daniil
Sep 19, 2012, 12:42 PM
Thank you for the sample. I just needed to add some test data.

I can suggest the following solution.

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.GetStore();
store.DataSource = new object[]
{
new object[] { "test" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

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

<script type="text/javascript">
var onCheckChange = function (column, rowIndex, record, checked) {
if (record.get('MyCheck1') === false && record.get('MyCheck2') === false) {
record.set('MyCheck3', false);
}
}

var onMyCheck3BeforeCheckChange = function (column, rowIndex, record, checked) {
return record.get('MyCheck1') === true || record.get('MyCheck2') === true;
};
</script>
</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="MyText" Type="String" />
<ext:ModelField Name="MyCheck1" Type="Boolean" />
<ext:ModelField Name="MyCheck2" Type="Boolean" />
<ext:ModelField Name="MyCheck3" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="MyText" DataIndex="MyText" />
<ext:CheckColumn
runat="server"
Text="MyCheck1"
DataIndex="MyCheck1"
Editable="true">
<Listeners>
<CheckChange Fn="onCheckChange" />
</Listeners>
</ext:CheckColumn>
<ext:CheckColumn
runat="server"
Text="MyCheck2"
DataIndex="MyCheck2"
Editable="true">
<Listeners>
<CheckChange Fn="onCheckChange" />
</Listeners>
</ext:CheckColumn>
<ext:CheckColumn
runat="server"
Text="MyCheck3"
DataIndex="MyCheck3"
Editable="true">
<Listeners>
<BeforeCheckChange Fn="onMyCheck3BeforeCheckChange" />
</Listeners>
</ext:CheckColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>

softmachine2011
Sep 19, 2012, 1:34 PM
Hi,

I have an older revision of Ext.NET 2.1 (rev 4283) and BeforeCheckChange Listener doesn't exist, but if your code works I understand that before checking check3 if condition is true, returns false to don't allow check.

But my requirement is if the condition is true, check3 control must disable to not allow user check it.

I merge your example with mine, because I have some test data, but it isn't important.



<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[] { "Level 1" , true , false , true },
new object[] { "Level 2" , true , false , false },
new object[] { "Level 3" , false , false , 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 onColumnCheckChange = function (column, rowIndex, record, eOpts) {
if (record.get('MyCheck1') == false && record.get('MyCheck2') == false) {
record.set('MyCheck3', false);
//TODO: MyCheck3 of this row would be disabled
}
else {
//TODO: MyCheck3 of this row would be enabled
}
}
var onCheckChange = function (column, rowIndex, record, checked) {
if (record.get('MyCheck1') === false && record.get('MyCheck2') === false) {
record.set('MyCheck3', false);
}
}
var onMyCheck3BeforeCheckChange = function (column, rowIndex, record, checked) {
return record.get('MyCheck1') === true || record.get('MyCheck2') === true;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="MyText" Type="String" />
<ext:ModelField Name="MyCheck1" Type="Boolean" />
<ext:ModelField Name="MyCheck2" Type="Boolean" />
<ext:ModelField Name="MyCheck3" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="MyText" DataIndex="MyText" />
<ext:CheckColumn runat="server" Text="MyCheck1" DataIndex="MyCheck1" Editable="true">
<Listeners>
<CheckChange Fn="onCheckChange" />
</Listeners>
</ext:CheckColumn>
<ext:CheckColumn runat="server" Text="MyCheck2" DataIndex="MyCheck2" Editable="true">
<Listeners>
<CheckChange Fn="onCheckChange" />
</Listeners>
</ext:CheckColumn>
<ext:CheckColumn runat="server" Text="MyCheck3" DataIndex="MyCheck3" Editable="true">
<Listeners>
<BeforeCheckChange Fn="onMyCheck3BeforeCheckChange" />
</Listeners>
</ext:CheckColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Sep 19, 2012, 1:56 PM
But my requirement is if the condition is true, check3 control must disable to not allow user check it.


Returning false from a BeforeCheckChange listener prevents checking.

Are you able to test my sample with the latest sources? I think it should behave as you need.

softmachine2011
Sep 19, 2012, 2:12 PM
Returning false from a BeforeCheckChange listener prevents checking.

Are you able to test my sample with the latest sources? I think it should behave as you need.

Yes I understand you, but this isn't my requirement. I want to disable or enable the checkbox, not check or uncheck it.

Daniil
Sep 19, 2012, 3:40 PM
Do you need the CheckBox looks disabled?

softmachine2011
Sep 19, 2012, 3:41 PM
Yes, this is what I want

Daniil
Sep 19, 2012, 3:54 PM
Then, I think, it needs to override the default Renderer of the CheckColumn.

softmachine2011
Sep 19, 2012, 4:00 PM
And when is fired the renderer, when I check another column?

In that case it could be possible to use a renderer that verify column 1 and 2 values to draw an input with or without disable property.

Really there is no way to get checkbox element?

Daniil
Sep 19, 2012, 4:43 PM
And when is fired the renderer, when I check another column?

It is called each time when a row is refreshed. Editing any column causes the row to be refreshed



In that case it could be possible to use a renderer that verify column 1 and 2 values to draw an input with or without disable property.

Really there is no way to get checkbox element?

There is just a <div> with a respective CSS background-image. It would be too heavyweight if there will be checkboxes for each row.

So, returning false from a BeforeTabChange listener and applying required CSS to get the "checkbox" looks disabled appears to be the best solution.