[CLOSED] Gridpanel set to readonly

[Peter.Treier]

Hi Team

I need to set an entire Gridpanel to readonly...
Any hint or examples on how to do this ?

Peter

[Daniil]

Hi Peter,

You can return false from an editing plugin's BeforeEdit listener. It should prevent editing.

Though, you might need to demonstrate how your GridPanel is configured.

[Peter.Treier]

Hi Daniil

We, I use a special approach :-)

My grid has no edit funtion in the mark up :

        <ext:GridPanel runat="server" ID="gridPackaging" AutoScroll="true">
              <Store>
                <ext:Store ID="storePackaging" runat="server">
                  <Model>
                    <ext:Model ID="modelPackaging" runat="server">
                      <Fields>
                        <ext:ModelField Name="Id" />
                        <ext:ModelField Name="PackagingType" />
                        <ext:ModelField Name="Quantity" />
                        <ext:ModelField Name="PackagingReferenceNumber" />
                      </Fields>
                    </ext:Model>
                  </Model>
                </ext:Store>
              </Store>
              <ColumnModel>
                <Columns>
                  <ext:Column ID="colIdPack" runat="server" DataIndex="Id" Text="Id" Width="100" Hidden="True" Groupable="False" Sortable="False" MenuDisabled="True" />

                  <ext:ComponentColumn ID="colPackagingType" runat="server" Editor="true" DataIndex="PackagingType" Text="PackagingType" Sortable="False" Width="150" Flex="1">
                    <Component>
                      <ajaxBox:AjaxCodeComboBox runat="server" ID="cboPackagingType" DataType="PackagingType" DisplayType="DescriptionAndValue" />
                    </Component>
                  </ext:ComponentColumn>

                  <ext:ComponentColumn ID="colQuantity" runat="server" DataIndex="Quantity" Text="Quantity" Width="125" Hidden="False" Groupable="true" Sortable="False" MenuDisabled="False">
                    <Component>
                      <ext:NumberField ID="fldPackageQuantity" runat="server" DecimalPrecision="0" MaxLength="5" HideTrigger="True" />
                    </Component>
                  </ext:ComponentColumn>

                  <ext:ComponentColumn ID="colPackagingReferenceNumber" runat="server" DataIndex="PackagingReferenceNumber" Text="PackagingReferenceNumber" Width="125" Hidden="False" Groupable="true" Sortable="False" MenuDisabled  ="False">
                    <Component>
                      <ext:TextField ID="fldPackagingReferenceNumber" runat="server" MaxLength="42" EnforceMaxLength="True" MaxLengthText="PackRefNo42CharsLenghtWarnin">" />
                    </Component>
                  </ext:ComponentColumn>

                </Columns>
              </ColumnModel>
              <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModelPackaging" runat="server" Mode="Single" />
              </SelectionModel>
            </ext:GridPanel>

The Edit Function is set by Code Behind functions

    Public Shared Sub AddNewToolbar(grid As AbstractPanel)
      Dim tBar As ToolbarBase

      If grid.TopBar.Count > 0 Then

        'Grid has already a Toolbar - take this one.
        If Not IsNothing(grid.TopBar) Then
          tBar = grid.TopBar.Toolbar()
          tBar.Items.Add(GetAddButton(grid))
        End If
      Else
        Dim toolBarId = grid.ID & "AddToolBar"
        tBar = New Toolbar
        tBar.ID = toolBarId
        tBar.Items.Add(GetAddButton(grid))

        grid.TopBar.Add(tBar)
      End If

    End Sub

and

    Private Shared Function GetAddButton(grid As AbstractPanel) As Button
      Dim addButton As New Button
      addButton.ID = grid.ID & "AddButton"
      addButton.Icon = Icon.Add
      addButton.ToolTip = custrocheimport.TooltipAdd
      addButton.CommandName = "cmdAdd"

      addButton.Listeners.Click.Handler = "handleAddGridRow(item, e);"

      Return addButton
    End Function

The JS Script Handler 'handleAddGridRow' just add's a new Item with a new Id

    
grid.getStore().add({ Id: getGUID() });
    grid.getView().focusRow(0);

The new Requirement is now a ready only view of the Page - it is a quite comple on with about 8 grid's working like this.

I had a functio to set the whole page to read-only

  Public Shared Sub SetReadOnlyMode(cont As ControlCollection)

      For Each control As Object In cont

        Select Case control.GetType().ToString().ToUpper()
          Case "EXT.NET.TEXTFIELD"
            DirectCast(control, TextField).ReadOnly = True

          Case "EXT.NET.NUMBERFIELD"
            DirectCast(control, NumberField).ReadOnly = True

          Case "EXT.NET.TEXTAREA"
            DirectCast(control, TextArea).ReadOnly = True

          Case "EXT.NET.GRIDPANEL"
            Dim grid As GridPanel = DirectCast(control, GridPanel)

            For Each col As ColumnBase In grid.ColumnModel.Columns
              col.Enabled = False


              If TypeOf col Is Ext.Net.ComponentColumn Then
                For Each innerControl As Control In col.Controls

                  Select Case innerControl.GetType().ToString().ToUpper()

                    Case "CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.CODECOMBO.CODECOMBOBOX", _
                         "CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.AJAXCONTACTCOMBO.AJAXCONTACTCOMBOBOX", _
                         "CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.AJAXCODECOMBO.AJAXCODECOMBOBOX"
                      DirectCast(innerControl, Ext.Net.ComboBox).ReadOnly = True

                    Case "EXT.NET.TEXTFIELD"
                      DirectCast(innerControl, TextField).ReadOnly = True

                    Case "EXT.NET.NUMBERFIELD"
                      DirectCast(innerControl, NumberField).ReadOnly = True

                  End Select

                Next
              End If
            Next

          Case "EXT.NET.COMBOBOX"
            DirectCast(control, ComboBox).ReadOnly = True

          Case "EXT.NET.CHECKBOX"
            DirectCast(control, Checkbox).Enabled = False

          Case "EXT.NET.RADIOBUTTON"
            DirectCast(control, Ext.Net.Radio).Enabled = False

          Case "EXT.NET.BUTTON"
            DirectCast(control, Ext.Net.Button).Disabled = True

          Case "CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.CODECOMBO.CODECOMBOBOX", _
                "CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.AJAXCONTACTCOMBO.AJAXCONTACTCOMBOBOX", _
                "CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.AJAXCODECOMBO.AJAXCODECOMBOBOX"
            DirectCast(control, Ext.Net.ComboBox).ReadOnly = True

          Case Else
            If _log.IsDebugEnabled Then
              _log.DebugFormat("Component {0} is not set to ReadOnly !", control.GetType().ToString())
            End If

        End Select


        If TypeOf control Is Container Then
          SetReadOnlyMode(DirectCast(control, Container).Controls)
        End If

        If TypeOf control Is FormPanel Then
          SetReadOnlyMode(DirectCast(control, FormPanel).Controls)
        End If

        If TypeOf control Is Panel Then
          SetReadOnlyMode(DirectCast(control, Panel).Controls)
        End If

        If TypeOf control Is FieldSet Then
          SetReadOnlyMode(DirectCast(control, FieldSet).Controls)
        End If

        If TypeOf control Is WebControls.Panel Then
          SetReadOnlyMode(DirectCast(control, WebControls.Panel).Controls)
        End If

        If TypeOf control Is Toolbar Then
          SetReadOnlyMode(DirectCast(control, Toolbar).Controls)
        End If

        If TypeOf control Is FieldContainer Then
          SetReadOnlyMode(DirectCast(control, FieldContainer).Controls)
        End If

        If TypeOf control Is RadioButtonList Then
          SetReadOnlyMode(DirectCast(control, RadioButtonList).Controls)
        End If

        If TypeOf control Is Ext.Net.ContentContainer Then
          SetReadOnlyMode(DirectCast(control, Ext.Net.ContentContainer).Controls)
        End If

        If TypeOf control Is Ext.Net.CheckboxGroup Then
          SetReadOnlyMode(DirectCast(control, Ext.Net.CheckboxGroup).Controls)
        End If
      Next
    End Sub

That workd fine, just call this method in page load and all controls are readonly. But I found a problem with the Grid above...
When I bind the Data to the Grid, the Fields of Type Textfield and Numberfield remain empty !?

I bind the Data with a function created long time ago

Here's a Data Example

            "PackagingList": [
                {
                    "Id": "f72eecae-8017-4366-bb0e-6d7d20468589",
                    "PackagingReferenceNumber": null,
                    "PackagingType": "CT",
                    "Quantity": "1.00",
                    "_Id": "00000000-0000-0000-0000-000000000000",
                    "_SysPersisted": false
                }
            ]

And the two Methods look like this

function loadDataToGrid(data, gridId) {
    var gp = Ext.getCmp(gridId);
    var ret = false;
    if (gp != null) {
        ret = loadDataToGridObject(data, gp);
        ret = true;
    }
    return ret;
}

function loadDataToGridObject(data, gridObject) {
    var ret = false;
    if (gridObject != null) {
        gridObject.getStore().loadData(data, false);
        gridObject.show();
        ret = true;
    }
    return ret;
}

That works very smooth as long as the grid isn't set to read only with the method above :-/

I know, that's a lot to read, but It would be great to get this stuff running with this approach...

Peter

[Daniil]

Ok, thanks. Could you, please, provide a full, simplified as much as possible and runnable sample to reproduce the problem?

[Peter.Treier]

Well, here is an example - I think the problem isn't the read only stuff. If you look at the Store's Data after they are loaded with 'loadDataToGridObject' all object from the JSON Object are present ?!

The SetReadOnly Button causes an error - have no Idea why :-(

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>

<!DOCTYPE html>

<html>
<head>
    <title>Grid Read Only</title>


    <script runat="server" type="text/VB">



        <DirectMethod()>
        Public Sub SetReadOnlyMode(Optional cont As ControlCollection = Nothing)
            If IsNothing(cont) Then
                cont = Controls
            End If
         
            
            For Each control As Object In cont

                Select Case control.GetType().ToString().ToUpper()
                    Case "EXT.NET.TEXTFIELD"
                        DirectCast(control, Ext.Net.TextField).ReadOnly = True

                    Case "EXT.NET.NUMBERFIELD"
                        DirectCast(control, Ext.Net.NumberField).ReadOnly = True

                    Case "EXT.NET.TEXTAREA"
                        DirectCast(control, Ext.Net.TextArea).ReadOnly = True

                    Case "EXT.NET.GRIDPANEL"
                        Dim grid As GridPanel = DirectCast(control, Ext.Net.GridPanel)

                        For Each col As ColumnBase In grid.ColumnModel.Columns
                            col.Enabled = False


                            If TypeOf col Is Ext.Net.ComponentColumn Then
                                For Each innerControl As Control In col.Controls

                                    Select Case innerControl.GetType().ToString().ToUpper()

                                        Case "EXT.NET.TEXTFIELD"
                                            DirectCast(innerControl, Ext.Net.TextField).ReadOnly = True

                                        Case "EXT.NET.NUMBERFIELD"
                                            DirectCast(innerControl, Ext.Net.NumberField).ReadOnly = True

                                    End Select

                                Next
                            End If
                        Next

                    Case "EXT.NET.COMBOBOX"
                        DirectCast(control, Ext.Net.ComboBox).ReadOnly = True

                    Case "EXT.NET.CHECKBOX"
                        DirectCast(control, Ext.Net.Checkbox).Enabled = False

                    Case "EXT.NET.RADIOBUTTON"
                        DirectCast(control, Ext.Net.Radio).Enabled = False


                    Case Else
                    
                End Select


                If TypeOf control Is Ext.Net.FormPanel Then
                    SetReadOnlyMode(DirectCast(control, Ext.Net.FormPanel).Controls)
                End If

                If TypeOf control Is Ext.Net.Panel Then
                    SetReadOnlyMode(DirectCast(control, Ext.Net.Panel).Controls)
                End If

                If TypeOf control Is Ext.Net.FieldSet Then
                    SetReadOnlyMode(DirectCast(control, Ext.Net.FieldSet).Controls)
                End If

                If TypeOf control Is Toolbar Then
                    SetReadOnlyMode(DirectCast(control, Ext.Net.Toolbar).Controls)
                End If

                If TypeOf control Is FieldContainer Then
                    SetReadOnlyMode(DirectCast(control, Ext.Net.FieldContainer).Controls)
                End If
   
                If TypeOf control Is Ext.Net.CheckboxGroup Then
                    SetReadOnlyMode(DirectCast(control, Ext.Net.CheckboxGroup).Controls)
                End If
            Next
        End Sub
  
   
   
    </script>

    <script type="text/javascript">
        <!--
    var _data = '[ { "Id": "00000000-0000-0000-0000-000000000000", "PackagingType": "PX", "Quantity": "1", "PackagingReferenceNumber": "Ref. 123" }, { "Id": "00000000-0000-0000-0000-000000000001", "PackagingType": "PY", "Quantity": "2", "PackagingReferenceNumber": "Ref. 456" },  { "Id": "00000000-0000-0000-0000-000000000002", "PackagingType": "PZ", "Quantity": "3", "PackagingReferenceNumber": "Ref. 789" }]';

    function loadGrid() {
        var packData;
        packData = JSON.parse(_data);

        loadDataToGrid(packData, 'gridPackaging');
    }

    function PackagingDTO() {
        this.Id = "";
        this.PackagingType = "";
        this.Quantity = "";
        this.PackagingReferenceNumber = "";
    };

    function loadDataToGrid(data, gridId) {
        var gp = Ext.getCmp(gridId);
        var ret = false;
        if (gp != null) {
            ret = loadDataToGridObject(data, gp);
        }
        return ret;
    }

    function loadDataToGridObject(data, gridObject) {
        var ret = false;
        if (gridObject != null) {
            gridObject.getStore().loadData(data, false);
            gridObject.show();
            ret = true;
        }
        return ret;
    }

    function clearStoreOfGrid(gridId) {
        var gp = Ext.getCmp(gridId);
        var ret = false;
        if (gp != null) {
            gp.getStore().removeAll(false);
            ret = true;
        }
        return ret;
    }
    //-->
    </script>


</head>
<body>
    <form>

        <ext:ResourceManager runat="server" />

        <ext:Panel runat="server" Height="250" ID="pnlOuter">
            <Items>
                <ext:Container runat="server" ID="contOuter">
                    <Items>
                        <ext:Button runat="server" Text="Set ReadOnly" ID="cmdReadOnly">
                            <Listeners>
                                <Click Handler="App.direct.SetReadOnlyMode(null);" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button runat="server" Text="Load Data" OnClientClick="loadGrid();" ID="cmdLoad" />
                        <ext:Button runat="server" Text="Clear Data" OnClientClick="clearStoreOfGrid('gridPackaging');" ID="cmdClear" />
                    </Items>
                </ext:Container>
                <ext:GridPanel runat="server" ID="gridPackaging" AutoScroll="true">
                    <Store>
                        <ext:Store ID="storePackaging" runat="server">
                            <Model>
                                <ext:Model ID="modelPackaging" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Id" />
                                        <ext:ModelField Name="PackagingType" />
                                        <ext:ModelField Name="Quantity" />
                                        <ext:ModelField Name="PackagingReferenceNumber" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel>
                        <Columns>

                            <ext:Column ID="colIdPack" runat="server" DataIndex="Id" Text="Id" Width="220" Hidden="false" Groupable="False" Sortable="False" MenuDisabled="True" />

                            <ext:ComponentColumn ID="colPackagingType" runat="server" Editor="true" DataIndex="PackagingType" Text="PackagingType" Sortable="False" Width="150" Flex="1">
                                <Component>
                                    <ext:TextField runat="server" ID="fldPackagingType" />
                                </Component>
                            </ext:ComponentColumn>

                            <ext:ComponentColumn ID="colQuantity" runat="server" DataIndex="Quantity" Text="Quantity" Width="125" Hidden="False" Groupable="true" Sortable="False" MenuDisabled="False">
                                <Component>
                                    <ext:NumberField ID="fldPackageQuantity" runat="server" DecimalPrecision="0" MaxLength="5" HideTrigger="True" />
                                </Component>
                            </ext:ComponentColumn>

                            <ext:ComponentColumn ID="colPackagingReferenceNumber" runat="server" DataIndex="PackagingReferenceNumber" Text="PackagingReferenceNumber" Width="125" Hidden="False" Groupable="true" Sortable="False" MenuDisabled="False">
                                <Component>
                                    <ext:TextField ID="fldPackagingReferenceNumber" runat="server" MaxLength="42" EnforceMaxLength="True" MaxLengthText="PackRefNo42CharsLenghtWarning" />
                                </Component>
                            </ext:ComponentColumn>

                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModelPackaging" runat="server" Mode="Single" />
                    </SelectionModel>
                </ext:GridPanel>


            </Items>
        </ext:Panel>


    </form>
</body>
</html>

[Daniil]

Yes, you cannot operate with a ComponentColumn's Component in that way. It doesn't support an ID, it just ignores it, because a new Component is rendered for each row, but its ids must be unique.

To configure a ComponentColumn's Component you should use the BeforeBind event. Please look at the 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" },
                new object[] { "test", "test" },
                new object[] { "test", "test" }
            };
        }
    }

    protected void Set(object sender, DirectEventArgs e)
    {
        this.GridPanel1.Set("readOnly", true);
        this.GridPanel1.Refresh(); // to re-render the GridPanel and, respectively, call the BeforeBind listeners
    }

    protected void Reset(object sender, DirectEventArgs e)
    {
        this.GridPanel1.Set("readOnly", false);
        this.GridPanel1.Refresh(); // to re-render the GridPanel and, respectively, call the BeforeBind listeners
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Button runat="server" Text="Set read only" OnDirectClick="Set" />

        <ext:Button runat="server" Text="Reset read only" OnDirectClick="Reset" />

        <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" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:ComponentColumn runat="server" Text="Test 1" DataIndex="test1" Editor="true">
                        <Component>
                            <ext:TextField runat="server" />
                        </Component>
                        <Listeners>
                            <BeforeBind Handler="e.config[0].readOnly = !!this.grid.readOnly;" />
                        </Listeners>
                    </ext:ComponentColumn>
                    <ext:ComponentColumn runat="server" Text="Test 2" DataIndex="test2" Editor="true">
                        <Component>
                            <ext:TextField runat="server" />
                        </Component>
                        <Listeners>
                            <BeforeBind Handler="e.config[0].readOnly = !!this.grid.readOnly;" />
                        </Listeners>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>

[Peter.Treier]

Ahh, Ok...

But, how do you call the Set Method in Javascript ? I got an Error ...

[Daniil]

In JavaScript you should do:

grid.readOnly = true;
grid.getView().refresh();

[Peter.Treier]

Perfect - works fine :-)

The other one I have in my example is the problem that the Columns 'Quantity' and 'PackagingReferenceNumber' not show any Data ?
I can see the Data are present in the Store, but invisible in the Grid ?!

Any Idea about that ?

Peter

[Daniil]

I guess you should set up Editor="true" for the CompnentColumns.