[CLOSED] grid validation questions

Page 1 of 4 123 ... LastLast
  1. #1

    [CLOSED] grid validation questions

    (I submit this ticket before, but cannot find it. This is resubmit.)

    I have an editable dynamic grid (row editor). I need to do 2 types of validation : one blocking data if it is invalid, one is show warning message when data is load & changed. The first one works well with VType on row editor. What is good way for "Warning" ? I also need have "Warning" on group summery -- show warning message on grouping & on total changed.

    Thanks
    -szhang
    Last edited by Daniil; Feb 17, 2015 at 1:56 PM. Reason: [CLOSED]
  2. #2
    Warn when data is loaded: Store's Load event listener.

    Warn when data is edited: RowEditing's Edit event listener.

    Validation Examples:
    https://examples3.ext.net/#/GridPane...ins/RowEditor/
    https://examples3.ext.net/#/GridPane...Editor_Remote/
    Last edited by RCN; Feb 04, 2015 at 12:03 AM.
  3. #3
    Hi Raphael, Thanks for your reply. Could you give me more details ?
    1, Suppose I have 2 Vtypes on different columns, one is warning validation one is required. how Do I make row editor to enable save if only warning validation fails and block saving if Required validation fails?

    2, how do I trigger validation for all data on the whole grid when store loaded? Is there any method like grid.Validate() ? assume I have several custom VType validations.

    3, How do I validate column summary ? using SummaryRenderer.Fn ?

    Thanks

    szhang
  4. #4
    1, Suppose I have 2 Vtypes on different columns, one is warning validation one is required. how Do I make row editor to enable save if only warning validation fails and block saving if Required validation fails?
    It's done by default. Take a look on https://examples3.ext.net/#/GridPane...ins/RowEditor/.

    Save button is enabled when validation succeeds:
    Click image for larger version. 

Name:	re001.png 
Views:	6 
Size:	8.6 KB 
ID:	20311
    But it's disabled when validation fails:
    Click image for larger version. 

Name:	re002.png 
Views:	3 
Size:	9.3 KB 
ID:	20321
    2, how do I trigger validation for all data on the whole grid when store loaded? Is there any method like grid.Validate() ? assume I have several custom VType validations.
    Row Editor (https://examples3.ext.net/#/GridPane...ins/RowEditor/) does not allow to save if there is invalid data
    Cell Editor (https://examples3.ext.net/#/GridPane...s/CellEditing/) reverts any invalid change.
    how do I trigger validation for all data on the whole grid when store loaded
    Are you gonna load invalid data? I suppose that saved data is already validated. Please expand on that.
    Is there any method like grid.Validate() ?
    I think that it's a bit invalid scenario. Going further that validation is performed by the column's editor, not by the column itself. So, if possible, you should access column's editor, and, somehow, validate column's value against its editor.
    Last edited by RCN; Feb 04, 2015 at 4:05 AM.
  5. #5
    I guess I did not make the issue clear. I have two type of validations :
    "Warning" -- the data can be saved but need to warn user. For example, if user enter salary $200000, we need show user the salary exceed $15000 but will allow user to save it, next time, when this data is reloaded, we need show the warning again.

    "Required" -- this is default row editor validation, it blocks data saving with error message.

    I have these 2 type of validations mixed in one grid, how do I make row editor to not block invalid "Warning" ?
    Thanks
  6. #6
    In the morning i will implement it for you.
  7. #7
    great! I am looking forward to see your solution! Please note, my grid is all dynamic, we don't know the columns until the data is loaded from table.
    Thanks
    -szhang
    Last edited by susanz; Feb 04, 2015 at 5:14 PM.
  8. #8
    I am pretty busy at this moment but later today i implement it, ok?
  9. #9
    Sure, no problem.Thanks!
  10. #10
    Let me know whether the following example helps you.

    <script runat="server">
        public class Entity
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
    
            public float Salary { get; set; }
        }
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this._grd.GetStore();
    
    
                List<Entity> lst = new List<Entity>();
    
                for (int index = 1; index < 15; index++)
                {
                    lst.Add(new Entity
                    {
                        ID = index,
                        Name = string.Format("Name - {0}", index),
                        Salary = index * 1000
                    });
                }
    
                store.DataSource = lst;
    
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var Edit = function (item, e) {
                e.record.commit();
    
                ProcessSummary();
            }
    
            var ProcessSummary = function () {
                var records = App._grd.getStore().data.map;
    
                var result = '';
    
                for (var id in records) {
    
                    var rec = records[id];
                    if (rec.data.Salary > 10000) {
    
                        result = Ext.String.format('{0}<li>{1}</li>', result, rec.data.Name)
                    }
                }
                if (!Ext.isEmpty(result)) {
                    result = Ext.String.format('<b>Salaries > $ 10,000 (Employee Name)</b></br /><ul>{0}</ul>', result)
                }
    
                App._lblResult.setHtml(result);
            }
    
            var addEmployee = function () {
                var grid = App._grd;
                grid.editingPlugin.cancelEdit();
    
                var recordID = App._str.getTotalCount() + 1;
    
                grid.store.insert(0, { ID: recordID, Name: Ext.String.format('Name - {0}', recordID), Salary: recordID * 1000 });
                grid.editingPlugin.startEdit(0, 0);
            };
    
            var removeEmployee = function () {
                var grid = App._grd,
                    sm = grid.getSelectionModel();
    
                grid.editingPlugin.cancelEdit();
                grid.store.remove(sm.getSelection());
                if (grid.store.getCount() > 0) {
                    sm.select(0);
                }
    
                ProcessSummary();
            };
    
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="_grd" runat="server" Width="600" Height="600" Border="true" Title="Employees">
                <Store>
                    <ext:Store ID="_str" AutoLoad="true" runat="server">
                        <Model>
                            <ext:Model IDProperty="ID" runat="server">
                                <Fields>
                                    <ext:ModelField Name="ID" Type="Int" />
                                    <ext:ModelField Name="Name" Type="String" />
                                    <ext:ModelField Name="Salary" Type="Float" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Listeners>
                            <Load Handler="ProcessSummary();" />
                        </Listeners>
                    </ext:Store>
                </Store>
                <Plugins>
                    <ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false" >
                        <Listeners>
                            <Edit Handler="Edit(item, e);" />
                        </Listeners>
                    </ext:RowEditing>
                </Plugins>
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Add Employee" Icon="UserAdd">
                                <Listeners>
                                    <Click Fn="addEmployee" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete" Disabled="true">
                                <Listeners>
                                    <Click Fn="removeEmployee" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel>
                    <Columns>
                        <ext:Column runat="server" Text="ID" DataIndex="ID" />
                        <ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" />
                            </Editor>
                        </ext:Column>
                        <ext:NumberColumn runat="server" Text="Salary" DataIndex="Salary" Format="$0,0">
                            <Editor>
                                <ext:NumberField runat="server" AllowBlank="false" MinValue="1" MaxValue="150000" />
                            </Editor>
                        </ext:NumberColumn>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length);" />
                </Listeners>
            </ext:GridPanel>
            <div style="width: 590px; border: 1px solid gray; padding: 5px;">
                <ext:Label ID="_lblResult" runat="server" />
            </div>
        </form>
    </body>
    </html>
    Last edited by RCN; Feb 05, 2015 at 10:42 PM.
Page 1 of 4 123 ... LastLast

Similar Threads

  1. [CLOSED] Grid Panel Grouping Questions
    By Z in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 05, 2013, 5:04 PM
  2. Replies: 3
    Last Post: Jul 11, 2011, 9:43 AM
  3. [CLOSED] Grid to Grid Drag and Drop Questions
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 15, 2011, 10:43 AM
  4. [CLOSED] [1.0] Couple MVC questions and property questions
    By alliedwallet.com in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 28, 2010, 11:01 AM
  5. Editable Grid validation
    By n_s_adhikari@rediffmail.com in forum 1.x Help
    Replies: 0
    Last Post: Aug 06, 2009, 6:20 PM

Posting Permissions