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

Forums / General Discussions / Can't set SelectedItem in RadComboBox in a User Control Custom Designer

Can't set SelectedItem in RadComboBox in a User Control Custom Designer

8 posts, 0 answered
  1. mario
    mario avatar
    23 posts
    Registered:
    08 Aug 2011
    27 Oct 2011
    Link to this post
    Hi

    I Used a RadCombo inside a control designer, and i can populate it and get the selected value. But I can't set the selected item (value) in the RefreshUI event.

    I can set the selectedItem in the code-behind, but I need to do it in the Designer.js

    my .JS:
    refreshUI: function () {
            var data = this._propertyEditor.get_control();
            
            this.get_ddlEvento().set_value(data.SelectedId);    //This Doesn't WORK
        },
        applyChanges: function () {
            var controlData = this._propertyEditor.get_control();
     
            //guarda eventoId
            var e = this.get_ddlEvento();
            controlData.SelectedEventoId = e.get_selectedItem().get_value(); //This WORKS
        },
     
    // ddl Eventos
        get_ddlEvento: function () {
            return this._ddlEvento;
        },
        set_ddlEvento: function (value) {
            this._ddlEvento = value;
        },

    Thanks!
  2. Lubomir Velkov
    Lubomir Velkov avatar
    688 posts
    Registered:
    03 Nov 2014
    01 Nov 2011
    Link to this post
    Hello Mario,

    You first need to get a reference to the combobox item that is to be selected and then call its .select method:

    var item = combo.findItemByValue(data.SelectedId);
    if (item) { item.select(); }

    Refer here for more information:

    http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html

    Kind regards,
    Lubomir Velkov
    the Telerik team
    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
  3. Ishtiyaq
    Ishtiyaq avatar
    11 posts
    Registered:
    17 Sep 2011
    10 Jan 2012
    Link to this post
     get_ddlEvento: function () {
            return this._ddlEvento;
        },

        set_ddlEvento: function (value) {
            this._ddlEvento = value;
        }

    Is the _ddlEvento is the Combobox ID? How Can you send me whole code to resolve my issue with Documentation. I already saw many Documentation nothing help that much.


  4. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    10 Jan 2012
    Link to this post
    Hi ,

    Here an example of a complete solution. I'm selecting projects here:

    First, the designer (FormDesigner.ascx)
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
        TagPrefix="sf" %>
    <sitefinity:FormManager ID="formManager" runat="server" />
     
    <div class="sfContentViews">
        <h2>
            Select a project:
        </h2>
        <telerik:RadComboBox ID="ProjectSelector" Skin="Sitefinity" Width="95%" CssClass="sfTxt"
            runat="server">
        </telerik:RadComboBox>
    </div>

    Then the code-behind of the designer (FormDesigner.cs)
    using System.Collections.Generic;
    using System.Linq;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Projects.Data;
    using System.Web.UI;
    using System;
    using Telerik.Web.UI;
     
    namespace SitefinityWebApp.Custom.Projects {
     
        public class FormDesigner : ControlDesignerBase {
     
            protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container) {
     
                // load in simple mode
                base.DesignerMode = ControlDesignerModes.Simple;
     
                // Projects
                var projects = ProjectsManager.GetManager()
                    .GetProjects()
                    .Where(x => x.Status == Telerik.Sitefinity.GenericContent.Model.ContentLifecycleStatus.Live);
     
                foreach (var item in projects) {
                    var p = new RadComboBoxItem();
                    p.Text = item.Title;
                    p.Value = item.Id.ToString();
                    this.ProjectSelector.Items.Add(p);
                }
     
                this.ProjectSelector.Items.Add(new RadComboBoxItem() { Text = "--No specific project--", Value = Guid.Empty.ToString(), Selected = true });
                this.ProjectSelector.EmptyMessage = "--No specific project--";
            }
     
            /// <summary>
            /// Gets the project selector.
            /// </summary>
            protected RadComboBox ProjectSelector {
                get { return Container.GetControl<RadComboBox>("ProjectSelector", true); }
            }
     
            /// <summary>
            /// Gets or sets the path of the external template to be used by the control.
            /// </summary>
            public override string LayoutTemplatePath {
                get { return _layoutTemplatePath; }
                set { _layoutTemplatePath = value; }
            }
     
            /// <summary>
            /// Gets or sets the designer script path.
            /// </summary>
            /// <value>
            /// The designer script path.
            /// </value>
            public string DesignerScriptPath {
                get { return _scriptPath; }
                set { _scriptPath = value; }
            }
     
            /// <summary>
            /// Gets the name of the embedded layout template.
            /// </summary>
            protected override string LayoutTemplateName {
                get { return null; }
            }
     
            public override IEnumerable<ScriptDescriptor> GetScriptDescriptors() {
                 
                var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var desc = (ScriptControlDescriptor)scriptDescriptors.Last();
                 
                // Add the RadComboBox to the descriptor collection
                var project = this.ProjectSelector;
                desc.AddComponentProperty("projectControl", project.ClientID);
      
                // Return the collection as array
                return scriptDescriptors.ToArray();
            }
     
            /// <summary>
            /// Gets a collection of <see cref="T:System.Web.UI.ScriptReference"/> objects that define script resources that the control requires.
            /// </summary>
            /// <returns>
            /// An <see cref="T:System.Collections.IEnumerable"/> collection of <see cref="T:System.Web.UI.ScriptReference"/> objects.
            /// </returns>
            public override IEnumerable<ScriptReference> GetScriptReferences() {
                var scripts = base.GetScriptReferences() as List<ScriptReference>;
                if (scripts == null) return base.GetScriptReferences();
     
                scripts.Add(new ScriptReference(DesignerScriptPath));
                return scripts.ToArray();
            }
     
            private string _layoutTemplatePath = "~/Custom/Donations/DonationFormDesigner.ascx";
            private string _scriptPath = "~/Custom/Donations/DonationFormDesigner.js";
        }
    }

    Next, the javascript file (FormDesigner.js)
    Type.registerNamespace("SitefinityWebApp.Custom.Projects.Form");
     
    SitefinityWebApp.Custom.Projects.FormDesigner = function (element) {
     
        // initialize controls
        this._projectControl = null;
        
        // base initialization
        SitefinityWebApp.Custom.Projects.FormDesigner.initializeBase(this, [element]);
    }
     
    SitefinityWebApp.Custom.Projects.FormDesigner.prototype = {
         
        initialize: function () {
            SitefinityWebApp.Custom.Projects.FormDesigner.callBaseMethod(this, 'initialize');
        },
        dispose: function () {
            SitefinityWebApp.Custom.Projects.FormDesigner.callBaseMethod(this, 'dispose');
        },
     
        //=========================================================================================================
        // beging refreshUI
        //=========================================================================================================
        refreshUI: function () {
     
            var data = this._propertyEditor.get_control();
     
            // load selected project
            var item = this.get_projectControl().findItemByValue(data.ProjectId);
            if (item) { item.select(); }
     
        },
     
        //=========================================================================================================
        // beging applyChanges
        //=========================================================================================================
        applyChanges: function () {
     
            // save selected page
            var controlData = this._propertyEditor.get_control();
     
            // save selected project
            if (this.get_projectControl().get_selectedItem() != null)
                controlData.ProjectId = this.get_projectControl().get_selectedItem().get_value();
     
        },
     
        //=========================================================================================================
        // beging properties
        //=========================================================================================================
     
        // get and set the project control
        get_projectControl: function () {
            return this._projectControl;
        },
        set_projectControl: function (value) {
            this._projectControl = value;
        },
     
    }
     
    SitefinityWebApp.Custom.Projects.FormDesigner.registerClass('SitefinityWebApp.Custom.Projects.FormDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    Hope this will work for you.

    Regards,
    Daniel
  5. mario
    mario avatar
    23 posts
    Registered:
    08 Aug 2011
    10 Jan 2012
    Link to this post
    Thanks you Lubomir and Daniel
    for your answers!

    I'd manage to solve this.
  6. Ishtiyaq
    Ishtiyaq avatar
    11 posts
    Registered:
    17 Sep 2011
    10 Jan 2012
    Link to this post
    Daniel,

    I am attaching the Whole Screen Shot what I need Exactly to resolve this Issue. Basically I am able to populate the Drop Down Field in the RadCombo. But Unable to Select or save on ApplyChanges and refresh UI Event. Please Advise me what exactly the Issue is. I am attaching you the Screen Shot code and screen shot of the out put what I got.

    ==> Below is the Template for the Custom Control

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomControl.ascx.cs" Inherits="SitefinityWebApp.Test.CustomControl" %>

    <p>Hello <asp:Literal ID="NameLiteral" runat="server" /></p>
    <p>Hello <asp:Literal ID="Literal1" runat="server" /></p>

    ==>>> Below is the CustomControl Class
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity.Web.UI.ControlDesign;

    namespace SitefinityWebApp.Test
    {
        [ControlDesigner(typeof(CustomDesigner))]
        public partial class CustomControl : System.Web.UI.UserControl
        {
            public string Name { get; set; }

            public string IdString { get; set; }

            protected void Page_Load(object sender, EventArgs e)
            {
                if (String.IsNullOrEmpty(Name))
                {
                    NameLiteral.Text = "World!";
                }
                else
                {
                    NameLiteral.Text = Name;
                }

                if (String.IsNullOrEmpty(IdString))
                {
                    Literal1.Text = "World!";
                }
                else
                {
                    Literal1.Text = IdString;
                }            
            }
        }
    }



    ===>>  Below is the CustomDesigner Class

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using System.Web.UI;
    using Telerik.Web.UI;
    using Telerik.Sitefinity.Taxonomies;
    using Telerik.Sitefinity.Taxonomies.Model;
    using System.Web.UI.WebControls;

    namespace SitefinityWebApp.Test
    {
        public class CustomDesigner : ControlDesignerBase
        {

            protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
            {
                TaxonomyManager manager = TaxonomyManager.GetManager();
                var taxonomy = manager.GetTaxonomies<HierarchicalTaxonomy>().Where(t => t.Name == "Categories").SingleOrDefault();
                var details = taxonomy.Taxa.ToList();
                foreach (HierarchicalTaxon taxon in details)
                {
                    if (taxon.Parent == null)
                    {
                        RadComboBoxItem thisItem = new RadComboBoxItem(taxon.Title, taxon.Title.ToString());
                        DropDownList1.Items.Add(thisItem);
                    }
                }
                base.DesignerMode = ControlDesignerModes.Simple;
            }

            //public override void OnSaving()
            //{
            //    // Set the underlying control properties to the new values.
            //}

            public override string LayoutTemplatePath
            {
                get
                {
                    return _layoutTemplateName;
                }
                set
                {
                    _layoutTemplateName = value;
                }
            }

            public override IEnumerable<ScriptReference> GetScriptReferences()
            {
                var res = base.GetScriptReferences() as List<ScriptReference>;

                if (res == null) return base.GetScriptReferences();

                res.Add(new ScriptReference(_scriptRef));
                return res.ToArray();
            }

            protected override string LayoutTemplateName
            {
                get { return String.Empty; }
            }

            private string _layoutTemplateName = "~/Test/CustomDesigner.ascx";
            private string _scriptRef = "~/Test/CustomDesigner.js";

            /// <summary>
            /// Gets a reference to the DropDownList control contained in the LayoutTemplatePath template.
            /// </summary>
            protected virtual RadComboBox DropDownList1
            {
                get { return base.Container.GetControl<RadComboBox>("DropDownList1", true); }
            }
        }
    }

    ====> Below is the Designer control Template

    <%@ Control Language="C#" %>
    <%--<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>
    <sitefinity:resourcelinks runat="server">
        <sitefinity:resourcefile name="Control.Resources.Default.css" assemblyinfo="Control.Control, Control" static="true">
    </sitefinity:resourcefile></sitefinity:resourcelinks>--%>
    <div >
         <asp:Label ID="Label1" AssociatedControlID="DropDownList1" Text="Select Category:" EnableViewState="false" runat="server" />
        <telerik:radcombobox ID="DropDownList1" runat="server" Skin="Web20"></telerik:radcombobox> 
        
        <br />
        <br />
        <span>Your name:</span><br />
        <input type="text" id="txtName" /> 
    </div>




    Thanks,
    Ishityaq.
  7. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    10 Jan 2012
    Link to this post
    Hi,

    I think you need to add the RadCombobox to the descriptor collection:
    // Add the RadComboBox to the descriptor collection
    var project = this.ProjectSelector;
    desc.AddComponentProperty("projectControl", project.ClientID);

    (check my code)

    Regards,
    Daniel
  8. Lubomir Velkov
    Lubomir Velkov avatar
    688 posts
    Registered:
    03 Nov 2014
    12 Jan 2012
    Link to this post
    Hi Ishityaq,

    Could you try instead of populating the combo box in the InitializeControls() event to do it in the OnPreRender event? Also I think you forgot to post the source to your CustomDesigner.js file - could you please zip everything and post it somewhere and only post a link here - it will be much more convenient for us.

    Kind regards,
    Lubomir Velkov
    the Telerik team
    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
8 posts, 0 answered