Questions on UI for ASP.NET AJAX Forum

1 answer

142 views

Hi,

I'd like to get hold of the toolbar position of a RadEditor when the Mode is set to:

            re.ToolbarMode = EditorToolbarMode.PageTop;

I've added a custom save button to the toolbar and I'd like to flash a confirmation message just below the save button in the toolbar.
Currently, when the user scrolls, the toolbar moves to ensure that it is always at the top of the page. (I assume that this is re-positioned based on the scroll event).

Currently, I have code that looks like this but GetTopLeftPosition(el) always returns zero.
My question is how do I get hold of the new position of the toolbar (after scroll) so that I can display a message just below the save button?

        function OnClientCommandExecuting(editor, args)
        {
            var name = args.get_name();

            if (name == "Save")
            {
                var tool = args.get_tool();
                var attributes = tool.get_attributes();

                SaveCommentary(editor,
                               attributes["templateid"],
                               attributes["controlid"],
                               attributes["commentaryid"],
                               attributes["param1"],
                               attributes["param2"],
                               attributes["param3"]);

                args.set_cancel(true);
            }
        }

        function setOpacity(id, level)
        {
            var element = document.getElementById(id);
            element.style.display = 'inline';
            element.style.zoom = 1;
            element.style.opacity = level;
            element.style.MozOpacity = level;
            element.style.KhtmlOpacity = level;
            element.style.filter = "alpha(opacity=" + (level * 100) + ");";
        }

        function fadeIn(id, steps, duration, interval, fadeOutSteps, fadeOutDuration)
        {
            var fadeInComplete;
            for (i = 0; i <= 1; i += (1 / steps))
            {
              setTimeout("setOpacity('" + id + "', " + i + ")", i * duration);
              fadeInComplete = i * duration;
            }

            // Set the timeout to start after the fade in time and the interval to display the
            // message on the screen have both completed
            setTimeout("fadeOut('" + id + "', " + fadeOutSteps + ", " + fadeOutDuration + ")", fadeInComplete + interval);
        }

        function fadeOut(id, steps, duration)
        {
            var fadeOutComplete;

            for (i = 0; i <= 1; i += (1 / steps))
            {
              setTimeout("setOpacity('" + id + "', " + (1 - i) + ")", i * duration);
              fadeOutComplete = i * duration;
            }

            // Completely hide the displayed message after the fade effect is complete
            setTimeout("hide('" + id + "')", fadeOutComplete);
        }

        function hide(id)
        {
            document.getElementById(id).style.display = 'none';
        }

        function SaveCommentary(editor,reportID,controlID,commID,param1,param2,param3)
        {
            debugger;

            var result;
            var str = editor.get_element().id;

            var text = editor.get_html();
            var firstStripText = text.replace("<BODY contentEditable=true>","");
            var secondStripText = firstStripText.replace("</BODY>","");

            if(param1==undefined)
            {
                param1 = '';
            }

            if(param2==undefined)
            {
                param2 = '';
            }

            if(param3==undefined)
            {
                param3 = '';
            }

            result = Winston.SaveWithAjax(reportID, controlID, commID, param1, param2, param3, secondStripText);

            if (result.error == null)
            {
                var statusLabelID = "ctl00_commentaryMessage";
                var statusLabelText = document.getElementById(statusLabelID);

                var date = new Date();
                var d = date.getDate();
                var day = (d < 10) ? '0' + d : d;
                var m = date.getMonth() + 1;
                var month = (m < 10) ? '0' + m : m;
                var yy = date.getYear();
                var year = (yy < 1000) ? yy + 1900 : yy;
                var hour = date.getHours();
                var min = date.getMinutes();

                if (min < 10)
                {
                  min = "0" + min;
                }

                var window = editor.get_toolAdapter().get_window();

                var oPos = GetTopLeftPosition(window);

                // Position the label just below the save button
                statusLabelText.style.left = oPos.x;
                statusLabelText.style.top = oPos.y;

                statusLabelText.innerText = "Commentary Text Last saved at " + day + "-" + month + "-" + year + " " + hour + ":" + min
                fadeIn(statusLabelID, 20, 1000, 1000, 20, 200);
            }
            else
            {
                statusLabelText.innerText = "Failed to save commentary text. Please contact your system administrator.";
                fadeIn(statusLabelID, 20, 1000, 1000, 20, 200);
            }
         }
         function GetTopLeftPosition(el)
         {
              var left = 0;
              var top = 0;

              while (el.offsetParent)
              {
                  left += el.offsetLeft;
                  top += el.offsetTop;
                  elel = el.offsetParent;
              }

              if (el.x) left = el.x;
              if (el.y) top = el.y;
              var oPos = new Object();
              oPos.x = left;
              oPos.y = top;
              return oPos;
         }

Editor

answered on 11 Mar 2011

3 answers

105 views

Can't delete reccurrence exception

Hello,

Im trying to delete a recurrence exception but I keep getting this error:

Cannot locate the parent of appointment with ID = '1232'. Ensure that the parent appointment with ID = '1231' exists and is loaded.

This appointment is there and loaded as you can see in the added picture. I added the appointment id's between hooks as you can see.

Scheduler

answered on 11 Mar 2011

1 answer

174 views

Grid with timepicker

Hello,

I have an RadGrid with a DateTimePicker and a RadTimePicker in seperate GridTemplateColumn, so they are open for editing. When I do a postback (Save), I validates the DateTimePicker and RadTimePicker for each row to be sure they have valid data. If they don't have valid data then I set one of the labels to visible. When the page loads again I get a JavaScript error in Telerik.Web.UI.WebResource.axd.

I have no Ajax on the grid, just a standard grid with EditMode="InPlace"

The error:
Line: 16937
Error: 'this.get_timeView()' is null or not an object

The line in telerik code:
this._timePopupContainerID=this.get_timeView().get_id()+"_wrapper";

<telerik:GridTemplateColumn HeaderText="Date" UniqueName="Date">

<ItemTemplate>

<telerik:RadDatePicker ID="rdpDate" runat="server" DatePopupButton-Visible="true" Width="100px">

<DateInput ID="DateInputDate" runat="server" InvalidStyleDuration="100">

<ClientEvents OnError="OnRadDatePickerError" />

</DateInput>

<DatePopupButton ToolTip="Select date" />

</telerik:RadDatePicker>

<asp:CustomValidator ID="cvDate" runat="server" ErrorMessage="<br />Invalid date"

ValidationGroup="Gameplan" SetFocusOnError="true" Display="Dynamic" ControlToValidate="rdpDate"

ClientValidationFunction="ValidateRadDatePickers"></asp:CustomValidator>

<asp:RequiredFieldValidator ID="rfvDate" runat="server" ControlToValidate="rdpDate"

Display="Dynamic" ErrorMessage="<br />Mandatory" ValidationGroup="Gameplan"

SetFocusOnError="true"></asp:RequiredFieldValidator>

<asp:Label ID="lblMatchDate" runat="server" ForeColor="Red" Visible="False"><br />Date error</asp:Label><asp:Label

ID="lblLastDateError" runat="server" ForeColor="Red" Visible="False"><br />Last date error</asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Tidspunkt" UniqueName="Time">

<ItemTemplate>

<telerik:RadTimePicker ID="rtpTime" runat="server" TimePopupButton-Visible="true" Width="65px">

<DateInput ID="DateInputTime" runat="server" InvalidStyleDuration="100">

<ClientEvents OnError="OnRadTimePickerError" />

</DateInput>

</telerik:RadTimePicker>

<asp:CustomValidator ID="cvTime" runat="server" ErrorMessage="<br />Wrong format"

ValidationGroup="Gameplan" ControlToValidate="rtpTime" ClientValidationFunction="ValidateRadTimePickers"

SetFocusOnError="true" Display="Dynamic"></asp:CustomValidator>

</ItemTemplate>

</telerik:GridTemplateColumn>

Can you tell what is wrong?

Thanks

Grid

answered on 11 Mar 2011

3 answers

234 views

Header and Item columns not aligning.

I am using the gridTemplateColumn to solve the Multiple header row issue. While can accomplish the multiple Header rows, I am not able to get the Header and Item rows to align. Below is the markup of the aspx page.

_________________________________________________________________________________________________________

<%@ Page Title="" Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="APSFrameWork.test" %>

<%@ MasterType VirtualPath="~/Default.Master" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<%--<meta http-equiv="X-UA-Compatible" content="IE=8" /> --%>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<style type="text/css" >

.MasterTable_Office2007 th

{

padding: 0 4px 0 4px;

}

.MasterTable_Office2007 td

{

padding: 0 4px 0 4px;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<telerik:RadScriptManager ID="ScriptManager1" runat="server"

EnableTheming="True">

</telerik:RadScriptManager>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

<br />

</p>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var popUp;

function PopUpShowing(sender, eventArgs)

{

popUp = eventArgs.get_popUp();

var gridWidth = sender.get_element().offsetWidth;

var gridHeight = sender.get_element().offsetHeight;

var popUpWidth = popUp.style.width.substr(0,popUp.style.width.indexOf("px"));

var popUpHeight = popUp.style.height.substr(0,popUp.style.height.indexOf("px"));

popUp.style.left = ((gridWidth - popUpWidth)/2 + sender.get_element().offsetLeft).toString() + "px";

popUp.style.top = ((gridHeight - popUpHeight)/2 + sender.get_element().offsetTop).toString() + "px";

}

</script>

</telerik:RadCodeBlock>

<telerik:RadGrid ID="gvForecast" runat="server"

AutoGenerateEditColumn="True"

oneditcommand="gvForecast_EditCommand"

oncancelcommand="gvForecast_CancelCommand"

onitemdatabound="gvForecast_ItemDataBound" Width="100%"

HorizontalAlign="Center" onneeddatasource="gvForecast_NeedDataSource"

Skin="Office2007" GridLines="Both"

>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

<ClientSettings EnableRowHoverStyle="true">

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

<ClientEvents OnPopUpShowing="PopUpShowing" />

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView autogeneratecolumns="false" ItemStyle-VerticalAlign="Top" CommandItemDisplay="Top" EditMode="PopUp" Width="100%">

<ItemStyle VerticalAlign="Top"></ItemStyle>

<CommandItemTemplate>

</CommandItemTemplate>

<NoRecordsTemplate>

No Line items Exit for this Unit

</NoRecordsTemplate>

<CommandItemSettings ShowExportToPdfButton="true" ExportToPdfText="Export to Pdf"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn UniqueName="venu">

<HeaderTemplate>

<table id="tbVenu" width="100%" border="0">

<col width="100px" /><col width="200px" /><col width="40px" />

<col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" />

<col width="40px" align="center" /><col width="40px" align="center" /><col width="80px"/>

<tr>

<td colspan="3" align="center" bgcolor="#ccccff">WBS Details</td>

<td colspan="1" align="center" bgcolor="#ffff99">Act</td>

<td colspan ="11" align="center" bgcolor="#00cc00">Forecast</td>

<td colspan="3" align="center" bgcolor="#ccffff">Other Details</td>

</tr>

<tr>

<td>WBS</td><td>Description</td><td>Cost Element</td>

<td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td>

<td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td>

<td>YTD</td><td>To Go Forecast</td><td>Total Forecast</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<table id="tdItem" width="100%" border="0">

<col width="100px" /><col width="200px" /><col width="40px" />

<col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" />

<col width="40px" align="center" /><col width="40px" align="center" /><col width="80px"/>

<tr>

<td><%# DataBinder.Eval(Container.DataItem, "WBS") %></td>

<TD><%# DataBinder.Eval(Container.DataItem, "Description") %></TD>

<TD><%# DataBinder.Eval(Container.DataItem, "CE") %></TD>

<TD align="center"><%# FormatAmount(Eval("Jan").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Feb").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Mar").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Apr").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("May").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Jun").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Jul").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Aug").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Sep").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Oct").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Nov").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Dec").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("YTD").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("ToGoForecast").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("TotalForecast").ToString()) %></TD>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<%--<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>--%>

<EditFormSettings CaptionFormatString="Edit WBS: {0}" EditFormType="Template" CaptionDataField="Description" PopUpSettings-Height="200px" PopUpSettings-Width="1300px" PopUpSettings-Modal="true">

<FormTemplate>

<table id="table1" width="1200px" border="0" align="center" style="table-layout:fixed" >

<col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px">

<tr><td colspan="12"> </td></tr>

<tr><td align="right">Cost Element</td><td>

<asp:Label ID="Label1" runat="server" Text='<%# Bind("CE") %>'></asp:Label></td><td align="right">WBS Description</td><td colspan="9">

<telerik:RadTextBox ID="WBSDesc" runat="server" Text='<%# Bind("Description") %>' Width="80%" ReadOnly="true">

</telerik:RadTextBox></td></tr>

<tr><td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td><td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td></tr>

<tr>

<td><telerik:RadNumericTextBox Type="Number" ReadOnly="true" BackColor="LightGray" ID="txtJan" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Jan") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtFeb" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Feb") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtMar" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Mar") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtApr" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Apr") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtMay" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("May") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtJun" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Jun") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtJul" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Jul") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtAug" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Aug") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtSep" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Sep") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtOct" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Oct") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtNov" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Nov") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtDec" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Dec") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

</tr>

<tr><td colspan="12"><font color="red" ><b>*</b> Greyed out textboxes are reflecting the actuals. </font></td></tr>

<tr><td colspan="5" align="right">

<telerik:RadButton ID="btnUpdate" runat="server" Text="Update Forecast" OnClick="btnUpdate_Click" />

</td>

<td colspan="2"> </td>

<td colspan="5"><telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" CausesValidation="False" OnClick="btnCancel_Click" />

</td></tr>

</table>

</FormTemplate>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

<PopUpSettings Modal="True" Height="200px" Width="1300px"></PopUpSettings>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid><p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</asp:Content>

Grid

answered on 11 Mar 2011

3 answers

46 views

RadMenu causes links to be blocked in areas where flyout menus will expand to

This issue seems to only pertain to IE7 and IE8.

I have a vertical RadMenu on my site that is 3 levels deep and uses the flyout on mouseover. When the menu is totally collapsed, any link that is to the right of the menu and within the bounds of where the submenus will expand to are unclickable. This is some kind of z-index issue I guess. I've tried to change the z-index of the menu and items on the page, but I haven't had any luck yet. Is there a different trick to this or do I need to keep messing with the z-index?

Menu

answered on 11 Mar 2011

1 answer

44 views

LoadOnDemand is not initiated from combo dropdown opne if the combo has already any item present.

We have a load-on-Demand combo which is working as expected for all the scenario except this one.

For a combo with no items in it, drop down opens and it calls ItemRequestedHandler which is fine. Now if I click on the combo again, this time drop down opens but ItemRequestedHandler is not called.

on the contrary if we write any text using keyboard, while the focus is on this combo, ItemRequestHandler is always called ( for a blank combo as well as for a combo which already have an item)

We want the same functionality i.e calling ItemRequestHandler even if we mouse click to open the drop down for a combo which already has item present in it

ComboBox

answered on 11 Mar 2011

3 answers

81 views

Problem with Sending AJAX request using Telerik RadAJAX manager

Hi,

I am using Telerik RadAJAX manager to send AJAX request.I have Telerik ComboBox ,Treeview and Chart controls on the page.When I click on the any of treenode it has send AJAX request and relaod chart and Combobox. But When I click on tree node at the first time it is sending an AJAX request. and When I click on the treenode next time it send normal Post back request and entire page getting refreshed.It is happening alternatively one time AJAX request and one time Normal Post back.

Can any one suggest me solution for this?

Ajax

answered on 11 Mar 2011

1 answer

99 views

Timeline view scrollbars

Hi,

I have referred the following link thinking that I can get the solution for my issue of scrollbar appearing in timeline view of radshceduler,
http://www.telerik.com/community/forums/aspnet-ajax/scheduler/set-appointment-height-to-cell-height-in-timeline-view.aspx

Is this issue resolved?
If so how?

As I am facing the same problem.

My non - telerik issue was related to asp:menu whose drop down items were not appearing while being published from webserver
So resolved it by providing the followng meta tag provided in msdn help:

.adjustedZIndex { z-index: 2500; }

</style>

So while giving this I find that radscheduler time line view is showing scroll bar
when a new appointment or there is any appointment at the last coloumn or cells of the view.
How can I overcome this?
Please help.

Or atleast a solution to make the asp drop down menu appear on top of radscheduler

Thanks in advance.

Scheduler

answered on 11 Mar 2011

1 answer

131 views

Wrong tooltip on RADgrid hyperlink column

Hello All,

We are using RadGrid in one of the project. We have hyperlink column as part of the grid. Now what happens is we have implemented client side biding for the grid. right now when we bind it first time from server it shows currect tooltip for hyperlink column

but as soon as we retrieve data from web service and make client side binding it shows old values on the tooltip for new links.

So if first time data is, John and tool tip is John ,
we do the paging on client side and next data is carl and the tooltip still shows John.

We have more then 15 hyperlink columns in different radgrid so we are using it widely in the project.
Let me know the quickest way to fix this or remove the tooltip from hyperlink column.

Thanks in advance.

Grid

answered on 11 Mar 2011

1 answer

150 views

PopUp Edit Form TitleBar

I am employing a usercontrol for my grid edit form. I have several of them and assign which one will be used at runtime.

Can I create custom text in the popup edit form's titlebar from within the usercontrol's codebehind?

Mike

Grid

answered on 11 Mar 2011