Version

Enabling Row Editing (WebDataGrid)

Topic Overview

Purpose

This topic details how to enable the Row Editing behavior in the WebDataGrid ™ .

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic provides an overview of the WebDataGrid Row Editing behavior’s features and functionality.

This topic demonstrates how to set up a basic WebDataGrid bound to a SqlDataSource.

In this topic

This topic contains the following sections:

Introduction

By default, row editing is disabled. You can enable it from the WebDataGrid Designer, from the ASPX markup, or in the code-behind. Each of these is explained in detail below.

Enabling row editing summary chart

The following table summarizes the ways to enable row editing for the WebDataGrid . The full procedures are available after this summary table.

Procedure Details

You enable the Row Editing and Editing Core behaviors by setting the respective options from WebDataGrid ’s smart tag.

You enable the Row Editing and Editing Core behaviors by adding the respective ASPX markup to the web form.

You enable the Row Editing and Editing Core behaviors by creating them in the code-behind.

Enabling Row Editing with the WebDataGrid Designer

Introduction

This procedure enables the Row Editing and Editing Core behaviors of the WebDataGrid using the control’s Designer. You enable these behaviors by setting the respective options from WebDataGrid ’s smart tag.

Preview

The following screenshot is a preview of the final result – the WebDataGrid has row editing enabled as evidenced by a row that has entered Edit mode as a result of a user action.

Enabling Row Editing (WebDataGrid) 1.png

Prerequisites

To complete the procedure, you need the following:

  • An ASP.NET Visual Studio® web site or web application

  • A ScriptManager or WebScriptManager™ added to the web form

  • A WebDataGrid added to the web form and bound to any data source

Following is a conceptual overview of the process:

1. Accessing the Behaviors’ options

2. Enabling row editing in the options

3. (Optional) Verifying the result

Steps

The following steps demonstrate how to enable the Row Editing behavior in the designer.

1. Access the Behaviors options.

1. Open the WebDataGrid’s smart tag .

In the Designer, click the smart tag button to open the WebDataGrid ‘s Designer.

Enabling Row Editing (WebDataGrid) 2.png

2. Click Edit Behaviors .

This opens the designer for the WebDataGrid’s behaviors.

Enabling Row Editing (WebDataGrid) 3.png

2. Enable row editing in the options.

1. Check the box for Row Editing Behavior

2. Click OK to commit your changes and close the Designer window . The Row Editing behavior takes a dependency on the Editing Core behavior and thus that behavior is checked automatically.

3. (Optional) Verify the result.

To verify the result, run the project and double-click on a row . You will see the row editing behavior.

Enabling Row Editing in ASPX Markup

Introduction

You enable the Row Editing and Editing Core behaviors by adding the respective ASPX markup to the web form. This is the same markup that is generated when using the Designer (See Enabling Row Editing with the WebDataGrid Designer). Because the Row Editing behavior requires the EditingCore behavior, you will add that as well.

Preview

The following screenshot is a preview of the final result.

Enabling Row Editing (WebDataGrid) 1.png

Prerequisites

To complete the procedure, you need the following:

  • An ASP.NET Visual Studio web site or web application

  • A WebDataGrid added to the web form and bound to any data source

  • The ig_res folder and styleset included in the project and configured in the web.config file

  • The Infragistics.Web.UI and Infragistics.Web.UI.GridControls namespaces registered on the web form with the ig tag prefix

Overview

Following is a conceptual overview of the process:

1. Adding the EditingCore behavior

2. Adding the RowEditing behavior

3. (Optional) Verifying the result

Steps

The following steps demonstrate how to enable the Row Editing behavior in ASPX markup.

1. Add the EditingCore behavior.

Add the EditingCore Behavior to the WebDataGrid behaviors collection.

The Behaviors tag is nested within the WebDataGrid tags. If you already have other behaviors defined, the EditingCore behavior is added as a sibling of those behaviors within the Behaviors tag.

In ASPX:

<ig:WebDataGrid ID="WebDataGrid1" runat="server">
    <Behaviors>
        <ig:EditingCore>
        </ig:EditingCore>
    </Behaviors>
</ig:WebDataGrid>

2. Add the Row Editing behavior.

Add the RowEditing behavior within the EditingCore`s behaviors collection. The EditingCore behavior has a 'Behaviors' collection similar to the grid. The RowEditing behavior is defined within the 'Behaviors' tag of the 'EditingCore' tag.

In ASPX:

<ig:EditingCore>
    <Behaviors>
        <ig:RowEditing></ig:RowEditing>
    </Behaviors>
</ig:EditingCore>

3. (Optional) Verifying the result.

To verify the result, save and run the project and double-click on a row . You will see the row editing behavior.

1. Save the ASPX for your page.

At this point, the code and grid should have the following code elements and functionality.

In ASPX:

<ig:WebDataGrid ID="WebDataGrid1" runat="server">
    <Behaviors>
        <ig:EditingCore>
            <Behaviors>
                <ig:RowEditing></ig:RowEditing>
            </Behaviors>
        </ig:EditingCore>
    </Behaviors>
</ig:WebDataGrid>

2. Run the project and double click on a row. You will see the row editing behavior.

Enabling Row Editing in the Code-Behind

Introduction

This procedure adds the RowEditing behavior to the WebDataGrid at run-time in the code-behind. This approach is useful when you want to add the behavior conditionally. The RowEditing behavior is added to the EditingCore behavior’s Behaviors collection so you will add the EditingCore behavior at runtime as well. You can use the page init or the page load events to add the behaviors during the page lifecycle. This example uses page load.

Preview

The following screenshot is a preview of the final result.

Enabling Row Editing (WebDataGrid) 1.png

Prerequisites

To complete the procedure, you need the following:

  • An ASP.NET Visual Studio web site or web application

  • A WebDataGrid added to the web form with and bound to any data source

  • The ig_res folder and styleset included in the project and configured in the web.config file

  • A using statement for the Infragistics.Web.UI.GridControls namespace

Overview

Following is a conceptual overview of the process:

1. Adding the EditingCore behavior

2. Adding the RowEditing behavior

3. (Optional) Verifying the result

Steps

The following steps demonstrate how to enable the Row Editing behavior in the code-behind.

1. Enable Row Editing in the Code-Behind.

Add the EditingCore Behavior to the WebDataGrid behaviors collection

The EditingCore behavior is added directly to the WebDataGrid’s Behaviors collection using the CreateBehavior method.

In C#:

protected void Page_Load(object sender, EventArgs e)
{
    WebDataGrid1.Behaviors.CreateBehavior<EditingCore>();
}

2. Add the Row Editing behavior

*Add the RowEditing behavior to the EditingCore’s behaviors collection.* The EditingCore behavior has a `Behaviors` collection similar to the grid. The RowEditing behavior is added to the `Behaviors` collection of the EditingCore behavior.

In C#:

WebDataGrid1.Behaviors.EditingCore.Behaviors.CreateBehavior<RowEditing>();

3. (Optional) Verify the result.

To verify the result, save and run the project and double-click on a row . You will see the row editing behavior. 1. Save the code-behind file.

At this point, the code should include the following:

In C#:

using Infragistics.Web.UI.GridControls;
protected void Page_Load(object sender, EventArgs e)
{
    WebDataGrid1.Behaviors.CreateBehavior<EditingCore>();
    WebDataGrid1.Behaviors.EditingCore.Behaviors.CreateBehavior<RowEditing>();
}

2. Run the project and double click on a row. You will see the row editing behavior.

Related Content

Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic provides a conceptual overview of the Editing feature (EditingCore behavior) of the WebDataGrid .

This topic details how to enable the Row Editing behavior in the WebHierarchicalDataGrid™.

Samples

The following samples provide additional information related to this topic.

Sample Purpose

This sample demonstrates row editing behavior with Done/Cancel buttons and an editor appearing in every cell of the editable row.

You can customize the appearance of the Row Editing behavior by hiding the Done/Cancel buttons or by providing custom HTML and CSS classes for the buttons.

This sample demonstrates how to use the EnteringEditMode and ExitingEditMode events to customize the row editing behavior.