Questions on UI for ASP.NET AJAX Forum

1 answer

100 views

SelectedRowStyle

Hi,
I am setting my selectedrow style like this
<SelectedItemStyle BackColor="#FFE0C0" />

The problem is I am getting a gradient colour, not a single colour. Please help.

Documentation and Tutorials

answered on 26 Sep 2011

1 answer

140 views

Dynamic Update Chart Control

I use telerik chart control in my asp.net application. Is there any way to change chart dynamically with clicking or dragging? If this is possible, I need to get new values of the chart. Thanks in advance.

Chart (Obsolete)

answered on 26 Sep 2011

0 answers

56 views

Grouping and reordering issue when grid is placed in a slidingpane

Update: Problem solved.

Hello,

I have placed a grid into a slidingpane. When I have expanded the pane and I try to group by coluumns or reordering columns by drag&drop the columns, the box representing the column is not visible during dragging it into the group box or to antoher column position. Only wehn I move the mouse outer the pane the column box is visible under the mouse cursor. And if the slidingpane is pinned, all is working as expected. So I think it's a z-index problem. But how to solve it?

We are using version 2011.2.712.35
The grid will be created programmatically.

Any suggestions?

Best regards,
Ralf
d-velop.de

Grid

asked on 26 Sep 2011

11 answers

273 views

jQuery - Single RadEditor For Multiple Editable Bodies On Page

I have written this jQuery code that allows a single RadEditor instance to be used to edit multiple different editable areas (editable bodies) on the same page. It is very efficient and vastly improves page loading time but there are a few problems that I am unable to resolve and I hope you may be able to help.

To use the jQuery code, the markup on the page needs to be similar to this:

    
            <div class="SKEditorWrapper">  
        
                <telerik:RadEditor using PageTop Toolbar goes here/> 
        
            </div> 
        
            <div id="BodyBlockPanel1" class="SKEditableBody">  
        
                <textarea name="BodyBlockHTML1" rows="2" cols="20" id="BodyBlockHTML1" class="SKEditableBodyText" style="display:none;">  
        
                    This is editable body 1.  
        
                </textarea> 
        
            </div> 
        
            <div id="BodyBlockPanel2" class="SKEditableBody">  
        
                <textarea name="BodyBlockHTML2" rows="2" cols="20" id="BodyBlockHTML2" class="SKEditableBodyText" style="display:none;">  
        
                    This is editable body 2.  
        
                </textarea> 
        
            </div> 
        
            <!-- ... and so on. We have 40 editable bodies on our page.-->

The jQuery code hides the textareas and inserts a DIV after each of them, to render a WYSIWYG version of the markup. When the user clicks on the DIV, it is replaced with the RadEditor. The RadEditor is used with 'PageTop' toolbar and design mode only, to provide WYSIWYG in-place editing.

The jQuery code is as follows:

    
            $(document).ready(function(){  
        
                var $bodyBlock;  
        
                var $editorBody;  
        
                var firstEdit = true;  
        
                var $prevEditableBody = null;  
        
                //Hide the RadEditor and its wrapper.  
        
                $('SKEditorWrapper').hide();  
        
                var $radEditor = $('div.RadEditor').hide();  
        
                var saveEditorContent = function(){  
        
                    //Copy the content from the RadEditor back into the TextArea.  
        
                    var editor = $find($radEditor.attr('id'));  
        
                    var edContent = editor.get_html('true');  
        
                    $prevEditableBody  
        
                        .find('.SKEditableBodyText')  
        
                        .val(edContent);  
        
                };  
        
                var moveEditorToBody = function(event){  
        
                    var $editorPanel = $('.SKEditorWrapper');  
        
                    var $editableBody = $(this);  
        
                    //Switch off the mouse-over styling on all editable bodies on the page.  
        
                    $('.SKEditableBody')  
        
                        .removeClass('SKEditableBodyHighlight');  
        
                    //Attach highlighter class and mousout handlers to transfer editor content  
        
                    //to TextArea when the user clicks 'save'.              
        
                    $editableBody  
        
                        .addClass('SKEditableBodyHighlight')  
        
                        .unbind('mouseenter mouseleave')  
        
                        .mouseleave(saveEditorContent)  
        
                        .blur(saveEditorContent);  
        
                    //Remove the RadEditor from its current position in the DOM, replace  
        
                    //it with a DIV to render the markup and copy the editor content into  
        
                    //the TextArea ready for AJAX postback.              
        
                    if (firstEdit){  
        
                        firstEdit = false;  
        
                        $editorPanel.remove();  
        
                    }  
        
                    else {  
        
                        var editor = $find($radEditor.attr('id'));  
        
                        var edContent = editor.get_html('true');  
        
                        $('<div/>')  
        
                            .addClass('SKEditableBodyBlockContent')  
        
                            .html(edContent)  
        
                            .replaceAll($editorPanel);  
        
                        saveEditorContent();  
        
                    }  
        
                    //Insert the RadEditor into its new position in the DOM, i.e. in the  
        
                    //editable body the user clicked on.  
        
                    $editableBody.append($editorPanel);  
        
                    //Find the DIV showing the rendered markup of this editable body and  
        
                    //replace it with the RadEditor.  
        
                    var editor = $find($radEditor.attr('id'));  
        
                    $bodyBlock = $(event.target).closest('.SKEditableBodyBlockContent');  
        
                    editor.set_html($bodyBlock.html());  
        
                    var editorBody = document.all ? editor.get_document().body : editor.get_document();  
        
                    $editorBody = $(editorBody);  
        
                    $bodyBlock.remove();  
        
                    //Show the RadEditor and its wrapper.  
        
                    $editorPanel.show();  
        
                    $radEditor.show();  
        
                    //Delay a short time and then apply focus to editor to cause text cursor  
        
                    //to be displayed in the RadEditor.  
        
                    setTimeout(function(){  
        
                        editor.setFocus();  
        
                    },200);  
        
                    //Prevent the click event from activating any links from anchor tags in the  
        
                    //editable body.  
        
                    event.preventDefault();  
        
                    //Re-Attach click and hover handlers to the editable body that was being  
        
                    //edited previously.  
        
                    if ($prevEditableBody){  
        
                        $prevEditableBody  
        
                            .one('click', moveEditorToBody)  
        
                            .unbind('mouseenter mouseleave')  
        
                            .hover(function(){  
        
                                $(this).addClass('SKEditableBodyHighlight');  
        
                            }, function(){  
        
                                $(this).removeClass('SKEditableBodyHighlight');  
        
                        });  
        
                    }  
        
                    $prevEditableBody = $editableBody;  
        
                };  
        
                //Find the TextAreas for every editable body, hide them and insert a  
        
                //DIV to show their rendered markup.  
        
                $('.SKEditableBodyText').each(function(index){  
        
                    $(this).hide();  
        
                    $('<div/>')  
        
                        .addClass('SKEditableBodyBlockContent')  
        
                        .html($(this).val())  
        
                        .insertAfter($(this));  
        
                });  
        
                //Make the editable bodies editable, using single RadEditor, when the user  
        
                //clicks them and attach mouse-overs to indicate which bodies are editable.  
        
                $('.SKEditableBody')  
        
                    .one('click', moveEditorToBody)  
        
                    .hover(function(){  
        
                        $(this).addClass('SKEditableBodyHighlight');  
        
                    }, function(){  
        
                        $(this).removeClass('SKEditableBodyHighlight');  
        
                    });  
        
            });

The problems are:

In IE/Chrome, after an editable body is clicked, the user has to click again before the text insert caret and toolbar will show. Is there a way to make these appear as soon as the user clicks on the editable DIV.
In Firefox, the text insert caret never shows, no matter how many times the user clicks. Sadly, this makes it unusable in Firefox, although if the user enters text it does go into the correct position in the RadEditor. How can I cause the text insert caret to appear in Firefox?

I hope you can help, as this would be a very efficient solution to the problem of having multiple editable areas on a single page.

Editor

answered on 26 Sep 2011

2 answers

44 views

What am I doing wrong [Example project included]

Hello teleriks!

I am trying to add structure and datasource for a grid in the code behind, due to dynamic content.

To easier show the problems i have, i have created an sample project.

The problem is, when I try to edit (double click) a row i get a index out of bounds exception. If i uncomment the code in GridNeedDataSource it works the first time, but when i try to dobuleklick to edit an other row, the same exception it thrown again.

I am new to web development, so i assume its something i dont understand here ^^

Btw, you asked me about license a few weeks ago, I just wanted to say that its on its way, but stuff takes time in this company :)

Grid

answered on 26 Sep 2011

4 answers

105 views

Big problem with larger images

Hi,

I found a problem ... when I got a big image in the editor area and click it to select the size controls are visible outside the editor area and the buttons no longer fire an click event if the selected content "overlays" the buttons ... only a dbl click would launch e.g. the image editor. This bug also occurs at the demos ...

just select the image make it e.g. 2000x2000 pixel .. keep it selected an then try to click any button from the editor ...

Browser IE9 ... Firefox is fine on that issue

Any solution on that ?

Regards,
Harald

Editor

answered on 26 Sep 2011

0 answers

102 views

ajax Popup Extender is not displayed in postback

Hi,

I am using PopupExtender. In Rad grid, in each row I have an image button.. While clicking that am opening the pop extender. Its working fine. But am filling grid in a button click event which will throw a javascript confirm alert. if i press yes then in postback i will rebind the grid.. After binding, Pop up extender is not displayed if we click the image in rad grid.. i have placed the code in Item data bound also for associating the image button with pop up extender. but still its not working. How to overcome this issue?

protected void gridViewResourceList_ItemDataBound(object sender, GridItemEventArgs e)

{

try

{

if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)

{

PopupControlExtender PopupControlExtender1 = (PopupControlExtender)e.Item.FindControl("PopupControlExtender1");

Panel pnlPopUp = (Panel)e.Item.FindControl("pnlPopUp");

if (PopupControlExtender1 != null && pnlPopUp != null)

PopupControlExtender1.PopupControlID = pnlPopUp.ID;

}

}

}

Thanks
Esther

Ajax

asked on 26 Sep 2011

1 answer

145 views

RadDatePicker OnSelectedDateChanged event error

(fixed) See next post

I have a RadDatePicker on my page that is declared like this...

<telerik:RadDatePicker OnSelectedDateChanged="radDateStart_OnSelectedDateChanged" AutoPostBack="true" Skin="CKCRadSkin" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" ID="radDateStart" runat="server" />

The OnSelectedDateChanged event is in the code behind (of course). It looks like this.

private void radDateStart_OnSelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)

{

}

However, when I try to run this page I get this very confusing error.

Compiler Error Message: CS1061: 'ASP.location_addeditactivity_aspx' does not contain a definition for 'radDateStart_OnSelectedDateChanged' and no extension method 'radDateStart_OnSelectedDateChanged' accepting a first argument of type 'ASP.location_addeditactivity_aspx' could be found (are you missing a using directive or an assembly reference?)

Source Error:

Line 104:                                <tr>
Line 105:                                    <td  style="padding: 0 0 0 0;">
Line 106:                                        <telerik:RadDatePicker OnSelectedDateChanged="radDateStart_OnSelectedDateChanged" AutoPostBack="true"  Skin="CKCRadSkin" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" ID="radDateStart" runat="server" />
Line 107:

What gives? Any idea what it going on here?

Cheers

Brad

General Discussions

answered on 26 Sep 2011

1 answer

106 views

RadNumericTextBox, MinValue, and nuked value on postback

I want to use a RadNumericTextBox to enter a value. If the value is outside of the MinValue/MaxValue range I want the InvalidStyle CSS to be applied, but I still want the value. I have set AllowOutOfRangeAutoCorrect to false. So far, so good. The value displays properly and uncorrected.

But when I do a postback I don't get the OnTextChanged event, presumably because the control has nuked my "invalid" value back to an empty string. Is there an easy fix for this, or should I just do the css myself.

Thank you.

tg

Input

answered on 26 Sep 2011

2 answers

671 views

Howto: change font size of a particular column ?

Hi

I have skin applied to grid. The value of one column wraps to next line and so
I wanted to change its fontsize to smaller so that it adjusts itself without wraping.

I tried applying CSS for that column, but no effect.

So how can i change fontname and fontsize of a particular column , both at design and runtime, irrespective of skin applied.

-JD

Grid

answered on 26 Sep 2011