This is a migrated thread and some comments may be shown as answers.

Setting focus for document.selection.createRange(); of parent

2 Answers 116 Views
Window
This is a migrated thread and some comments may be shown as answers.
Mallverkstan
Top achievements
Rank 2
Mallverkstan asked on 12 Nov 2008, 04:31 PM
Hi.

I have a page that uses a RadWindow to insert symbols into a content page.

When a symbol in the RadWindow is clicked, an OnClick function is called. In the OnClick function, the BrowserWindow is called from which the Javascript function InsertC(symbol) is called. The html code of the radwindow looks like this:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"
<head><link rel="stylesheet" type="text/css" href="Common/Styles.css" /> 
<script language="javascript" type="text/javascript" > 
    function GetRadWindow() { 
        var oWindow = null
        if (window.radWindow) 
            oWindow = window.radWindow; 
        else if (window.frameElement.radWindow) 
            oWindow = window.frameElement.radWindow; 
        return oWindow; 
    } 
 
    function Click(symbol) { 
        var curWin = GetRadWindow(); 
        var bw = curWin.BrowserWindow;         
        bw.insertC(symbol); 
    } 
</script> 
    <title> 
 
</title></head
<body> 
    <div id="Symbol_div"
     
<table id="Symbol_div_table" cellpadding="0" cellspacing="0" class="symbolTable"
        <tr> 
 
            <td onclick="Click('α');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"<a  class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">&alpha;</span></span></a></div></td> 
            <td onclick="Click('β');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"<a  class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">&beta;</span></span></a></div></td> 
            <td onclick="Click('γ');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"<a  class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">&gamma;</span></span></a></div></td> 
            <td onclick="Click('π');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"<a  class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">&pi;</span></span></a></div></td> 
            <td onclick="Click('ω');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"<a  class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">&omega;</span></span></a></div></td> 
        </tr> 
 
        <tr> 
            <td onclick="Click('δ');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"<a  class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">&delta;</span></span></a></div></td> 
            <td onclick="Click('φ');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"<a  class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">&phi;</span></span></a></div></td> 
            <td onclick="Click('θ');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"<a  class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">&theta;</span></span></a></div></td> 
            <td onclick="Click('κ');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"<a  class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">&kappa;</span></span></a></div></td> 
        </tr> 
    </table> 
 
 
</div> 
</body> 
</html> 
 


The function InsertC, located in a separate javascript file, looks like this:
function insertC(c) { 
    if (document.selection) { // IE 
        var rng = document.selection.createRange(); 
        rng.text = c; 
        rng.select(); 
    } 
    else { //Firefox 
        var sel = document.getSelection(); 
        var range = window.getSelection().getRangeAt(0); 
        range.deleteContents(); 
        range.insertNode(document.createTextNode(c)); 
    } 


In firefox is works as expected. In internet explorer, the problem is this:
  • after opening the radwindow, the focus is set to the radwindow.
  • Clicking on a symbol, it is inserted inside the RadWindow, and not in the content page.
  • Clicking on the content page restores focus. Clicking on symbols in the radwindow now works as expected, they are inserted on the content page. But: clicking inside the radwindow, somewhere other than on a symbol, sets focus to the radwindow again.
I would like for the radwindow to never get focus, or for the insertC function to only insert text in the content page. I already tried replacing   document.selection.createRange(); with form1.selection.createRange(); , and some other things, but the result was the same.

Thankful for any help.
Fredrik


2 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 18 Nov 2008, 01:51 PM
Hello RolfC,

The RadWindow is actually an IFRAME element and that is why it behaves like such. That is the reason for the reported behavior - this is the expected one and can be easily reproduced with a standard IFRAME. Please also note that the code under FF is not working - actually it is not executed.

I prepared a reproduction project which uses an IFRAME based on your code - please see the attachment. As you can see, the behavior is teh same under IE and under FF the alert messages are not shown. Since this is related to general ASP knowledge, implement your logic with this IFRAME and then apply the same logic to the RadWindow. In case you succeed to achieve the desired result with the IFRAME but you cannot make it work with the RadWindow, please send me the project with the IFRAME and I will rework it to replicate the same behavior with a RadWindow instead.

Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Mallverkstan
Top achievements
Rank 2
answered on 24 Nov 2008, 09:20 AM
Thanks for the reply. I have tried to implement a different solution using OnFocus() and OnBlur() on the divs that I need to modify. I have been testing it out for the last couple of days. It seems to be working as required. Since you write that it is difficult to make the IFRAME behave the way I need, I'm going to stick to my solution for now.

Thanks,
Fredrik
Tags
Window
Asked by
Mallverkstan
Top achievements
Rank 2
Answers by
Svetlina Anati
Telerik team
Mallverkstan
Top achievements
Rank 2
Share this question
or