Cascading Custom FieldControl Form Widget

Posted by Community Admin on 04-Aug-2018 19:41

Cascading Custom FieldControl Form Widget

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 09-Dec-2013 00:00

We have a working Custom FieldControl Form Widget that contains three cascading combo boxes, the values of which are hard-coded into the cs code behind and the js script (of the widget). The purpose of the widget is to allow the client to associate an Area with related Regions and (then) Regions with related Districts (One to many related information).

By hard coding the values we are able to populate the Area combo with the C# behind code with the other two (dependent) combos functionality and data coming from the js script file. What we want to do is to remove the hard coded values and reference a table in the sitefinity db...

So we've populated a table with the perspective records (call it 'tblOrg': 
ID PK| ParentID|Name| Info)

I'm new to CMS developement and am only becoming familiar with the API these past several months...but I thought...by referencing a table in the db we could wire all the functionality of the combo boxes to the code behind (C#) ...thus ignoring the js file...and making the necessary db calls in the right events...but after hours and hours and 100's of google searches I can't find an example of what I'm trying to accomplish...I'll include an example of the original code for the ascx, cs, js below...

01.ARD.ascx  
02. 
03. 
04.<%@ Control Language="C#" %>
05.<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
06. 
07.<asp:Label runat="server" Visible="false" ID="titleLabel" CssClass="sfTxtLbl" Text="title label"></asp:Label>
08. 
09.<div class="ARDContainer">
10.    <asp:Label id="lblErrorMsg" runat="server" Visible="true"></asp:Label>
11.    <div style="width: 300px; margin-top: 15px; margin-bottom:10px; height: 22px;">
12.        <div style="float: left; font-weight: bold;">Select Area:</div>
13.        <div style="float: right;">
14.            <telerik:RadComboBox ID="Area" CssClass="sfTxt" runat="server">
15.            </telerik:RadComboBox>
16.        </div>
17.    </div>
18.    <div style="width: 300px; margin-top: 15px; margin-bottom:10px; height: 22px;">
19.        <div style="float: left; clear: both; font-weight: bold;">Select Region:</div>
20.        <div style="float: right;">
21.            <telerik:RadComboBox ID="Region" CssClass="sfTxt" runat="server">
22.            </telerik:RadComboBox>
23.        </div>
24.    </div>
25.    <div style="width: 300px; margin-top: 15px; margin-bottom:10px; height: 22px;">
26.        <div style="float: left; clear: both; font-weight: bold;">Select Sales Rep:</div>
27.        <div style="float: right;">
28.            <telerik:RadComboBox ID="District" CssClass="sfTxt" runat="server">
29.            </telerik:RadComboBox>
30.        </div>
31.    </div>
32.    <div style="clear: both;"></div>
33.</div>
34. 
35.<asp:Label runat="server" ID="exampleLabel" CssClass="sfExample" Text="example Label"></asp:Label><br />
36.<asp:Label runat="server" ID="descriptionLabel" CssClass="sfExample" Text="description Label"></asp:Label>


*****************************************************************


001.ARD.cs
002. 
003.using System;
004.using System.Collections.Generic;
005.using System.ComponentModel;
006.using System.Linq;
007.using System.Web.UI;
008.using System.Web.UI.WebControls;
009.using Telerik.Sitefinity.Data.Metadata;
010.using Telerik.Sitefinity.Metadata.Model;
011.using Telerik.Sitefinity.Model;
012.using Telerik.Sitefinity.Modules.Forms.Web.UI.Fields;
013.using Telerik.Sitefinity.Security;
014.using Telerik.Sitefinity.Web.UI;
015.using Telerik.Sitefinity.Web.UI.ControlDesign;
016.using Telerik.Sitefinity.Web.UI.Fields;
017.using Telerik.Sitefinity.Web.UI.Fields.Enums;
018.using Telerik.Web.UI;
019. 
020.namespace SitefinityWebApp
021.
022.    [DatabaseMapping(UserFriendlyDataType.ShortText)]
023.    public class ARD : FieldControl, IFormFieldControl
024.    
025.        private IMetaField metaField = null;
026. 
027.        public ARD()
028.         
029.            this.Title = "AreaRegionDistrict";
030.            this.SuccessfullyValidated = true;
031.         
032. 
033.        #region Public properties (will show up in dialog)
034. 
035.        ///<summary>
036.        /// Initial Value
037.        ///</summary>
038.        public string InitialValue get; set;
039. 
040.        /// <summary>
041.        /// Example string
042.        /// </summary>
043.        public override string Example get; set;
044. 
045.        /// <summary>
046.        /// Title string
047.        /// </summary>
048.        public override string Title get; set;
049. 
050.        /// <summary>
051.        /// Description string
052.        /// </summary>
053.        public override string Description get; set;
054. 
055. 
056.        /// <summary>
057.        /// Succesf string
058.        /// </summary>
059.        public bool SuccessfullyValidated get; set;
060. 
061.        #endregion
062. 
063.        #region Labels on control template
064.        /// <summary>
065.        /// Gets reference to the TitleLabel
066.        /// </summary>
067.        protected internal virtual Label TitleLabel
068.        
069.            get
070.            
071.                return this.Container.GetControl<Label>("titleLabel", true);
072.            
073.        
074. 
075.        /// <summary>
076.        /// Gets reference to the DescriptionLabel
077.        /// </summary>
078.        protected internal virtual Label DescriptionLabel
079.        
080.            get
081.            
082.                return Container.GetControl<Label>("descriptionLabel", true);
083.            
084.        
085. 
086.        /// <summary>
087.        /// Gets reference to the ExampleLabel
088.        /// </summary>
089.        protected internal virtual Label ExampleLabel
090.        
091.            get
092.            
093.                return this.Container.GetControl<Label>("exampleLabel", this.DisplayMode == FieldDisplayMode.Write);
094. 
095.            
096.        
097. 
098.        /// <summary>
099.        /// Reference to the TitleControl
100.        /// </summary>
101.        protected override WebControl TitleControl
102.        
103.            get
104.            
105.                return this.TitleLabel;
106.            
107.        
108. 
109.        /// <summary>
110.        /// Reference to the DescriptionControl
111.        /// </summary>
112.        protected override WebControl DescriptionControl
113.        
114.            get
115.            
116.                return this.DescriptionLabel;
117.            
118.        
119. 
120.        protected virtual RadComboBox ddl
121.        
122.            get
123.            
124.                return this.Container.GetControl<RadComboBox>("Area", true);
125.            
126.        
127. 
128.        protected virtual RadComboBox ddlDependant
129.        
130.            get
131.            
132.                return this.Container.GetControl<RadComboBox>("Region", true);
133.            
134.        
135. 
136.        protected virtual RadComboBox ddlDependantDistrict
137.        
138.            get
139.            
140.                return this.Container.GetControl<RadComboBox>("District", true);
141.            
142.        
143.        protected virtual Label LBLErrorMsg
144.        
145.            get
146.            
147.                return this.Container.GetControl<Label>("lblErrorMsg", true);
148.            
149.        
150. 
151.        /// <summary>
152.        /// Get and set the value of the field.
153.        /// </summary>
154. 
155.        public object areaValue
156.        
157.            get
158.            
159.                return this.ddl.SelectedValue;
160.            
161. 
162.            set
163.            
164.                if (value != null)
165.                
166.                    this.ddl.SelectedValue = value.ToString();
167.                
168.            
169.        
170. 
171.        public override object Value
172.        
173.            get
174.            
175.                return this.ddlDependant.SelectedValue;
176.            
177. 
178.            set
179.            
180.                if (value != null)
181.                
182.                    this.ddlDependant.SelectedValue = value.ToString();
183.                
184.            
185.        
186. 
187.        public object districtValue
188.        
189.            get
190.            
191.                return this.ddlDependantDistrict.SelectedValue;
192.            
193. 
194.            set
195.            
196.                if (value != null)
197.                
198.                    this.ddlDependantDistrict.SelectedValue = value.ToString();
199.                
200.            
201.        
202. 
203.        #endregion
204. 
205.        #region Value method
206.        /// <summary>
207.        /// Get and set the value of the field.
208.        /// </summary>
209.        //public override object Value
210.        //
211.        //    get
212.        //   
213.        //        return this.TXTPhone.Text;
214.        //   
215. 
216.        //    set
217.        //   
218.        //        this.TXTPhone.Text = value.ToString();
219.        //   
220.        //
221.        public object ErrorMsgLabel
222.        
223.            get
224.            
225.                return this.LBLErrorMsg.Text;
226.            
227. 
228.            set
229.            
230.                this.LBLErrorMsg.Text = value.ToString();
231.            
232.        
233.        public object ErrorMsgLabelCss
234.        
235.            get
236.            
237.                return this.LBLErrorMsg.CssClass;
238.            
239. 
240.            set
241.            
242.                this.LBLErrorMsg.CssClass = value.ToString();
243.            
244.        
245.        #endregion
246. 
247. 
248. 
249. 
250.        public override string LayoutTemplatePath
251.        
252.            get
253.            
254.                return ARD.layoutTemplatePath;
255.            
256.        
257. 
258.        protected override string LayoutTemplateName
259.        
260.            get
261.            
262.                return "SitefinityWebApp.Resources.ARD.ascx";
263.            
264.        
265. 
266.        protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
267.        
268. 
269.                // Set the label values
270.                this.ExampleLabel.Text = this.Example;
271.                this.TitleLabel.Text = this.Title;
272.                this.DescriptionLabel.Text = this.Description;
273. 
274.                this.ddl.DataSource = AreaList();
275.                this.ddl.DataTextField = "Value";
276.                this.ddl.DataValueField = "Key";
277.                this.ddl.DataBind();
278. 
279.             
280. 
281.        
282. 
283.        /// <summary>
284.        /// Gets or sets MetaField property to persist data from control to the DB when form is submitted
285.        /// </summary>
286.        [TypeConverter(typeof(ExpandableObjectConverter))]
287.        public IMetaField MetaField
288.        
289.            get
290.            
291.                if (this.metaField == null)
292.                
293.                    this.metaField = this.LoadDefaultMetaField();
294. 
295.                    // Add unique field name
296.                    this.metaField.FieldName = "ARD_" + this.ClientID;
297.                
298. 
299.                return this.metaField;
300.            
301.            set
302.            
303.                this.metaField = value;
304.            
305.        
306. 
307.        /// <summary>
308.        /// Get list of all scripts used by control
309.        /// </summary>
310.        /// <returns>List of all scripts used by control</returns>
311.        public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
312.        
313.            //if (this.SuccessfullyValidated == true)
314.            //
315.                var descriptor = new ScriptControlDescriptor(typeof(ARD).FullName, this.ClientID);
316.                descriptor.AddComponentProperty("dropdown", this.ddl.ClientID);
317.                descriptor.AddComponentProperty("dropdownDependant", this.ddlDependant.ClientID);
318.                descriptor.AddComponentProperty("dropdownDependantDistrict", this.ddlDependantDistrict.ClientID);
319. 
320.                descriptor.AddProperty("dataFieldName", this.MetaField.FieldName);
321. 
322.                return new[] descriptor ;
323.            //
324.            //else
325.            //
326. 
327.            //    return null;
328.            //
329.        
330. 
331.        /// <summary>
332.        /// Get reference to all scripts
333.        /// </summary>
334.        /// <returns>Reference to all scripts</returns>
335.        public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
336.        
337.            var scripts = new List<ScriptReference>(base.GetScriptReferences())
338.            
339.                new ScriptReference(ARD.scriptReference),
340.                new ScriptReference("Telerik.Sitefinity.Web.UI.Fields.Scripts.FieldDisplayMode.js", "Telerik.Sitefinity"),
341.            ;
342.            return scripts;
343.        
344. 
345.        public Dictionary<string, string> AreaList()
346.        
347.            Dictionary<string, string> ard = new Dictionary<string, string>();
348.            ard.Add("Please Select", "Please Select");
349.            ard.Add("Area 1", "Area 1");
350.            ard.Add("Area 2", "Area 2");
351.            ard.Add("Area 3", "Area 3");
352. 
353.             
354.            return ard;
355.        
356. 
357.        public const string scriptReference = "~/Custom/Forms/AreaRegionDistrict/ARD.js";
358.        public static readonly string layoutTemplatePath = "~/Custom/Forms/AreaRegionDistrict/ARD.ascx";
359.    
360.




*****************************************************************

001.ARD.js
002. 
003. 
004.Type.registerNamespace("SitefinityWebApp");
005. 
006.SitefinityWebApp.ARD = function (element)
007.    this._dropdown = null;
008.    this._dataFieldName = null;
009.    this._dropdownDependant = null;
010.    this._dropdownDependantDistrict = null;
011.    this._areaChangedDelegate = null;
012.    this._regionChangedDelegate = null;
013.    this.asdfds = null;
014.    SitefinityWebApp.ARD.initializeBase(this, [element]);
015.
016. 
017.SitefinityWebApp.ARD.prototype =
018.    /* --------------------------------- set up and tear down --------------------------------- */
019.    initialize: function ()
020. 
021.        SitefinityWebApp.ARD.callBaseMethod(this, 'initialize');
022. 
023.        this._areaChangedDelegate = Function.createDelegate(this, this._areaChangedHandler);
024.        this.get_dropdown().add_selectedIndexChanged(this._areaChangedDelegate);
025. 
026. 
027.        this._regionChangedDelegate = Function.createDelegate(this, this._regionChangedHandler);
028.        this.get_dropdownDependant().add_selectedIndexChanged(this._regionChangedDelegate);
029. 
030.        this._fillRegion(this.get_dropdown().get_value());
031.        this._fillDistrict(this.get_dropdownDependant().get_value());
032.    ,
033. 
034.    dispose: function ()
035.        SitefinityWebApp.ARD.callBaseMethod(this, 'dispose');
036.    ,
037.    /* --------------------------------- public methods ---------------------------------- */
038.    _areaChangedHandler: function (sender, args)
039.        this._fillRegion(this.get_dropdown().get_value());
040.        this._fillDistrict(this.get_dropdownDependant().get_value());
041.    ,
042. 
043.    _regionChangedHandler: function (sender, args)
044.        this._fillDistrict(this.get_dropdownDependant().get_value());
045.    ,
046. 
047. 
048.    _fillRegion: function (val)
049. 
050.        this.removeOptions(this.get_dropdownDependant());
051. 
052.        switch (val)
053.            case "Please Select":
054.                this.createOption(this.get_dropdownDependant(), 'Please Select', 'Please Select');
055.                this.get_dropdownDependant().set_text('Please Select');
056.                this.get_dropdownDependant().set_value('Please Select');
057.                break;           
058.            case "Area 1":
059.                var regionsLegacy = new Array('Please Select', 'Region 1', 'Region 2', 'Region 3', 'Region 4');
060.                for (i = 0; i < regionsLegacy.length; i++)
061.                    this.createOption(this.get_dropdownDependant(), regionsLegacy[i], regionsLegacy[i]);
062.                
063.                this.get_dropdownDependant().set_text(regionsLegacy[0]);
064.                this.get_dropdownDependant().set_value(regionsLegacy[0]);
065.                break;
066.            case "Area 2":
067.                var regionsMagnum = new Array('Please Select', 'Region 5', 'Region 6', 'Region 7', 'Region 8');
068.                for (i = 0; i < regionsMagnum.length; i++)
069.                    this.createOption(this.get_dropdownDependant(), regionsMagnum[i], regionsMagnum[i]);
070.                
071.                this.get_dropdownDependant().set_text(regionsMagnum[0]);
072.                this.get_dropdownDependant().set_value(regionsMagnum[0]);
073.                break;
074. 
075.            default:
076.        
077.    ,
078. 
079. 
080.    // Gets the value of the field control.
081.    get_value: function ()
082.        return jQuery(this._dropdownDependant).val();
083.    ,
084. 
085. 
086.    // Sets the value of the text field control depending on DisplayMode.
087.    set_value: function (value)
088.        jQuery(this._dropdownDependant).val(value);
089.    ,
090. 
091. 
092. 
093.    _fillDistrict: function (val)
094. 
095.            this.removeOptions(this.get_dropdownDependantDistrict());
096. 
097.            switch (val)
098. 
099.            case "Please Select":
100.                    this.createOption(this.get_dropdownDependantDistrict(), "Please Select", "Please Select");
101.                    this.get_dropdownDependantDistrict().set_text("Please Select");
102.                    this.get_dropdownDependantDistrict().set_value("Please Select");
103.                    break;
104.            case "Region 1":
105.                var districtRegion1 = new Array( 'Please Select','Reg1_Dist1',
106.                                                        'Reg1_Dist2',
107.                                                        'Reg1_Dist3',
108.                                                        'Reg1_Dist4',
109.                                                        'Reg1_Dist5',
110.                                                        'Reg1_Dist6',
111.                                                        'Reg1_Dist7',
112.                                                        'Reg1_Dist8',
113.                                                        'Reg1_Dist9');
114.                for (i = 0; i < districtRegion1.length; i++)
115.                    this.createOption(this.get_dropdownDependantDistrict(), districtRegion1[i], districtRegion1[i]);
116.                
117.                this.get_dropdownDependantDistrict().set_text(districtRegion1[0]);
118.                this.get_dropdownDependantDistrict().set_value(districtRegion1[0]);
119.                break;
120. 
121.            case "Region 2":
122.                var districtRegion2= new Array('Please Select','Reg2_Dist1',
123.                                                        'Reg2_Dist2',
124.                                                        'Reg2_Dist3',
125.                                                        'Reg2_Dist4',
126.                                                        'Reg2_Dist5',
127.                                                        'Reg2_Dist6',
128.                                                        'Reg2_Dist7',
129.                                                        'Reg2_Dist8',
130.                                                        'Reg2_Dist9');
131.                for (i = 0; i < districtTheCougars.length; i++)
132.                    this.createOption(this.get_dropdownDependantDistrict(), districtTheCougars[i], districtTheCougars[i]);
133.                
134.                this.get_dropdownDependantDistrict().set_text(districtTheCougars[0]);
135.                this.get_dropdownDependantDistrict().set_value(districtTheCougars[0]);
136.                break;
137.                
138.            case "Region 3":
139.                var districtRegion3 = new Array('Please Select','Reg3_Dist1',
140.                                                        'Reg3_Dist2',
141.                                                        'Reg3_Dist3',
142.                                                        'Reg3_Dist4',
143.                                                        'Reg3_Dist5',
144.                                                        'Reg3_Dist6',
145.                                                        'Reg3_Dist7',
146.                                                        'Reg3_Dist8',
147.                                                        'Reg3_Dist9');
148.                for (i = 0; i < districtRegion3.length; i++)
149.                    this.createOption(this.get_dropdownDependantDistrict(), districtRegion3[i], districtRegion3[i]);
150.                
151.                this.get_dropdownDependantDistrict().set_text(districtRegion3[0]);
152.                this.get_dropdownDependantDistrict().set_value(districtRegion3[0]);
153.                break;
154. 
155.            case "Region 4":
156.                var districtRegion4 = new Array('Please Select','Reg4_Dist1',
157.                                                        'Reg4_Dist2',
158.                                                        'Reg4_Dist3',
159.                                                        'Reg4_Dist4',
160.                                                        'Reg4_Dist5',
161.                                                        'Reg4_Dist6',
162.                                                        'Reg4_Dist7',
163.                                                        'Reg4_Dist8',
164.                                                        'Reg4_Dist9');
165.                for (i = 0; i < districtRegion4.length; i++)
166.                    this.createOption(this.get_dropdownDependantDistrict(), districtRegion4[i], districtRegion4[i]);
167.                
168.                this.get_dropdownDependantDistrict().set_text(districtRegion4[0]);
169.                this.get_dropdownDependantDistrict().set_value(districtRegion4[0]);
170.                break;
171. 
172.            case "Region 5":
173.                var districtRegion5 = new Array('Please Select','Reg5_Dist1',
174.                                                        'Reg5_Dist2',
175.                                                        'Reg5_Dist3',
176.                                                        'Reg5_Dist4',
177.                                                        'Reg5_Dist5',
178.                                                        'Reg5_Dist6',
179.                                                        'Reg5_Dist7',
180.                                                        'Reg5_Dist8',
181.                                                        'Reg5_Dist9');
182.                for (i = 0; i < districtRegion5.length; i++)
183.                    this.createOption(this.get_dropdownDependantDistrict(), districtRegion5[i], districtRegion5[i]);
184.                
185.                this.get_dropdownDependantDistrict().set_text(districtRegion5[0]);
186.                this.get_dropdownDependantDistrict().set_value(districtRegion5[0]);
187.                break;
188. 
189.            case "Region 6":
190.                var districtRegion6 = new Array('Please Select','Reg6_Dist1',
191.                                                        'Reg6_Dist2',
192.                                                        'Reg6_Dist3',
193.                                                        'Reg6_Dist4',
194.                                                        'Reg6_Dist5',
195.                                                        'Reg6_Dist6',
196.                                                        'Reg6_Dist7',
197.                                                        'Reg6_Dist8',
198.                                                        'Reg6_Dist9');
199.                for (i = 0; i < districtRegion6.length; i++)
200.                    this.createOption(this.get_dropdownDependantDistrict(), districtRegion6[i], districtRegion6[i]);
201.                
202.                this.get_dropdownDependantDistrict().set_text(districtRegion6[0]);
203.                this.get_dropdownDependantDistrict().set_value(districtRegion6[0]);
204.                break;
205.                 
206.            case "Region 7":
207.                var districtRegion7 = new Array('Please Select','Reg7_Dist1',
208.                                                        'Reg7_Dist2',
209.                                                        'Reg7_Dist3',
210.                                                        'Reg7_Dist4',
211.                                                        'Reg7_Dist5',
212.                                                        'Reg7_Dist6',
213.                                                        'Reg7_Dist7',
214.                                                        'Reg7_Dist8',
215.                                                        'Reg7_Dist9');
216.                for (i = 0; i < districtRegion7.length; i++)
217.                    this.createOption(this.get_dropdownDependantDistrict(), districtRegion7[i], districtRegion7[i]);
218.                
219.                this.get_dropdownDependantDistrict().set_text(districtRegion7[0]);
220.                this.get_dropdownDependantDistrict().set_value(districtRegion7[0]);
221.                break;
222. 
223.            case "Region 8":
224.                var districtRegion8 = new Array('Please Select','Reg8_Dist1',
225.                                                        'Reg8_Dist2',
226.                                                        'Reg8_Dist3',
227.                                                        'Reg8_Dist4',
228.                                                        'Reg8_Dist5',
229.                                                        'Reg8_Dist6',
230.                                                        'Reg8_Dist7',
231.                                                        'Reg8_Dist8',
232.                                                        'Reg8_Dist9');
233.                for (i = 0; i < districtRegion8.length; i++)
234.                    this.createOption(this.get_dropdownDependantDistrict(), districtRegion8[i], districtRegion8[i]);
235.                
236.                this.get_dropdownDependantDistrict().set_text(districtRegion8[0]);
237.                this.get_dropdownDependantDistrict().set_value(districtRegion8[0]);
238.                break;
239. 
240.    
241.            default:
242.        
243.    ,
244. 
245.    // Gets the value of the field control.
246.    get_valueDistrict: function ()
247.        return jQuery(this._dropdownDependantDistrict).val();
248.    ,
249. 
250.    // Sets the value of the text field control depending on DisplayMode.
251.    set_valueDistrict: function (value)
252.        jQuery(this._dropdownDependantDistrict).val(value);
253.    ,
254. 
255. 
256.    removeOptions: function (ddl)
257.            ddl.clearItems();
258.            ddl.clearSelection();
259.    ,
260. 
261.    createOption: function (ddl, text, value)
262.        var comboItem = new Telerik.Web.UI.RadComboBoxItem();
263.        comboItem.set_text(text);
264.        comboItem.set_value(text);
265.        ddl.trackChanges();
266.        ddl.get_items().add(comboItem);
267.        ddl.commitChanges();
268.    ,
269. 
270.    /* --------------------------------- event handlers ---------------------------------- */
271.    /* --------------------------------- private methods --------------------------------- */
272. 
273.    /* --------------------------------- properties -------------------------------------- */
274. 
275.    get_dropdown: function()
276.        return this._dropdown;
277.    ,
278.    set_dropdown: function(value)
279.        this._dropdown = value;
280.    ,
281. 
282.    get_dropdownDependant: function ()
283.        return this._dropdownDependant;
284.    ,
285.    set_dropdownDependant: function (value)
286.        this._dropdownDependant = value;
287.    ,
288. 
289.    get_dropdownDependantDistrict: function ()
290.        return this._dropdownDependantDistrict;
291.    ,
292.    set_dropdownDependantDistrict: function (value)
293.        this._dropdownDependantDistrict = value;
294.    ,
295.     
296. 
297.    get_dataFieldName: function ()
298.        return this._dataFieldName;
299.    ,
300.    set_dataFieldName: function (value)
301.        this._dataFieldName = value;
302.    
303.
304. 
305.SitefinityWebApp.ARD.registerClass('SitefinityWebApp.ARD', Telerik.Sitefinity.Web.UI.Fields.FieldControl);


Posted by Community Admin on 09-Dec-2013 00:00

So I've run into numerous issues...a main one being...that I'm unable to find anything detailed about making db calls from a custom field form control...db calls at all...and my conclusion as to why not is that I don't fully appreciate how the CMS is 'wrapping' the ASP.NET (RadComboBox) controls...

So again - we were finally able to populate the Area combo box...the first combo box (of the three) as a result of the form load event...but could not get anything else really working...gulp...

So as far as working C# code we got the Area combo populated - but the more I've worked on this the more I've become convinced that we have to make use of javascript injection calls short of being able to do a post back with the 'nested'...Region and District combos...and that the syntax for making database calls from the proper events...in both the C# and javascript files remains nebulous...and frustrating...

It's a lot to ask...but I'm wondering...about how to approach best (to begin with)...and then specific code examples if anyone wants to share...any help is much appreciated...

Thanks,

G


01.public partial class ARDCB : System.Web.UI.UserControl
02.
03.    protected void Page_Load(object sender, EventArgs e)
04.    
05.        if (!IsPostBack)
06.        
07.            RadComboBox test;
08.            test = (RadComboBox)this.FindControl("Area");
09. 
10.            test.DataTextField = "Title";
11.            test.DataValueField = "ID";
12.            test.DataSource = RetrieveCollectionOfAreas();
13.            test.DataBind();
14.        
15.    
16. 
17.    public IQueryable<DynamicContent> RetrieveCollectionOfAreas()
18.    
19.        // Set the provider name for the DynamicModuleManager here. All available providers are listed in
20.        // Administration -> Settings -> Advanced -> DynamicModules -> Providers
21.        var providerName = String.Empty;
22.        DynamicModuleManager dynamicModuleManager = DynamicModuleManager.GetManager(providerName);
23.        Type orgType = TypeResolutionService.ResolveType("Telerik.Sitefinity.DynamicTypes.Model.OrgManagement.Org");
24. 
25.        // This is how we get the collection of Area items
26.        var myCollection = dynamicModuleManager.GetDataItems(orgType)
27.            .Where(i => i.Status == Telerik.Sitefinity.GenericContent.Model.ContentLifecycleStatus.Live && i.Visible == true);
28. 
29.        return myCollection;
30.    


Posted by Community Admin on 12-Dec-2013 00:00

Hello Grey,

I have a sample for you (please find the attached file) of two chained comboboxes one populated, depending on the value of the other. The trick here to make it work was to persist the values into a single database cell as comma separated string. The key moment is to split the values before setting the dropdowns and to merge values when persisting them to the database:

Copy Code
// Gets the value of the dropdown control.
   get_value: function ()
       var arrayOfValues = [];
       arrayOfValues.push(this._dropdown._highlightedItem._text);
       arrayOfValues.push(this._dropdownDependant._highlightedItem._text);
 
       return arrayOfValues.toString();
   ,
 
   // Sets the value of the dropdown control depending on DisplayMode.
   set_value: function (values)
       if (values)
           var arrayOfValues = values.split(',')
           this._dropdown.set_text(arrayOfValues[0]);
           this._dropdownDependant.set_text(arrayOfValues[1]);
       
   ,

Here is the end result screenshot. I have also attached the source code. Fill free to modify it to meet your requirements.

Here is also a video demonstrating it

Regards,
Vassil Vassilev
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 14-Dec-2013 00:00

With regards to storing custom DB data, we always create a separate database "xxx_sityfinitydbname_extensions", then use a simple ORM or code-generated Access/BusinessLayer to manipulate this data.

We feel creating tables/procs/whatever in the Sitefinity DB itself doesn't feel as "safe" as having it separate... It has it's drawbacks, but we feel safer.

Posted by Community Admin on 18-Dec-2013 00:00

Hello,

Thank you Stephen for sharing your suggestion.

Regards,
Stefani Tacheva
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 09-May-2016 00:00

I am hoping someone is still subscribed to thos topic. 

I am in need of achieving the same solution. I need a country state dependent dropdown. I have followed the tutorial using two radcomboboxes however 

1. In the response table for the form only the first field registers.

2. Even if i wasnt able to register both values in the reponse table as seperate values i cant even retrieve the second value.

I am loading the first list using c# and the second list is coming from the javascript.

 

Can anyone help me please.

Posted by Community Admin on 12-May-2016 00:00

Hi Ilan,

You can check this blog post:
http://www.sitefinity.com/blogs/stanislav-velikovs-blog/2014/01/17/sitefinity-custom-form-widget-with-dependent-dropdowns

Regards,
Svetoslav Manchev
Telerik

 
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
 

This thread is closed