notify the User when the cell editor is not valid

[ascsolutions]

notify the User when the cell editor is not valid

Currently, when the User enter a number greater than 10 or less than 0, the NumberField is red, but the complete edition he returns to the previous value if the value entered is not valid.
I wish that when the NumberField is not valid, warn the user and until he put the correct value.

Code:

  <ext:GridPanel ID="GridPanel1" runat="server" Title="Notas" StripeRows="true" AutoExpandColumn="nome"
                        Border="true" Region="Center" Height="500" Margins="3 0 0 0" AutoExpandMax="1000">
                        <LoadMask Msg="Carregando" ShowMask="true" />
                        <Store>
                            <ext:Store ID="Store1" runat="server" OnRefreshData="Store_Refresh">
                                <Reader>
                                    <ext:JsonReader IDProperty="idaluno">
                                        <Fields>
                                            <ext:RecordField Name="idaluno" ServerMapping="Aluno.Idaluno" />
                                            <ext:RecordField Name="nome" ServerMapping="Aluno.Nome" />
                                            <ext:RecordField Name="valor" ServerMapping="Valor">
                                                <Convert Handler=" 
                                                if(value == -1) { return ''} else return value;
                                                " />
                                            </ext:RecordField>
                                            <ext:RecordField Name="idcontrole" ServerMapping="Idcontrole">
                                            </ext:RecordField>
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column DataIndex="nome" Header="Aluno">
                                </ext:Column>
                                <ext:NumberColumn ColumnID="ncNota" DataIndex="valor" Header="Nota" Format="0.00">
                                    <Editor>
                                        <ext:NumberField runat="server" EnableKeyEvents="true" ID="nfValor" MinValue="0"
                                            MaxValue="10" SelectOnFocus="true" TrimTrailedZeros="false">
                                            
                                        </ext:NumberField>
                                    </Editor>
                                    <EditorOptions CompleteOnEnter="false">
                                        <Listeners>
                                            <SpecialKey Fn="OnKeyDown" />
                                        </Listeners>
                                    </EditorOptions>
                                </ext:NumberColumn>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" MoveEditorOnEnter="false">
                            </ext:RowSelectionModel>
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="50" StoreID="Store1"
                                DisplayInfo="true" HideRefresh="true">
                                <Plugins>
                                    <ext:SlidingPager ID="SlidingPager1" runat="server">
                                        <GetText Fn="function (s) {return 'View Page: '+ s.value}" />
                                    </ext:SlidingPager>
                                </Plugins>
                            </ext:PagingToolbar>
                        </BottomBar>
                        <Listeners>
                            <KeyDown Fn="startEditing" />
                        </Listeners>
                    </ext:GridPanel>

thank you !

[Daniil]

Hi,

I can suggest the following solution.

Example

<%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { 1 },
                new object[] { 10 },
                new object[] { 100 }
            };
            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 runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var onBeforeRender = function (grid) {
            grid.stopEditing = grid.stopEditing.createInterceptor(function () {
                if (this.editing) {
                    return this.activeEditor.field.isValid();
                }
            });

            grid.startEditing = grid.startEditing.createInterceptor(function () {
                this.stopEditing();
                return !this.editing;
            });
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        AutoHeight="true" 
        ClicksToEdit="1">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test" DataIndex="test">
                    <Editor>
                        <ext:NumberField runat="server" MaxValue="10" />
                    </Editor>
                    <EditorOptions 
                        CompleteOnEnter="false" 
                        AllowBlur="false" 
                        RevertInvalid="false" />
                </ext:Column>
            </Columns>
        </ColumnModel>
        <Listeners>
            <BeforeRender Fn="onBeforeRender" />
        </Listeners>
    </ext:GridPanel>
</body>
</html>

[ascsolutions]

thanks, your solution fits.