[CLOSED] Form validation is not working correctly

  1. #1

    [CLOSED] Form validation is not working correctly

    Hello,
    I am trying to validate a form but it is not working correctly - it is saying that form is invalid even there are no changes made to it.

    In my scenario, I am using the RowEditor PlugIn for editing changes. When I double clicked on a row to edit changes, the selected row changed to the editing view then I removed one of the field's text as you will see in the attached screen shot, then I click on Cancel, my form SHOULD BE VALID, after clicking on the 'Save' Button but its not.

    Click image for larger version. 

Name:	Row Editor Error.JPG 
Views:	172 
Size:	38.0 KB 
ID:	4363


    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" TagPrefix="ext" Namespace="Ext.Net" %>
    
    <script runat="server">              
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var store = this.GridPanel1.GetStore();
    
                store.DataSource = new List<object>
                {
                    new { 
                        Name = "Bill Foot", 
                        Email = "bill.foot@object.net", 
                        Start = new DateTime(2007, 2, 5), 
                        Salary = 37000, 
                        Active = true
                    },
                    new { 
                        Name = "Bill Little", 
                        Email = "bill.little@object.net", 
                        Start = new DateTime(2009, 6, 13), 
                        Salary = 53000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Jones", 
                        Email = "bob.jones@object.net", 
                        Start = new DateTime(2008, 10, 6), 
                        Salary = 70000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Train", 
                        Email = "bob.train@object.net", 
                        Start = new DateTime(2009, 5, 5), 
                        Salary = 68000, 
                        Active = true
                    },
                    new { 
                        Name = "Chris Johnson", 
                        Email = "chris.johnson@object.net", 
                        Start = new DateTime(2009, 1, 25), 
                        Salary = 47000, 
                        Active = true
                    }
                };
    
                store.DataBind();
            }
        }
    
          
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
        <ext:XScript ID="XScript1" runat="server">
    
            <script type="text/javascript">
            
            
               var validateForm = function(){       
                   if (#{FormPanel1}.getForm().isValid())                
                       Ext.Msg.notify("Valid", "Form is Correct");    
                   else
                       Ext.Msg.notify("Error", "Form is Incorrect");       
               }   
            
            
                var addEmployee = function () {
                    var grid = #{GridPanel1};
                    grid.getRowEditor().stopEditing();
                    
                    grid.insertRecord(0, {
                        name   : "New Guy",
                        email  : "guy@object.net",
                        start  : (new Date()).clearTime(),
                        salary : 50000,
                        active : true
                    });
                    
                    grid.getView().refresh();
                    grid.getSelectionModel().selectRow(0);
                    grid.getRowEditor().startEditing(0);
                }
                
                var removeEmployee = function () {
                    var grid = #{GridPanel1};
                    grid.getRowEditor().stopEditing();
                    
                    var s = grid.getSelectionModel().getSelections();
                    
                    for (var i = 0, r; r = s[i]; i++) {
                        #{Store1}.remove(r);
                    }
                }
            </script>
    
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            GridPanel with RowEditor Plugin</h1>
        <ext:FormPanel ID="FormPanel1" runat="server" MonitorPoll="500" MonitorValid="true"
            Padding="0" ButtonAlign="Center">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="400" AutoExpandColumn="name"
                    Title="Employees">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Reader>
                                <ext:JsonReader>
                                    <Fields>
                                        <ext:RecordField Name="name" Mapping="Name" Type="String" />
                                        <ext:RecordField Name="email" Mapping="Email" Type="String" />
                                        <ext:RecordField Name="start" Mapping="Start" Type="Date" />
                                        <ext:RecordField Name="salary" Mapping="Salary" Type="Float" />
                                        <ext:RecordField Name="active" Mapping="Active" Type="Boolean" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <Plugins>
                        <ext:RowEditor ID="RowEditor1" runat="server" SaveText="Update" />
                    </Plugins>
                    <View>
                        <ext:GridView ID="GridView1" runat="server" MarkDirty="false" />
                    </View>
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="Button1" runat="server" Text="Add Employee" Icon="UserAdd">
                                    <Listeners>
                                        <Click Fn="addEmployee" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button ID="Button2" runat="server" Text="Remove Employee" Icon="UserDelete">
                                    <Listeners>
                                        <Click Fn="removeEmployee" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                    </SelectionModel>
                    <ColumnModel>
                        <Columns>
                            <ext:RowNumbererColumn />
                            <ext:Column ColumnID="name" Header="First Name" DataIndex="name" Width="220" Sortable="true">
                                <Editor>
                                    <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
                                </Editor>
                            </ext:Column>
                            <ext:Column Header="Email" DataIndex="email" Width="150">
                                <Editor>
                                    <ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email" />
                                </Editor>
                            </ext:Column>
                            <ext:DateColumn Header="Start Date" DataIndex="start" Format="MM/dd/yyyy" Width="100"
                                Sortable="true">
                                <Editor>
                                    <ext:DateField ID="DateField1" runat="server" AllowBlank="false" MinDate="01.01.2006"
                                        MinText="Can not have a start date before the Company existed." />
                                </Editor>
                            </ext:DateColumn>
                            <ext:NumberColumn Header="Salary" DataIndex="salary" Format="$0,0.00" Width="100"
                                Sortable="true">
                                <Editor>
                                    <ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" MinValue="1"
                                        MaxValue="150000" />
                                </Editor>
                            </ext:NumberColumn>
                            <ext:BooleanColumn Header="Active" DataIndex="active" Align="Center" Width="50" TrueText="Yes"
                                FalseText="No">
                                <Editor>
                                    <ext:Checkbox ID="Checkbox1" runat="server" />
                                </Editor>
                            </ext:BooleanColumn>
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </Items>
            <Buttons>
                <ext:Button ID="BtnSave" runat="server" Text="Save" Icon="Disk" CausesValidation="true">
                    <Listeners>
                        <Click Fn="validateForm" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 20, 2012 at 10:57 AM. Reason: [CLOSED]
  2. #2
    Hi,

    FormPanel can't validate GridPanel. FormPanel is designed to contain fields.

    Please use the RowEditor ValidateEdit event.

    Example
    <script type="text/javascript">
        var onValidateEdit = function (rowEditor, changes, record, rowIndex) {
            return false; // to prevent changing
        };
    </script>
    <ext:RowEditor runat="server">
        <Listeners>
            <ValidateEdit Fn="onValidateEdit" />
        </Listeners>
    </ext:RowEditor>
    You also might be interested to look at the following example.
    http://forums.ext.net/showthread.php...ll=1#post71010

Similar Threads

  1. Login form - validation form
    By LordMX in forum 1.x Help
    Replies: 0
    Last Post: Aug 14, 2011, 11:44 AM
  2. Replies: 1
    Last Post: Aug 02, 2011, 12:59 PM
  3. [CLOSED] Form validation not working with column LayOut
    By Shanti in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 08, 2011, 4:07 PM
  4. [CLOSED] [1.0] BorderLayout - collapse not working correctly
    By danielg in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Jan 26, 2010, 8:43 AM
  5. [CLOSED] GridPanel.save isn't working correctly
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 06, 2009, 7:52 AM

Tags for this Thread

Posting Permissions