How to perform client side validation when entering/editing value on a grid

[Herman Gouw]

Hi,

I am currently converting a web application written in ASP.NET 1.1 and Infragistics into ASP.NET 2.0 and Telerik..

In the web application there is a grid with 4 columns:

1. Read only column (non editable)

2. Integer column (editable)

3. Double column (editable)

4. String column (editable)

and a submit button.

When the web page is displayed, the business object is loaded into the grid and displayed.

The editable columns Integer, Double and String will always be displayed in edit mode.

The following client validation will take place when the user enters any value on the editable columns:

1. The Integer column will only accept an integer value (within a valid range)

2. The Double column will only accept a double value (within a valid range)

3. The String column will accept a string value of a certain length (of a certain length)

When the user clicks the submit button, the following server processing will take place:

fetches each value on the grid and stores the value into the corresponding location on the business object.

Can you please tell me how to :

1. to perform the client validation as mentioned above, i.e.

    - the integer column will accept an integer value only (within a valid range)

    - the double column will accept a double value only (within a valid range)

    - the string column will accept a string value only (of a certain length)

2. to fetch the each value of the grid (iteratively) so that it can be stored into the business object?

Thanks & regards,

Herman Gouw

Skype: hermangouw

You can run the web page on http://www.gouw.ws/RadGrid/ClientGridEdit.aspx

The source code for the web page is as follows:

ASPX:

=====

<form id="form1" runat="server">

<div>

    <telerik:RadScriptManager ID="radScriptManager" runat="server" />

    <telerik:RadGrid ID="radGrid" AutoGenerateColumns="false" AllowMultiRowEdit="true" AllowMultiRowSelection="true" GridLines="Vertical" OnNeedDataSource="radGrid_NeedDataSource" OnPreRender="radGrid_PreRender" runat="server">

     <ClientSettings>

            <Scrolling UseStaticHeaders="true" />

        </ClientSettings>

        <MasterTableView DataKeyNames="Read" EditMode="InPlace" TableLayout="Fixed">

            <Columns>

                <telerik:GridBoundColumn DataField="Read" DataType="System.String" HeaderText="Read Only" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ReadOnly="true" UniqueName="Read" />

                <telerik:GridBoundColumn DataField="Integer" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="Integer Only" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ReadOnly="false" UniqueName="Integer" />

                <telerik:GridBoundColumn DataField="Dbl" DataFormatString="{0:#,##0.#0}" DataType="System.Double" HeaderText="Double Only" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ReadOnly="false" UniqueName="Dbl" />

                <telerik:GridBoundColumn DataField="Str" DataType="System.String" HeaderText="String" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ReadOnly="false" UniqueName="Str" />

            </Columns>

        </MasterTableView>

    </telerik:RadGrid>

</div>

<div align="left">

    <asp:Button ID="button" OnClick="button_Click" Text="Submit" runat="server" />

</div>

</form>

ASPX.CS:

========

public partial class ClientGridEdit : System.Web.UI.Page

{

    private ArrayList _data = new ArrayList();

    protected void Page_Load(object sender, EventArgs e)

    {

        if (IsPostBack)

        {

            this._data = (ArrayList)Session["DATA"];

        }

        else

        {

            this._data = Data.Load();

            Session["DATA"] = this._data;

        }

    }

    protected void radGrid_PreRender(object sender, System.EventArgs e)

    {

        foreach (GridDataItem item in this.radGrid.Items)

        {

            item.Edit = true;

        }

        this.radGrid.Rebind();

    }

    protected void radGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

    {

        this.radGrid.DataSource = this._data;

    }

    protected void button_Click(object sender, EventArgs e)

    {

        // To fetch the value entered in each grid and to store into the business object

    }

}

public class Data

{

    public string Read { get; set; }

    public int Integer { get; set; }

    public double Dbl { get; set; }

    public string Str { get; set; }

    public Data() : this(0, 0, 0.0, String.Empty) {}

    public Data(int read, int integer, double dbl, string str)

    {

        this.Read = ((DateTime)DateTime.Today).AddMinutes(240 + (30 * read)).ToString("HH:mm");

        this.Integer = integer;

        this.Dbl = dbl;

        this.Str = str;

    }

    public static ArrayList Load()

    {

        ArrayList arrayList = new ArrayList();

        for (int i = 1; i <= 6; i++)

        {

            arrayList.Add(new Data(i, 0, 0.00, String.Empty));

        }

        return arrayList;

    }

}

[Tsvetoslav]

Hi Herman Gouw,

Thank you for contacting us and for your questions.

1. Concerning the validation issue, please, take a look at the following help topic and related online example.

2. With regards to the second question, you can use the grid's ItemDataBound event and iterate through the items as follows:

  protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
  {
    foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
    {
      int EmployeeID = DataBinder.Eval(item.DataItem, "EmployeeID");
      string LastName = DataBinder.Eval(item.DataItem, "LastName");
      ....

      employees.Add(new Employee(EmployeeID,LastName,....));
    }
  }

I hope this information helps.

If you need further assistance, do let us know.

Regards,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.