More in this section

Forums / General Discussions / Rich BoxTextEditor

Rich BoxTextEditor

7 posts, 1 answered
  1. Alex
    Alex avatar
    13 posts
    Registered:
    23 Sep 2010
    14 Feb 2011
    Link to this post
    Hi guys,


    I have a custom control designer built like in your tutorial for editing a user control.

    Let's say the control has a text property in which I will have some html source.
    What I want to do is bind this property in edit mode with some sort of rich text box editor with all those bold,italic font, link etc... stuff. 
    I tried using a  HtmlField control but I couldn't enable the editor, the text appears as a label, don't know which needs to be set for this control.

    I would very much appreciate if you could help me with a solution.

    Best Regards,
    Alex
  2. Alex
    Alex avatar
    13 posts
    Registered:
    23 Sep 2010
    15 Feb 2011
    Link to this post
    I have managed to use HtmlField , I needed it to add a form manager on the template, but still can't get to bind the HtmlField with  my c# property.

    Any Ideea how to do this from js, and to which property of the HtmlField I need to bind to populate with the text from my c# property?

    Thanks,
    Alex
  3. Alex
    Alex avatar
    13 posts
    Registered:
    23 Sep 2010
    15 Feb 2011
    Link to this post
    Managed to do that as well. Now when I hit save the text from HtmlField goes to the property I want.
    However could really use a bit of help on the following:

    I have a text box, the HtmlField and a  button all in my custom control designer . Is it possible when I click the button to get the text from the HtmlField into the textbox?

    Thanks in advance,
    Alex
  4. Slavo
    Slavo avatar
    295 posts
    Registered:
    24 Sep 2012
    17 Feb 2011
    Link to this post
    Hello Alex,

    The HtmlField has a DisplayMode property, which you should set to "Write" if you want an editable textbox to appear. You've already figured that out.

    Are you manually persisting the value from the HtmlField to your property? If so, it would be almost the same to put that value in the TextBox. The HtmlField client component has a get_value() method. You can use that to get the text and then set it to the TextBox using jQuery:
    var htmlValue = this._htmlField.get_value();
    jQuery("#" + "<client_id_of_textbox>").val(htmlValue);


    All the best,
    Slavo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Alex
    Alex avatar
    13 posts
    Registered:
    23 Sep 2010
    17 Feb 2011
    Link to this post
    Hi Slavo,

    Seams like a solution.
    My button from designer has onclick event set like this onclick=" myFunc();" 
    Inside myFunc I should probably place your code.
    But Where should my func go? In the js or at top of the designer. if I try creating myFunc on top of the designer

    this._htmlField.get_value();

    won't work anymore .

    If I try defining the function in the js function is not visible. 

    How should I define the function and where?

    Thanks,
    Alex
  6. Slavo
    Slavo avatar
    295 posts
    Registered:
    24 Sep 2012
    18 Feb 2011
    Link to this post
    Hi Alex,

    If you subscribe to the onclick event of the button in the template, like you are doing, you won't have access to the HtmlField, because the click handler is created in the global scope. Instead, you can subscribe to the button from javascript.
    • Create a reference to your button in the server component of your designer:
      protected virtual HyperLink Button
      {
          get
          {
              return this.Container.GetControl<HyperLink>("btnTest", true);
          }
      }
    • Pass the button reference to the client component in GetScriptDescriptors()
      descriptor.AddElementProperty("_button", this.Button.ClientID);
    • Subscribe to the click event in the javascript of the designer
      _onLoad: function (sender, args) {
          $addHandler(this._button, "click", this._onButtonClick);
      },
       
      _onButtonClick: function (sender, args) {
          var text = this._htmlField.get_value();
          jQuery(this._textBox).attr("text", text);
      }
    Then your code will execute within the same context (the designer client component), and you will be able to access the HtmlField (of course you should pass a reference to the HtmlField from server to client the same way you are doing it for the button).

    Best wishes,
    Slavo
    the Telerik team
    Answered
  7. Alex
    Alex avatar
    13 posts
    Registered:
    23 Sep 2010
    18 Feb 2011
    Link to this post
    Didn't thought at this approach.
    Thanks  Slavo
7 posts, 1 answered