What's New?

[CLOSED] CheckColumn Interceptor Function

Page 1 of 2 12 LastLast
  1. #1
    Sep 14, 2012, 11:49 AM

    [CLOSED] CheckColumn Interceptor Function

    Hi,

    Related to this thread http://forums.ext.net/showthread.php...n-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.createInterceptor(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.
    Last edited by Daniil; Sep 25, 2012 at 6:58 AM. Reason: [CLOSED]
  2. #2
    Sep 14, 2012, 3: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/#!...ateInterceptor

    It is related to the CHANGELOG item #40.
    https://examples2.ext.net/#/Getting_...nts/CHANGELOG/
  3. #3
    Sep 18, 2012, 8: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?
  4. #4
    Sep 18, 2012, 11:53 AM
    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\CheckColumn.js
  5. #5
    Sep 19, 2012, 7: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?
  6. #6
    Sep 19, 2012, 8:40 AM
    Could you, please, provide a simple sample to test with?
  7. #7
    Sep 19, 2012, 8: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.
  8. #8
    Sep 19, 2012, 11:42 AM
    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>
  9. #9
    Sep 19, 2012, 12: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>
  10. #10
    Sep 19, 2012, 12:56 PM
    Quote Originally Posted by softmachine2011 View Post
    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.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Interceptor for checkbox check event
    By Aparna_B in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 23, 2011, 4:39 AM
  2. checkcolumn
    By pankaj in forum 1.x Help
    Replies: 0
    Last Post: Mar 31, 2010, 3:00 AM
  3. CheckColumn Checked
    By Maia in forum 1.x Help
    Replies: 7
    Last Post: Jan 14, 2010, 9:30 AM
  4. CheckColumn and CheckboxSelectionModel
    By Satyanarayana murthy in forum 1.x Help
    Replies: 6
    Last Post: Nov 25, 2009, 12:47 AM
  5. get value from checkcolumn
    By maxdiable in forum 1.x Help
    Replies: 2
    Last Post: Jul 10, 2009, 6:28 PM

Tags for this Thread

Posting Permissions