[CLOSED] Enable/disable checkbox column in grid panel (grid using editablegrid plugin)

  1. #1

    [CLOSED] Enable/disable checkbox column in grid panel (grid using editablegrid plugin)

    Hi,

    I am having a editable grid panel which has 2 columns with checkbox. I need to disable one checkbox when the other checkbox is checked and viceversa. Below is the code written on checkevent for checkbox. But its not reflecting in the UI. I am using editablegrid plugin.

    <ext:Column ColumnID="IEIPGAutoReplen" Header="AutoReplen" DataIndex="InvAutoReplenishAllowed"
                            Hidden="true" Align="Center" Width="15">                        
                            <Editor>
                                <nxtwc:NxtCheckbox ID="chkIEIPGAutoReplen" runat="server" TabIndex="5" Enabled="true"
                                    Disabled="false">
                                    <Listeners> 
                                        <Render Handler="if(#{chkIEIPGBlocked}.checked){#{chkIEIPGAutoReplen}.setDisabled(true);}
                                                         if(#{chkIEIPGAutoReplen}.checked){#{chkIEIPGBlocked}.setDisabled(true);}" />                                 
                                        <Check Handler="#{chkIEIPGBlocked}.setDisabled(this.checked);" />
                                    </Listeners>
                                </nxtwc:NxtCheckbox>
                            </Editor>
                        </ext:Column>
                        <ext:Column ColumnID="IEIPGBlocked" Header="Blocked" DataIndex="InvReorderBlocked"
                            Hidden="true" Align="Center" Width="15">
    
                            <Editor>
                                <nxtwc:NxtCheckbox ID="chkIEIPGBlocked" runat="server" TabIndex="6" Enabled="true"
                                    Disabled="false">
                                    <Listeners>
                                       <Check Handler="#{chkIEIPGAutoReplen}.setDisabled(this.checked);" />
                                    </Listeners>
                                </nxtwc:NxtCheckbox>
                            </Editor>
                        </ext:Column>
    Please advise.

    Thanks
    Anulekha
    Last edited by Daniil; Dec 26, 2011 at 9:26 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Please ask any Ext.NET 1.x technical support question on the 1.x Premium Help forum, not 2.x.
  3. #3
    Please see the mechanism how to disable/enable the editors with EditableGrid plugin handling the Render event.
    http://forums.ext.net/showthread.php...ll=1#post48455
  4. #4
    Quote Originally Posted by Daniil View Post
    Please see the mechanism how to disable/enable the editors with EditableGrid plugin handling the Render event.
    http://forums.ext.net/showthread.php...ll=1#post48455
    HI,

    The given example does not have checkbox column and disable/enable feature is decided at render itself. But in our case, check box should be enabled/disabled on check of the other checkbox.
  5. #5
    Here is the example with checkboxes.

    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[] { false, false },
                    new object[] { 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 editor1Render = function () {
                this.setDisabled(this.grid.record.get('test2'));
            };
             
            var editor2Render = function() {
                this.setDisabled(this.grid.record.get('test1'));
            };
        </script>
    </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:Checkbox runat="server">
                                    <Listeners>
                                        <Check Handler="this.blur();" />
                                        <Render Fn="editor1Render" />
                                    </Listeners>
                                </ext:Checkbox>
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Test2" DataIndex="test2">
                            <Editor>
                                <ext:Checkbox runat="server">
                                    <Listeners>
                                        <Check Handler="this.blur();" />
                                        <Render Fn="editor2Render" />
                                    </Listeners>
                                </ext:Checkbox>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:EditableGrid runat="server" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  6. #6
    Quote Originally Posted by Daniil View Post
    Here is the example with checkboxes.

    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[] { false, false },
                    new object[] { 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 editor1Render = function () {
                this.setDisabled(this.grid.record.get('test2'));
            };
             
            var editor2Render = function() {
                this.setDisabled(this.grid.record.get('test1'));
            };
        </script>
    </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:Checkbox runat="server">
                                    <Listeners>
                                        <Check Handler="this.blur();" />
                                        <Render Fn="editor1Render" />
                                    </Listeners>
                                </ext:Checkbox>
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Test2" DataIndex="test2">
                            <Editor>
                                <ext:Checkbox runat="server">
                                    <Listeners>
                                        <Check Handler="this.blur();" />
                                        <Render Fn="editor2Render" />
                                    </Listeners>
                                </ext:Checkbox>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:EditableGrid runat="server" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Hi Daniil,

    Thanks. This is working.

    Regards
    Anulekha

Similar Threads

  1. Replies: 3
    Last Post: Feb 10, 2014, 5:43 AM
  2. Replies: 0
    Last Post: Jul 31, 2012, 6:07 PM
  3. How to disable column of EditableGrid Plugin
    By abhijit in forum 1.x Help
    Replies: 2
    Last Post: Mar 06, 2012, 5:26 AM
  4. Replies: 3
    Last Post: Aug 12, 2011, 6:56 PM
  5. Replies: 3
    Last Post: Nov 19, 2009, 10:17 AM

Posting Permissions