RadGrid Editing - example code wrong?

2 posts, 0 answers
  1. Vincent
    Vincent avatar
    2 posts
    Member since:
    Jul 2013

    Posted 13 Nov 2013 Link to this post

    I'm following the demo/example here and finding that several things aren't working for me.  Hopefully I'm just doing it wrong and my newbie errors can be quickly pointed out.

    http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/edit-form-types/defaultcs.aspx

    I want a modal popup for editing, using a UserControl, and to use the same control at the top of the page for adding new records.  I'm using VS2012, asp.net webforms 4.5, RadControls Q3 2013, and a very basic n-tier approach using EF in a separate assembly, for data access.

    Here's my aspx:

    <%@ Page Title="" Language="C#" MasterPageFile="~/ControlCenter/MasterAdmin.master" AutoEventWireup="true" CodeFile="ConfigSMTP.aspx.cs" Inherits="ControlCenter_ConfigSMTP" %>
     
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
    <%@ register src="~/Controls/EditConfigSMTP.ascx" tagprefix="My" tagname="EditConfigSMTP" %>
     
     
    <asp:content ID="ConfigSMTPHead" ContentPlaceHolderID="head" Runat="Server">
    </asp:content>
    <asp:content ID="ConfigSMTPContent" ContentPlaceHolderID="BodyContent" Runat="Server">
        <table style="width:100%;">
            <tr>
                <td style="width:20%;">Edit SMTP Address List</td>
                <td style="width:80%;"> </td>
            </tr>
            <tr>
                <td colspan="2">
                    <telerik:radajaxmanager id="ConfigSMTPAjaxManager" runat="server">
                        <ajaxsettings>
                            <telerik:ajaxsetting ajaxcontrolid="ConfigSMTPGrid">
                                <updatedcontrols>
                                    <telerik:ajaxupdatedcontrol controlid="ConfigSMTPGrid" loadingpanelid="ConfigSMTPLoadingPanel" />
                                </updatedcontrols>
                            </telerik:ajaxsetting>
                        </ajaxsettings>
                    </telerik:radajaxmanager>
                </td>
            </tr>
            <tr>
                <td colspan="2">Use the form below to configure the outgoing SMTP address for email.</td>
            </tr>
            <tr>
                <td colspan="2">
                    <My:editconfigsmtp runat="server" id="EditConfigSMTP" />
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    <telerik:radajaxloadingpanel id="ConfigSMTPLoadingPanel" runat="server" skin="Default">
                    </telerik:radajaxloadingpanel>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <!-- SEARCH RESULTS -->
                    <telerik:radgrid
                        id="ConfigSMTPGrid"
                        runat="server"
                        allowsorting="True"
                        autogeneratecolumns="False"
                        cellpadding="5"
                        cellspacing="5"
                        datasourceid="ConfigSMTPDataSource"
                        gridlines="None"
                        width="100%"
                        onitemdatabound="ConfigSMTPGrid_ItemDataBound"
                        skin="Metro"
                        ondeletecommand="ConfigSMTPGrid_DeleteCommand"
                        oninsertcommand="ConfigSMTPGrid_InsertCommand"
                        onupdatecommand="ConfigSMTPGrid_UpdateCommand" onprerender="ConfigSMTPGrid_PreRender">
                        <mastertableview datakeynames="ID" datasourceid="ConfigSMTPDataSource">
                            <editformsettings>
                                <popupsettings width="700px" height="500px" modal="true" />
                            </editformsettings>
                            <columns>
                                <telerik:grideditcommandcolumn uniquename="ConfigSMTPEditCommandColumn" editimageurl="../Images/edit_icon.gif" cancelimageurl="../Images/close_delete.gif">
                                </telerik:grideditcommandcolumn>
                                <telerik:gridboundcolumn datafield="ID" datatype="System.Int32" filtercontrolalttext="Filter ID column" headertext="ID" readonly="True" sortexpression="ID" uniquename="ID" visible="False">
                                </telerik:gridboundcolumn>
                                <telerik:gridboundcolumn datafield="SMTPServer" filtercontrolalttext="Filter SMTPServer column" headertext="SMTP Server" sortexpression="SMTPServer" uniquename="SMTPServer">
                                </telerik:gridboundcolumn>
                                <telerik:gridboundcolumn datafield="Description" filtercontrolalttext="Filter Description column" headertext="Description" sortexpression="Description" uniquename="Description">
                                </telerik:gridboundcolumn>
                                <telerik:gridboundcolumn datafield="CreateDate" datatype="System.DateTime" filtercontrolalttext="Filter CreateDate column" headertext="Created" sortexpression="CreateDate" uniquename="CreateDate">
                                </telerik:gridboundcolumn>
                                <telerik:gridboundcolumn datafield="IsDefault" datatype="System.Byte" filtercontrolalttext="Filter IsDefault column" headertext="Default" sortexpression="IsDefault" uniquename="IsDefault">
                                    <itemstyle horizontalalign="Center" />
                                </telerik:gridboundcolumn>
                            </columns>
                            <editformsettings usercontrolname="~/Controls/EditConfigSMTP.ascx" editformtype="WebUserControl">
                                <editcolumn uniquename="ConfigSMTPEditCommandColumn"></editcolumn>
                            </editformsettings>
                        </mastertableview>
                    </telerik:radgrid>
                    <asp:entitydatasource
                        id="ConfigSMTPDataSource"
                        runat="server"
                        connectionstring="name=MyEntities"
                        defaultcontainername="MyEntities"
                        enabledelete="True"
                        enableflattening="False"
                        enableinsert="True"
                        enableupdate="True"
                        entitysetname="ConfigSMTP"
                        entitytypefilter="ConfigSMTP">
                    </asp:entitydatasource>
                </td>
            </tr>
        </table>
    </asp:content>


    ...the code-behind:

    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Threading;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using DataAccess.Model;
    using DataAccess.Validation;
    using Proxy.Data;
    using Telerik.Web.UI;
     
    public partial class ControlCenter_ConfigSMTP : System.Web.UI.Page
    {
        private int _currentDefault;
        private readonly string _redirect = "ConfigSMTP.aspx";
     
        public int CurrentDefault
        {
            get { return _currentDefault; }
            set { _currentDefault = value; }
        }
     
        protected void Page_Load(object sender, EventArgs e)
        {
        }
     
        protected void ConfigSMTPGrid_PreRender(object sender, EventArgs e)
        {
        }
     
        protected void ConfigSMTPGrid_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            //alternative to binding in aspx file
            if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
            {
                //UserControl control = e.Item.FindControl(GridEditFormItem.EditFormUserControlID) as UserControl;
                //GridDataItem parentItem = (e.Item as GridEditFormItem).ParentItem;
                //TextBox box = (TextBox)control.FindControl("TextBox1");
                //box.Text = parentItem["Country"].Text;
            }
        }
     
        protected void ConfigSMTPGrid_InsertCommand(object sender, GridCommandEventArgs e)
        {
            //get entity from grid
            GridEditableItem editedItem = e.Item as GridEditableItem;
            ConfigSMTP smtpEdit = editedItem.DataItem as ConfigSMTP;
     
            //get edit form control
            UserControl userControl = (UserControl)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);
     
        }
     
        protected void ConfigSMTPGrid_UpdateCommand(object sender, GridCommandEventArgs e)
        {
            //get entity from grid
            GridEditableItem editedItem = e.Item as GridEditableItem; //e.Item is ALWAYS NULL.
            ConfigSMTP smtpEdit = editedItem.DataItem as ConfigSMTP;
     
            //get edit form control
            UserControl userControl = (UserControl)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);
     
            //update values
            smtpEdit.SMTPServer = (userControl.FindControl("SMTPServer") as TextBox).Text;
            smtpEdit.Description = (userControl.FindControl("Description") as TextBox).Text;
            smtpEdit.IsDefault = Byte.Parse((userControl.FindControl("IsDefault") as TextBox).Text);
     
            //commit
            ConfigSMTPProxy px = new ConfigSMTPProxy();
            px.Save(smtpEdit);
        }
     
        protected void ConfigSMTPGrid_DeleteCommand(object sender, GridCommandEventArgs e)
        {
            //get entity from grid
            GridEditableItem editedItem = e.Item as GridEditableItem;
            ConfigSMTP smtpEdit = editedItem.DataItem as ConfigSMTP;
     
            //get edit form control
            UserControl userControl = (UserControl)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);
     
        }
    }


    ...the UserControl:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="EditConfigSMTP.ascx.cs" Inherits="Controls_EditConfigSMTP" %>
    <table style="width:100%;">
        <tr>
            <td colspan="2">
                <asp:validationsummary ID="ConfigSMTPValidationSummary" runat="server" cssclass="validation" ShowModelStateErrors="true" />
            </td>
        </tr>
        <!-- SEARCH FORM -->
        <tr>
            <td class="fieldLabel">SMTP Address<span class="required">*</span></td>
            <td>
                <asp:textbox id="SMTPServer" cssclass="input" clientidmode="Static" runat="server" width="400px" text='<%# DataBinder.Eval(Container, "DataItem.SMTPServer") %>'></asp:textbox>
            </td>
        </tr>
        <tr>
            <td class="fieldLabel">Description</td>
            <td>
                <asp:textbox id="Description" cssclass="input" clientidmode="Static" runat="server" textmode="MultiLine" columns="55" rows="5" text='<%# DataBinder.Eval(Container, "DataItem.Description") %>'>
                </asp:textbox>
            </td>
        </tr>
        <tr>
            <td> </td>
            <td>
                <asp:checkbox id="IsDefault" cssclass="input" text="Set As Default" runat="server" />
            </td>
        </tr>
        <tr>
            <td colspan="2"> </td>
        </tr>
        <tr>
            <td colspan="2" class="submit">
                <asp:Button ID="UpdateButton" Text="Update Record" runat="server" CommandName="Update" Visible='<%# !(DataItem is Telerik.Web.UI.GridInsertionObject) %>'></asp:Button>
                <asp:Button ID="InsertButton" Text="Add Record" runat="server" CommandName="PerformInsert" Visible='<%# DataItem is Telerik.Web.UI.GridInsertionObject %>'></asp:Button>
                  
                <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel"></asp:Button>
            </td>
        </tr>
    </table>


    ...control code-behind:

    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using DataAccess.Model;
    using DataAccess.Validation;
    using Proxy.Data;
    using Telerik.Web.UI;
     
    public partial class Controls_EditConfigSMTP : System.Web.UI.UserControl
    {
        private object _dataItem = null;
     
        public object DataItem
        {
            get { return this._dataItem; }
            set { this._dataItem = value; }
        }
         
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                if (this.DataItem != null)
                {
                    ConfigSMTP entity = (ConfigSMTP)this.DataItem;
     
                    if (entity.IsDefault == 1)
                        this.IsDefault.Checked = true;
                }
            }
        }
    }

    So, there are a few issues. 

    Firstly, clicking "edit" in a row doesn't yield a modal popup, it's inline with the record.  I can live without that and it's the least of my problems, but it'd be nice to have since I was doing it that way prior to switching the project from stock to the RadControls.

    The biggest issue is that while the Insert, Update, and Delete commands are firing, the GridEditableItem is always null.  Since I'm never able to access it, none of the commands actually work.  The only difference from the example is that I'm binding entities, not a DataTable...which I figured I could safely assume works the same?  The entities are "self-tracking" and the initial RadGrid binding is working as expected.  I'm able to bind, page, and sort in other RadGrids in the project which don't require editing.

    Any ideas?  Thanks!
  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1090 posts

    Posted 18 Nov 2013 Link to this post

    Hello Vincent,

    The first problem described and more precisely the lack of a popup form is caused by the fact that the EditMode property of the MasterTableView is not set to PopUp. By changing it accordingly you should be able to make things correctly.

    As for the second issue I can not tell for sure why are you experiencing it. Using the code provided I have assembled a sample website and in my case I was able to obtain a reference to the editable item and extract the value which the user had entered as you can see from this video. Please examine the attached test sample and tell us what differs in your case.

    Regards,
    Angel Petrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top