+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Cascading Custom FieldControl Form Widget

Cascading Custom FieldControl Form Widget

7 posts, 0 answered
  1. Grey
    Grey avatar
    9 posts
    Registered:
    09 Sep 2013
    09 Dec 2013
    Link to this post
    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);


  2. Grey
    Grey avatar
    9 posts
    Registered:
    09 Sep 2013
    09 Dec 2013
    Link to this post
    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.    }


  3. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    12 Dec 2013
    Link to this post
    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
  4. Stephen2
    Stephen2 avatar
    94 posts
    Registered:
    05 Feb 2012
    14 Dec 2013
    Link to this post
    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.
  5. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    06 Dec 2016
    18 Dec 2013
    Link to this post
    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
  6. Ilan
    Ilan avatar
    12 posts
    Registered:
    26 Oct 2015
    09 May
    Link to this post

    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.

  7. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    07 Dec 2016
    12 May
    Link to this post
    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
     
7 posts, 0 answered