Questions on UI for ASP.NET AJAX Forum

8 answers

274 views

Problem - Tooltips have to be rebound every callback ?

Hi,

I have a problem with a tooltipmanager which is quite complicated but I will try to explain......

My page contains a datalist of Photos. Under each photo is a textbox which is initially hidden (visibility=false), there is also a button to open the textbox and a span which has Rad:Tooltips bound to it.

My problem is that the Tooltips only show when the page is initially loaded. If I initiate a callback they stop working, unless I reload the photos from the database and Databind the Datalist again.

I really can't rebind the datalist on every callback as it clears the contents on my textboxes and makes them go invisible again.

(Of course, if anybody knows how I can rebind the photos without clearing the textboxes and making them invisible that would also fix the problem I suppose)

I have provided some code below which is as simple as I can make it. You can see it running at the following URL - Click here

<%@ Page Language="VB" %> 
 
<%@ Import Namespace="System.Configuration.ConfigurationManager" %> 
<%@ Import Namespace="System.Data" %> 
<%@ Import Namespace="System.Data.SqlClient" %> 
<%@ Import Namespace="Tvi" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
 
<%@ register src="OtherControls/PhotoComments.ascx" tagname="PhotoComments" tagprefix="MMALO" %> 
 
<script runat="server"> 
     
    Dim Reader As SqlDataReader 
    Dim Files As String = AppSettings("files_url") 
     
    Sub Page_Load() 
         
        If Not Page.IsPostBack Then 
            BindPhotos(Request.QueryString("ID")) 
        End If 
         
    End Sub 
     
    Sub BindPhotos(ByVal GalleryID As Integer) 
         
        Dim PhotoSQL As String = "SELECT P.ID AS PhotoID, p.Thumbnail AS Thumbnail, p.Photo AS Photo, P.Caption AS Caption, P.TagCount AS TagCount " 
        PhotoSQL += "FROM Photos P " 
        PhotoSQL += "INNER JOIN PhotoGalleries PG ON P.PhotoGalleryID = PG.ID " 
        PhotoSQL += "LEFT OUTER JOIN PhotoComments PC ON PPC.PhotoID = P.ID " 
        PhotoSQL += "WHERE P.Status='Live' AND PG.ID='" + GalleryID.ToString + "';" 
                 
        DL_Photos.DataSource = Database.getDataReader(PhotoSQL) 
        DL_Photos.DataBind() 
         
    End Sub 
 
    Sub Photos_Bound(ByVal obj As Object, ByVal e As DataListItemEventArgs) 
         
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then 
             
            ''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
            ' Add tooltips 
            ''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
             
            Dim CommentLabel As HtmlGenericControl = DirectCast(e.Item.FindControl("lbViewComments"), HtmlGenericControl) 
             
            CommentLabel.ID = e.Item.DataItem("PhotoID").ToString 
 
            CommentToolTip.TargetControls.Add(CommentLabel.ClientID, True) 
             
            ''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
            ' Hide Comment Boxes 
            ''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 
             
            CType(e.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = "False" 
             
        End If 
    End Sub 
     
    Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs) 
         
        Dim index As Integer = args.TargetControlID.LastIndexOf("_") 
        Dim elementID As String = args.TargetControlID.Substring(index + 1) 
         
        Dim PhotoComments As New PhotoComments 
        args.UpdatePanel.ContentTemplateContainer.Controls.Add(PhotoComments) 
         
        Dim Comments As PhotoComments = DirectCast(PhotoComments, PhotoComments) 
        Comments.PhotoID = elementID 
         
    End Sub 
     
    Sub PhotoCommand(ByVal obj As Object, ByVal E As DataListCommandEventArgs) 
         
        Dim Command As String = E.CommandName 
        Dim Argument As String = E.CommandArgument 
 
        Select Case Command 
              
            Case "OpenCommentBox" 
                     
                CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = True 
                      
            Case "CancelComment" 
                 
                CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = False 
                 
            Case "AddComment" 
                     
                '  --->>>  Code for adding the comment to the DB goes here. 
                     
                CType(E.Item.FindControl("CommentBox"), TextBox).Text = "" 
                CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = False 
                     
        End Select 
         
    End Sub 
     
    Sub InitiateCallback(ByVal obj As Object, ByVal E As EventArgs) 
        BindPhotos(Request.QueryString("ID")) 
    End Sub 
    
</script> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
 
<head> 
</head> 
 
<body> 
    <form id="form1" runat="server"> 
     
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> 
 
        <asp:UpdatePanel ID="PhotoPanel" runat="server"> 
            <ContentTemplate> 
             
                <asp:LinkButton ID="Initiate" runat="server" OnClick="InitiateCallback" Text="Click here to initiate a callback and rebind the datalist" /> 
                 
                <br /> 
                <br /> 
                 
                <asp:DataList CellSpacing="8" ID="DL_Photos" OnItemCommand="PhotoCommand" OnItemDataBound="Photos_Bound" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" CssClass="GalleryTable"> 
                    <ItemStyle CssClass="GalleryPhoto" /> 
                    <ItemTemplate> 
                        <img src="<%# Files + DataBinder.Eval(Container.DataItem, "Thumbnail")%>" /> 
                            <div> 
                                <asp:LinkButton ID="OpenCommentBoxButton" CommandName="OpenCommentBox" runat="server" Text="Add Comment"/>  
                                <span ID="lbViewComments" style="cursor:pointer;" runat="server">10 Comments</b></span> 
                            </div> 
                            <div id="CommentBoxDiv" runat="server"> 
                                <asp:textbox ID="CommentBox" runat="server" TextMode="MultiLine" Width="180" height="82" CssClass="CommentBox" /> 
                                <br /> 
                                <asp:LinkButton ID="CommentAddButton" runat="Server" CommandName="AddComment" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "PhotoID") %>' ><IMG SRC="i/CommentButtonAdd.jpg" /></asp:LinkButton> <asp:LinkButton ID="CommentCancelButton" CommandName="CancelComment" runat="Server"><IMG SRC="i/CommentButtonCancel.jpg" /></asp:LinkButton> 
                            </div> 
                        </div> 
                    </ItemTemplate> 
                </asp:DataList> 
            </ContentTemplate> 
        </asp:UpdatePanel> 
                             
        <telerik:radtooltipmanager  
            runat="server"  
            id="CommentToolTip"  
            ManualClose="true" 
            showevent="Onclick"  
            Sticky="true"  
            Skin="Web20"  
            Width="350px" 
            Height="250px"  
            Position="MiddleRight"  
            OffsetX="6"   
            onajaxupdate="onajaxupdate" > 
        </telerik:radtooltipmanager> 
    </form> 
 
</body> 
 
</html>

ToolTip

answered on 04 Jul 2007

2 answers

235 views

Mixing Rad controls for ASP.NET with Prometheus controls

I read that it is possible to mix the Rad controls for ASP.NET with the Prometheus controls. What isn't clear to me is how Ajax is setup to make them work together. Each type has its own RadAjaxManager control. Are these compatible? Which one do I use? Is there an example somewhere illustrating how partial page updates is done with mixed controls?

Thanks
Johann

General Discussions

answered on 03 Jul 2007

6 answers

257 views

Ambigious Match Found Error

Hi,
I was hoping someone could help me with the following issue:
I have a portal site that allows users to choose various "parts" to add to the page and creates new radDocks dynamically inside different zones. I am using an UpdatePanel for the AJAX type moves and updates. Everything works fine up to the actual UpdatePanel functions, i.e. the control is added to the UpdatePanel, but not moved. If I refresh the page, then the control appears in the UpdatePanel. If I move the radDock, delete it, or try to open a new one I get the "Ambigious Match Found" error as a javascript type alert (popup). As a result of this the docks are not being moved to the zones, and the zone is not being saved in the database as part of the state.
Here is the Add Dock Code:

        protected void addDock_Click(object sender, EventArgs e)  

        {  

            RadDock _dk = CreateDock(int.Parse(DroptDownWidget.SelectedValue), DroptDownWidget.Text);  

            UpdatePanel1.ContentTemplateContainer.Controls.Add(_dk);  

            CreateSaveStateTrigger(_dk);  

            ScriptManager.RegisterStartupScript(  

                _dk,  

                   this.GetType(),  

                   "DockIntoZone",  

                   string.Format(@"function _addDock() {{" +  

                   "Sys.Application.remove_load(_addDock);" +  

                   "$find('{1}').dock($find('{0}'));" +  

                   "$find('{0}').doPostBack('DockPositionChanged');" +  

                   "}};" +  

                   "Sys.Application.add_load(_addDock);",_dk.ClientID,FindClientId(DropDownZone.SelectedValue)),  

            true);  

}  

        protected void _dock_Command(object sender, DockCommandEventArgs e)  

        {  

            if (e.Command.Name == "Close")  

            {  

                ScriptManager.RegisterStartupScript(  

                    UpdatePanel1,  

                    this.GetType(),  

                    "RemoveDock",  

                    string.Format("function _removeDock() {{" +  

                        "Sys.Application.remove_load(_removeDock);" +  

                        "$find('{0}').undock();" +  

                        "$get('{1}').appendChild($get('{0}'));" +  

                        "$find('{0}').doPostBack('DockPositionChanged');" +  

                        "}};" +  

                        "Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID),  

                    true);  

            }  

        }  

protected RadDock CreateDock(PageWidgetInfo pageWidget)  

        {  

            RadDock _dock = new RadDock();  

            if (!string.IsNullOrEmpty(pageWidget.State))  

                _dock.ApplyState(DockState.Deserialize(pageWidget.State));  

            _dock.Title = pageWidget.Name;  

            _dock.ID = pageWidget.ID.ToString();  

            _dock.Tag = pageWidget.ID.ToString();  

            _dock.EnableEmbeddedSkins = false;  

            _dock.Skin = "User";  

            _dock.ForbiddenZones = new string[] { "zoneNews", "zoneBravo","zoneStories","zoneEmployeeNews","zoneEnsemble" };  

            BaseWidget _widget = LoadControl(pageWidget.Path) as BaseWidget;  

            if (_widget == null)  

            {  

                throw new Exception(string.Format("The UserControl with path '{0}' does not inherit from the BaseWidget. All widgets must inherit from BaseWidget.", pageWidget.Path));  

            }  

            _dock.ContentContainer.Controls.Add(_widget);  

            _widget.Configuration = pageWidget.Configuration;  

            _dock.Commands.Add(new DockCloseCommand());  

            _dock.Commands.Add(new DockExpandCollapseCommand());  

            _dock.Command += new DockCommandEventHandler(_dock_Command);  

            return _dock;  

        }  

        protected RadDock CreateDock(int widgetId, string widgetConfiguration)  

        {  

            WidgetInfo _widget = WidgetInfo.Select(widgetId);  

            if (_widget == null)  

            {  

                throw new Exception(string.Format("Cannot find Widget with ID={0}.", widgetId));  

            }  

            PageWidgetInfo _newPageWidget = PageWidgetInfo.Insert(PageID, widgetId, _widget.Name, string.Empty);  

            PageWidgets.Add(_newPageWidget);  

            RadDock _dock = CreateDock(_newPageWidget);  

           return _dock;  

        }

As you can tell, I used the examples provided by Telerik.

Any help would be appreciated.

Dock

answered on 03 Jul 2007

6 answers

212 views

Bug causes repeated text

Our editors have reported a bug which has occurred on several of the WCM pages they are working on. The bug causes text to be repeated in the free version of the MOSS editor. This is a regression from the beta, which does not show the same behaviour.

Our editors have been using the Telerik editor in design mode only, and their content originates in Word. However, to get to a repeatable test case I have been using the HTML source view. The following HTML is a minimal example which triggers the problem:

<p><span><ul><li>The ul tags around this produce the effect</li></ul>This text gets repeated <a href="http://www.telerik.com/">this link doesn't</a>.</span></p>

It seems to happen when you have a block element, containing an inline element, containing another block element (where li is being treated as a block element). This is invalid HTML of course, but it's the kind of HTML we're dealing with.

Removing the list eliminates the problem. Removing the span eliminates the problem. Removing the paragraph eliminates the problem. Changing the span to another inline element still causes the problem. Changing the list to another inline element still causes the problem (another "real" example had an h3 in here).

Our editors have been seeing the text get repeated whenever they re-save their document. In my testing I discovered that it also gets repeated when you switch between design mode and HTML source mode. This suggests that the error is somewhere in your client-side reformatting code.

I have tried re-installing the Telerik solution, but the problem remains. Until this problem can be resolved we have decided our best option is to revert to using the beta release.

WebParts for SharePoint

answered on 03 Jul 2007

1 answer

114 views

Better Opera support

Hi guys!

I've tried the Tooltip, Dock and Color Picker controls so far, but had issues in the latest version of Opera (sometimes they fall apart).

I know your "mainline" ASP.NET controls work great in this browser. Is there better Opera support planned for Prometheus?

Cheers!
Milan

General Discussions

answered on 03 Jul 2007

1 answer

92 views

Different languages and restricted image paths

Dear telerik team,

the RadEditor seems to be a great enhancement for MOSS 2007! We are planning to buy the full-featured version and to add it to our university-wide elearning portal as replacement for the standard list editor. We used the trial version to explore the radEditor, but we have two problems:

1. We work with site definitions that generate site collections and a couple of subsites. Some of the collections are in English and some are in German. Is it possible two define (via features) whether the radEditor uses English or German as its display language? A specification in the global ListConfigFile.xml does not work, since it causes the same language for every site collection.

2. Regarding the image manager, we need to restrict the list of shown libraries. For example, the image manager should only show a special picture library that is located in the same site (with relative URL "/pictures"). We tried to set the ImagesPaths, UploadImagesPaths and DeleteImagesPath properties in ListConfigFile.xml to "/pictures", but this did not work. In fact, these properties seem to be ignored for the list replacement. How can we realize this?

Thank you for your help!

WebParts for SharePoint

answered on 03 Jul 2007

6 answers

269 views

Change Dock Title

Hi,

Can a docks title be changed dynamically using JS on the client?

Thanks!

Mark

Dock

answered on 02 Jul 2007

1 answer

118 views

Grammer Check in RADEditor - Full

Hi, My requirement is to enable the Grammer Check in RADEditor. Can you please tell me how to do this?

Also, when ever I add new word in the Dictionary thru RADEditor, it prompts a message saying the word has been added successfully. Is it possible to remove that alert success message.

Thanks in advance.

Regards,
Phani

WebParts for SharePoint

answered on 29 Jun 2007

3 answers

301 views

Problem with position of the rad tool tip with rad panelbar

Hello Telerik Team !

I would be very thankful to you guys if you could please explain me the odd behavior of the rad tool-tips. I am using a rad Panelbar in my application.

I have to show the rad tool-tip for controls inside the panelbar and out-side the panelbar. My rad tool-tip appears at different locations for case when panelbar is open and when the panelbar is closed.

Inside Panelbar - When I move my mouse for the 1^st time over the label for which I want to show the tool-tip , the tool-tip appears near the control but not according to the properties I set in the Tool Tip Manager. When I move over for the 2^nd time it appears at the correct position. My tool tip manager settings are as below:

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Position="TopRight" Sticky="true" RelativeTo="Mouse" OffsetX="-5" OffsetY="-5" style="position:absolute;"></telerik:RadToolTipManager>
The text is set in the ToolTip property of the asp controls. No seperate rad tool tip control is taken except the tool tip manager in the application .

Outside the panelbar – The tool tip for controls outside the panel bar appears at the correct location when the panel bar is closed. But when the panel bar is open ( or expanded) the tool-tip of all the controls appears at an far above the controls. I have set the OffsetX="-5" OffsetY="-5" in the tool tip manager but it does not work when the panel bar is expanded.

Also the issue does not arises in FireFox 2.0 , I used IE 7.0.

I have the screens ready with me but was not able to add it in the rad editor for the new forum post.

If you need any more information please let me know.

Thanks
Kunal

ToolTip

answered on 29 Jun 2007

4 answers

343 views

RadToolTip, RadToolTipManager???

hello,

I want to implement the radtooltip control into my project. For example:
http://www.telerik.com/demos/aspnet/prometheus/ToolTip/Examples/LoadOnDemand/DefaultCS.aspx

Also, I have an aspx page where all products are viewed through a repeater control, so I want to load the aspx page through the tooltip as when mouseisover on products menu in this link http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/Default/DefaultCS.aspx#.
Do I use the RadTooltipmanager or tooltip??????????????
how can I download these libraries??? free????
Please a help .....

Thanks,
Ranine

ToolTip

answered on 29 Jun 2007

	<%@ Page Language="VB" %>

	<%@ Import Namespace="System.Configuration.ConfigurationManager" %>
	<%@ Import Namespace="System.Data" %>
	<%@ Import Namespace="System.Data.SqlClient" %>
	<%@ Import Namespace="Tvi" %>

	<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>


	<%@ register src="OtherControls/PhotoComments.ascx" tagname="PhotoComments" tagprefix="MMALO" %>


	<script runat="server">

	Dim Reader As SqlDataReader
	Dim Files As String = AppSettings("files_url")

	Sub Page_Load()

	If Not Page.IsPostBack Then
	BindPhotos(Request.QueryString("ID"))
	End If

	End Sub




	Sub BindPhotos(ByVal GalleryID As Integer)


	Dim PhotoSQL As String = "SELECT P.ID AS PhotoID, p.Thumbnail AS Thumbnail, p.Photo AS Photo, P.Caption AS Caption, P.TagCount AS TagCount "
	PhotoSQL += "FROM Photos P "
	PhotoSQL += "INNER JOIN PhotoGalleries PG ON P.PhotoGalleryID = PG.ID "
	PhotoSQL += "LEFT OUTER JOIN PhotoComments PC ON PPC.PhotoID = P.ID "
	PhotoSQL += "WHERE P.Status='Live' AND PG.ID='" + GalleryID.ToString + "';"

	DL_Photos.DataSource = Database.getDataReader(PhotoSQL)
	DL_Photos.DataBind()

	End Sub




	Sub Photos_Bound(ByVal obj As Object, ByVal e As DataListItemEventArgs)

	If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then


	'''''''''''''''''''''''''''''''''''''''''''''''''''''''''
	' Add tooltips
	'''''''''''''''''''''''''''''''''''''''''''''''''''''''''

	Dim CommentLabel As HtmlGenericControl = DirectCast(e.Item.FindControl("lbViewComments"), HtmlGenericControl)

	CommentLabel.ID = e.Item.DataItem("PhotoID").ToString

	CommentToolTip.TargetControls.Add(CommentLabel.ClientID, True)


	'''''''''''''''''''''''''''''''''''''''''''''''''''''''''
	' Hide Comment Boxes
	'''''''''''''''''''''''''''''''''''''''''''''''''''''''''

	CType(e.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = "False"


	End If
	End Sub





	Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs)


	Dim index As Integer = args.TargetControlID.LastIndexOf("_")
	Dim elementID As String = args.TargetControlID.Substring(index + 1)

	Dim PhotoComments As New PhotoComments
	args.UpdatePanel.ContentTemplateContainer.Controls.Add(PhotoComments)

	Dim Comments As PhotoComments = DirectCast(PhotoComments, PhotoComments)
	Comments.PhotoID = elementID


	End Sub




	Sub PhotoCommand(ByVal obj As Object, ByVal E As DataListCommandEventArgs)

	Dim Command As String = E.CommandName
	Dim Argument As String = E.CommandArgument


	Select Case Command

	Case "OpenCommentBox"

	CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = True

	Case "CancelComment"

	CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = False


	Case "AddComment"

	' --->>> Code for adding the comment to the DB goes here.

	CType(E.Item.FindControl("CommentBox"), TextBox).Text = ""
	CType(E.Item.FindControl("CommentBoxDiv"), HtmlGenericControl).Visible = False


	End Select

	End Sub


	Sub InitiateCallback(ByVal obj As Object, ByVal E As EventArgs)
	BindPhotos(Request.QueryString("ID"))
	End Sub


	</script>



	<html xmlns="http://www.w3.org/1999/xhtml" >

	<head>
	</head>

	<body>
	<form id="form1" runat="server">


	<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />


	<asp:UpdatePanel ID="PhotoPanel" runat="server">
	<ContentTemplate>

	<asp:LinkButton ID="Initiate" runat="server" OnClick="InitiateCallback" Text="Click here to initiate a callback and rebind the datalist" />

	<br />
	<br />

	<asp:DataList CellSpacing="8" ID="DL_Photos" OnItemCommand="PhotoCommand" OnItemDataBound="Photos_Bound" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" CssClass="GalleryTable">
	<ItemStyle CssClass="GalleryPhoto" />
	<ItemTemplate>
	<img src="<%# Files + DataBinder.Eval(Container.DataItem, "Thumbnail")%>" />
	<div>
	<asp:LinkButton ID="OpenCommentBoxButton" CommandName="OpenCommentBox" runat="server" Text="Add Comment"/>
	<span ID="lbViewComments" style="cursor:pointer;" runat="server">10 Comments</b></span>
	</div>
	<div id="CommentBoxDiv" runat="server">
	<asp:textbox ID="CommentBox" runat="server" TextMode="MultiLine" Width="180" height="82" CssClass="CommentBox" />
	<br />
	<asp:LinkButton ID="CommentAddButton" runat="Server" CommandName="AddComment" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "PhotoID") %>' ><IMG SRC="i/CommentButtonAdd.jpg" /></asp:LinkButton> <asp:LinkButton ID="CommentCancelButton" CommandName="CancelComment" runat="Server"><IMG SRC="i/CommentButtonCancel.jpg" /></asp:LinkButton>
	</div>
	</div>
	</ItemTemplate>
	</asp:DataList>
	</ContentTemplate>
	</asp:UpdatePanel>

	<telerik:radtooltipmanager
	runat="server"
	id="CommentToolTip"
	ManualClose="true"
	showevent="Onclick"
	Sticky="true"
	Skin="Web20"
	Width="350px"
	Height="250px"
	Position="MiddleRight"
	OffsetX="6"
	onajaxupdate="onajaxupdate" >
	</telerik:radtooltipmanager>
	</form>

	</body>

	</html>