How to disable column of EditableGrid Plugin

  1. #1

    How to disable column of EditableGrid Plugin

    Hello,

        <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            {
                this.GridPanel1.Store.Primary.DataSource = new List<object>
                {
                    new { 
                        CategoryName = "Category 1", Amount = "", UnitName = "Crore", ValidityDate = "", ValidityTime = ""
                    },
                    new { 
                        CategoryName = "Category 2", Amount = "", UnitName = "Crore", ValidityDate = "", ValidityTime = ""
                    },
                    new { 
                        CategoryName = "Category 3", Amount = "", UnitName = "Crore", ValidityDate = "", ValidityTime = ""
                    },
                    new { 
                        CategoryName = "Category 4", Amount = "", UnitName = "Crore", ValidityDate = "", ValidityTime = ""
                    },
                    new { 
                        CategoryName = "Category 5", Amount = "", UnitName = "Crore", ValidityDate = "", ValidityTime = ""
                    }
                };
    
                this.GridPanel1.Store.Primary.DataBind();
            }
        }
        </script>
    
        <script language="javascript" type="text/javascript">     
            var updateCatTotal = function() {
                var total = 0;
                for (var i = 0; i < GridPanel1.store.getCount(); i++)
                {
                    var amt = GridPanel1.store.getAt(i).get('Amount');
                    if (amt != "")
                    {
                        total += parseFloat(amt);
                    }
                }
                if (total > 0)
                {
                    document.getElementById("catTotalAmount").value = total;
                }
            }
            
            var gridOption = function(opt)
            {
                if (opt == 1)
                {
                    catTotalAmount.setDisabled(true);
                }
                else
                {
                    catTotalAmount.setDisabled(false);
                    catTotalAmount.focus(true);
                }
            }
        </script>
    
    <body>
        <form id="form1" runat="server" style="margin:10px;">
    
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:RadioGroup ID="rdoCategoryOpt" runat="server" Width="450" StyleSpec="margin:5px 5px;">
                <Items>
                    <ext:Radio ID="rdoCategoryOpt1" runat="server" BoxLabel="Category wise" Checked="true" TabIndex="8">
                        <Listeners>
                            <Check Handler="if(checked){gridOption(1)}" />
                        </Listeners>
                    </ext:Radio>
                    <ext:Radio ID="rdoCategoryOpt2" runat="server" BoxLabel="Lump sum" TabIndex="9">
                        <Listeners>
                            <Check Handler="if(checked){gridOption(2)}" />
                        </Listeners>
                    </ext:Radio>
                </Items>
            </ext:RadioGroup>
        
            <ext:GridPanel ID="GridPanel1" runat="server" Height="188" Width="600" Title="Categories List">
                <Store>
                    <ext:Store ID="CategoryStore" runat="server">
                        <Reader>
                            <ext:JsonReader>
                                <Fields>
                                    <ext:RecordField Name="CategoryName" Type="String" />
                                    <ext:RecordField Name="Amount" />
                                    <ext:RecordField Name="UnitName" Type="String" />
                                    <ext:RecordField Name="ValidityDate" Type="String" />
                                    <ext:RecordField Name="ValidityTime" Type="String" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <Plugins>
                    <ext:EditableGrid ID="EditableGrid1" runat="server" />
                </Plugins>
                <ColumnModel>
                    <Columns>
                        <ext:Column Header="Category" DataIndex="CategoryName" Width="250" Sortable="true" />
                        <ext:Column Header="Amount" DataIndex="Amount" Width="80" Sortable="true" Align="Center">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" AllowBlank="true" StyleSpec="text-align:right;">
                                    <Listeners>
                                        <AfterRender Handler="updateCatTotal()" Delay="100" />
                                    </Listeners>
                                </ext:TextField>
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Unit" DataIndex="UnitName" Width="50" />
                        <ext:Column Header="Validity Date" DataIndex="ValidityDate" Width="110" Align="Center">
                            <Editor>
                                <ext:DateField ID="valDate" runat="server" SelectOnFocus="true" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Validity Time" DataIndex="ValidityTime" Width="90" Align="Center">
                            <Editor>
                                <ext:TextField ID="TextField2" runat="server" SelectOnFocus="true" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" ForceFit="true" />
                </View>
                <BottomBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:TextField ID="catTotalAmount" runat="server" SelectOnFocus="true" Disabled="true" StyleSpec="margin-left:248px; width:70px; text-align:right;" />
                            <ext:DisplayField ID="catTotalUnit" runat="server" Text="Crore" StyleSpec="margin-left:6px; font-weight:bold;" />
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:GridPanel>             
        </form>
    </body>
    My problem is when user choose "Lump sum" option, I want to disabled "Amount", "Validity Date" and "Validity Time" columns. But I am not able to do it.

    Please help me to solve this issue.

    Thanks
    Abhijit
    Last edited by abhijit; Mar 02, 2012 at 11:45 AM.
  2. #2
  3. #3
    Thank you Daniil.

    But I want to enable/disable column depending on Radio button (Category wise/Lump sum) choice. If user choose "Category wise" option he can entered Amount category wise and for "Lump sum" option amount column is disabled.

    Thanks
    Abhijit

Similar Threads

  1. Replies: 5
    Last Post: Dec 26, 2011, 5:39 AM
  2. Replies: 3
    Last Post: Dec 01, 2011, 12:47 PM
  3. [CLOSED] EditableGrid Plugin bug
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 24, 2011, 7:31 PM
  4. Replies: 6
    Last Post: Sep 22, 2011, 12:46 PM
  5. [CLOSED] EditableGrid Plugin - Problem using Tab key
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 09, 2010, 1:59 PM

Posting Permissions