PDA

View Full Version : [CLOSED] Gridpanel set to readonly



Peter.Treier
Feb 19, 2014, 3:11 PM
Hi Team

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

Peter

Daniil
Feb 19, 2014, 4:27 PM
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
Feb 20, 2014, 6:58 AM
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.AJAXCONTAC TCOMBO.AJAXCONTACTCOMBOBOX", _
"CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.AJAXCODECO MBO.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.AJAXCONTAC TCOMBO.AJAXCONTACTCOMBOBOX", _
"CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.AJAXCODECO MBO.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
Feb 20, 2014, 8:27 AM
Ok, thanks. Could you, please, provide a full, simplified as much as possible and runnable sample to reproduce the problem?

Peter.Treier
Feb 20, 2014, 2:26 PM
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
Feb 20, 2014, 3:45 PM
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
Feb 21, 2014, 6:12 AM
Ahh, Ok...

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

Daniil
Feb 21, 2014, 6:15 AM
In JavaScript you should do:

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

Peter.Treier
Feb 21, 2014, 6:56 AM
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
Feb 21, 2014, 7:55 AM
I guess you should set up Editor="true" for the CompnentColumns.

Peter.Treier
Feb 21, 2014, 8:14 AM
Perfect - thanks a lot !

Peter