Blogs - ComponentArt Grid Editing

DEVSHED Blog

As always, I welcome your comments!

ComponentArt Grid Editing–Client Mode Example

Mar 9

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

Following is an example of the ComponentArt grid in Client 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/ClientEditing.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

Code Snippet
 <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="ClientEditing.aspx.vb" Inherits="ComponentArt.ClientEditing" %>
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
    //<![CDATA[
 
        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('ctl00$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_onItemBeforeUpdate(sender, eventArgs) {
            var newItem = eventArgs.get_newItem();
 
 
            // validate Quantity
            var Quantity = newItem.getMember('Quantity').get_value();
            if (isNaN(Quantity)) {
                // failed validation, return to editing
                alert('Quantity must be a number.');
                eventArgs.set_continue(true);
            }
 
            if (document.getElementById('MainContent_chkConfirmUpdate').checked)
                if (!confirm("Update record?"))
                    eventArgs.set_cancel(true);
 
        }
 
 
        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 Client Mode. Edits are held until you press the button at the bottom of the form, then the updates are all done at once</span>
        <br />
        <br />
        <ComponentArt:DataGrid ID="Grid1" 
            runat="server">
            <ClientEvents>
                <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="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="270" valign="top">
                    <span class="hint">Insert, update, and delete any number of records, and postback when
                        you are ready: </span>
                    <br />
                    <br />
                    <asp:Button ID="Button1" Text="Commit All Changes" runat="server" /><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>
 

Trackback Print

Tags:

Categories:

Location: Blogs Parent Separator

DEVSHED Blogs Child Separator

ComponentArt

0 comment(s) so far...

As always, I welcome your comments!