Questions on UI for ASP.NET AJAX Forum

5 answers

259 views

Can't close RadWindow via RegisterStartupScript during AJAX request

I've been using RadWindows and very successfully applying the Page.ClientScript.RegisterStartupScript solution to close the RadWindow. However, when I'm using AJAX within the RadWindow that solution does not close the window when applied during an AJAX request. Can anyone suggest a method for closing a RadWindow in this situation? (I'm using a Telerik ASP.NET AJAX release from Apr 2010.)

Here are some specifics on the scenario:
The page (AddItem.aspx) that I'm displaying in the RadWindow is very simple and contains a web user control -- we'll call it Search.ascx. Search.ascx has a textbox for entering a search string, a "Search" button (btnSearch) and a RadGrid (grdResults) for displaying search hits. A user selection from the RadGrid (handled via ItemCommand event) raises Search.ascx's "SelectionComplete" event. AddItem.aspx handles this event and closes itself -- passing back an argument via oRadWin.argument -- which works fine without any AJAX settings in the page or in Search.ascx. However, if I use a RadAjaxManagerProxy in Search.ascx to show an AJAX loading panel over grdResults (because the search and paging operations sometimes take several seconds) the RadWindow will not close automatically.

I have verified that the RegisterStartupScript call in AddItem is being made in this situation, but I'm assuming that the startup script is not running because AJAX causes only parts of the page to be updated. How can I force the RadWindow to close itself during a partial postback?

Thanks in advance,
Tom

Window

answered on 15 Jun 2011

1 answer

119 views

RadScheduler - Appointment

I have a problem with when I click on an appointment and then click on edit, the Edit Appointment box shows in the same area as the scheduler. Meaning, it is shown inside of the scheduler vs popping up.
My second question related to the first is that when I click on the date, how can I have the edit appointment popup box show up by default.

Thank you.

Scheduler

answered on 15 Jun 2011

2 answers

90 views

Tooltip not using tables

Is it possible to have the tooltips not use table?

I would rather have it only using div's and span's.

At the moment, I get this...

<div id="example" class="RadToolTip RadToolTip_Default rtVisibleCallout tooTipWindow" unselectable="on" style="position: absolute; z-index: 8000; left: 963px; top: 141px; width: 300px; visibility: hidden; display: none;">

<div class="rtCallout rtCalloutTopCenter" style="visibility: visible; left: 273px;"> </div>

<table class="rtWrapper" style="width: 300px; height: 100px;">

<tbody>

<tr>

<td class="rtWrapperTopLeft"> </td>

<td id="example" class="rtWrapperTopCenter">

<div class="rtTitlebar" style="display: none;"></div>

</td>

<td class="rtWrapperTopRight"> </td>

</tr>

<tr>

<td class="rtWrapperLeftMiddle"> </td>

<td class="rtWrapperContent" valign="top">

<div>

<div class="tooltip"></div>

</div>

</td>

<td class="rtWrapperRightMiddle"> </td>

</tr>

<tr>

<td class="rtWrapperBottomLeft"> </td>

<td class="rtWrapperBottomCenter"> </td>

<td class="rtWrapperBottomRight"> </td>

</tr>

</tbody>

</table>

</div>

ToolTip

answered on 15 Jun 2011

5 answers

64 views

How to bring the controls embedded in TreeNode to the top

I've a treeview with some controls in it.
Following hierarchy is followed

TreeView=>
TreeNodes=>
FormView=>
asp:Table=>
Table Cell=>
Labels

Wot I want to do is make this labels come to the top of the controls. Something like layers. The label should be in the top layer.

This is because I want the content in the labels to be freely selected (for eg. double click on a word and it selects the word).

Right now, I'm a able to select things only if I drag it from outside the TreeNode area.

Any help would be appreciated..

Thanks,
Noel

TreeView

answered on 15 Jun 2011

2 answers

72 views

problem with rad control

Hello,i don't know how to say,the problem happened when i move my project to another computer (still not install telerik asp ajax)
and this's image
http://s1211.photobucket.com/albums/cc435/hieukenpro/?action=view&current=ask.png

Thanks,
Trung Hieu

General Discussions

answered on 15 Jun 2011

1 answer

102 views

ServerSideCallBack and htmlencoding problem

Hi,

When using the treeview with ExpandMode=ServerSideCallBack, the nodes doesn't htmlencode correctly after updatepanel has updated.
Sample:
TestTree.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestTree.aspx.vb" Inherits="WebApplication4.TestTree" %>

<!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 runat="server">

<title></title>

</head>

<body>

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

<div>

<telerik:RadScriptManager ID="rsm" runat="server">

</telerik:RadScriptManager>

<asp:UpdatePanel ID="up" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">

<ContentTemplate>

<telerik:RadTreeView ID="tv" runat="server">

<Nodes>

<telerik:RadTreeNode runat="server" id="tn" Text="test" ExpandMode="ServerSideCallBack">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeView>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

TestTree.aspx.vb

Public Class TestTree

Inherits System.Web.UI.Page

Private Sub tv_NodeClick(sender As Object, e As Telerik.Web.UI.RadTreeNodeEventArgs) Handles tv.NodeClick

'Do something

End Sub

Private Sub tv_NodeExpand(sender As Object, e As Telerik.Web.UI.RadTreeNodeEventArgs) Handles tv.NodeExpand

e.Node.Nodes.Add(New Telerik.Web.UI.RadTreeNode(HttpUtility.HtmlEncode("<aaa>")))

End Sub

End Class

To reproduce:
1. Expand the test-node with the plus-image
2. Select the test-node (will cause a postback of the updatepanel)
3. The sub-node "<aaa>" seems to disappear (but in fact it has just not been htmlencoded anymore)

This works if using ExpandMode=ServerSide.

Regards
Caesar

TreeView

answered on 15 Jun 2011

3 answers

153 views

Javascript error from Telerik javascript

Hello,
I am using 2011.1.519.40. I have this error in IE9 but not FF4.

I have a RadScheduler in a UserControl on an aspx page that I open with a Response.Redirect() from another aspx page. From the Scheduler page, if I click the browser Back button I get this javascipt error: "Microsoft JScript runtime error: Expected ';'"

The following is the portion of the javascript where the error happens. IE throws the error on the last line.

/* START Telerik.Web.UI.Calendar.RadCalendarScript.js */

Type.registerNamespace("Telerik.Web.UI");

$telerik.findCalendar=$find;

$telerik.toCalendar=function(a){return a;

};

Telerik.Web.UI.RadCalendar=function(a){Telerik.Web.UI.RadCalendar.initializeBase(this,[a]);

this._formatInfoArray=null;

this._specialDaysArray=null;

this._viewsHash=null;

this._monthYearNavigationSettings=null;

this._stylesHash=null;

this._dayRenderChangedDays=null;

this._viewRepeatableDays=null;

this._postBackCall=null;

this._firstDayOfWeek=null;

this._skin=null;

this._calendarWeekRule=null;

this._culture=null;

this._zIndex=null;

this._enableShadows=true;

this._nextFocusedCell=null;

this._hoveredDate=null;

this._hoveredDateTriplet=null;

this._documentKeyDownDelegate=null;

this._enabled=true;

this._useColumnHeadersAsSelectors=true;

this._useRowHeadersAsSelectors=true;

this._showOtherMonthsDays=true;

this._enableMultiSelect=true;

this._singleViewColumns=7;

this._singleViewRows=6;

this._multiViewColumns=1;

this._multiViewRows=1;

this._fastNavigationStep=3;

this._enableNavigationAnimation=false;

this._cellDayFormat="%d";

this._presentationType=Telerik.Web.UI.Calendar.PresentationType.Interactive;

this._orientation=Telerik.Web.UI.Calendar.Orientation.RenderInRows;

this._titleFormat="MMMM yyyy";

this._dayCellToolTipFormat="dddd, MMMM dd, yyyy";

this._showDayCellToolTips=true;

this._dateRangeSeparator=" - ";

this._autoPostBack=false;

this._calendarEnableNavigation=true;

this._calendarEnableMonthYearFastNavigation=true;

this._enableRepeatableDaysOnClient=true;

this._enableViewSelector=false;

this._enableKeyboardNavigation=false;

this._showRowHeaders=false;

this._navigateFromLinksButtons=true;

this._rangeSelectionStartDate=null;

this._rangeSelectionEndDate=null;

this._rangeSelectionMode={};

this._hideNavigationControls=false;

this._onLoadDelegate=null;

};

Telerik.Web.UI.RadCalendar.prototype={initialize:function(){Telerik.Web.UI.RadCalendar.callBaseMethod(this,"initialize");

this.EnableTodayButtonSelection=(this.get_monthYearNavigationSettings()[4]=="False")?false:true;

this.DateTimeFormatInfo=new Telerik.Web.UI.Calendar.DateTimeFormatInfo(this.get__FormatInfoArray());

this.DateTimeFormatInfo.Calendar=Telerik.Web.UI.Calendar.GregorianCalendar;

this.DateTimeFormatInfo.CalendarWeekRule=this._calendarWeekRule;

var e,l,f;

var c=this._auxDatesHidden();

var g=eval(c.value);

At this point, c.value is {"enabled":true,"emptyMessage":"","minDateStr":"1/1/1900 0:0:0","maxDateStr":"12/31/9999 0:0:0"}

Is this an issue in the _auxDatesHidden() function which populates 'c'? Or am I doing something wrong?

Thanks,
Dan

Scheduler

answered on 15 Jun 2011

1 answer

106 views

Ajaxify an ImageButton inside a RadGrid

Dear All,

I have a problem which I cannot solve at the moment. I have a RadGrid with an ImageButton, called btnEdit, and basically what I want is once this is clicked, a Modal Popup appears with all the data populated in the Popup. Without the RadAjaxManager, everything works fine and the Popup populates. So that is why I am asking some help, because I do not know how to set this up.

So my code is as follows:-

                                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                                        <AjaxSettings>
                                            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                                                <UpdatedControls>
                                                    <telerik:AjaxUpdatedControl ControlID="pnlRadGrid" LoadingPanelID="RadAjaxLoadingPanel1"/>
                                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/>
                                                </UpdatedControls>
                                            </telerik:AjaxSetting>
                                            <telerik:AjaxSetting AjaxControlID="btnEdit">
                                                <UpdatedControls>
                                                    <telerik:AjaxUpdatedControl ControlID="pnlRadGrid" LoadingPanelID="RadAjaxLoadingPanel1"/>
                                                    <telerik:AjaxUpdatedControl ControlID="btnEdit" LoadingPanelID="RadAjaxLoadingPanel1"/>
                                                </UpdatedControls>
                                            </telerik:AjaxSetting>
                                        </AjaxSettings>
                                    </telerik:RadAjaxManager>
                                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="50">
                                        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" />
                                    </telerik:RadAjaxLoadingPanel>

The RadGrid is something like this:-

                                   <asp:Panel ID="pnlRadGrid" runat="server">
                                        <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None"
                                        ShowGroupPanel="True" Skin="Sunset" AutoGenerateColumns="False"
                                        onitemdatabound="RadGrid1_ItemDataBound" GroupHeaderItemStyle-Font-Bold="true"
                                        GroupHeaderItemStyle-HorizontalAlign="Left" OnItemCommand="RadGrid1_ItemCommand">
                                        <MasterTableView DataKeyNames="productId,releaseId,projectid" >
                                        <GroupByExpressions>
                                            <telerik:GridGroupByExpression>
                                                <SelectFields>
                                                    <telerik:GridGroupByField FieldAlias="ReleaseName" FieldName="ReleaseName" HeaderText="Release" />
                                                </SelectFields>
                                                <GroupByFields>
                                                    <telerik:GridGroupByField FieldAlias="ReleaseName" SortOrder="Ascending" FieldName="ReleaseName" />
                                                </GroupByFields>
                                            </telerik:GridGroupByExpression>
                                        </GroupByExpressions>
                                        <RowIndicatorColumn>
                                        <HeaderStyle Width="20px"></HeaderStyle>
                                        </RowIndicatorColumn>

                                        <ExpandCollapseColumn>
                                        <HeaderStyle Width="20px"></HeaderStyle>
                                        </ExpandCollapseColumn>
                                        <Columns>
                                            <telerik:GridBoundColumn DataField="productID" DataType="System.Int16"
                                                HeaderText="productID" SortExpression="productID" UniqueName="productID" Visible="false">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="productName" HeaderText="productName"
                                                SortExpression="productName" UniqueName="productName" Visible="false">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="projectId" DataType="System.Int16"
                                                HeaderText="projectId" SortExpression="projectId" UniqueName="projectId" Visible="false">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridTemplateColumn UniqueName="TemplateColumn2" GroupByExpression="ProjectName"
                                                    SortExpression="ProjectName" HeaderText="ProjectName">
                                                    <HeaderStyle Width="241px"></HeaderStyle>
                                                    <ItemStyle Height="35px"></ItemStyle>
                                                    <ItemTemplate>
                                                        <%# DataBinder.Eval(Container.DataItem, "ProjectName") %>
                                                    </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridTemplateColumn UniqueName="TemplateColumn2" GroupByExpression="baseRefUrl"
                                                    SortExpression="baseRefUrl" HeaderText="baseRefUrl">
                                                    <HeaderStyle Width="241px"></HeaderStyle>
                                                    <ItemStyle Height="35px"></ItemStyle>
                                                    <ItemTemplate>
                                                        <%# DataBinder.Eval(Container.DataItem, "baseRefUrl")%>
                                                    </ItemTemplate>
                                            </telerik:GridTemplateColumn>

                                            <telerik:GridTemplateColumn UniqueName="TemplateColumn2" HeaderText="Edit">
                                                    <HeaderStyle Width="241px"></HeaderStyle>
                                                    <ItemStyle Height="35px"></ItemStyle>
                                                    <ItemTemplate>
                                                        <asp:ImageButton ID="btnEdit" runat="server" ImageUrl="~/images/edit.gif" CommandName="EditHandoff" />
                                                    </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridTemplateColumn UniqueName="TemplateColumn2" HeaderText="Delete">
                                                    <HeaderStyle Width="241px"></HeaderStyle>
                                                    <ItemStyle Height="35px"></ItemStyle>
                                                    <ItemTemplate>
                                                        <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~/images/delete.gif" CommandName="DeleteHandoff"
                                                            OnClientClick="if (!confirm('Are you sure you want to delete this Handoff?')) return false;" />
                                                    </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn DataField="fk_projectStatus" DataType="System.Byte"
                                                HeaderText="fk_projectStatus" SortExpression="fk_projectStatus"
                                                UniqueName="fk_projectStatus" Visible="false">
                                            </telerik:GridBoundColumn>
                                        </Columns>
                                        </MasterTableView>

                                        <HeaderStyle Font-Bold="True" ForeColor="White" />

                                        <GroupHeaderItemStyle Font-Bold="True" HorizontalAlign="Left" />

                                        <FilterMenu Skin="Sunset" EnableTheming="True">
                                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                        </FilterMenu>
                                    </telerik:RadGrid>
                                    </asp:Panel>

And in the code behind I have the following:-

        if (e.CommandName == "EditHandoff")
        {
            //EditHandoff(iIndex);
            ModalPopupExtender mpe = ModalPopupExtender1;

            if (_productTreeList[iIndex].projectName != null)
                txtHandoffName.Text = _productTreeList[iIndex].projectName.ToString();
            if (_productTreeList[iIndex].baseRefUrl != null)
                txtBaseRefUrl.Text = _productTreeList[iIndex].baseRefUrl.ToString();
            if (_productTreeList[iIndex].url != null)
                txtUrl.Text = _productTreeList[iIndex].url.ToString();

            mpe.Show();

        }

In the Page_Load I also have:-
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(pnlRadGrid, RadGrid1, RadAjaxLoadingPanel1);

Can you please tell me what I am doing wrong?
Thanks a lof for your help and time

Johann

Ajax

answered on 15 Jun 2011

1 answer

100 views

DatePicker's Built-in Validation

I really like this feature of the DatePicker but I have a gripe.

I am working with British (en-GB) date format - day/month/year. If I enter the following string into the date input box, '12/32/2011' then this is seen as an invalid date string. If however I enter the following erroneous date string '12/13/2011'(meaning the twelth day of the thireteenth month of the year), the built-in validation mechanism seems to treat it as if it had been entered in en-US format (meaning the thirteenth day of the twelth month) and redisplays it as '13/12/2011'. It does not see this date string as invalid.

So, to catch this type of input error I have to validate the input string using the DateInput's client side 'OnValueChanged' event.

It would be so much nicer if Telerik could provide a user option which allowed me to select either the current 'corrective' behaviour or a 'strict' behaviour that trapped any inconsistencies in a date string.

Rgds

Len Jones

Calendar

answered on 15 Jun 2011

4 answers

90 views

RadCombo with ajax and IE8

Hi, I'm having strange issue, which I don't know how to resolve.
I have 3 panels on my page: left, middle and right
On left there are combo with filters (rad combo ones), ajaxified with following way:

<telerik:RadAjaxManagerProxy ID="rAjaxManagerProxy" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="left">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="left" />

<telerik:AjaxUpdatedControl ControlID="middle" LoadingPanelID="ralMain" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="middle">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="middle" />

<telerik:AjaxUpdatedControl ControlID="right" LoadingPanelID="ralMain" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

Evewrything is working like a charm when I'm using firefox, chrome or IE 9. The problem starts with IE8. After search on left panel, everything is displayed but combo is loosing its items. It is not happening if I'm not using ajax. Without ajax everything is working exept it it is no ajaxified. I'm filling values from database on page_load:

protected void Page_Load(object sender, EventArgs e)

{

if (this.IsPostBack)

{

return;

}

this.rcbIndustry.DataSource = GetIndustries();

this.rcbIndustry.DataBind();

this.rcbIndustry.Items.Insert(0, new RadComboBoxItem());

this.rcbCustomer.DataSource = GetCustomers();

this.rcbCustomer.DataBind();

this.rcbCustomer.Items.Insert(0, new RadComboBoxItem());

}

On the beginning I thought it is related to not filling value if this is postback, but removing this check not helping. It is really strange because all comboboxes on such page are stopping working on IE.

I looked to the page code using F12 on IE 8, and it s look like whole section for drop down is such case is missing.
Do you have any advice?

I just notice that this happen on all my comboboxes with website. If there is any ajax request e.g. through the ajaxpanel, combobox dropdown disapears in IE 8.

I'm using version: 2011.1.413.40

Update

I think I know what it is: I'm having folloing peace of code i master page in head section:

<link href="Non-IE_themes/Telerik_nonIE.css" rel="stylesheet" type="text/css" />

<!--[if gte IE 9]>

<link href="Non-IE_themes/Telerik_nonIE.css" rel="stylesheet" type="text/css" />

<![endif]-->

which contains following css:

.RadComboBoxDropDown .rcbScroll

{

height: 100% !important;

max-height: 300px;

}

When this is section is added it is causing problems on IE 8. (IE 7 compatibility is working). When removed IE 8 is working... but other browsers have issue related to this css fix. :(

Update 2

Even removing this sentense from css won't help. Problem is on master page conditional statement. Only removing from master page helps.

ComboBox

answered on 15 Jun 2011