Blogs - ComponentArt Grid Editing–Callback Mode Example

DEVSHED Blog

As always, I welcome your comments!

ComponentArt Grid Editing–Callback Mode Example

Mar 9

Written by: Steve Gray
3/9/2011 6:25 PM

Following is an example of the ComponentArt grid in Callback Mode.

Now, if you use the CA grid at all you know that they install examples right on your machine for you to learn from.

The reason that I’m coding these examples is:

Their examples are sometimes too verbose
Their examples aren’t coded the way that I have the grids coded – I use a class that abstracts a lot of the grid setup so that I don’t have to look at it, and so that it is consistent across a project.

These examples are coded in a master page, I’m providing only the needed details here.

So, here is a complete working example of grid editing in client mode.

An on-line example is provided here: http://componentart.devshed.us/Examples/Grid/EditingCallbackMode.aspx

There is a reference to the ComponentArtGrid class in the code behind, that’s here: http://devshed.us/Blogs/tabid/227/EntryId/1004/ComponentArt-Grid-Class.aspx

And the style sheet is here (gridStyle.css) http://devshed.us/Blogs/tabid/227/EntryId/1005/ComponentArt-Grid-Css.aspx

The aspx page:

Code Snippet
 <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="EditingCallbackMode.aspx.vb" Inherits="ComponentArt.EditingCallbackMode" %>
 
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <script type="text/javascript">
 
      function Grid1_onItemBeforeInsert(sender, eventArgs) {
          if (document.getElementById('ctl00$MainContent$chkConfirmInsert').checked)
              if (!confirm("Insert record?"))
                  eventArgs.set_cancel(true);
      }
 
      function Grid1_onItemBeforeUpdate(sender, eventArgs) {
          if (document.getElementById('MainContent_chkConfirmUpdate').checked)
              if (!confirm("Update record?"))
                  eventArgs.set_cancel(true);
      }
 
      function Grid1_onItemBeforeDelete(sender, eventArgs) {
          if (document.getElementById('ctl00$MainContent$chkConfirmDelete').checked)
              if (!confirm("Delete record?"))
                  eventArgs.set_cancel(true);
      }
 
      function Grid1_onCallbackError(sender, eventArgs) {
          if (confirm('Invalid data has been entered. View details?')) alert(eventArgs.get_errorMessage());
          Grid1.page(0);
      }
 
      function editGrid(rowId) {
          Grid1.edit(Grid1.getItemFromClientId(rowId));
      }
 
      function editRow() {
          Grid1.editComplete();
      }
 
      function insertRow() {
          Grid1.editComplete();
      }
 
      function deleteRow(rowId) {
          Grid1.deleteItem(Grid1.getItemFromClientId(rowId));
      }
 
 
 
  </script>
 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div >
        <span>This grid is in Callback Mode. Edits are updated immediately</span>
        <br />
        <br />
        <ComponentArt:DataGrid ID="Grid1" 
            runat="server">
            <ClientEvents>
                <CallbackError EventHandler="Grid1_onCallbackError" />
                <ItemBeforeInsert EventHandler="Grid1_onItemBeforeInsert" />
                <ItemBeforeUpdate EventHandler="Grid1_onItemBeforeUpdate" />
                <ItemBeforeDelete EventHandler="Grid1_onItemBeforeDelete" />
            </ClientEvents>
            <Levels>
                <ComponentArt:GridLevel 
                    DataKeyField="lRowID" 
                    EditCommandClientTemplateId="EditCommandTemplate"
                    InsertCommandClientTemplateId="InsertCommandTemplate"
                    >
                    <Columns>
                        <ComponentArt:GridColumn AllowEditing="false" DataField="lRowID" Visible="false" />
                        <ComponentArt:GridColumn DataField="Itemnmbr" HeadingText="Item"  AllowEditing="false" />
                        <ComponentArt:GridColumn DataField="Quantity" HeadingText="Quantity" />
                        <ComponentArt:GridColumn DataField="UnitCost" HeadingText="Unit Cost" AllowEditing="false" />
                        <ComponentArt:GridColumn AllowSorting="false" HeadingText="Edit Command" DataCellClientTemplateId="EditTemplate" EditControlType="EditCommand" Width="100" Align="Center" />
                    </Columns>
                </ComponentArt:GridLevel>
            </Levels>
            <ClientTemplates>
                <ComponentArt:ClientTemplate ID="EditTemplate"><a href="javascript:Grid1.edit(Grid1.getItemFromClientId('## DataItem.ClientId ##'));">
                    Edit</a> | <a href="javascript:Grid1.deleteItem(Grid1.getItemFromClientId('## DataItem.ClientId ##'))">
                        Delete</a> </ComponentArt:ClientTemplate>
                <ComponentArt:ClientTemplate ID="EditCommandTemplate"><a href="javascript:Grid1.editComplete();">
                    Update</a> | <a href="javascript:Grid1.editCancel();">Cancel</a> </ComponentArt:ClientTemplate>
                <ComponentArt:ClientTemplate ID="InsertCommandTemplate"><a href="javascript:Grid1.editComplete();">
                    Insert</a> | <a href="javascript:Grid1.editCancel();">Cancel</a> </ComponentArt:ClientTemplate>
            </ClientTemplates>
        </ComponentArt:DataGrid>
 
        <br/>
 
      <table width="730" cellpadding="0" cellspacing="0" border="0">
          <tr>
              <td width="270" valign="top">
                  <span class="hint">Insert, update, and delete any number of records. All changes are
                      applied immediately through callbacks. </span>
                  <br>
                  <br>
                  <asp:CheckBox ID="chkConfirmInsert" Text="Confirm Before Insert" Checked="false"
                      runat="server" />
                  <br>
                  <asp:CheckBox ID="chkConfirmUpdate" Text="Confirm Before Update" Checked="false"
                      runat="server" />
                  <br>
                  <asp:CheckBox ID="chkConfirmDelete" Text="Confirm Before Delete" Checked="false"
                      runat="server" />
                  <br>
                  <br>
              </td>
              <td valign="top">
                  <asp:Label ID="lblFeedback" runat="server" />
                  <td>
                      <td align="right" valign="top">
                          <input type="button" onclick="Grid1.Table.AddRow()" value="Add row" />
                      </td>
          </tr>
      </table>
 
    </div>
 
</asp:Content>
 

The code behind

Code Snippet
 Public Class EditingCallbackMode
    Inherits System.Web.UI.Page
 
    Public Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        buildGrid()
        Grid1.DataBind()
 
        If Not Page.IsPostBack Then
        Else
 
            lblFeedback.Text = "<b>Actions Performed:</b><br/>"
        End If
    End Sub
 
    Private Sub buildGrid()
        Dim grd As New ComponentArtGrid(Web.UI.GridRunningMode.Callback)
        Grid1 = grd.setup(Me.Grid1)
        Grid1.Width = 500
 
 
        Grid1.DataSource = getDataSource()
    End Sub
 
    Function getDataSource() As DataTable
        Dim oDT As New DataTable
 
        'create columns 
        oDT.Columns.Add(New DataColumn("lRowID", System.Type.GetType("System.Int32")))
        oDT.Columns.Add(New DataColumn("Itemnmbr", System.Type.GetType("System.String")))
        oDT.Columns.Add(New DataColumn("Quantity", System.Type.GetType("System.Double")))
        oDT.Columns.Add(New DataColumn("UnitCost", System.Type.GetType("System.Double")))
 
        'create the rows 
        oDT.Rows.Add(1, "Big Hammer", 200, 5.99)
        oDT.Rows.Add(2, "Box of Nails", 300, 15.95)
        oDT.Rows.Add(3, "Bandages", 1, 9.99)
 
        Return oDT
    End Function
 
    Private Sub UpdateDb(ByVal item As ComponentArt.Web.UI.GridItem, ByVal command As String)
        Dim sql As String = ""
 
        Try
            'get the grid columns like this:
            sql += item("itemnmbr").ToString
 
            Select Case (command)
                Case "INSERT"
                    'insert code here
                Case "UPDATE"
                    'update code here
                Case "DELETE"
                    'delete code here
            End Select
 
        Catch ex As Exception
            lblFeedback.Text = "SQL Error: " + ex.Message
        End Try
 
    End Sub
 
 
    Private Sub Grid1_InsertCommand(ByVal sender As Object, ByVal e As ComponentArt.Web.UI.GridItemEventArgs) Handles Grid1.InsertCommand
        lblFeedback.Text += "- Inserted " + e.Item("Itemnmbr").ToString() + "<br/>"
        UpdateDb(e.Item, "INSERT")
    End Sub
 
    Private Sub Grid1_UpdateCommand(ByVal sender As Object, ByVal e As ComponentArt.Web.UI.GridItemEventArgs) Handles Grid1.UpdateCommand
        lblFeedback.Text += "- Updated " + e.Item("Itemnmbr").ToString() + "<br/>"
        UpdateDb(e.Item, "UPDATE")
    End Sub
    Private Sub Grid1_DeleteCommand(ByVal sender As Object, ByVal e As ComponentArt.Web.UI.GridItemEventArgs) Handles Grid1.DeleteCommand
        lblFeedback.Text += "- Deleted " + e.Item("Itemnmbr").ToString() + "<br/>"
        UpdateDb(e.Item, "DELETE")
    End Sub
 
    Public Sub OnNeedRebind(ByVal sender As Object, ByVal oArgs As EventArgs) Handles Grid1.NeedRebind
        Grid1.DataBind()
    End Sub
 
 
    Public Sub OnNeedDataSource(ByVal sender As Object, ByVal oArgs As EventArgs) Handles Grid1.NeedDataSource
        buildGrid()
    End Sub
 
 
End Class
 

Trackback Print

Tags:

Categories:

Location: Blogs Parent Separator

DEVSHED Blogs Child Separator

ComponentArt

0 comment(s) so far...

As always, I welcome your comments!