[CLOSED] GridPanel, through the "ValidityChange" FormPanel

**opendat2000** · Sep 01, 2015, 9:43 PM

Hi Community !

I wanna know if itâ€™s possible to enable a button when we enter a data in a GridPanel Control, through the "ValidityChange" from FormPanel Control.

I implemented the following example to illustrate my issue, I accept suggestions ideas or comments


<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
        }
    }

    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        object theObject = new
        {
            Column1 = TextField1.Text,
            Column2 = TextField2.Text,
            Column3 = TextField3.Text,
        };

        Store1.Add(theObject);
    }    
</script>

<!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>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />

        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" DefaultAnchor="90%">
            <Items>
                <ext:FormPanel ID="FormPanel1" runat="server" 
                        Region="North"
                        Margins="5 5 5 5"
                        BodyPadding="5"
                        Frame="true">
                    <Listeners>
                        <ValidityChange Handler="#{Button1}.setDisabled(!valid);" />
                    </Listeners>
                    <Items>
                        <ext:TextField ID="TextField1" runat="server" FieldLabel="Column1" AllowBlank="false" />
                        <ext:TextField ID="TextField2" runat="server" FieldLabel="Column2" AllowBlank="false" />
                        <ext:TextField ID="TextField3" runat="server" FieldLabel="Column3" AllowBlank="false" />
                    </Items>
                    <DockedItems>
                        <ext:Toolbar ID="Toolbar1" runat="server" Dock="Top" >
                            <Items>
                                <ext:ToolbarFill />                                
                                <ext:Button ID="Button1" runat="server" Text="Add" Icon="Add" Disabled="true">
                                    <DirectEvents>
                                        <Click OnEvent="Button1_Click"></Click>
                                    </DirectEvents>
                                </ext:Button>
                                <ext:Button ID="Button2" runat="server" Text="Save" Icon="Disk" Disabled="true" />
                            </Items>
                        </ext:Toolbar>

                    </DockedItems>
                </ext:FormPanel>
                
                <ext:GridPanel ID="GridPanel1" runat="server"
                                Height="250" 
                                Width="400"
                                Title="GridPanel1"
                                ForceFit="true"
                                Border="false"
                                Margins="0 5 5 5"
                                Frame="true">
                            <Store>
                                <ext:Store ID="Store1" runat="server">
                                    <Model>
                                        <ext:Model ID="Model1" runat="server">
                                            <Fields>
                                                <ext:ModelField Name="Column1" Type="String"></ext:ModelField>
                                                <ext:ModelField Name="Column2" Type="String"></ext:ModelField>
                                                <ext:ModelField Name="Column3" Type="String"></ext:ModelField>
                                            </Fields>
                                        </ext:Model>                                            
                                    </Model>
                                    <Listeners>
                                        <DataChanged Handler="#{Button2}.setDisabled(#{GridPanel1}.getStore().getCount() > 0 ? false : true);" />
                                    </Listeners>
                                </ext:Store>
                            </Store>
                                  
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column ID="Column1" runat="server" Text="Column1" DataIndex="Column1"></ext:Column>
                                    <ext:Column ID="Column2" runat="server" Text="Column2" DataIndex="Column2" ></ext:Column>
                                    <ext:Column ID="Column3" runat="server" Text="Column3" DataIndex="Column3" ></ext:Column>
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
            </Items>
        </ext:Viewport>

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

I accept suggestions ideas or comments

Regards.

**Daniil** · Sep 01, 2015, 10:53 PM

Hi @opendat2000,

when we enter a data in a GridPanel Control

Please clarify what exactly you mean.

Sorry, I am not entirely understand the requirement. Please elaborate.

**opendat2000** · Sep 02, 2015, 2:32 PM

Hi Daniil

When I insert an entry in the control store, the button "Button2" it must be enabled, so I implement the following, but not working


<Listeners>
   <ValidityChange Handler="#{Button2}.setDisabled(#{GridPanel1}.getStore().getCount() > 0 ? false : true);" />
</Listeners>

**fabricio.murta** · Sep 03, 2015, 11:02 PM

Hello @opendat2000

Thank you for this simple straightforward sample to illustrate your issue. It really makes it easier for us to determine and give you a solution for your problem.

Well, short answer is no, you can't use ValidityChange for that purpose. You must use another event on the GridPanel1 store to enable the button once valid input is added there.

Longer answer is because validity does not actually change when you just add an entry to the grid. Validity is only authenticating data in the form, not the grid. If you just click 'Add' no field in the form will change at all, so no validity change will ever happen.

In your example, follow this workflow:
1. fill column1 column2 and column3 with 'test'.
2. once you press the first char on 'column3' (assuming you followed the order), the 'add' button (button1) will become available.
At this point one validityChange has been triggered
3. Click add, the entry will be shown on the gridPanel.
4. Erase any of the Column1, Column2 or Column3 field. The 'save' button will become available!
At this point another validityChange has been triggered

Essentially, the 'save' button logic is bound to the contents of the grid. So the event which enables/disables it must be bound to the grid's store. For that, I can suggest you using the store's 'Change' event.

Said words in code, I believe this version could fulfill your needs:

<%@ 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)
        {
        }
    }

    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        object theObject = new
        {
            Column1 = TextField1.Text,
            Column2 = TextField2.Text,
            Column3 = TextField3.Text,
        };

        Store1.Add(theObject);
    }    
</script>

<!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>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />

        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" DefaultAnchor="90%">
            <Items>
                <ext:FormPanel ID="FormPanel1" runat="server"
                    Region="North"
                    Margins="5 5 5 5"
                    BodyPadding="5"
                    Frame="true">
                    <Listeners>
                        <ValidityChange Handler="#{Button1}.setDisabled(!valid);" />
                    </Listeners>
                    <Items>
                        <ext:TextField ID="TextField1" runat="server" FieldLabel="Column1" AllowBlank="false" />
                        <ext:TextField ID="TextField2" runat="server" FieldLabel="Column2" AllowBlank="false" />
                        <ext:TextField ID="TextField3" runat="server" FieldLabel="Column3" AllowBlank="false" />
                    </Items>
                    <DockedItems>
                        <ext:Toolbar ID="Toolbar1" runat="server" Dock="Top">
                            <Items>
                                <ext:ToolbarFill />
                                <ext:Button ID="Button1" runat="server" Text="Add" Icon="Add" Disabled="true">
                                    <DirectEvents>
                                        <Click OnEvent="Button1_Click"></Click>
                                    </DirectEvents>
                                </ext:Button>
                                <ext:Button ID="Button2" runat="server" Text="Save" Icon="Disk" Disabled="true" />
                            </Items>
                        </ext:Toolbar>

                    </DockedItems>
                </ext:FormPanel>

                <ext:GridPanel ID="GridPanel1" runat="server"
                    Height="250"
                    Width="400"
                    Title="GridPanel1"
                    ForceFit="true"
                    Border="false"
                    Margins="0 5 5 5"
                    Frame="true">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Column1" Type="String"></ext:ModelField>
                                        <ext:ModelField Name="Column2" Type="String"></ext:ModelField>
                                        <ext:ModelField Name="Column3" Type="String"></ext:ModelField>
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Listeners>
                                <DataChanged Handler="#{Button2}.setDisabled(#{GridPanel1}.getStore().getCount() > 0 ? false : true);" />
                            </Listeners>
                        </ext:Store>
                    </Store>

                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Text="Column1" DataIndex="Column1"></ext:Column>
                            <ext:Column ID="Column2" runat="server" Text="Column2" DataIndex="Column2"></ext:Column>
                            <ext:Column ID="Column3" runat="server" Text="Column3" DataIndex="Column3"></ext:Column>
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

Hope this helps!

**opendat2000** · Sep 07, 2015, 8:33 PM

Hi Fabricio,

Thanks a lot for your reply.

Please close the thread.

Saludos
Mauricio.

Note: I modified the code, to provide in the community.

Thread: [CLOSED] GridPanel, through the "ValidityChange" FormPanel

Thread Tools

Search Thread

Display

[CLOSED] GridPanel, through the "ValidityChange" FormPanel

Similar Threads

[FIXED] [#737] [3.2.0] Responsive issues when ResourceManager uses "IDMode" to Predictive and "ScriptMode" to debug

[OPEN] [#450] A Panel's Frame="false" and UI="Primary" causes wrong rendering of Tools

[CLOSED] [#244] Grid cell editing, and combobox "blur" event NOT fired when expected upon "tab" key

[CLOSED] Ext.net v2 Beta release: Panel collapsed with CollapseMode="Mini" and Split="true"

[CLOSED] GridPanel: ServerSide Code Equivalent for "getSelectionModel().selectRow(0)" and "getView().focusRow(0)"

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] GridPanel, through the "ValidityChange" FormPanel

[CLOSED] GridPanel, through the "ValidityChange" FormPanel

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us