[CLOSED] grid validation questions

**susanz** · Feb 05, 2015, 3:58 PM

Thanks Raphael for put this all together! It is a great idea. Instead of showing results out side of the grid, is there a way to show the exclamation mark on the side of the cell and box of message when it is highlighted ?
Thanks
-szhang

**RCN** · Feb 05, 2015, 4:23 PM

In next few minutes i come up with it.

**susanz** · Feb 05, 2015, 5:17 PM

no rush, couple days is good for me. Thanks!

**RCN** · Feb 05, 2015, 10:54 PM

Let me know whether it suits your needs.

Click image for larger version.

Name: gr001.png
Views: 5
Size: 12.1 KB
ID: 20511

<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)
        {
            List<Entity> lst = new List<Entity>();

            for (int index = 1; index < 16; index++)
            {
                lst.Add(new Entity
                {
                    ID = index,
                    Name = string.Format("Name - {0}", index),
                    Salary = index * 1000
                });
            }

            Store store = this._grd.GetStore();

            store.DataSource = lst;

            store.DataBind();
        }
    }
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <script type="text/javascript">

        var AnalyzeData = function () {
            var grid = App._grd;
            var records = grid.getStore().data.map;

            for (var recordID in records) {
                AnalyzeSalary(records[recordID])
            }

            grid.getView().refresh();
        }

        var OnEdit = function (item, e) {
            e.record.commit();

            AnalyzeSalary(e.record);

            App._grd.getView().refresh();
        }

        var PrepareToolbar = function (grid, toolbar, rowIndex, record) {
            var btn = toolbar.items.get(0);
            if (!Ext.isEmpty(record.data.Error)) {
                btn.setHidden(false);
            }
            else {
                btn.setHidden(true);
            }
        };

        var AnalyzeSalary = function (record) {
            record.data.Error = null;
            if (record.data.Salary >= 12000) {
                record.data.Error = "Contact Chief Human Resources Officer";
            }
            else if (record.data.Salary >= 8000) {
                record.data.Error = "Contact Human Resources";
            }
        }

        var AddEmployee = function () {
            var grid = App._grd;

            grid.editingPlugin.cancelEdit();

            var recordID = grid.getStore().getTotalCount() + 1;

            grid.store.add({ ID: recordID, Name: Ext.String.format('Name - {0}', recordID), Salary: recordID * 1000 });

            var recordFromStore = grid.getStore().data.map[recordID];

            AnalyzeSalary(recordFromStore);

            grid.getView().focusRow(recordFromStore);

            grid.getSelectionModel().select(recordFromStore);
        };

        var RemoveEmployee = function () {
            var grid = App._grd;
            var selectionModel = grid.getSelectionModel();

            grid.editingPlugin.cancelEdit();
            grid.store.remove(selectionModel.getSelection());
        };

    </script>
</head>
<body>
    <ext:ResourceManager Locale="en" runat="server" />
    <ext:GridPanel ID="_grd" Width="600" Height="550" Border="true" Title="Employees" runat="server">
        <Store>
            <ext:Store 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" />
                            <ext:ModelField Name="Error" Type="String" />
                        </Fields>
                    </ext:Model>
                </Model>
                <Listeners>
                    <Load Handler="AnalyzeData();" />
                </Listeners>
            </ext:Store>
        </Store>
        <Plugins>
            <ext:RowEditing ClicksToMoveEditor="1" AutoCancel="false" runat="server">
                <Listeners>
                    <Edit Fn="OnEdit" />
                </Listeners>
            </ext:RowEditing>
        </Plugins>
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button Text="Add Employee" Icon="UserAdd" runat="server">
                        <Listeners>
                            <Click Fn="AddEmployee" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="btnRemoveEmployee" Text="Remove Employee" Icon="UserDelete" Disabled="true" runat="server">
                        <Listeners>
                            <Click Fn="RemoveEmployee" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <ColumnModel>
            <Columns>
                <ext:Column Text="ID" DataIndex="ID" runat="server" />
                <ext:Column Text="Name" DataIndex="Name" Flex="1" runat="server">
                    <Editor>
                        <ext:TextField AllowBlank="false" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:NumberColumn Text="Salary" DataIndex="Salary" Format="$0,0" runat="server">
                    <Editor>
                        <ext:NumberField AllowBlank="false" MinValue="1" MaxValue="150000" runat="server" />
                    </Editor>
                </ext:NumberColumn>
                <ext:CommandColumn Width="23" runat="server">
                    <Commands>
                        <ext:GridCommand CommandName="analysis" Icon="Cross" />
                    </Commands>
                    <PrepareToolbar Fn="PrepareToolbar" />
                    <Listeners>
                        <Command Handler="Ext.Msg.alert('Information', record.data.Error);" />
                    </Listeners>
                </ext:CommandColumn>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
        </SelectionModel>
        <BottomBar>
            <ext:PagingToolbar runat="server" />
        </BottomBar>
        <Listeners>
            <SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length);" />
        </Listeners>
    </ext:GridPanel>
</body>
</html>

**RCN** · Feb 05, 2015, 11:19 PM

Suzanz, if you want to shown the error as tooltip, you can set button's tooltip, as shown below:

var PrepareToolbar = function (grid, toolbar, rowIndex, record) {
    var btn = toolbar.items.get(0);
    if (!Ext.isEmpty(record.data.Error)) {
        btn.setHidden(false);
        btn.setTooltip(record.data.Error);
    }
    else {
        btn.setHidden(true);
    }
};

And if you do not want to show the error on button's click, please remove CommandColumn's Command listener

**RCN** · Feb 05, 2015, 11:31 PM

Unfortunately there is an issue with command's tooltip: http://forums.ext.net/showthread.php?53431

**susanz** · Feb 06, 2015, 2:32 AM

Thanks Raphael, That looks much better! I still have following questions:

1, In my application, there are multiple columns that need this type of Warning check. Instead of showing error on CommandColumn, is there easy way to show the error mark on the target cell ?

**2, How about column summery, how can I validate value on the summary cell using your method?

3, The "Salary" Column name and "1000" amount is hard coded in this example, Is there a good way to make it more dynamic? In my app, the column name & amount are all configured in table.

Thanks for your helps!
-susanz

**RCN** · Feb 06, 2015, 10:50 AM

Later today i will make the necessary modifications, ok?

**susanz** · Feb 06, 2015, 4:08 PM

Great! Thank you!

**RCN** · Feb 06, 2015, 4:15 PM

Do you use MVC or WebForms.

Thread: [CLOSED] grid validation questions

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] Grid Panel Grouping Questions

[CLOSED] how to control the validation sequence between the client side validation and remote validation

[CLOSED] Grid to Grid Drag and Drop Questions

[CLOSED] [1.0] Couple MVC questions and property questions

Editable Grid validation

Posting Permissions

Sitemap

Downloads

Resources