What's New?

[CLOSED] Validating a cell with in the gridpanel

  1. #1
    Aug 17, 2011, 2:46 PM

    [CLOSED] Validating a cell with in the gridpanel

    Hi,

    I am having a gridpanel with roweditor, the grid row has a cell called "Name" which of textfield

    1: On creating a now row and/or updating the cell "Name" using roweditor should validate on click of 'update' of RowEditor Plugin.

    2: The validation is, the value i enter in the "Name" cell should be diffrent(unique) from the value in the "Name" cell of all the rows in the Gridpanel.

    Thank You.
    Last edited by Daniil; Jun 13, 2012 at 8:54 PM. Reason: [CLOSED]
  2. #2
    Aug 17, 2011, 7:56 PM
    Hi,

    Please look at the example.

    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[] { "name1" },
                new object[] { "name2" },
                new object[] { "name3" }
            };
            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 onValidateEdit = function (rowEditor, changes, record, rowIndex) {
            var store = rowEditor.grid.getStore(),
                value = changes.name
                valid = true;
            store.each(function (record, index) {
                if (index !== rowIndex && record.data.name === value) {
                    valid = false;
                    return false;
                }
            });
            if (!valid) {
                alert("A name must be unique.");
            }
            return valid;
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" Width="300" Height="200">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="name" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Name" DataIndex="name" Width="200">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowEditor runat="server">
                    <Listeners>
                        <ValidateEdit Fn="onValidateEdit" />
                    </Listeners>
                </ext:RowEditor>
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Aug 18, 2011, 1:08 PM
    Thank you Daniil :)
  4. #4
    Dec 19, 2011, 6:40 PM

    RowEditor after the validation alert

    Hi,

    The row editor disappears after the validation alert. Is there anyway to keep the row editor with the updated values and let the user correct the data after the validation alert?

    Thanks.
  5. #5
    Dec 19, 2011, 7:39 PM
    Hi,

    Agree, it would be much more comfortable for a user.

    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[] { "name1" },
                new object[] { "name2" },
                new object[] { "name3" }
            };
            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 myValidator = function (value) {
            var rowEditor = this.ownerCt,
                rowIndex = rowEditor.rowIndex,
                store = rowEditor.grid.getStore(),
                valid = true;
            store.each(function (record, index) {
                if (index !== rowIndex && record.data.name === value) {
                    valid = "A name must be unique. A row #" + index + " has the same name.";
                    return false;
                }
            });
            return valid;
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            Width="300" 
            Height="200">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="name" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Name" DataIndex="name" Width="200">
                        <Editor>
                            <ext:TextField runat="server" Validator="myValidator" />
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowEditor runat="server" />
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>
  6. #6
    Dec 19, 2011, 9:08 PM

    Validation

    Thanks for the quick reply!

    I have four more columns in the grid which requires similar validation so I would like to validate the input data on the Save button click (instead of looping through each record every time the value changes). Is there any way to achieve the same behaviour using ValidateEdit event?

    Regards,
    Mait
    Last edited by mait_k; Dec 20, 2011 at 11:45 AM.
  7. #7
    Dec 20, 2011, 1:15 PM
    I can't see any way without overriding the RowEditor's stopEditing method.

    Its sources you can find here:
    <Ext.Net root>\Ext.Net\Build\Ext.Net\ux\plugins\roweditor\r oweditor.js
  8. #8
    Feb 10, 2014, 12:54 AM
    Thanks to @mait_k for asking and @Daniil for answer... I use second method and works like a charm.

    Now this editor isn't annoying for my users :D

    Directly to my bookmarks.

Similar Threads

  1. Gridpanel: change cell's css class on click (eg. toggle the cell background color)
    By ocr in forum 2.x Help
    Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  2. [CLOSED] Validating if one of three fields is valid
    By IanPearce in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 04, 2011, 9:39 AM
  3. how I can get the contents of a cell in a gridpanel, and the row number (or cell number)? (code server)
    By krlos02 in forum 1.x Help
    Replies: 0
    Last Post: Aug 30, 2011, 2:48 PM
  4. Validating more than one FormPanel
    By Istofix in forum 1.x Help
    Replies: 0
    Last Post: Jun 02, 2009, 7:15 AM
  5. Combobox validating question
    By bruce in forum 1.x Help
    Replies: 0
    Last Post: Mar 09, 2009, 1:08 AM

Tags for this Thread

Posting Permissions