More in this section

Forums / General Discussions / Data-Binding Expression Syntax in Composite Control

Data-Binding Expression Syntax in Composite Control

4 posts, 0 answered
  1. Jaime Weise
    Jaime Weise avatar
    120 posts
    Registered:
    02 Nov 2008
    03 May 2011
    Link to this post
    Having Trouble Understanding How Composite Controls Work
    My process usually consists of creating a UserControl and then adding properties to the CodeFile and then calling DataBind() method on the UserControl.

    public class someusercontrol : UserControl
    {
          public String FirstName {  get; set; } 
          someusercontrol ()
          {
                FirstName = "Default FirstName"
          }
          protected void Page_Load(Object sender, Event Args e)
          {
               DataBind();
          }
    }
     
    <%@ Page ...>
    Hi my name is <%# FirstName %>
          

    How can I do this with a server control in a module widget. I have set the LayoutTemplateName propertly. I have set properties in the widget server control but I don't see a way to databind these properties, as I normally do, to update the layout template.

    So how to I use this regular syntax to bind the data from my server control to the layout template that I am using. There seems to be a disconnect.
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    03 May 2011
    Link to this post
    Hello jwize,

    You can make a reference to the controls from your template using the container

    sample

    protected virtual TextBox TextBox
            {
                get
                {
                    return this.Container.GetControl<TextBox>("TextBox1", true);
                }
            }

    The you can bind these controls inside InitializeControls or CreateChildControls.

    Best wishes,
    Ivan Dimitrov
    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. Jaime Weise
    Jaime Weise avatar
    120 posts
    Registered:
    02 Nov 2008
    03 May 2011
    Link to this post
    I have no problem referencing controls in the view template.
    I already understand the code you gave me and how it works. 
    How would take care of this scenario using html and tokens as I described in my question?

    <%@ Control Language="C#" %>
     
    <style type="text/css">
        .gallery-item
        {
            text-align: center;
            width: <%# ThumbWidth %>px;
        }
        .gallery-image
        {
            width: <%# ThumbWidth %>px;
            padding: <%# PaddingTop %>px <%# PaddingRight %>px <%#  %>px <%# PaddingLeft %>px;
        }
    </style>
     
    <div class="gallery-item">
        <a href='<%# Thumbnail %>' title='<%# Description %>' rel="lightbox">
            <img class="gallery-image" src='<%# Image %>' />
        </a>
        <p><%# Description %></p>
    </div>

    I understand I could take the css out and put it into a stylesheet but then it wouldn't be possible for the user to easily change the values for the padding from user interface of sitefinity. 

    I also understand that I could use asp server controls instead of the html controls. I just want to have the flexibility of adding the tokens as illustrated above. 
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    06 May 2011
    Link to this post
    Hello jwize,

    There is a widget templates editor that will allow your users to make changes.

     This is how you can store a template using the ControlPresentation persistent object.

    Copy Code
    var manager = PageManager.GetManager();
     
    var template = manager.CreatePresentationItem<ControlPresentation>(id);
    template.DataType = Presentation.AspNetTemplate;
    template.Name = name;
    template.ControlType = controlType;
    ////If the template is embedded you can use those properties::
    template.EmbeddedTemplateName = embeddedResourcePath;
    template.ResourceAssemblyName = "Telerik.Sitefinity.Resources.Reference, Telerik.Sitefinity.Resources";
    template.IsDifferentFromEmbedded = false;
    //Else just set the Data Property to the markup
    template.Data = markup;
    template.IsDifferentFromEmbedded = true;
    manager.SaveChanges();
     
    And this is how you can get the layoutTemplates for the control by the control type of the template.
    Copy Code
    var pageManager = PageManager.GetManager();
    var layoutTemplates = pageManager.GetPresentationItems<ControlPresentation>()
               .Where(tmpl => tmpl.DataType == Presentation.AspNetTemplate);
    int? totalCount = 0;
    var filterExpression = String.Format(@"ControlType == ""{0}""", this.DesignedDetailViewType);
    layoutTemplates = DataProviderBase.SetExpressions(layoutTemplates, filterExpression, String.Empty, 0, 0, ref totalCount);

    You can edit the template in a dialog that is rendered on the following url:
    ~/Sitefinity/Dialog/ControlTemplateEditor
    To do so you need to place a RadWindow control in the designer of your widget. Then on the client call this method:

    Copy Code
    //This function will open the a template editor dialog in edit mode or create mode depending on the 'viewMode' value.
    // the appropriate values can be found in the server side constants:
    //ControlTemplatesDefinitions.BacknedEditDetailsViewName
    //ControlTemplatesDefinitions.BacknedInsertDetailsViewName
     
    _openTemplateDialog: function (string viewMode) {
                //The RadWindow component that will open the widget template editor.
            if (this._widgetEditorDialog) {
                                                 //The resolved ~/Sitefinity/Dialog/ControlTemplateEditor
                var dialogUrl =  new Sys.Uri(this._resolvedTemplateEditorDialogUrl);
                dialogUrl.get_query().ViewName = viewMode;
                this._widgetEditorDialog.set_navigateUrl(dialogUrl.toString());
                dialogBase.get_radWindow().maximize();
                this._widgetEditorDialog.show();
                this._widgetEditorDialog.maximize();
                $("body").removeClass("sfSelectorDialog");
            }
        },

    You also have to do a bit more configuring of the dialog on its show event:
    Copy Code
    _onWidgetEditorShown: function (sender, args) {
            var frameHandle = sender.get_contentFrame().contentWindow;
            if (frameHandle) {
                if (frameHandle.createDialog) {
                    var params =
                    {
                        //The id of the template that you wish to edit or Guid.Empty
                        TemplateId: this._selectedTemplateId,
                        //The type of the control to which the template was registered.
                        ControlType: this._controlType
                    };
                    frameHandle.createDialog(null, null, null, dialogBase, params, null);
                }
            }
        },


    All the best,
    Ivan Dimitrov
    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
4 posts, 0 answered