Issues using RadGrid on Control Designer of Forms Control Wi

Posted by Community Admin on 04-Aug-2018 13:29

Issues using RadGrid on Control Designer of Forms Control Widget

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 18-Jul-2012 00:00

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

Posted by Community Admin on 18-Jul-2012 00:00

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

This thread is closed