[CLOSED] Enable/Disable cell or row of a GridPanel

**timiteh** · Mar 20, 2014, 2:42 PM

Hi,

i am trying to disable a cell or a row of gridpanel depending of if a checkcolumn of the row is checked or not.
Is there an easy way to achieve this ?

Here is the code i am currently using:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frmGarantieEvolved.aspx.cs" Inherits="NTECH.IXPERTA.EXT.Web.UI.Views.PageControls.Common.frmGarantieEvolved" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        function renderTitle(value, p, record) {
            return value ? Ext.String.format(
                '<a href="http://sencha.com/forum/showthread.php?t={1}" target="_blank">{0}</a>',
                value,
                record.data.threadid
            ) : '';
        }

        var edit = function (editor, e) {
            /*
                "e" is an edit event with the following properties:

                    grid - The grid
                    record - The record that was edited
                    field - The field name that was edited
                    value - The value being set
                    originalValue - The original value for the field, before the edit.
                    row - The grid table row
                    column - The grid Column defining the column that was edited.
                    rowIdx - The row index that was edited
                    colIdx - The column index that was edited
            */

            // Call DirectMethod
            if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
                CompanyX.Edit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
            }
        };

        var myCustomFn = function (e)
        {
            if (e.field == "Check")
            {
                if (e.value == false)
                {
                    e.field = "EstObligatoire";
                    if (e.record.data[e.field] == true)
                    {
                        e.field = "Selectionne";
                        e.record.data[e.field] = true;
                        e.record.commit();
                    }
                }
            }
                   };

        var getRowClass = function (record, index)
        {
            var isSelected = this.grid.getSelectionModel().isSelected(record);
            return isSelected ? "checked-row" : "unchecked-row";
        };
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false" AjaxTimeout="3600000"/>
    <div>
   <%-- <ext:FormPanel ID="FormPanelGarantieSouscrite1"
                runat="server"
                BodyPadding="5" Width="810"
                DefaultAnchor="90%"
                Layout="HBoxLayout"
                Flex="1">--%>
        <ext:GridPanel ID="GarantiesPanel" runat="server"
            Title="Garanties"
            Width="1024"
            Height="500"
            Collapsible="true"            
            UseArrows="true"
            RootVisible="false"            
            Animate="false">
            <Store>
                <ext:Store runat="server" GroupField="Parent">
                     <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="Id" Name="GarantieModel">
                                        <Fields>
                                            <ext:ModelField Name="ID" Type="Int" ServerMapping="ID"/>
                                            <ext:ModelField Name="Name" Type="String"  ServerMapping="Name" />
                                            <ext:ModelField Name="Parent"  Type="String" ServerMapping="Parent" />
                                            <ext:ModelField Name="PrimedeBase" Type="Float" ServerMapping="Primedebase" />
                                            <ext:ModelField Name="Capitaux" Type="Float" ServerMapping="Capitaux" />
                                            <ext:ModelField Name="Reduction" Type="Float" DefaultValue="0" ServerMapping="Reduction"  />
                                            <ext:ModelField Name="Check" Type="Boolean" ServerMapping="Selectionne"  />
                                            <ext:ModelField Name="Obligatoire" Type="Boolean" ServerMapping="EstObligatoire"  />
                                        </Fields>
                                    </ext:Model>        
                    </Model>
              </ext:Store>
            </Store>
            <Plugins>
                <ext:BufferedRenderer runat="server" />
               
                <%--<ext:CellEditing runat="server">
                    <Listeners>
                        <Edit Fn="myCustomFn" />
                       
                    </Listeners>
                </ext:CellEditing>--%>
            

            </Plugins>
            <ColumnModel>
                <Columns>
                    <ext:CheckColumn  ID="Column3" runat="server" Text="Checked" DataIndex="Check" Locked="true" Editable="true">
                        <DirectEvents>
                            <CheckChange OnEvent="checkChange">    
                                <ExtraParams>       
                                     <ext:Parameter Name="checked" Value="checked" Mode="Raw" /> 
                                     <ext:Parameter Name="GridPanelValues" Value="Ext.encode(#{GarantiesPanel}.getRowsValues({selectedOnly:false}))" Mode="Raw" />  
                                </ExtraParams>
                            </CheckChange>
                          </DirectEvents>
                    </ext:CheckColumn>
                    
                    <ext:Column ID="Column1" runat="server" Text="Parent" Width="100" DataIndex="Parent" Locked="true" />

                    <ext:Column ID="Id1" runat="server" Text="Description" Width="200" DataIndex="Name" Locked="true">                           
                        </ext:Column>
                    <ext:Column runat="server" Text="Prime de base" Width="120" DataIndex="PrimedeBase">
                            <Editor>
                                <ext:NumberField ID="NumberField1" runat="server" Editable="true"/>
                            </Editor>
                    </ext:Column>
                    <ext:Column runat="server" Text="Capitaux" Width="300" DataIndex="Capitaux">
                            <Editor>
                                <ext:NumberField ID="NumberField2" runat="server" Editable="true"/>
                            </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
             <Features>
                <ext:Grouping ID="Grouping1" 
                    runat="server" 
                    HideGroupedHeader="true"
                    GroupHeaderTplString="Groupe: {name} ({rows.length} Item{[values.rows.length > 1 ? 's' : '']})"
                    StartCollapsed="true" />
                </Features>
            <Listeners>
                
                <Edit Fn="myCustomFn" />

            </Listeners>
           
            <SelectionModel>
                <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi" />
            </SelectionModel>
           
        </ext:GridPanel>
        <hr />
             <%-- </ext:FormPanel>--%>
    </div>
    </form>
</body>
</html>

Thanks in advance.

**Daniil** · Mar 20, 2014, 3:40 PM

Hi @timiteh,

Please elaborate on the "disable" term for a row and a cell, what exactly you mean under that.

**timiteh** · Mar 20, 2014, 4:13 PM

Originally Posted by Daniil

Hi @timiteh,

Please elaborate on the "disable" term for a row and a cell, what exactly you mean under that.

By disable, i mean not to be able to edit the cell or any cell of the row.
In fact, we need to be able to prevent the editing of a row when the cell of the checkcolumn is unchecked.
We also need to prevent that a check column cell of a row can be unchecked if one field of the record associated to the row is true.

**Daniil** · Mar 20, 2014, 4:28 PM

Thanks.

Editing can be prevented by returning false from a CellEditing's BeforeEdit listener.
http://docs.sencha.com/extjs/4.2.1/#...ent-beforeedit

**timiteh** · Mar 21, 2014, 9:44 AM

Originally Posted by Daniil

Thanks.

Editing can be prevented by returning false from a CellEditing's BeforeEdit listener.
http://docs.sencha.com/extjs/4.2.1/#...ent-beforeedit

Hi Daniil, can i have an Ext.Net sample as i don't know how to add this event to checkboxcolumn. Moreover, i would like to prevent the edit depending of a value of a field of a record !

**Daniil** · Mar 21, 2014, 11:20 AM

Here is an example.

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", "test", true },
                new object[] { "test", "test", true },
                new object[] { "test", "test", true }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="editable" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:CheckColumn runat="server" DataIndex="editable" Editable="true" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:CellEditing runat="server">
                    <Listeners>
                        <BeforeEdit Handler="return e.record.data.editable;" />
                    </Listeners>
                </ext:CellEditing>
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>

**timiteh** · Mar 21, 2014, 1:11 PM

Hi Daniil,

It works but it disables the editing of the whole row while i try to disable the editing one cell, for example the checkbox, according to the value of a field,not necesseraly linked to the cell, of the record !
So is it possible to apply the cell editing to just one cell not a row ?

**Daniil** · Mar 21, 2014, 1:18 PM

Yes, you can return false from a BeforeEdit listener for specific Columns only.

**timiteh** · Mar 21, 2014, 1:36 PM

Originally Posted by Daniil

Yes, you can return false from a BeforeEdit listener for specific Columns only.

Yes but how ?
Because i try with the following code and it doesn't seem to work:

<script type="text/javascript">
    

    Before = function (e) {
        if (e.record.data.editable == false)
        {
            e.Column1.Editable = false;
        }
            return false;
    };

        </script>
 <!DOCTYPE html> 
<html><head id="Head1" runat="server">    
    <title>Ext.NET v2 Example</title></head>
    <body>    <form id="Form1" runat="server"> 
               <ext:ResourceManager ID="ResourceManager1" runat="server" />   
     <ext:GridPanel ID="GridPanel1" runat="server">  
                <Store>       
                     <ext:Store ID="Store1" runat="server">      
                     <Model>
                                                                        
                     <ext:Model ID="Model1" runat="server"> 
                       <Fields>
                         <ext:ModelField Name="test1" />
                         <ext:ModelField Name="test2" />
                         <ext:ModelField Name="editable" />
                   </Fields>

                    </ext:Model>

                     </Model> 

               </ext:Store>
              </Store>
              <ColumnModel ID="ColumnModel1" runat="server">
                  <Columns>
                    <ext:Column ID="Column1" runat="server" Text="Test 1" DataIndex="test1">
                         <Editor>
                           <ext:TextField ID="TextField1" runat="server" />
                             
                         </Editor>
                        
                    </ext:Column> 
                    <ext:Column ID="Column2" runat="server" Text="Test 2" DataIndex="test2">
                       <Editor>
                         <ext:TextField ID="TextField2" runat="server" />
                      </Editor> 
                     </ext:Column>
                      <ext:CheckColumn ID="CheckColumn1" runat="server" DataIndex="editable" Editable="true" />
                        </Columns>
                </ColumnModel>
                 <Plugins>
                   <ext:CellEditing ID="CellEditing1" runat="server" >
                      <Listeners>
                         <BeforeEdit Handler="Before" />
                       </Listeners>
                   </ext:CellEditing>
                 </Plugins>

             </ext:GridPanel>

              </form>

    </body>

</html>

**Daniil** · Mar 21, 2014, 1:51 PM

You always return false, for any Column. You should not return false always. You should return false only for the Column that you want to prevent editing on.

Thread: [CLOSED] Enable/Disable cell or row of a GridPanel

Thread Tools

Search Thread

Display

[CLOSED] Enable/Disable cell or row of a GridPanel

Similar Threads

[CLOSED] Disable/Enable edit control on gridpanel

how to enable gridpanel cell editing feature in asp.net mvc ? thanks!

[CLOSED] editable gridpanel enable/disable fields

How enable/disable buttons in CommandColumn og gridpanel

Enable or disable the button

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Enable/Disable cell or row of a GridPanel

[CLOSED] Enable/Disable cell or row of a GridPanel

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us