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

[Cyril Iselin]

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

[Tina Stancheva]

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

[Cyril Iselin]

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 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 ;) )

[Tina Stancheva]

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

[Cyril Iselin]

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