Questions on UI for ASP.NET AJAX Forum

2 answers

305 views

[Solved] Tooltip Not Showing on MouseOver - Same Code Works Elsewhere

I'm stumped. I have a column in a grid with an image. In one working page, on mouseover of the image we use the webservicesettings to call a service and dynamically value the mouseover tooltip with a larger thumbnail of the image. It works great and is based on the image gallery sample that auto-sizes and such.

I have another page that also has an image column and calls a different service to do the same effect. However when I mouse over the image NOTHING HAPPENS. I set an alert in the OnClientBeforeShow function and it never seems to be called. The only difference I can think of is that this page uses the code that does an OnPageLoad ajax request to show a loading graphic while the page loads. Is this perhaps causing issues with the radtooltips?

The only differences I can think of are 1) the initial ajax on page load addition, and 2) the additional asp panel wrapped around things that is not in the other screen which works fine.

Here is the master page aspx, the page aspx, and the page code-behind.

Thx!

Master page:

    
            <%@ Master Language="C#" AutoEventWireup="true" Codebehind="WebAppMaster.master.cs" 
        
                Inherits="Portal.Shell.MasterPages.WebAppMaster" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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 id="Head" runat="server">  
        
            <title></title>  
        
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
        
            <meta name="description" content="" /> 
        
            <meta name="keywords" content="" /> 
        
            <meta name="author" content="" /> 
        
            </head> 
        
            <body> 
        
            <div id="wrap">  
        
                <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" /> 
        
                <form id="mainForm" runat="server">  
        
                    <asp:ScriptManager ID="DefaultMasterScriptManager" runat="server"></asp:ScriptManager> 
        
                    <asp:ContentPlaceHolder ID="DefaultContent" runat="server" /> 
        
                    <br /><br /> 
        
                </form> 
        
            </div> 
        
            </body> 
        
            </html>

Now the aspx page:

    
            <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Domains.aspx.cs" Inherits="Portal.WebApp.Views.Domains" 
        
                Title="Domains" MasterPageFile="~/Shared/WebAppMaster.master" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <asp:Content ID="content" ContentPlaceHolderID="DefaultContent" Runat="Server">  
        
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
        
                   <script type="text/javascript">  
        
                       function pageLoad(sender, eventArgs) {  
        
                           if (!eventArgs.get_isPartialLoad()) {  
        
                               $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");  
        
                           }  
        
                       }     
        
                   </script> 
        
                </telerik:RadCodeBlock> 
        
                <script type="text/javascript">  
        
                    var currentTooltip = null;  
        
                    function OnClientBeforeShow(sender, args) {  
        
                        //Hide the currently visible tooltip   
        
                        if (currentTooltip) {  
        
                            if (currentTooltip != sender) currentTooltip.hide();  
        
                            return;  
        
                        }  
        
                        currentTooltip = sender;  
        
                        args.set_cancel(true);  
        
                    }  
        
                    function centerTooltip(img) {  
        
                        if (currentTooltip) {  
        
                            currentTooltip.set_contentElement(img);  
        
                            //use the method updateLocation because it does not call WebService's method which loads the content   
        
                            currentTooltip.updateLocation();  
        
                            currentTooltip = null;  
        
                        }  
        
                    }  
        
                </script> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" 
        
                   OnAjaxRequest="RadAjaxManager1_AjaxRequest">  
        
                   <AjaxSettings> 
        
                       <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
        
                           <UpdatedControls> 
        
                               <telerik:AjaxUpdatedControl ControlID="Panel1" 
        
                                   LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                           </UpdatedControls> 
        
                       </telerik:AjaxSetting> 
        
                   </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                   <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" 
        
                    Width="75px">  
        
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading3.gif") %>' 
        
                        style="border: 0px;" /> 
        
                </telerik:RadAjaxLoadingPanel> 
        
                <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Position="center" 
        
                    RelativeTo="BrowserWindow" OnClientBeforeShow="OnClientBeforeShow">  
        
                    <WebServiceSettings Method="GetWebSiteThumb" Path="~/Services/WSSiteThumb.asmx" /> 
        
                </telerik:RadToolTipManager> 
        
                <h2>Domains</h2> 
        
                <asp:Panel ID="Panel1" runat="server">  
        
                    <div class="breadcrumb">Back to: <a href="Default.aspx">Jobs</a></div>  
        
                    <telerik:RadGrid ID="RadGrid1" runat="server"   
        
                        AllowSorting="True" GridLines="None" AutoGenerateColumns="false" OnItemCommand="RadGrid1_OnItemCommand" OnItemDataBound="RadGrid1_ItemDataBound">  
        
                        <ClientSettings EnableRowHoverStyle="true">  
        
                            <Selecting AllowRowSelect="false" /> 
        
                        </ClientSettings> 
        
                        <MasterTableView CellSpacing="-1">  
        
                        <RowIndicatorColumn> 
        
                        <HeaderStyle Width="20px"></HeaderStyle> 
        
                        </RowIndicatorColumn> 
        
                        <ExpandCollapseColumn> 
        
                        <HeaderStyle Width="20px"></HeaderStyle> 
        
                        </ExpandCollapseColumn> 
        
                            <Columns> 
        
                                <telerik:GridTemplateColumn UniqueName="thumb" ItemStyle-Width="20px">  
        
                                    <ItemTemplate> 
        
                                        <asp:Image runat="server" ID="thumb" ImageUrl="" Width="16" Height="16" /> 
        
                                    </ItemTemplate> 
        
                                </telerik:GridTemplateColumn> 
        
                                <telerik:GridBoundColumn UniqueName="domain" DataField="domain" HeaderText="Domain">  
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridBoundColumn UniqueName="score" DataField="score" HeaderText="Score">  
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridButtonColumn CommandName="Select" Text="View Pages"   
        
                                    UniqueName="select" HeaderText="Action">  
        
                                </telerik:GridButtonColumn> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                    </telerik:RadGrid> 
        
                </asp:Panel> 
        
            </asp:Content>

...and the code-behind:

    
            using System;  
        
            using System.Data;  
        
            using System.Configuration;  
        
            using System.Collections;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Web.UI.HtmlControls;  
        
            using Portal.WebApp.Views;  
        
            using Microsoft.Practices.ObjectBuilder;  
        
            using System.Collections.Generic;  
        
            using Portal.BusinessObjects.Interface;  
        
            using Telerik.Web.UI;  
        
            namespace Portal.WebApp.Views  
        
            {  
        
                public partial class Domains : Microsoft.Practices.CompositeWeb.Web.UI.Page, IDomainsView  
        
                {  
        
                    private DomainsPresenter _presenter;  
        
                    protected void Page_Load(object sender, EventArgs e)  
        
                    {  
        
                        if (!this.IsPostBack)  
        
                        {  
        
                            //this._presenter.OnViewInitialized();  
        
                        }  
        
                        this._presenter.OnViewLoaded();  
        
                    }  
        
                    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)  
        
                    {  
        
                        if (e.Argument == "InitialPageLoad")  
        
                        {  
        
                            this._presenter.OnViewInitialized();  
        
                        }  
        
                    }  
        
                    [CreateNew]  
        
                    public DomainsPresenter Presenter  
        
                    {  
        
                        get  
        
                        {  
        
                            return this._presenter;  
        
                        }  
        
                        set  
        
                        {  
        
                            if (value == null)  
        
                                throw new ArgumentNullException("value");  
        
                            this._presenter = value;  
        
                            thisthis._presenter.View = this;  
        
                        }  
        
                    }  
        
                    #region IDefaultView Members  
        
                    public void SetDataSource(List<ISentimentDomain> aDomains)  
        
                    {  
        
                        RadGrid1.DataSource = aDomains;  
        
                        RadGrid1.DataBind();  
        
                    }  
        
                    protected void RadGrid1_OnItemCommand(object source, GridCommandEventArgs e)  
        
                    {  
        
                        if ("Select" == e.CommandName)  
        
                        {  
        
                            GridDataItem row = e.Item as GridDataItem;  
        
                            TableCell did = row["domain"];  
        
                            this._presenter.OnDomainSelected(did.Text);  
        
                        }  
        
                    }  
        
                    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
        
                    {  
        
                        if (e.Item is GridDataItem)  
        
                        {  
        
                            GridDataItem row = e.Item as GridDataItem;  
        
                            TableCell dom = row["domain"];  
        
                            Image img = row["thumb"].FindControl("thumb") as Image;  
        
                            img.ImageUrl = "~/img/delete.gif";  
        
                            this.RadToolTipManager1.TargetControls.Add(img.ClientID, dom.Text, true);  
        
                        }  
        
                    }  
        
                    public void SetError(string sError)  
        
                    {  
        
                        Session["errormsg"] = sError;  
        
                        Response.Redirect("~/Errors/WebAppError.aspx", true);  
        
                    }  
        
                    #endregion  
        
                }  
        
            }

ToolTip

answered on 13 Apr 2009

5 answers

251 views

[Solved] RadGrid sorting with nullobjects

Hi,

I have a problem sorting columns in a radgrid, with null objects in it.
The initial binding is all fine, and no problems.Not untill I try to sort a column with null objects in it.

I programmaticly create the columns like:

GridBoundColumn boundColumn = new GridBoundColumn();

view.Columns.Add(boundColumn);

boundColumn.DataField = "My.Custom.Object"; (note that Custom willbe null at some times, and therefore we cant sort the column).

The error occurs when I rebind the grid in Page_PreRender.

RadGrid1.DataSource = SomeDataSource;

try

{

RadGrid1.Rebind();

}

catch (Exception e)

{

// We will have a "Object reference not set to an instance of an object" error here...

}

Any way to get around this error?

Regards
Andreas Clausen

Grid

answered on 13 Apr 2009

4 answers

71 views

filtered resource not bound on initial display

I am filtering a users resource based on the day, only showing the users that are available that day. On initial display, I get the non filtered resource just fine but I have to go in an load an appointment creation for each day to get each persons previously scheduled appointment.

I have this resource calling a stored procedure and if the default value of 0 is passed then it loads all employees so that should load take care of it does not work.

Any help

Scheduler

answered on 13 Apr 2009

8 answers

233 views

[Solved] Bug with Combobox Dropdown

Whenever you click on the very bottom of a combobox, it highlights in response to the hover but does not respond to mouse clicks. Several times i experienced this before figuring out what was causing it.

You can replicate by moving your cursor to the very bottom of the combobox. You will see the hover has fired... Now click and see that nothing happens.

I tried other combo boxes to see if this behavior was standard, but it wasn't.

ComboBox

answered on 13 Apr 2009

6 answers

205 views

UpdatePanelsRenderMode Problems

Hi,

first of all I have the following problem:
I use a RadProxy in a Usercontrol. It is not possible to set UpdatePanelsRenderMode declarative on the proxy.
I can set it programatically BUT - this overrides the Manager settings.
So what if I need Inline in my control - but the Controls user wants to have block?

The next problem is really a problem (bug?) - or I do something wrong.
Assume a usercontrol which has 3 controls that should be updated via an async call to the manager.
If I do this inline it would look like this:

    
            <telerik:RadAjaxManager ID="ramManager" runat="server" DefaultLoadingPanelID="alpPan1" > 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="ramManager">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="lblCurDir" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="lblCurFile" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="imgPreview" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager>

Now I use these things in a usercontrol - using a proxy.
Therefore I have to set the things in code.
I could do this:

    
                        RadAjaxManager aM = RadAjaxManager.GetCurrent(Page);  
        
                        if (aM == null) {  
        
                            Response.Write("XFileExplorer needs an ajax manager in the page holding the control!");  
        
                            Response.End();  
        
                            return;  
        
                        }  
        
                        //calling ajax function changes grid and hidden fields - so add settings  
        
                        aM.AjaxSettings.AddAjaxSetting(aM, hfCurDir);  
        
                        aM.AjaxSettings.AddAjaxSetting(aM, hfCurFile);  
        
                        aM.AjaxSettings.AddAjaxSetting(aM, rgBackupFiles);  
        
                        aM.UpdatePanelsRenderMode = UpdatePanelRenderMode.Inline;

But this (I gues would be equivalent to):

    
                <telerik:RadAjaxManager ID="ramManager" runat="server" DefaultLoadingPanelID="alpPan1" > 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="ramManager">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="lblCurDir" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                        <telerik:AjaxSetting AjaxControlID="ramManager">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="lblCurFile" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                        <telerik:AjaxSetting AjaxControlID="ramManager">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="imgPreview" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager>

So I decided to "block" the things like this:

    
                        AjaxSetting aS = new AjaxSetting(aM.ID);  
        
                        string strLoadPanelID=aM.DefaultLoadingPanelID; //use default loading panel  
        
                        aS.UpdatedControls.Add(new AjaxUpdatedControl(rgBackupFiles.ID, strLoadPanelID));  
        
                        aS.UpdatedControls.Add(new AjaxUpdatedControl(hfSaveCurDir.ID,strLoadPanelID));  
        
                        aS.UpdatedControls.Add(new AjaxUpdatedControl(hfSaveCurFile.ID,strLoadPanelID));  
        
                        aM.AjaxSettings.Add(aS);  
        
                        aM.UpdatePanelsRenderMode = UpdatePanelRenderMode.Inline;

This works (controls are updated) - BUT I loose Inline Render mode!
No problem for the hidden fields - but a problem with the grid.

My workaround:

    
                        //calling ajax function changes grid and hidden fields - so add settings  
        
                        AjaxSetting aS = new AjaxSetting(aM.ID);  
        
                        string strLoadPanelID=aM.DefaultLoadingPanelID; //use default loading panel  
        
                        //CANT DO THIS - WOULD REMOVE RENDER MODE aS.UpdatedControls.Add(new AjaxUpdatedControl(rgBackupFiles.ID, strLoadPanelID));  
        
                        aS.UpdatedControls.Add(new AjaxUpdatedControl(hfSaveCurDir.ID,strLoadPanelID));  
        
                        aS.UpdatedControls.Add(new AjaxUpdatedControl(hfSaveCurFile.ID,strLoadPanelID)); //add extra to preserver inline mode  
        
                        aM.AjaxSettings.Add(aS);  
        
                        aM.UpdatePanelsRenderMode = UpdatePanelRenderMode.Inline;  
        
                        aM.AjaxSettings.AddAjaxSetting(aM, rgBackupFiles);

Am I doing something wrong?

Regards

Manfred

Ajax

answered on 13 Apr 2009

5 answers

120 views

Automatic vertical sizing of RadHtmlField

Hi,
We are planning to utilize the RadHtmlField control in our global intranet project, but I couldn't figur out how to make the height dynamic in similar ways as the out of the box MOSS html field. Based on available documentation, the size can be defined in pixels, but not as dynamic value.

Actual aspnet.ajax editor seems to support this similar ways as the standard MOSS html field as declared in the following article.
http://www.telerik.com/support/kb/aspnet-ajax/editor/expanding-radeditor-s-content-area-vertically-without-using-scrollbars-to-accommodate-all-content-entered.aspx

Functionality is extremely valuable, since otherwise the content editors are having difficulties to understand how the WCM page will eventually look like. Is there some undocumented property setting, which could be applied?

Sharepoint Integration

answered on 13 Apr 2009

1 answer

84 views

window message don't popup when call OnGridCreated = "alert('test\ntest');"

Hi,
i have try to popup message when using radgrid with Ajax enabled. after try with command:
RadGrid1.ClientSettings.ClientEvents.OnGridCreated = "alert('test');"
is works but when i try with :
RadGrid1.ClientSettings.ClientEvents.OnGridCreated = "alert('test\ntest');" ' (put new line)
window message don't popup and got an error message: Unterminated string constant

This error happened with both IE7 and Firefox

BR,
Kenghot

Grid

answered on 13 Apr 2009

1 answer

184 views

How to ignore column when editing

Hi,

I data bind my grid with a DataTable that has a column that holds an object that contains information on that row of data. In the grid I obviously don't display it (Display="false" Visible="false" ReadOnly="true"). When I do an 'Add', I get the 'Telerik.Web.UI.GridInsertionObject' does not contain a property with the name 'AttachmentInfo' error. Does anyone know of a way to get the insert edit panel to ignore this column?

Thanks,
Bruce

Grid

answered on 13 Apr 2009

1 answer

112 views

Remove Grouped column - which event?

http://demos.telerik.com/aspnet-ajax/grid/examples/groupby/outlookstyle/defaultvb.aspx

In the above example, I would like to make the "Received" column invisible so it's not repeated (since the grouped header already has that information). How can this be accomplished? Thanks.

Grid

answered on 13 Apr 2009

2 answers

260 views

Setting GridCheckBoxColumn using JavaScript

In our application we have a Radgrid that contains several GridBoundColumns and a few GridCheckBoxColumns. Here is the code that defines 2 of them:

<telerik:GridBoundColumn

UniqueName="gbcWBSNumber"

DataField="WBSNumber"

HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Center"

HeaderText="WBS #">

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn

UniqueName="gccAllowBoes"

DataField="AllowBoes"

HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Center"

HeaderText="Allow<br />BOEs">

</telerik:GridCheckBoxColumn>

We need a way to adjust the settings of these two objects using JavaScript. We are doing this successfully for the GridBoundColumn but not for the GridCheckBoxColumn.

In the following (greatly abbreviated) JavaScript we are able to obtain a reference to both objects(stored in the global variables WBSNumber and AllowBOEs respectively):

function WBSGridDoubleClick(sender, eventArgs)

{

(code removed…)

WBSNumber = MasterTableView.getCellByColumnUniqueName(MasterTableView.get_dataItems()[index], "gbcWBSNumber");

AllowBOES = MasterTableView.getCellByColumnUniqueName(MasterTableView.get_dataItems()[index], "gccAllowBOEs");

(code removed…)

}

After some other processing we acquire new values that we need to use to reset these two objects.

We have the following JavaScript code in our program to hopefully accomplish this:

function OnClientCloseWBSEast(oWnd)

{

// call a webservice to retrieve the modified data

WBSData.GetThisWBS(keyValues, OnGetThisWBSComplete);

}

// dt is actually an array of strings that contains the

// information we need

function OnGetThisWBSComplete(dt)

{

WBSNumber.innerText = dt[0]; // works fine!!!

AllowBOES.innertext = dt[4] // returns ‘true’ or ‘false’

}

Unfortunately, even though the value returned from the webservice in dt[4] reflects the latest change by the user, the ‘innerText’ property causes the checkbox to be removed and the value ‘true’ or ‘false’ to appear in the cell.

We have also tried innerHTML, value, and checked as properties for our CheckBox object but none of these work any better.

Can someone tell us what the proper syntax would be?

Thanks.

Grid