WebDataGrid Manual CRUD

[Infragistics] Radoslav Minchev / Friday, February 3, 2012

Purpose

WebDataGrid (WDG) has the capability to update the DataSource automatically if AutoCRUD property of EditingCore is set to true. What is “Manual CRUD”? This is a technique used by developers to persist all changes made in the grid UI to the DataSource by their own custom code. In this article I will go through the steps required to get WDG involved in Manual Crud scenario. I will demonstrate the setup of each behavior needed in order to make this happen. I will show how to use Editor Providers with AddNew Row feature also.

Required background

The article assumes you are familiar with WebDataGrid component. If you are not, consider the starting point at this link.

Prerequisites

If you intend to work with the article you will need the following:

Visual Studio 2010/2008
NetAdvanage for ASP.NET 11.2

Steps Overview

Create new empty website in Visual Studio
Setup your DataSource( in this step you can download the sample from the end of the article and copy App_Folder from the sample into your project)
Create an Entity “Employee” and add the XMLParser class
Drag WebDataGrid component form the toolbox onto the page
Setup grid’s columns
Setup RowAdding Behavior
Setup RowDeleting Behavior
Setup RowEditTemplate
Handle CRUD operations on the server

Steps

Open Visual Studio and create empty ASP.NET WebSite.
Setup your DataSource. In this step I’ve created two classes, the first one is called “Employee” and the second one is XMLParser static class. The second is used as a bridge between underling DataSource, which is simply xml file, and WDG.

The employee class definition:

public class Employee
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Team { get; set; }
        public string Level { get; set; }
        public string Office { get; set; }
    }

The XMLParser class definition:

/// <summary>
/// Summary description for XmlParser
/// </summary>
public static class XmlParser
{
 
    public static List<Employee> GetAllEmployees(string xmlFilePath)
    {
        try
        {
            List<Employee> employees = new List<Employee>();
 
            Object obj = new object();
            XDocument document = null;
 
            lock (obj)
            {
                document = XDocument.Load(xmlFilePath);
            }
            foreach (var element in document.Elements().Elements("employees").Elements("employee"))
            {
                employees.Add(new Employee()
                {
                    Name = element.Element("name").Value,
                    Email = element.Element("email").Value,
                    Level = element.Element("level").Value,
                    Team = element.Element("team").Value,
                    Office = element.Element("office").Value
                });
 
            }
 
            return employees;
        }
        catch (Exception)
        {
            throw;
        }
 
    }
 
    public static string GetFileOfAllEmployees(string path)
    {
        try
        {
            Object obj = new object();
 
            lock (obj)
            {
                return XDocument.Load(path).ToString();
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
 
    public static XElement LoadFile(string path)
    {
        try
        {
            Object obj = new object();
 
            lock (obj)
            {
                return XElement.Load(path);
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
 
    public static void SaveFile(XElement file, string path)
    {
        try
        {
            Object obj = new object();
 
            lock (obj)
            {
                file.Save(path);
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
}

Here is the definition of the XML file used as a persistent store:

<?xml version="1.0" encoding="utf-8"?>
<team>
  <configuration></configuration>
  <employees>
    <employee>
      <office>US</office>
      <name>Aaron</name>
      <email>Aaron@company.com</email>
      <level>0</level>
      <team>XAML</team>
    </employee>
  </employees>
</team>

3. In this step drag the WDG from the Visual Studio toolbox on the page. If the controls are not in your toolbox even after you have installed them, here is a link which explains how to add the controls to the toolbox.

5. In this step we will setup the WDG’s columns. Note that we set AutoGenerateColumns property to false, which means that over the data binding stage the grid will try to match the properties of the Entity from the DataSource that it is bound to, in our case “Employee” class. The key for each BoundDataField must match the property from the Employee class.

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Width="100%" AutoGenerateColumns="False"
      Height="450px" StyleSetName="IG">
      <Columns>
          <ig:BoundDataField Key="Name">
              <Header Text="Name" />
          </ig:BoundDataField>
          <ig:BoundDataField Key="Email">
              <Header Text="Email" />
          </ig:BoundDataField>
          <ig:BoundDataField Key="Level" DataType="System.String">
              <Header Text="Level" />
          </ig:BoundDataField>
          <ig:BoundDataField Key="Team">
              <Header Text="Team" />
          </ig:BoundDataField>
          <ig:BoundDataField Key="Office">
              <Header Text="Office" />
          </ig:BoundDataField>
      </Columns>

6. In this step we will setup RowAdding Behavior (Feature) of the grid. This behavior allows the developer to add new rows to the WDG and persist them later when they are posted to the server either via full or ajax (partial) postback. The setup looks like this:

<ig:RowAdding Alignment="Top" EditModeActions-EnableOnActive="true">
            <EditModeActions EnableOnActive="True"/>         
            <ColumnSettings>
                <ig:RowAddingColumnSetting ColumnKey="Level"
                    EditorID="WebDataGrid1_DropDownProviderLevel"
                    DefaultValueAsString="Level" />
                <ig:RowAddingColumnSetting ColumnKey="Team"
                    EditorID="WebDataGrid1_DropDownProviderTeam"
                    DefaultValueAsString="Team" />
                <ig:RowAddingColumnSetting ColumnKey="Office"
                    EditorID="WebDataGrid1_DropDownProviderOffice"
                    DefaultValueAsString="Office" />
            </ColumnSettings>
        </ig:RowAdding>

As you might have already noticed in ColumnSettings tag I’ve specified Editor providers for few of the columns. The editor providers allow developers to edit a particular column through a given control. In our case the “Level” column is edited by DropDownEditor Provider. You easily can spot how the association is done through ColumnKey and EditorID. If you are wondering how the setup of the DropDownProvider is implemented, here is the answer:

<ig:DropDownProvider ID="WebDataGrid1_DropDownProviderLevel">
    <EditorControl
    DropDownContainerWidth="170%" DropDownContainerHeight="100px"
    DropDownContainerMaxHeight="200px" EnableAnimations="False" EnableDropDownAsChild="False">
        <Items>
            <ig:DropDownItem Selected="false" Value="0" Text="0">
            </ig:DropDownItem>
            <ig:DropDownItem Selected="False" Value="1" Text="1">
            </ig:DropDownItem>
            <ig:DropDownItem Selected="False" Value="2" Text="2">
            </ig:DropDownItem>
            <ig:DropDownItem Selected="False" Value="3" Text="3">
            </ig:DropDownItem>
        </Items>  
    </EditorControl>
</ig:DropDownProvider>

As a result of the completed setup above, the grid will allow adding new employees to our DataSource using EditorProviders.

7. In this step we will setup RowDeleting Behavior. Similar to the RowAdding Behavior, it allows adding new rows to the WDG, the RowDeleting feature gives us the possibility to delete rows from the grid..

<ig:RowDeleting />

Is it so simple? Yes it is, in order to enable this feature we need to add the above line of code to the Behaviors tag. To see this feature in action you may select grid row and press the Delete button from the keyboard. The row will be deleted from the UI and post will be issued to the server. Alex Kartavov blogged about “Confirm WebDataGrid Row Deletion with Message Box” while ago. It is considered to be a good practice prior to deletion of any rows from the grid to prompt the user to confirm the action.

8. RowEditTemplate is a great feature of the grid that allows developers to edit the grid easily. All you need to get it working is to go to the smart tag of the control and select Behaviors, then enable the RowEditingTemplate and click apply.

Once you’ve enabled RET(RowEditTemplate) you can double click on the row selector for a particular row and experience it.

9. Here I will show you how the server operations are handled and data are saved into the data store which is XML file in our case. I will go in details only for RowAdding handler. The code looks like this:

void EditingCore_RowAdding(object sender, RowAddingEventArgs e)
{
    XElement emp = new XElement("employee",
                    new XElement("office", 1),
                    new XElement("name", 2),
                    new XElement("email", 3),
                    new XElement("level", 4),
                    new XElement("team", 5)
    );
 
    emp.Element("name").Value = e.Values["Name"].ToString();
    emp.Element("office").Value = e.Values["Office"].ToString();
    emp.Element("email").Value = e.Values["Email"].ToString();
    emp.Element("level").Value = e.Values["Level"].ToString();
    emp.Element("team").Value = e.Values["Team"].ToString();
 
    XElement file = XmlParser.LoadFile(Server.MapPath(@"App_data\Employees.xml"));
 
    XElement element = new XElement("employee");
    //element.
    file.Element("employees").Add(emp);
 
    //file.Elements().Elements("employees").First()
    try
    {
        file.Save(Server.MapPath(@"App_data\Employees.xml"));
    }
    catch (Exception)
    {
        throw;
    }
    finally
    {
        string path = Server.MapPath(@"App_data\Employees.xml");
        this.WebDataGrid1.DataSource = GetAllEmployees(path);
        this.WebDataGrid1.DataBind();
    }
}

In this handler I update the xml file with the newly added record.

Hope you enjoy it !

Purpose

Required background

Prerequisites

Steps Overview

Steps

Related Topics