Try Now
More in this section

Forums / General Discussions / how to create a control designer dynamically adding textboxes according to user input

how to create a control designer dynamically adding textboxes according to user input

5 posts, 0 answered
  1. Yinfang
    Yinfang avatar
    9 posts
    07 May 2012
    18 Oct 2012
    Link to this post
    I saw a video at http://www.sitefinity.com/blogs/gabesumner/posts/gabe-sumners-blog/2011/08/29/ldquo_hello_world_rdquo_guide_to_custom_sitefinity_widgets_amp_controldesigners about how to create custom widgets and the corresponding control designers.

    My question is: how to create a control designer, initially with only one textbox for entering an integer number, e.g., k. After that, k  textboxes are dynamically appended. 
  2. Georgi Mateev
    Georgi Mateev avatar
    12 posts
    02 Mar 2016
    23 Oct 2012
    Link to this post
    Hello Yinfang,

    Thank you for using the Sitefinity forums.

    I recommend you Sitefinity Thunder as a great time saver when you are creating designers for user and custom controls. Also it will easily allow you to register them as a page widgets.
    To install and configure Sitefinity Thunder read this documentation: http://www.sitefinity.com/documentation/documentationarticles/sitefinity-thunder

    The easiest way to achieve your goal is to create a custom control as the following:

    public class TextBoxes : WebControl
            public int Amount { get; set; }
            protected override void RenderContents(HtmlTextWriter output)
                for (int i = 0; i < this.Amount; i++)
                    output.Write("<input type=\"text\"/><br/>");

    The Amount property will store the number of needed text boxes. Edit the "RenderContents" method  if you want to modify the HTML output.

    Then follow this documentation in the section "Create designer for existing widget" to create designer for your control. You should choose the "Amount" property when the wizard asks you to select which properties will be included in the designer.

    Then register your control as a widget.

    Now if you check your page, in the toolbox you will find section "Custom" with your widget with designer inside.

    Georgi Mateev
    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. Yinfang
    Yinfang avatar
    9 posts
    07 May 2012
    24 Oct 2012 in reply to Georgi Mateev
    Link to this post

    Thanks for your prompt reply.

    What I really ask is to design a user control whose edit panel, popped up when you click the Edit button at the left upper corner, originally has only one textbox. After you enter some number, say k, in that textbox, k textboxes are appended to the edit panel to ask for more information.
  4. MB
    MB avatar
    302 posts
    09 Jan 2005
    25 Oct 2012 in reply to Yinfang
    Link to this post
    Perhaps, the refreshUI() method of the designer loads the initial number textboxes (based on some property value) and then you add/subtract to that in the click event of a button.

    I've done similar things in designers with adding/deleting/editing records in RadListBoxes, and adding/deleting standard input-textboxes is pretty basic javascript stuff.

    Your applyChanges() method is where you will need to make sense of it all and save the number of boxes and their content to some appropriate property of your control.
  5. Steve
    Steve avatar
    3037 posts
    03 Dec 2008
    25 Oct 2012
    Link to this post
    Leverage Kendo MVVM do to the heavy lifting for you, way less code



    So what you do is then save the JSON string result to your control...then in the frontend to read the data you just leverage JSON.Net that comes with sitefinity

    var data = Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(this.InputData)

    So to summarize...you're just giving the designer a json string, which kendo converts to a JS object.  Then when you click save, you just turn that object back to a string and save it.  This way you don't need to persist 2 properties, one for the data and another for the textbox count.

5 posts, 0 answered