How to use the RadHtmlPlaceholder to display a list of emoticons in a custom chat application

5 posts, 0 answers
  1. Cyril Iselin
    Cyril Iselin avatar
    15 posts
    Member since:
    Dec 2009

    Posted 11 Feb 2012 Link to this post

    Hello Telerik

    I'm programming a little chat application. I want to implement a replacement for emoticons....
    I thinked the html placeholder control is nice for this scenario.

    Problem :
    The Scrollbar of the HtmlPlaceHolder must allways be : "bottom".

    Try:
    HtmlElement iframe = (HtmlElement)box.HtmlPresenter.Children[0];
    iframe.SetAttribute("id", "myIFrame");
    string code2 = "$('#myIFrame').animate({scrollTop: $('#myIFrame')[0].scrollHeight})";
    HtmlPage.Window.Eval(code2);

    This may work for seconds, then I will recive an error. Also the scrollbar "flickers" on updating the placeholder.HtmlSource.

    Can you give me any advise ?
    Or you think the RichTextBox (readonly mode) is better to achive this ? If yes, do you know how to achive there the emoticons replacement ?

    Thanks a lot

    Best Greetings

    Cyril Iselin

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 13 Feb 2012 Link to this post

    Hi Cyril,

    From the code snippet and the information you sent I am not really sure how you implement your scenario with the RadHtmlPlaceholder control. Can you send us a small sample so that we can have  a look at your implementation and the RadHtmlPlaceholder definition? That will help better understand your scenario and the issue.

    Then we will also be able to advice you on an approach and a control that you can use to implement it.

    Thank you in advance for your cooperation.

    Kind regards,
    Tina Stancheva
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Cyril Iselin
    Cyril Iselin avatar
    15 posts
    Member since:
    Dec 2009

    Posted 14 Feb 2012 Link to this post

    Hello Tina

    Thanks for your reply !


    I have achived my goal, if you think other persons are interested too, you can add this to the code library :

    Emoticon Parser for RadRichTextBox

    (replace text with images)

    public class EmotIcons
       {
           public static readonly Dictionary<string, string> Icons = new Dictionary<string, string>()
           {
                   {":)", "img/emoticons/happy.png"},
                   {":-)", "img/emoticons/happy.png"},
                   {":@", "img/emoticons/Angry.png"},
                   {":-@", "img/emoticons/Angry.png"},
                   {"*angry*", "img/emoticons/Angry.png"},
                   {"*broken*", "img/emoticons/brokeheart.png"},
           };
     
     
           /// <summary>
           /// String To Picture function
           /// Manipulte the RadRichTextBox
           /// </summary>
           /// <param name="text"></param>
           /// <param name="box"></param>
           public static void InsertStringReplaceWithIcons(string text, RadRichTextBox box)
           {
               //find all replacements (needed for ordering by position later)
               List<Replacer> replacements = new List<Replacer>();
     
               foreach (var item in Icons)
               {
                   if (text.Contains(item.Key))
                   {
                       foreach (var replace in findAll(item.Key, text))
                       {
                           replacements.Add(new Replacer(item.Key, item.Value, replace));
                       }
                   }
               }
               //insert
               int startpos = 0;
               if (replacements.Count > 0)
               {
                   int i = 0;
                   foreach (var item in replacements.OrderBy(r => r.Position))
                   {
                       i++;
                       //get text befor icon
                       string t = text.Substring(startpos, item.Position);
                       //insert text
                       if (!string.IsNullOrEmpty(t))
                           box.Insert(t);
                       //insert icon
                       StreamResourceInfo sr = Application.GetResourceStream(new Uri(item.Value, UriKind.Relative));
                       box.InsertImage(sr.Stream, "png");
                       sr.Stream.Dispose();
                       //remove handled text
                       text = text.Remove(startpos, item.Position + item.Key.Length);
                       //refresh position of emoticons
                       int pos = item.Position + item.Key.Length;
                       replacements.ForEach(r => r.Position -= pos);
                       //insert line break and end of text
                       if (i == replacements.Count)
                       {
                           if (text.Length > 0)
                               box.Insert(text);
     
                           box.InsertLineBreak();
                       }
                   }
               }
               else
               {//no icons founded in string
                   box.Insert(text);
                   box.InsertLineBreak();
               }
           }
     
     
           private static List<int> findAll(string match, string text)
           {
               int foundPos = -1;
               int count = 0;
               int startpos = 0;
     
               List<int> result = new List<int>();
     
               do
               {
                   foundPos = text.IndexOf(match, startpos);
                   if (foundPos > -1)
                   {
                       startpos = foundPos + 1;
                       count++;
                       result.Add(foundPos);
                   }
               } while (foundPos > -1 && startpos < text.Length);
     
               return result;
           }
     
       }

    Replacer Help Class:

        public class Replacer
        {
            public string Key { get; set; }
            public string Value { get; set; }
            public int Position { get; set; }
     
            public Replacer()
            {
     
            }
     
            public Replacer(string key, string value, int position)
            {
                Key = key;
                Value = value;
                Position = position;
            }
     
     
        }


    Best Greetings

    Cyril Iselin

    (if you got any advises or comments, don't histate to contact me ;) )
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 15 Feb 2012 Link to this post

    Hello Cyril,

    Thank you for sharing your code. We will need a runnable project in order to add it in the code library, but if you don't mind we can change the type of this thread to a forum thread and change its title to be more descriptive of your solution. This way the community will be able to examine and use your code.

    Greetings,
    Tina Stancheva
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Cyril Iselin
    Cyril Iselin avatar
    15 posts
    Member since:
    Dec 2009

    Posted 17 Feb 2012 Link to this post

    Hello Tina

    Thanks a lot for your reply !

    but if you don't mind we can change the type of this thread to a forum thread and change its title to be more descriptive of your solution.
    Yes that's okay. Maybe some other People want to achieve something like this.

    Best Greetings

    Cyril Iselin
Back to Top
DevCraft banner