DataGrids are vital controls in many user interfaces. Like it or not still 2D tables are one of the most comfortable user interface elements in not only viewing data but also in performing rapid inserts and updates.
CRUD operations of DataGrid is not a big innovation, but there are plenty of ways to do that. This post explains how to perform CRUD operations using Infragistics WebDataGrid control in ASP.NET.
This code is written using Infragistics version 12.2
Create a simple WebDataGrid.
1: <ig:WebDataGrid ID="WebGridCarton" runat="server" Height="350px" Width="100%" AutoGenerateColumns="False"
2: DataKeyFields="CartonViewModelGuid" EnableDataViewState="True"
3: OnRowAdded="WebGridCarton_RowAdded" OnRowAdding="WebGridCarton_RowAdding"
4: OnRowDeleted="WebGridCarton_RowDeleted" OnRowsDeleting="WebGridCarton_RowsDeleting"
5: OnRowUpdated="WebGridCarton_RowUpdated" OnRowUpdating="WebGridCarton_RowUpdating">
6: <Columns>
7: <ig:BoundDataField DataFieldName="CartonViewModelGuid" Key="CartonViewModelGuid" Hidden="true" HtmlEncode="true">
8: <Header Text="Guid">
9: </Header>
10: </ig:BoundDataField>
11: <ig:BoundDataField DataFieldName="CartonInfoId" Key="CartonInfoId" Hidden="true" HtmlEncode="true">
12: <Header Text="Id">
13: </Header>
14: </ig:BoundDataField>
15: <ig:BoundDataField DataFieldName="SelectionColumn" Key="SelectionColumn" HtmlEncode="true" Width="15">
16: </ig:BoundDataField>
17: <ig:BoundDataField DataFieldName="Size" Key="Size" HtmlEncode="true">
18: <Header Text="Size">
19: </Header>
20: </ig:BoundDataField>
21: <ig:BoundDataField DataFieldName="Length" Key="Length" HtmlEncode="true">
22: <Header Text="Length (cm)">
23: </Header>
24: </ig:BoundDataField>
25: <ig:BoundDataField DataFieldName="Width" Key="Width" HtmlEncode="true">
26: <Header Text="Width (cm)">
27: </Header>
28: </ig:BoundDataField>
29: <ig:BoundDataField DataFieldName="Height" Key="Height" HtmlEncode="true">
30: <Header Text="Height (cm)">
31: </Header>
32: </ig:BoundDataField>
33: <ig:BoundDataField DataFieldName="Volume" Key="Volume" HtmlEncode="true">
34: <Header Text="Volume (cbm)">
35: </Header>
36: </ig:BoundDataField>
37: <ig:BoundDataField DataFieldName="Weight" Key="Weight" HtmlEncode="true">
38: <Header Text="Weight (kg)">
39: </Header>
40: </ig:BoundDataField>
41: <ig:BoundDataField DataFieldName="WeightLimit" Key="WeightLimit" HtmlEncode="true">
42: <Header Text="Weight Limit (kg)">
43: </Header>
44: </ig:BoundDataField>
45: </Columns>
46: <Behaviors>
47: <ig:Activation Enabled="true"></ig:Activation>
48: <ig:Selection CellClickAction="Row" RowSelectType="Single" Enabled="true"></ig:Selection>
49: <ig:EditingCore AutoCRUD="false">
50: <Behaviors>
51: <ig:CellEditing EditModeActions-EnableF2="true" EditModeActions-MouseClick="Single" Enabled="true">
52: <ColumnSettings>
53: <ig:EditingColumnSetting ColumnKey="CartonInfoId" ReadOnly="true" />
54: <ig:EditingColumnSetting ColumnKey="SelectionColumn" ReadOnly="true" />
55: <ig:EditingColumnSetting ColumnKey="CartonViewModelGuid" ReadOnly="true" />
56: <ig:EditingColumnSetting ColumnKey="Size" EditorID="DropDownProvider_Size" ValidatorID="RequiredFieldValidator1" />
57: <ig:EditingColumnSetting ColumnKey="Length" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
58: <ig:EditingColumnSetting ColumnKey="Width" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
59: <ig:EditingColumnSetting ColumnKey="Height" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
60: <ig:EditingColumnSetting ColumnKey="Volume" EditorID="WebTextEditor1" ReadOnly="true" ValidatorID="DecimalValidator" />
61: <ig:EditingColumnSetting ColumnKey="Weight" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
62: <ig:EditingColumnSetting ColumnKey="WeightLimit" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
63: </ColumnSettings>
64: <EditModeActions MouseClick="Single" />
65: </ig:CellEditing>
66: <ig:RowAdding Alignment="Top" EditModeActions-EnableF2="true" EditModeActions-EnableOnActive="true"
67: EditModeActions-MouseClick="Single" Enabled="true">
68: <EditModeActions EnableOnActive="True" MouseClick="Single" />
69: <ColumnSettings>
70: <ig:RowAddingColumnSetting ColumnKey="SelectionColumn" ReadOnly="true" />
71: <ig:RowAddingColumnSetting ColumnKey="Size" EditorID="DropDownProvider_Size" ValidatorID="RequiredFieldValidator1" />
72: <ig:RowAddingColumnSetting ColumnKey="Length" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
73: <ig:RowAddingColumnSetting ColumnKey="Width" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
74: <ig:RowAddingColumnSetting ColumnKey="Height" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
75: <ig:RowAddingColumnSetting ColumnKey="Volume" EditorID="WebTextEditor1" ReadOnly="true" ValidatorID="DecimalValidator" />
76: <ig:RowAddingColumnSetting ColumnKey="Weight" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
77: <ig:RowAddingColumnSetting ColumnKey="WeightLimit" EditorID="WebTextEditor1" ValidatorID="DecimalValidator" />
78: </ColumnSettings>
79: </ig:RowAdding>
80: <ig:RowDeleting Enabled="true" />
81: </Behaviors>
82: </ig:EditingCore>
83: </Behaviors>
84: <EditorProviders>
85: <ig:TextBoxProvider ID="WebTextEditor1">
86: <EditorControl ID="EditorControl1" ClientIDMode="Static" runat="server"></EditorControl>
87: </ig:TextBoxProvider>
88: <ig:DropDownProvider ID="DropDownProvider_Size">
89: <EditorControl ClientIDMode="Predictable" DropDownContainerMaxHeight="100px" EnableAnimations="False"
90: EnableDropDownAsChild="False" ID="CartonSizeDrdEditor" DropDownContainerWidth="185px" AutoPostBack="true"
91: EnableAjaxViewState="true">
92: </EditorControl>
93: </ig:DropDownProvider>
94: </EditorProviders>
95: </ig:WebDataGrid>
This grid has one drop down editor and others fields are text box editors. And it supports CRUD. The grid control has 6 CRUD events associated with it. They’re RowAdding, RowAdded, RowUpdating, RowUpdated, RowDeleting and RowDeleted.
This is the ViewModel class used for data binding.
1: public class CartonInfoGridViewModel
2: {
3: public string CartonViewModelGuid { get; private set; }
4:
5: public int CartonInfoId { get; set; }
6: public string Size { get; set; }
7: public string Length { get; set; }
8: public string Width { get; set; }
9: public string Height { get; set; }
10: public string Volume { get; set; }
11: public string Weight { get; set; }
12: public string WeightLimit { get; set; }
13:
14: public CartonInfoGridViewModel()
15: {
16: this.CartonViewModelGuid = Guid.NewGuid().ToString();
17: }
18: }
CartonViewModelGuid property is used identify the objects in the Session collection.
Adding Rows
In the RowAdding event we create a new ViewModel object with the values entered in the grid. And add it to the Session collection then we bind the Session collection to the grid. Please note these property names are same as the ones in the ASPX file.
1: protected void WebGridCarton_RowAdding(object sender, Infragistics.Web.UI.GridControls.RowAddingEventArgs e)
2: {
3: var cartonRow = new CartonInfoGridViewModel();
4:
5: cartonRow.CartonInfoId = -1;
6: cartonRow.Size = e.Values["Size"].ToString();
7: cartonRow.Length = e.Values["Length"].ToString();
8: cartonRow.Width = e.Values["Width"].ToString();
9: cartonRow.Height = e.Values["Height"].ToString();
10: cartonRow.Volume = e.Values["Volume"].ToString();
11: cartonRow.Weight = e.Values["Weight"].ToString();
12: cartonRow.WeightLimit = e.Values["WeightLimit"].ToString();
13:
14: if (this.Session["GridGridCartonsInfo"] != null && this.Session["GridCartonsInfo"] is List<CartonInfoGridViewModel>)
15: {
16: var collection = Session["GridCartonsInfo"] as List<CartonInfoGridViewModel>;
17: collection.Add(cartonRow);
18: }
19: else
20: {
21: var collection = new List<CartonInfoGridViewModel>();
22: collection.Add(cartonRow);
23: }
24:
25: this.DataBindCaronInfoGrid();
26: }
DataBindCaronInfoGrid method binds the Session data to the Grid.
Just to prevent any Javascript errors popping up during this process in the RowAdded event we suppress the exceptions.
1: protected void WebGridCarton_RowAdded(object sender, Infragistics.Web.UI.GridControls.RowAddedEventArgs e)
2: {
3: e.ExceptionHandled = true;
4: }
Deleting Rows
To delete a row we get the Id of the object and remove it from the Session collection. And bind the Session data to the grid.
1: protected void WebGridCarton_RowsDeleting(object sender, Infragistics.Web.UI.GridControls.RowDeletingEventArgs e)
2: {
3: string id = e.Row.DataKey.First().ToString();
4:
5: if (this.Session["GridGridCartonsInfo"] != null && this.Session["GridCartonsInfo"] is List<CartonInfoGridViewModel>)
6: {
7: var collecion = this.Session["GridGridCartonsInfo"] as List<CartonInfoGridViewModel>;
8:
9: var removeItem = collecion.FirstOrDefault(c => c.CartonViewModelGuid == id);
10:
11: if (removeItem != null)
12: collecion.Remove(removeItem);
13: }
14:
15: this.DataBindCaronInfoGrid();
16: }
17:
18: protected void WebGridCarton_RowDeleted(object sender, Infragistics.Web.UI.GridControls.RowDeletedEventArgs e)
19: {
20: e.ExceptionHandled = true;
21: }
Updating Rows
Updating the rows happens the same way, we identify the object via the Id and update the values.
1: protected void WebGridCarton_RowUpdating(object sender, Infragistics.Web.UI.GridControls.RowUpdatingEventArgs e)
2: {
3: if (Session["GridGridCartonsInfo"] != null && Session["GridGridCartonsInfo"] is List<CartonInfoGridViewModel>)
4: {
5: var collection = Session["GridGridCartonsInfo"] as List<CartonInfoGridViewModel>;
6:
7: if (e.OldValues["CartonViewModelGuid"].ToString() == e.Values["CartonViewModelGuid"].ToString())
8: {
9: string id = e.Values["CartonViewModelGuid"].ToString();
10:
11: var editItem = collection.FirstOrDefault(c => c.CartonViewModelGuid == id);
12:
13: if (editItem != null)
14: {
15: editItem.CartonInfoId = Convert.ToInt32(e.Values["CartonInfoId"]);
16: editItem.Size = e.Values["Size"].ToString();
17: editItem.Length = e.Values["Length"].ToString();
18: editItem.Width = e.Values["Width"].ToString();
19: editItem.Height = e.Values["Height"].ToString();
20: editItem.Volume = e.Values["Volume"].ToString();
21: editItem.Weight = e.Values["Weight"].ToString();
22: editItem.WeightLimit = e.Values["WeightLimit"].ToString();
23: }
24: }
25:
26: this.DataBindCaronInfoGrid();
27: }
28: }
29:
30: protected void WebGridCarton_RowUpdated(object sender, Infragistics.Web.UI.GridControls.RowUpdatedEventArgs e)
31: {
32: e.ExceptionHandled = true;
33: }
Note
In the ViewModel class CartonViewModelGuid property is used as the object identifier in the collection. (In this case collection is persisted in the ASP.NET Session) For the new rows we set the CartonInfoId to –1, because this is an identity column in the database.
When we update the objects which are stored in the database already we can’t change the CartonInfoId that’s the reason why we use a separate Id property for the ViewModels.
The code for the DataBindCaronInfoGrid method
1: private void DataBindCaronInfoGrid()
2: {
3: if (this.Session["GridCartonsInfo"] != null && this.Session["GridCartonsInfo"] is List<CartonInfoGridViewModel>)
4: {
5: this.WebGridCarton.DataSource = Session["GridCartonsInfo"] as List<CartonInfoGridViewModel>;
6: this.WebGridCarton.DataBind();
7: }
8: else
9: this.LblStatus.Text = "Session expired, Please reload the page.";
10: }
Versatile Digital DNA 