What's New?

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

  1. #1
    Dec 21, 2011, 12:22 PM

    [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 8:26 AM. Reason: [CLOSED]
  2. #2
    Dec 21, 2011, 12:32 PM
    Hi,

    Please ask any Ext.NET 1.x technical support question on the 1.x Premium Help forum, not 2.x.
  3. #3
    Dec 21, 2011, 2:56 PM
    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
    Dec 23, 2011, 4:38 AM
    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
    Dec 23, 2011, 9:47 AM
    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
    Dec 26, 2011, 5:39 AM
    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. [CLOSED] Change cell color for grid panel using editablegrid plugin
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 10, 2014, 4:43 AM
  2. Enable/disable grid edit on row selection with CheckboxSelectionModel
    By eduvolp in forum 1.x Help
    Replies: 0
    Last Post: Jul 31, 2012, 5:07 PM
  3. How to disable column of EditableGrid Plugin
    By abhijit in forum 1.x Help
    Replies: 2
    Last Post: Mar 06, 2012, 4:26 AM
  4. Adding Checkbox and Radio button column in grid panel
    By reezvi in forum 1.x Help
    Replies: 3
    Last Post: Aug 12, 2011, 5:56 PM
  5. How To Display checkbox based on DB Column value for editing in grid panel of CheckboxSelectionModel
    By Satyanarayana murthy in forum Open Discussions
    Replies: 3
    Last Post: Nov 19, 2009, 9:17 AM

Posting Permissions