More in this section

Forums / Developing with Sitefinity / Issues using RadGrid on Control Designer of Forms Control Widget

Issues using RadGrid on Control Designer of Forms Control Widget

2 posts, 0 answered
  1. Craig
    Craig avatar
    82 posts
    Registered:
    07 Apr 2009
    18 Jul 2012
    Link to this post
    I have a need to use a RadGrid on a Control Designer for a Forms Control Widget.  Essentially, I want to keep a mapping of form fields (in the forms module) and data fields in an external system.  I then use a specialized version of the forms notification widget that can look at this mapping and send the correct values to the correct fields in the external system.

    Most of my code seems to be working except for the JavaScript portion in the Control Designer.  Below is a snippet of code from my control designer class that inherited from ControlDesignerBase.

    FieldMapperDesigner.cs
    001.using System;
    002.using System.Collections.Generic;
    003.using System.Linq;
    004.using System.Web.UI;
    005.using Telerik.Sitefinity.Forms.Model;
    006.using Telerik.Sitefinity.Modules.Forms;
    007.using Telerik.Sitefinity.Modules.Forms.Web.UI.Fields;
    008.using Telerik.Sitefinity.Web.UI;
    009.using Telerik.Sitefinity.Web.UI.ControlDesign;
    010.using Telerik.Sitefinity.Web.UI.Fields;
    011.using Telerik.Web.UI;
    012.using Telerik.Sitefinity.Modules.GenericContent;
    013. 
    014. 
    015.[assembly: WebResource(My.FormWidgets.Designers.MarketTraqEmailFieldMapperDesigner.scriptReference, "application/x-javascript")]
    016. 
    017.namespace My.FormWidgets.Designers
    018.{
    019.    public class FieldMapperDesigner : ControlDesignerBase
    020.    {
    021.        #region Private Member Variables
    022. 
    023.        public static readonly string layoutTemplatePath = "~/MyFormWidgetsFieldMapper/My.FormWidgets.FieldMapper.Designer.FieldMapperDesigner.ascx";
    024.        public const string scriptReference = "My.FormWidgets.FieldMapper.Designer.FieldMapperDesigner.js";
    025. 
    026.        #endregion
    027. 
    028.        #region Properties
    029. 
    030.        /// <summary>
    031.        /// Gets the layout template path
    032.        /// </summary>
    033.        public override string LayoutTemplatePath
    034.        {
    035.            get
    036.            {
    037.                return FieldMapperDesigner.layoutTemplatePath;
    038.            }
    039.        }
    040. 
    041.        /// <summary>
    042.        /// Gets the layout template name
    043.        /// </summary>
    044.        protected override string LayoutTemplateName
    045.        {
    046.            get
    047.            {
    048.                return String.Empty;
    049.            }
    050.        }
    051. 
    052.        /// <summary>
    053.        ///
    054.        /// </summary>
    055.        protected override HtmlTextWriterTag TagKey
    056.        {
    057.            get
    058.            {
    059.                return HtmlTextWriterTag.Div;
    060.            }
    061.        }
    062. 
    063.        #endregion
    064. 
    065.        #region Control references
    066. 
    067.        /// <summary>
    068.        /// Gets a reference to the Mapping RadGrid
    069.        /// </summary>
    070.        protected RadGrid MappingRadGrid
    071.        {
    072.            get
    073.            {
    074.                return this.Container.GetControl<RadGrid>("MappingRadGrid", false, TraverseMethod.BreadthFirst);
    075.            }
    076.        }
    077. 
    078.        #endregion
    079. 
    080.        #region Methods
    081. 
    082.        /// <summary>
    083.        ///
    084.        /// </summary>
    085.        /// <param name="container"></param>
    086.        protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
    087.        {
    088.            var control = this.PropertyEditor.Control as IFormFieldControl;
    089.            var formControl = (this.PropertyEditor.ControlData as FormDraftControl);
    090.            var form = formControl.Form;
    091. 
    092.            MappingRadGrid.DataSource = "";
    093.        }
    094. 
    095.        #endregion
    096. 
    097.        #region IScriptControl implementation
    098. 
    099.        /// <summary>
    100.        /// Gets a collection of script descriptors that represent ECMAScript (JavaScript) client components.
    101.        /// </summary>
    102.        public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()
    103.        {
    104.            var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
    105.            var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last();
    106. 
    107.            // Get a reference to the RadGrid with JavaScript
    108.            descriptor.AddComponentProperty("mappingRadGrid", this.MappingRadGrid.ClientID);
    109. 
    110.            return scriptDescriptors;
    111.        }
    112. 
    113.        /// <summary>
    114.        /// Gets a collection of ScriptReference objects that define script resources that the control requires.
    115.        /// </summary>
    116.        public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
    117.        {
    118.            var scripts = new List<ScriptReference>(base.GetScriptReferences());
    119.            scripts.Add(new ScriptReference(FieldMapperDesigner.scriptReference, typeof(FieldMapperDesigner).Assembly.FullName));
    120.            return scripts;
    121.        }
    122. 
    123.        #endregion
    124.    }
    125.}


    The control designer uses a ASCX file for the the display of the RadGrid control.  Below is the code for this piece.

    FieldMapperDesigner.ascx
    01.<%@ Control Language="C#" %>
    02.<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    03.<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>
    04.<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
    05.<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfFields" Namespace="Telerik.Sitefinity.Web.UI.Fields" %>
    06.<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Forms.Web.UI.Fields" TagPrefix="sfForms" %>
    07. 
    08.<sitefinity:ResourceLinks ID="resourcesLinks" runat="server">
    09.    <sitefinity:ResourceFile Name="Styles/Ajax.css" />
    10.</sitefinity:ResourceLinks>
    11.<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    12.    <AjaxSettings>
    13.        <telerik:AjaxSetting AjaxControlID="MappingRadGrid">
    14.            <UpdatedControls>
    15.                <telerik:AjaxUpdatedControl ControlID="MappingRadGrid" />
    16.            </UpdatedControls>
    17.        </telerik:AjaxSetting>
    18.    </AjaxSettings>
    19.</telerik:RadAjaxManager>
    20.<div class="sfContentViews sfSingleContentView" style="max-height: 600px; overflow: auto; ">
    21.<ol>
    22.    <li class="sfFormCtrl">
    23.        <asp:Label ID="Label1" runat="server" AssociatedControlID="MappingRadGrid" CssClass="sfTxtLbl">Field Mappings</asp:Label>
    24.        <telerik:RadGrid ID="MappingRadGrid" runat="server"
    25.            Skin="Sitefinity"
    26.            AllowPaging="true"
    27.            PageSize="6"
    28.            AllowSorting="true">
    29.            <PagerStyle Mode="NextPrev" />
    30.            <MasterTableView TableLayout="Fixed" ShowHeader="true" ShowFooter="false" ShowHeadersWhenNoRecords="true" CommandItemDisplay="Top">
    31.                <CommandItemSettings ShowAddNewRecordButton="true" AddNewRecordText="Add" />
    32.                <Columns>
    33.                    <telerik:GridBoundColumn DataField="FormFieldID" HeaderText="Form Field" DataType="System.String">
    34.                    </telerik:GridBoundColumn>
    35.                    <telerik:GridBoundColumn DataField="FieldID" HeaderText="External Field" DataType="System.String">
    36.                    </telerik:GridBoundColumn>
    37.                    <telerik:GridEditCommandColumn ButtonType="LinkButton" EditText="Edit" CancelText="Cancel" UpdateText="Update">
    38.                    </telerik:GridEditCommandColumn>
    39.                    <telerik:GridButtonColumn ButtonType="LinkButton" Text="Delete">
    40.                    </telerik:GridButtonColumn>
    41.                </Columns>
    42.                <NoRecordsTemplate>
    43.                    <div>
    44.                        No fields currently mapped.
    45.                    </div>
    46.                </NoRecordsTemplate>
    47.            </MasterTableView>           
    48.        </telerik:RadGrid>
    49.    </li>
    50.</ol>
    51.</div>


    Next, I am including the JavaScript for the Control Designer.  Below is the code.

    FieldMapperDesigner.js
    01.Type.registerNamespace("My.Sitefinity.FormWidgets.Designers");
    02. 
    03.My.Sitefinity.FormWidgets.Designers.FieldMapperDesigner = function (element) {   
    04.    My.Sitefinity.FormWidgets.Designers.FieldMapperDesigner.initializeBase(this, [element]);
    05.}
    06. 
    07.My.Sitefinity.FormWidgets.Designers.FieldMapperDesigner.prototype = {
    08.    /* --------------------------------- set up and tear down --------------------------------- */
    09.    initialize: function () {
    10.        /* Here you can attach to events or do other initialization */
    11.        My.Sitefinity.FormWidgets.Designers.FieldMapperDesigner.callBaseMethod(this, 'initialize');
    12.         
    13.        var grid = this.get_mappingRadGrid();
    14.        alert(grid);
    15.    },
    16.    dispose: function () {
    17.        /* this is the place to unbind/dispose the event handlers created in the initialize method */
    18.        My.Sitefinity.FormWidgets.Designers.FieldMapperDesigner.callBaseMethod(this, 'dispose');
    19.    },
    20. 
    21.    /* --------------------------------- public methods ---------------------------------- */
    22.    findElement: function (id) {
    23.        var result = jQuery(this.get_element()).find("#" + id).get(0);
    24.        return result;
    25.    },
    26. 
    27.    /* Called when the designer window gets opened and here is place to "bind" your designer to the control properties */
    28.    refreshUI: function () {
    29.        var controlData = this._propertyEditor.get_control();
    30.    },
    31. 
    32.    /* Called when the "Save" button is clicked. Here you can transfer the settings from the designer to the control */
    33.    applyChanges: function () {
    34.        var controlData = this._propertyEditor.get_control();
    35.        alert(controlData.FieldMappingsValue);
    36.        alert(this.get_mappingRadGrid());
    37.    },
    38. 
    39.    /* --------------------------------- properties -------------------------------------- */
    40. 
    41.    get_mappingRadGrid: function () { return this._mappingRadGrid; },
    42.    set_mappingRadGrid: function (value) { return this._mappingRadGrid; },
    43.}
    44. 
    45.My.Sitefinity.FormWidgets.Designers.FieldMapperDesigner.registerClass('My.Sitefinity.FormWidgets.FieldMapper.Designer.FieldMapperDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    46. 
    47.if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    On lines 41 and 42 of the JavaScript file you will noticed that I have a GET and a SET for the RadGrid component.  My understanding is that the GET and SET property need exist since I have called descriptor.AddComponentProperty() on line 108 of the C# file for the RadGrid component.

    My plan is to store the the serialized contents of the RadGrid into the property of the Form Control Widget.  The problem is that I cannot gain client-side access to the RadGrid inside of my JavaScript file.

    If you look at lines 14 and 36 you can see I am sending an alert back to the user with the contents of the RadGrid.  Currently when this code runs the value uninitialized is returned to me.  Essentially I am not getting an instance of the RadGrid object as I am expecting.  

    Can anyone explain to me why I am not able to access the RadGrid object from JavaScript?

    All suggestions are welcomed.

    - Craig
  2. Craig
    Craig avatar
    82 posts
    Registered:
    07 Apr 2009
    18 Jul 2012
    Link to this post
    I got it figured out!  

    Just to let everyone know... I spent two whole days working on this issue and the first second I post the issue on the forums, I see my own mistake.  :-(

    If you look at the JavaScript code (FieldMapperDesigner.js) from my original post and look at line 42 you will see the issue right away.  Essentially I need to store the value of the RadGrid instance but instead performed the same code as  the GET operation.

    As quoted in the movie Office Space... "It's always some mundane issue".  Enjoy!

    - Craig
2 posts, 0 answered