What's New?

[CLOSED] How to disable component column editor

  1. #1
    Jun 18, 2013, 10:37 PM

    [CLOSED] How to disable component column editor

    Hello,

    I am using component column editor for grid panel. For some reason I need to disable editing of the whole grid panel conditionally. How can I ensure component columns are not editable? I need solutions for both page_load and during Ajax event in code behind. Below is a simplified form of component column I am using. Thanks for your help.

    <ext:ComponentColumn ID="CompID" runat="server" Text="Component Column" DataIndex="CompID" Align="Left" Editor="true" OverOnly="true" PinEvents="expand" UnpinEvents="collapse" SilentSave="false" Pin="false">
        <Component>
                  <ext:ComboBox ID="MyComboBox" runat="server" DisplayField="GeneralDescription" ValueField ="ID" QueryMode="Local" Editable="false" AllowBlank="true" StoreID="MyStore">
                  </ext:ComboBox>                                                                                                         
        </Component>
  </ext:ComponentColumn>
    Last edited by Baidaly; Jun 20, 2013 at 12:43 AM. Reason: [CLOSED]
  2. #2
    Jun 19, 2013, 12:55 AM
    Hello!

    You should use Bind listener. Please, take a look at this thread: http://forums.ext.net/showthread.php?21284
  3. #3
    Jun 19, 2013, 12:23 PM
    Hello,

    I went through the threat you suggested. In the bind listener when I call cmp.hide(), it also hides the value.The same problem was also reported in that threat. As an answer Daniil posted a sample code but it is about how to use more than one component in a component column. To avoid binding the component and continue showing rendered cell value, I tried returning false in Bind listener. The same solution also works with BeforeBind listener as well. Is this the right way to do it?

    Thanks.

    <%@ 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)
        {
            this.Store1.Data = new object[]
            {
                new object[] { 0, "Item1" },
                new object[] { 1, "Item2" },
                new object[] { 2, "Item3" },
                new object[] { 3, "Item2" },
                new object[] { 4, "Item4" }
            };
        }
    }
</script>
 
<!DOCTYPE html>
 
<html>
<head id="Head1" runat="server">
    <title>Multiple Editors - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" /> 
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
         
        <h1>Multiple Editors</h1>        
 
        <ext:GridPanel ID="GridPanel1"
            runat="server"
            Title="Multiple Editors"
            Width="400"
            Height="180">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="Index" Type="Int" />
                                <ext:ModelField Name="Value"/>
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                     <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" />
 
                     <ext:ComponentColumn ID="ComponentColumn1" runat="server" Flex="1" Editor="true" OverOnly="true" DataIndex="Value">
                        <Component>
                            <ext:ComboBox ID="ComboBox1" runat="server">
                                <Items>
                                    <ext:ListItem Text="Item1" />
                                    <ext:ListItem Text="Item2" />
                                    <ext:ListItem Text="Item3" />
                                    <ext:ListItem Text="Item4" />
                                    <ext:ListItem Text="Item5" />
                                </Items>
                            </ext:ComboBox>
                        </Component>
                        <Listeners>
                            <BeforeBind Handler="return false;" />
                        </Listeners>
                        <Renderer Handler="return value;" />
                     </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>           
    </form>
</body>
</html>
  4. #4
    Jun 19, 2013, 2:48 PM
    Yes, you got it correctly. Returning false from a BeforeBind listener prevents a Component to be rendered. In this case a Column's Renderer is used to render a cell's value.

    By the way, you can remove this. It is by default.
    <Renderer Handler="return value;" />
    Last edited by Daniil; May 06, 2015 at 4:00 PM.
  5. #5
    Jun 19, 2013, 3:10 PM
    Thank you @Daniil.
    Well, the problem gets bigger as we solve (;

    Even if the BeforeBind returns false, ComponentColumn's edit event is fired and the record's value related to the component column is set to null. I think there is something going wrong with it (;

    This is the sample code to reproduce:

    <%@ 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)
        {
            this.Store1.Data = new object[]
            {
                new object[] { 0, "Item1" },
                new object[] { 1, "Item2" },
                new object[] { 2, "Item3" },
                new object[] { 3, "Item2" },
                new object[] { 4, "Item4" }
            };
        }
    }
</script>
 
<!DOCTYPE html>
 
<html>
<head id="Head1" runat="server">
    <title>Multiple Editors - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" /> 
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
         
        <h1>Multiple Editors</h1>        
        <ext:GridPanel ID="GridPanel1"
            runat="server"
            Title="Hidden component column"
            Width="400"
            Height="180">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="Index" Type="Int" />
                                <ext:ModelField Name="Value"/>
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                     <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" /> 
                     <ext:ComponentColumn ID="ComponentColumn1" runat="server" Flex="1" Editor="true" OverOnly="true" DataIndex="Value">
                        <Component>
                            <ext:ComboBox ID="ComboBox1" runat="server">
                                <Items>
                                    <ext:ListItem Text="Item1" />
                                    <ext:ListItem Text="Item2" />
                                    <ext:ListItem Text="Item3" />
                                </Items>
                            </ext:ComboBox>
                        </Component>
                        <Listeners>
                            <Edit Handler="alert('Edit handler fired. New value set: ' + e.record.data.Value);  if(App.Store1.isDirty()){alert('store is dirty.');};"></Edit>
                            <BeforeBind Handler="return false;"></BeforeBind>
                        </Listeners>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>           
    </form>
</body>
</html>
  6. #6
    Jun 19, 2013, 4:52 PM
    Thanks for your report, fixed in SVN
  7. #7
    Jun 19, 2013, 7:16 PM
    Thanks for quick response, issue solved. Please mark as closed.

Similar Threads

  1. Component View Editor
    By kavit@bdtpark.com in forum 2.x Help
    Replies: 5
    Last Post: Jun 24, 2013, 9:59 AM
  2. [CLOSED] GridPanel Column Editor PLUGIN: disable Enter KEY on default button Update and Cancel
    By tanky65 in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 21, 2013, 3:59 PM
  3. [CLOSED] Over editor combobox component record gets undefined
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: May 06, 2013, 4:31 PM
  4. Grid - Disable Editor Based upon value
    By Tbaseflug in forum 1.x Help
    Replies: 4
    Last Post: Sep 25, 2009, 9:53 AM
  5. GridPanel - Disable Editor based upon record value?
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: May 04, 2009, 4:52 AM

Posting Permissions