Remote Validation using RowEditor

  1. #1

    Remote Validation using RowEditor

    Hi,

    I am trying to use remote validation to validate a field on server side but somehow the grid throws an error:

    Line: 382 Error: 'this.indicatorEl' is null or not an object

    Please find an example below. If you try to edit the first name then it will throw the above error.

    <%@ Page Language="C#"  %>
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server"> 
        protected void TextField2_Validation(object sender, RemoteValidationEventArgs e) 
        { 
            X.Msg.Alert("Test", e.ExtraParams["test"]).Show();
            e.Success = false;
            
        } 
    </script> 
    
    <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="Head2" runat="server">
        <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                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="Form2" runat="server">
            <ext:ResourceManager ID="ResourceManager2" runat="server" />
            
            <h1>GridPanel with RowEditor Plugin</h1>
            
            <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="TextField2" runat="server" AllowBlank="false" IsRemoteValidation="true">
                                    <RemoteValidation OnValidation="TextField2_Validation"> 
                                        <ExtraParams> 
                                            <ext:Parameter Name="test" Value="test" Mode="Value" /> 
                                        </ExtraParams> 
                                    </RemoteValidation> 
                                </ext:TextField>
    
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Email" DataIndex="email" Width="150">
                            <Editor>
                                <ext:TextField ID="TextField3" 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>
        </form>  
    </body>
    </html>
    Could you please advise if there is any workaround available?

    Thanks.
    Last edited by Daniil; Dec 20, 2011 at 4:18 PM. Reason: Please use [CODE] tags
  2. #2
    Hi,

    Unfortunately, we can't suggest a solution for this case, because remote validation requires to be used in the context of a FormLayout. But RowEditor doesn't use a FormLayout.

    We don't consider it a bug, so I'm moving the thread to the Help forum.

    Server side validation might be done during saving a grid's data.

Similar Threads

  1. RowEditor startEdit and validation
    By ralex in forum 1.x Help
    Replies: 11
    Last Post: Nov 23, 2011, 9:03 PM
  2. RowEditor validation
    By reezvi in forum 1.x Help
    Replies: 0
    Last Post: Aug 12, 2011, 6:36 PM
  3. [CLOSED] RowEditor Validation
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 20, 2011, 12:21 PM
  4. Replies: 3
    Last Post: Jul 11, 2011, 9:43 AM
  5. Remote Validation
    By olimpia in forum 1.x Help
    Replies: 0
    Last Post: Jun 12, 2009, 7:39 PM

Posting Permissions